Interactive graphic design system to enable creation and use of variant component sets for interactive objects
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.
1. A network computer system comprising:
a memory sub-system to store a set of instructions; and
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:
defining, based on an input that identifies a selection of design elements rendered on a canvas provided in a design interface, a variant component, the variant component including a plurality of constituent variants, the plurality of constituent variants including a main component and a one or more instance components, the plurality of constituent variants sharing a state property value among multiple possible state property values associated with the variant component, wherein defining the variant component comprises:
determining that selected design elements share a common attribute that correlates to a respective state property of the variant component, and
based on the determining, associating the respective state property with the selected design elements, and prompting the user device to select a property value of the respective state property for one or more design elements of the selection;
providing a representation of the variant component that is manipulatable with design input to render the main component and the plurality of instance components on the canvas at a same time;
propagating design input received for the main component to each of the plurality of instance components rendered on the canvas at the same time in accordance with the selected property value of the respective state property for the one or more design elements of the selected design elements; and
integrating the variant component into an interactive runtime component wherein a state of the interactive runtime component is associated with one component associated with the variant component and transitions between different components associated with the variant component based on execution of a triggering event performed with respect to the interactive runtime 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 selection of 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 1 , wherein the operations further comprise storing the variant component as a reusable item in a network library.
5. 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.
6. The network computer system of claim 5 , wherein associating the variant component with multiple state properties includes enabling a design user to specify an additional state property for a variant component.
7. The network computer system of claim 5 , further comprising enabling a design user to sort or filter the constituent variants of the variant component based on includes generating a property value selection feature for each of the multiple state properties on one or more tool panels.
8. The network computer system of claim 1 , wherein defining the variant component includes implementing a naming scheme in which each respective constituent variant of the variant component is associated with a respective name that identifies each state property that is associated with the respective variant component, and a state property value for each associated state property of the respective variant component.
9. 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.
10. A processor-implemented method, comprising:
defining, based on an input that identifies a selection of design elements rendered on a canvas provided in a design interface, a variant component, the variant component including a plurality of constituent variants, the plurality of constituent variants including a main component and a one or more instance components, the plurality of constituent variants sharing a state property value among multiple possible state property values associated with the variant component, wherein defining the variant component comprises:
determining that the selected design elements share a common attribute that correlates to a respective state property of the variant component, and
based on the determining, associating the respective state property with the selected design elements, and prompting a user device to select a property value of the respective state property for one or more design elements of the selected design elements;
providing a representation of the variant component that is manipulatable with design input to render the main component and the plurality of instance components on the canvas at a same time;
propagating design input received for the main component to each of the plurality of instance components rendered on the canvas at the same time in accordance with the selected property value of the respective state property for the one or more design elements of the selection; and
integrating the variant component into an interactive runtime component, wherein a state of the interactive runtime component is associated with one component associated with the variant component and transitions between different components associated with the variant component based on execution of a triggering event performed with respect to the interactive runtime component.
11. The method of claim 10 , 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.
12. The method of claim 11 , further comprising:
providing an interactive feature to enable selection of an additional design element to add as a new variant of the variant component while each variant of the variant component is rendered.
13. The method of claim 10 , further comprising storing the variant component as a reusable item in a network library.
14. The method of claim 10 , 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.
15. The method of claim 14 , wherein associating the variant component with multiple state properties includes enabling a design user to specify an additional state property for a variant component.
16. The method of claim 14 , further comprising enabling a design user to sort or filter the constituent variants of the variant component based on generating a property value selection feature for each of the multiple state properties on one or more tool panels.
17. The method of claim 10 , wherein defining the variant component includes implementing a naming scheme in which each respective constituent variant of the variant component is associated with a respective name that identifies each state property that is associated with the respective variant component, and a state property value for each associated state property of the respective variant component.
18. The method of claim 10 , further comprising: 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.