Interactive graphic design system to enable creation and use of variant component sets for interactive objects

Patent metadata

Field	Value
Publication number	US-11733973-B2
Application number	US-202117477293-A
Country	US
Kind code	B2
Filing date	Sep 16, 2021
Priority date	Sep 16, 2020
Publication date	Aug 22, 2023
Grant date	Aug 22, 2023

Abstract

An interactive graphic design system design interface is described to enable design users to create a variant component that links multiple design elements as variants, where each variant represents a state or version of a run-time object, feature or user-interface.

First claim

What is claimed is:

1. A network computer system comprising:
a memory sub-system to store a set of instructions;
one or more processors that operate to communicate the set of instructions to a plurality of user devices, wherein the set of instructions include instructions that when executed by each user device of the plurality of user devices, causes the user device to perform operations that include:
providing a design interface to enable one or more design users to specify input to create or modify a design under edit on a canvas;
identifying an input that identifies a selection of design elements that are rendered on the canvas;
defining, based on the identified input, a variant component, the variant component including multiple variants that are logically linked as constituents of the variant component;
wherein the variant component is associated with at least a state property that has multiple possible state property values, and each variant of the multiple variants is assigned to one of the multiple possible state property values;
wherein defining the variant component includes:
in response to receiving the identified input, making a determination as to whether the selection of design elements share a common attribute that correlates to a respective state property of the variant component;
if the determination is that the selection of design elements shares the common attribute, automatically associate the respective state property with the selection of design elements, and prompt the design user to select a property value of the respective property for one or more design elements of the selection; and
else prompt the design user to specify the respective state property for the selection of design components;
providing a representation of the variant component, the representation being manipulatable with design input to render each variant of the variant component on the canvas at the same time; and
implementing logic to simulate a run-time object based on the variant component, the run-time object being responsive to a corresponding event to transition amongst multiple states, wherein each state of the multiple states of the run-time component is based on one of the multiple variants of the variant component having at least a first value of a state property that is unique amongst the variants of the variant component.

2. The network computer system of claim 1 , wherein providing the representation of the variant component includes:
rendering the variant component by rendering each variant of the variant component at one time on the canvas.

3. The network computer system of claim 2 , wherein the operations further comprise:
providing an interactive feature to enable the design user to select an additional design element to add as a new variant of the variant component while each variant of the variant component is rendered.

4. The network computer system of claim 3 , wherein the interactive feature is provided with or in proximity to the constituent variants of the variant component being rendered on the canvas.

5. The network computer system of claim 1 , wherein the operations include:
implementing logic to enable the design under edit to be integrated into a functional user-interface, the functional user-interface being operable to generate an interactive element that is based on the variant component, the interactive element being responsive to a corresponding event to transition amongst multiple states, wherein each state of the multiple states of the interactive element is based on one of the multiple variants of the variant component.

6. The network computer system of claim 1 , wherein defining the variant component includes (i) associating the variant component with multiple state properties, each of the multiple state properties having a corresponding set of possible state property values; and (ii) assigning each combination of state property values of the set of property values to one variant of the variant component, such that each variant of the variant component is assigned to one combination of the set of state property values.

7. The network computer system of claim 6 , wherein associating the variant component with multiple state properties includes enabling the design user to specify an additional state property for a variant component.

8. The network computer system of claim 6 , wherein associating the variant component with multiple state properties includes automatically identifying an additional state property based on a common property or attribute of the constituent variants of the variant component.

9. The network computer system of claim 6 , wherein the operations include:
enabling the one or more design users to sort or filter the constituent variants of the variant component based on the state property value of each of the multiple state properties associated with the variant component.

10. The network computer system of claim 6 , wherein enabling the one or more design users to sort or filter the constituent variants of the variant component includes generating a property value selection feature for each of the multiple state properties on one or more tool panels.

11. The network computer system of claim 6 , wherein the selection of design elements are part of an existing variant component, and the respective state property is an additional state property for the variant component.

12. The network computer system of claim 6 , wherein the selection of design elements identify the constituent-variants of the variant component.

13. The network computer system of claim 1 , defining the variant component includes implementing a naming scheme in which each of the multiple constituent variants of the variant component are provided a name that identifies each state property that is associated with the variant component, and a state property value for each associated state property of the variant component.

14. The network computer system of claim 1 , wherein the operations further comprise: structuring the variant component as a layer type having multiple layers, wherein each variant of the variant component corresponds to one of the multiple layers.

15. The network computer system of claim 10 , further comprising providing the representation of the variant component on one or more tool panels by providing an indicator of each variant of the variant component, the indicator of each variant being manipulatable to render or stop rendering the respective variant, separate from other variants of the variant component.

16. The network computer system of claim 1 , wherein the operations further comprise storing the variant component as a reusable item in a network library.

17. A non-transitory computer-readable medium that stores instructions, including instructions that, when executed by one or more processors of a computing system, cause the computing system to perform operations that include:
providing a design interface to enable one or more design users to specify input to create or modify a design under edit on a canvas;
identifying an input that identifies a selection of design elements that are rendered on the canvas;
defining, based on the identified input, a variant component, the variant component including multiple variants that are logically linked as constituents of the variant component;
wherein the variant component is associated with at least a property that has multiple possible property values, and where each variant of the multiple variants are assigned to one of the multiple possible property values;
wherein defining the

Assignees

• Figma Inc

Inventors

• Andersson Rasmus
• Kuwamoto Sho
• Klein Nikolas
• Wong James
• Kaplan Ryan
• Whelan Kelsey
• Huang Matthew
• Hood Sawyer
• Heine Andrew
• Liu Jessica
• Wichary Marcin
• Zhang Linda
• Shi Josh
• Sinteppadon Golf
• Jung Naomi
• Chan Andrew
• Furse Daniel

Classifications

• G06F8/24 Primary

  Object-oriented · CPC title

• G06F8/38 Primary

  for implementing user interfaces · CPC title