Granted Patent B2

US 12,737,102 · App. 18/749,399 · Granted Sep 15, 2026

Inventors: Sho Kuwamoto (San Francisco, CA); Shana Hu (San Francisco, CA); Amanda Yeh (San Francisco, CA); Nikolas Klein (San Francisco, CA); Jacob Miller (San Francisco, CA); Shreya Sudarshana (San Francisco, CA); Garrett Miller (San Francisco, CA)

Assignee: Figma, Inc.

G06F3/04847G06F8/38G06T11/60

Abstract

Claims (48)

1 . A computer system comprising:

one or more processors;

a memory to store a set of instructions;

wherein the one or more processors are operable to execute the instructions stored in the memory, to cause the computer system to perform operations that include:

providing a design interface for a graphic design;

enabling a user to associate a first layer of the graphic design with a variable data structure, the first layer including a component that is associated with multiple instances that collectively define multiple states that are associated with the component;

enabling a user to link a second layer of the graphic design with the variable data structure, the second layer being different than the first layer, and the second layer including an object that is different than the component;

performing a simulation of the graphic design being deployed in a production environment by (i) setting an active value for the variable data structure based on an attribute of one of the multiple instances of the component; and (ii) automatically configuring an attribute of the object of the second layer based on the active value of the variable data structure.

2 . The computer system of claim 1 , wherein the operations further comprise:

enabling the user to specify an event or condition when associating the first layer with the variable data structure; and

wherein setting the active value of the variable data structure is performed in response to occurrence of the event or condition.

3 . The computer system of claim 2 , wherein the event or condition corresponds to an occurrence of a user interaction, and wherein setting the value of the variable data structure is performed in response to occurrence of the user interaction.

4 . The computer system of claim 1 , wherein the operations further comprise:

enabling the user to associate multiple layers of the graphic design, including the first layer, with the variable data structure;

for each of the multiple layers, enabling the user to specify an interaction when associating the layer with the variable data structure; and

wherein performing the simulation of the graphic design includes detecting multiple user interactions with the multiple layers, and in response to detecting each of the multiple user interactions, setting the active value of the variable data structure based on an attribute value of a corresponding layer of the multiple layers where the interaction is received.

5 . The computer system of claim 4 , wherein performing the simulation includes:

in response to detecting each of the multiple interactions, automatically changing the attribute of another layer of the multiple layers based on the active value of the variable data structure.

6 . A computer-implemented method comprising:

providing a design interface for a graphic design;

enabling a user to associate a first layer of the graphic design with a variable data structure, the first layer including a component that is associated with multiple instances that collectively define multiple states that are associated with the component;

enabling a user to link a second layer of the graphic design with the variable data structure, the second layer being different than the first layer, and the second layer including an object that is different than the component; and

performing a simulation of the graphic design being deployed in a production environment by (i) setting an active value for the variable data structure based on an attribute of one of the multiple instances of the component; and (ii) automatically configuring an attribute of the object of the second layer based on the active value of the variable data structure.

7 . The computer-implemented method of claim 6 , wherein the operations further comprise:

enabling the user to specify an event or condition when associating the first layer with the variable data structure; and

wherein setting the active value of the variable data structure is performed in response to occurrence of the event or condition.

8 . The computer-implemented method of claim 7 , wherein the event or condition corresponds to an occurrence of a user interaction, and wherein setting the value of the variable data structure is performed in response to occurrence of the user interaction.

9 . The computer-implemented method of claim 6 , wherein the operations further comprise:

enabling the user to associate multiple layers of the graphic design, including the first layer, with the variable data structure;

for each of the multiple layers, enabling the user to specify an interaction when associating the layer with the variable data structure; and

wherein performing the simulation of the graphic design includes detecting multiple user interactions with the multiple layers, and in response to detecting each of the multiple user interactions, setting the active value of the variable data structure based on an attribute value of a corresponding layer of the multiple layers where the interaction is received.

10 . The computer-implemented method of claim 9 , wherein performing the simulation includes:

in response to detecting each of the multiple interactions, automatically changing the attribute of the second layer based on the active value of the variable data structure.

11 . A non-transitory computer-readable medium that stores instructions, which when executed by one or more processors of a computer system, cause the computer system to perform operations comprising:

providing a design interface for a graphic design;

enabling a user to associate a first layer of the graphic design with a variable data structure, the first layer including a component that is associated with multiple instances that collectively define multiple states that are associated with the component;

enabling a user to link a second layer of the graphic design with the variable data structure, the second layer being different than the first layer, and the second layer including an object that is different than the component; and

performing a simulation of the graphic design being deployed in a production environment by (i) setting an active value for the variable data structure based on an attribute of one of the multiple instances of the component; and (ii) automatically configuring an attribute of the object of the second layer based on the active value of the variable data structure.

12 . The non-transitory computer-readable medium of claim 11 , wherein the operations further comprise:

enabling the user to specify an event or condition when associating the first layer with the variable data structure; and

wherein setting the active value of the variable data structure is performed in response to occurrence of the event or condition.

13 . The non-transitory computer-readable medium claim 12 , wherein the event or condition corresponds to an occurrence of a user interaction, and wherein setting the value of the variable data structure is performed in response to occurrence of the user interaction.

14 . The non-transitory computer-readable medium of claim 11 , wherein the operations further comprise:

enabling the user to associate multiple layers of the graphic design, including the first layer, with the variable data structure;

for each of the multiple layers, enabling the user to specify an interaction when associating the layer with the variable data structure; and

wherein performing the simulation of the graphic design includes detecting multiple user interactions with the multiple layers, and in response to detecting each of the multiple user interactions, setting the active value of the variable data structure based on an attribute value of a corresponding layer of the multiple layers where the interaction is received.

15 . The non-transitory computer-readable medium of claim 14 , wherein performing the simulation includes:

in response to detecting each of the multiple interactions, automatically changing the attribute of the second layer based on the active value of the variable data structure.

Assignments (2)

Continuity (2)

References Cited (79)