Granted Patent B2

US 12,524,213 · App. 17/969,647 · Granted Jan 13, 2026

Inventors: Emil Sjölander (San Francisco, CA); Delong Fu (San Francisco, CA); Michael Feldstein (San Francisco, CA); Sawyer Hood (San Francisco, CA); Naomi Jung (San Francisco, CA)

Assignee: Figma, Inc.

G06F8/42G06T11/60

Abstract

Claims (51)

1 . A network computer system comprising:

one or more processors;

a memory to store a set of instructions;

wherein the one or more processors access the instructions from the memory to perform operations that include:

providing a graphic design environment, the graphic design environment including a canvas on which one or more users create and/or edit graphic elements of multiple types;

wherein the multiple types of graphic elements include a code block element type, the code block element type being associated with multiple types of formatting logic, each of the multiple types of formatting logic being selectable in accordance with a menu of options listing different programming languages, the menu of options being provided with the code block element type to implement a corresponding format that is based on a set of syntax rules for a corresponding programming language of the different programming languages;

responsive to user input, rendering a code block element on the canvas, the code block element being rendered to receive text input;

responsive to receiving text input with the code block element, automatically implementing a first selected formatting logic of the multiple types to render the text input in a first corresponding format for a first programming language of the different programming languages;

responsive to selection of a second programming language from the menu of options listing different programming languages, automatically reformatting the text input into a second corresponding format in accordance with the second programming language; and

scanning the text input to determine one or more programmatic actions to be executed on the canvas; and

executing the one or more programmatic actions, wherein, upon execution, at least one of the programmatic actions modifies one or more visual characteristics of the code block element and at least one other graphic element on the canvas.

2 . The network computer system of claim 1 , wherein the operations include automatically error correcting the text input in accordance with one or more syntax rules for the corresponding programming language of the selected formatting logic.

3 . The network computer system of claim 2 , wherein the operations includes compiling the text input as a code sequence of the corresponding programming language for the selected formatting logic.

4 . The network computer system of claim 1 , wherein scanning the text input includes:

identifying a call operation and a plugin identifier from the scanned text; and

wherein the one or more programmatic actions include performing the call operation using the plugin identifier.

5 . The network computer system of claim 4 , wherein scanning the text input includes identifying one or more input parameters in the scanned text; and

wherein the one or more programmatic actions include performing the call operation using the plugin identifier and the one or more determined input parameters.

6 . The network computer system of claim 1 , wherein more programmatic actions include altering one or more properties of the code block.

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

updating a nodal representation of a design created on the canvas using logic specified in the scanned text.

8 . The network system of claim 1 , wherein the code block element includes a container including a first set of properties, and wherein the operations include:

altering one or more properties of the first set based on user input.

9 . The network system of claim 1 , wherein the operations include:

rendering multiple code block elements on the canvas, the multiple code block elements being connected by a first connector; and wherein the operations further comprise enabling the each of the code block elements to be manipulated while connected by the first connector.

10 . 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 graphic design environment, the graphic design environment including a canvas on which one or more users create and/or edit graphic elements of multiple types;

wherein the multiple types of graphic elements include a code block element type, the code block element type being associated with multiple types of formatting logic, each of the multiple types of formatting logic being selectable in accordance with a menu of options listing different programming languages, the menu of options being provided with the code block element type to implement a corresponding format that is based on a set of syntax rules for a corresponding programming language of the different programming languages;

responsive to user input, rendering a code block element on the canvas, the code block element being rendered to receive text input;

responsive to receiving text input with the code block element, automatically implementing a first selected formatting logic of the multiple types to render the text input in the corresponding format for a first programming language of the different programming languages;

responsive to selection of a second programming language from the menu of options listing different programming languages, automatically reformatting the text input into a second corresponding format in accordance with the second programming language; and

scanning the text input to determine one or more programmatic actions to be executed; and

executing the one or more programmatic actions, wherein, upon execution, at least one of the programmatic actions modifies one or more visual characteristics of the code block element and at least one other graphic element on the canvas.

11 . The non-transitory computer-readable medium of claim 9 , wherein scanning the text input includes:

identifying a call operation and a plugin identifier from the scanned text; and

wherein the one or more programmatic actions include performing the call operation using the plugin identifier.

12 . The non-transitory computer-readable medium of claim 11 , wherein scanning the text input includes identifying one or more input parameters in the scanned text; and

wherein the one or more programmatic actions include performing the call operation using the plugin identifier and the one or more determined input parameters.

13 . The non-transitory computer-readable medium of claim 10 , wherein more programmatic actions include altering one or more properties of the code block.

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

updating a nodal representation of a design created on the canvas using logic specified in the scanned text.

15 . The non-transitory computer-readable medium of claim 10 , wherein the code block element includes a container including a first set of properties, and wherein the operations include:

altering one or more properties of the set based on user input.

16 . A computer-implemented method comprising:

providing a graphic design environment, the graphic design environment including a canvas on which one or more users create and/or edit graphic elements of multiple types;

wherein the multiple types of graphic elements include a code block element type, the code block element type being associated with multiple types of formatting logic, each of the multiple types of formatting logic being selectable in accordance with a menu of options listing different programming languages, the menu of options being provided with the code block element type to implement a corresponding format that is based on a set of syntax rules for a corresponding programming language of the different programming languages;

responsive to user input, rendering a code block element on the canvas, the code block element being rendered to receive text input;

responsive to receiving text input with the code block element, automatically implementing a first selected formatting logic of the multiple types to render the text input in the corresponding format for a first programming language of the different programming languages;

responsive to selection of a second programming language from the menu of options listing different programming languages, automatically reformatting the text input into a second corresponding format in accordance with the second programming language; and

scanning the text input to determine one or more programmatic actions to be executed; and

executing the one or more programmatic actions, wherein, upon execution, at least one of the programmatic actions modifies one or more visual characteristics of the code block element and at least one other graphic element on the canvas.

Assignments (2)

Continuity (2)

References Cited (90)