A graphic design system that utilizes a variable data structure to perform simulations in which the attributes of stateful design elements are dynamically determined.

Abstract

The computer system can operate to associate each of the first and second layers of the graphic design with a mutable data structure. The first layer contains a single component associated with multiple instances, and the multiple instances collectively define multiple states associated with the component. The computer system can simulate the graphic design as it will be deployed in a production environment by (i) setting active values ​​for the mutable data structure based on the attributes of one of the multiple instances of the component, and (ii) automatically configuring the attributes of the objects in the second layer based on the active values ​​of the mutable data structure.

Description

Related Applications

[0001] This application claims the benefit of priority to each of (i) U.S. Patent Application No. 18 / 749,399, filed June 20, 2024, and (ii) U.S. Provisional Patent Application No. 63 / 522,089, filed June 20, 2023, and incorporates by reference in its entirety the contents of each of the foregoing priority applications herein.

Technical Field

[0002] The examples described herein relate to graphic design systems, and more particularly to graphic design systems that utilize variable data structures to perform simulations.

Background Art

[0003] Software design tools have a number of forms and uses. For example, in the field of application user interfaces, software design tools require designers to reconcile the functional aspects of a program with aesthetic requirements, or even legal requirements, resulting in a collection of pages that form the user interface of an application. In a given application, designers often have a number of goals and requirements, and it can be difficult to keep track of them.

Summary of the Invention

[0004] In an example, a graphic design system provides a design interface for graphic design. The design interface can include tools and other interactive features that allow a user to create and / or update a graphic design. A graphic design can include design elements that are rendered on a canvas by an integrated graphic design system. In some examples, the integrated graphic design system can provide a collaborative work environment for multiple users to update a single graphic design simultaneously.

[0005] In the example, a graphic design can be structured or represented by hierarchically arranging multiple layers, with each layer corresponding to a frame object, a group of frame objects, or a specific type of frame object. In the context of such an example, the layers of a graphic design can represent the design elements that make up the graphic design. Each layer can also be characterized by a set of attributes that reflect the visual appearance of the design elements. The attributes of each layer can be selected or manipulated by the user. For example, the user can modify individual layers by specifying (i) numerical values ​​to represent the line, corner, or dimensional features of a frame object, (ii) color values ​​(e.g., formattable as HEX, HSB, HSL, CSS, and RGB) relating to the background or to the fill, line, or shading attributes of an object, (iii) shape features, and / or (iv) text string attributes.

[0006] A graphic design system can be used to create graphic designs for production environments, such as functional user interfaces for computing devices. In a production environment, the program processes of an end computing device can render parts of the graphic design in the context of providing a functional user interface to the user. Therefore, production elements may be dynamic and may undergo state changes in response to user interactions or other events. A graphic design system can allow users to specify various visual forms of production elements that undergo state changes using graphic design. In one approach, a graphic design system can allow users to define multi-state design elements, called "components," as groups of design elements, where each design element in the group is an instance of a multi-state component, and each instance differs from other instances in the group by the values ​​of one or more attributes. In this way, each instance can be characterized by (i) a first set of one or more attributes that have values ​​unique individually or combined to other instances in the group, and (ii) a second set of attributes that are the same to all instances in the group. In some examples, each instance of a group can be called a variant of a multi-state object, and a variant represents one of the multiple states of a multi-state object.

[0007] In some examples, the operation includes enabling users to associate instances of components with a mutable data structure and enabling users to link a second object of the graphic design to the mutable data structure. Furthermore, the operation includes simulating the graphic design as it would appear when deployed in a production environment by (i) setting active values ​​for the mutable data structure based on the attributes of the component instances and (ii) automatically configuring the attributes of the second object based on the active values ​​of the instances of the mutable data structure.

[0008] Furthermore, in some examples, the computer-implemented operation involves associating a collection of mutable data structures with a graphic design, where each mutable data structure in the collection is associated with multiple values, including a corresponding first value for a first theme and a corresponding second value for a second theme. The operation further includes rendering the graphic design with the first theme by assigning each mutable data structure in the collection to the corresponding first value for the first theme, and, in response to an event, rendering the graphic design with the second theme by assigning each mutable data structure in the collection to the corresponding second value for the second theme.

[0009] Furthermore, in the example, the graphic design system allows the user to specify interactions with multi-state design elements during the design phase. If the graphic design system is implemented in simulation mode, it simulates the graphic design as it will be implemented in the production environment, and in response to detecting interactions with multi-state design elements, the state of the multi-state design elements is changed in simulation mode based on a variable data structure.

[0010] One or more embodiments described herein provide that methods, techniques, and actions performed by a computing device are performed by program or as a computer implementation. As used herein, "by program" means through the use of code or computer executable instructions. These instructions can be stored in one or more memory resources of the computing device. Steps performed by program may be automated or not.

[0011] One or more embodiments described herein may be implemented using a program module, engine, or component. A program module, engine, or component may include a program, a subroutine, a portion of a program, or a software or hardware component capable of performing one or more of the described tasks or functions. As used in these embodiments, a module or component may reside on a hardware component independently of other modules or components. Alternatively, a module or component may be an element or process shared with other modules, programs, or machines.

[0012] Some embodiments described herein may generally require the use of a computing device including processing and memory resources. For example, one or more embodiments described herein may be implemented in whole or in part on a computing device such as a server, desktop computer, mobile phone or smartphone, tablet, wearable electronic device, laptop computer, printer, digital picture frame, network equipment (e.g., router), and tablet device. Memory resources, processing resources, and network resources may all be used in connection with the establishment, use, or implementation (including implementation of any method or implementation of any system) of any embodiment described herein.

[0013] Furthermore, one or more embodiments described herein may be implemented through the use of instructions that can be executed by one or more processors. These instructions may be recorded on a computer-readable medium. The machines illustrated or described in the following drawings provide examples of processing resources and computer-readable media that can record and / or execute instructions for implementing embodiments of the present invention. In particular, many machines shown with embodiments of the present invention include a processor and various forms of memory for holding data and instructions. Examples of computer-readable media include persistent memory storage devices such as hard drives on personal computers or servers. Other examples of computer storage media include portable storage units such as CD or DVD units, flash memory (such as those found in smartphones, multifunction devices, or tablets), and magnetic memory. Computers, terminals, and network-enabled devices (e.g., mobile devices such as mobile phones) are all examples of machines and devices that utilize processors, memory, and instructions stored on computer-readable media. Furthermore, embodiments may be implemented in the form of computer programs or computer-readable recording media on which such programs can be recorded. [Brief explanation of the drawing]

[0014] [Figure 1] This figure shows a graphic design system according to one or more embodiments. [Figure 2A] This figure shows an exemplary method for using a variable data structure in conjunction with graphic design, according to one or more embodiments. [Figure 2B] This figure shows an exemplary method for using a variable data structure to determine the attributes of a design element, according to one or more embodiments. [Figure 2C] This figure shows an exemplary method for using a variable data structure to simulate graphic design in a production environment, according to one or more embodiments. [Figure 3A] This figure shows an exemplary graphic design interface for utilizing a collection of variable data structures in a graphic design system, according to one or more embodiments. [Figure 3B] This figure shows a panel interface that allows a user to define a variable data structure, according to one or more embodiments. [Figure 3C] This figure shows an interface for displaying a collection containing multiple variable data structures, according to one or more embodiments. [Figure 3D] This figure shows a panel, according to one or more embodiments, that allows a user to switch between theme value sets of a variable data structure in a collection. [Figure 3E] This figure shows an exemplary interface for using theme values ​​for a collection of mutable data structures having string value data types, according to one or more embodiments. [Figure 3F] This figure shows the application of an equation to determine the active value of a stateful layer for implementation during simulation mode, according to one or more embodiments. [Figure 4] This figure shows another example of a graphic design system utilizing a variable data structure, according to one or more embodiments. [Figure 5] This figure shows a computer system capable of implementing one or more embodiments. [Figure 6] This figure shows a user computing device for use with one or more examples as described. [Modes for carrying out the invention]

[0015] System Description FIG. 1 shows a graphic design system according to one or more examples. A graphic design system 100 (“GDS100”) as described using FIG. 1 may be implemented in any one of a plurality of different computing environments, such as a device-side application, a network service, and / or a collaborative work platform. In an example, GDS100 may be implemented using a web-based application 80 executed on user device 10. In other examples, GDS100 may be implemented via the use of a dedicated web-based application. Additionally or alternatively, one or more components of GDS100 may be implemented as a distributed system such that the processes described using various different examples are executed both on a network computer (e.g., a server) and on user device 10.

[0016] In an example, GDS100 includes a process executed via a web-based application 80 installed on computing device 10. The web-based application 80 can execute scripts, code, and / or other logic for implementing the functions of GDS100. Additionally, in some variations, GDS100 may be implemented as part of a network service, and the web-based application 80 communicates with one or more remote computers (e.g., servers used for the network service) to execute the processes of GDS100.

[0017] In an example, user device 10 includes a web-based application 80 that loads processes and data for providing GDS100 on user device 10. GDS100 can include a rendering engine 120 that enables a user to create, edit, and update graphic design files.

[0018] In some examples, the web-based application 80 obtains program resources for implementing the GDS100 from a network site. Additionally or alternatively, the web-based application 80 can obtain some or all of the program resources from a local source (e.g., local memory resident on the computing device 10). The web-based application 80 can also access various different types of data sets when providing the functionality as described with respect to the GDS100. The data sets can correspond to files and libraries that may be stored remotely (e.g., on a server, associated with an account) or locally.

[0019] According to an example, a user of the device 10 operates the web-based application 80 to access a network site where program resources are obtained and executed to implement the GDS100. The user can start a session for implementing the GDS100 and view, create, and edit the graphic design 135. Further, the user can simulate the deployment of the graphic design 135 in a production environment. In some examples, the user can act as a designer who creates, edits, and improves graphic designs for later use in a production environment.

[0020] In this example, the web-based application 80 may support commercially available browsers such as Google Chrome (developed by Google, Inc.), Safari (developed by Apple, Inc.), and Internet Explorer (developed by Microsoft Corporation). In this example, the GDS100 process may be implemented as scripts and / or other embedded code downloaded by the web-based application 80 from a network site. For example, the web-based application 80 may execute code embedded in a web page to implement the GDS100 process. The web-based application 80 may also execute scripts to retrieve other scripts and program resources (e.g., libraries) from a network site and / or other local or remote locations. For example, the web-based application 80 may execute JAVASCRIPT® embedded in an HTML resource (e.g., a web page structured in accordance with HTML5.0 or other versions, such as those provided in accordance with standards published by the W3C or WHATWG Consortium). In other variations, the GDS100 may be implemented through the use of a dedicated application, such as a web-based application.

[0021] The GDS100 may include a process represented by a program interface 102, a rendering engine 120, a design interface 130, and a simulation interface 132. Depending on the implementation, these components may run on the user device 10, on a network system (e.g., one server or a combination of servers), or on the user device 10 and the network system (e.g., as a distributed process).

[0022] The program interface 102 includes processes for receiving and sending data to implement components of the GDS 100. Additionally, the program interface 102 can be used to retrieve program resources and datasets, including a workspace file 155 for a user or user account, from local or remote sources. In an example, the workspace file 155 includes one or more datasets ("graphic design dataset 157") representing corresponding graphic designs 135 that can be rendered by the rendering engine 120. The workspace file 155 may include one or more graphic design datasets 157 that collectively define graphic designs 135. A graphic design dataset 157 may include one or more hierarchical data structures. In some examples, a graphic design dataset 157 defines a collection of layers containing graphic designs 135, where each layer corresponds to an object, a group of objects, or a specific type of object (e.g., a component). Furthermore, in some examples, a graphic design dataset 157 may be organized to contain graphic designs on a screen, where each graphic design includes one or more pages (e.g., one canvas per page) or a section containing one or more pages.

[0023] In one embodiment, the program interface 102 also acquires program resources, including an application framework for implementing the design interface 130. The design interface 130 can generate interactive functions and tools that can be integrated with the rendering of graphic designs on the canvas by utilizing a combination of local browser-based resources and / or network resources (e.g., the application framework) provided through the program interface 102. The application framework can enable the user to view and edit aspects of the graphic design. In this way, the design interface 130 can be implemented as a functional layer integrated with the canvas on which the graphic design 135 is provided.

[0024] The design interface 130 can detect and interpret user input, for example, based on the input's location and / or type. The input's location can refer to a canvas or screen location relative to, for example, the start and / or end positions of a tap or continuous input. The input's type can correspond to one or more types of input occurring, for example, with respect to the canvas or to design elements rendered on the canvas. Such inputs can be correlated with a canvas or screen location to select and manipulate design elements or parts thereof. Based on the canvas or screen location, the user input may be interpreted as an input for selecting a design tool, for example, which may be provided via an application framework. In implementation, the design interface 130 can use a corresponding canvas reference to identify the screen location of a user input (e.g., "click"). Furthermore, the design interface 130 can interpret the user's input actions based on the location of the detected input (e.g., whether the input location indicates a tool, an object rendered on the canvas, or a selection of an area on the canvas), the frequency of inputs detected within a given period (e.g., double-clicks), and / or the start and end positions of an input or a series of inputs (e.g., start and end positions of clicks and drags), as well as various other types of inputs that the user can specify via one or more input devices (e.g., right-clicks, screen taps, etc.).

[0025] In some examples, the rendering engine 120 and / or other components utilize graphics processing unit (GPU) accelerated logic, such as that provided through a WebGL (Web Graphics Library) program that runs a GLSL (Graphics Library Shader Language) program on the GPU. In variations, the web-based application 80 may be implemented as a dedicated web-based application optimized to provide the functionality described using various examples. Furthermore, the web-based application 80 may vary based on the type of user device, including the operating system used by the user device 10 and / or the form factor of the user device (e.g., desktop computer, tablet, mobile device, etc.).

[0026] In the example, the rendering engine 120 uses the graphic design dataset 157 to generate a rendering of the graphic design 135 for the design interface 130. Each design element (or layer) of the graphic design 135 can be characterized by a set of attributes, each attribute including an attribute type and an attribute value. For objects, attribute types include shape, dimensions (or size), layer, type, color, line weight, text size, text color, font, and / or other visual features. Depending on the implementation, the attributes reflect the properties of a two-dimensional or three-dimensional design. In this way, the attribute values ​​of individual design elements or layers define the visual features of size, color, placement, layer, and content.

[0027] The graphic design 135 can be organized by screen (e.g., representing a computer screen in a production environment), page (e.g., each page contains a canvas on which the corresponding graphic design is rendered), or section (e.g., each screen contains multiple pages or screens). Users can interact with the design interface 130 to view and edit the graphic design 135. The design interface 130 can detect user input, and the rendering engine 120 can update the graphic design 135 in response to the input. For example, a user can specify input to change the view of the graphic design 135 (e.g., zoom in or zoom out of the graphic design), and in response, the rendering engine 120 updates the graphic design 135 to reflect the change in the view. Users can also edit the graphic design 135. The design interface 130 can detect input, and the rendering engine 120 can update the graphic design dataset 157 to represent the updated design. Additionally, the rendering engine 120 can update the graphic design 135 so that the user can immediately see any changes to the graphic design 135 that result from user interaction.

[0028] collaborative work environment In this example, GDS100 may be implemented as part of a collaborative platform, where multiple users operating different computing devices on-site can view and edit graphic designs. As part of the collaborative platform, when a user edits graphic design 135, the changes made by that user are implemented in real time in instances of the graphic design on the computer devices of other collaborative users. Similarly, when other collaborators make changes to the graphic design, those changes are reflected in the graphic design dataset 157 in real time. The rendering engine 120 can update graphic design 135 in real time to reflect changes made to the graphic design by collaborators.

[0029] In the implementation, when the rendering engine 120 makes changes to the graphic design dataset 157, it can transmit corresponding change data 111 representing those changes to the network system 150. The network system 150 can implement one or more synchronization processes (represented by the synchronization component 152) to maintain the network-side representation 151 of the graphic design. In response to receiving change data 111 from the user device 10, the network system 150 updates the network-side representation 151 of the graphic design and transmits change data 121 to the user devices of other collaborators. Similarly, if another collaborator makes changes to an instance of the graphic design on their respective device, they can communicate corresponding change data 111 from their device to the network system 150. The synchronization component 152 updates the network-side representation 151 of the graphic design and transmits the corresponding change data 121 to the user device 10 to update the graphic design dataset 157. The rendering engine 120 then updates the graphic design 135.

[0030] In the example, the graphic design dataset 157 includes a set of variable data structures 159 associated with the graphic design 135. Each variable data structure 159 may be of a predetermined value type (e.g., numeric, string, hexadecimal, boolean, etc.). Each variable data structure 159 can also be associated with one or more values ​​of the corresponding value type.

[0031] Variable data structure More specifically, a variable data structure 159 of a graphic design dataset 157 can be associated with one or more aspects of a graphic design. In some examples, the variable data structure 159 may have a tabular or row-based structure, with at least one column providing the corresponding values ​​of the variable data structure. As described in some examples, each variable data structure 159 may have multiple corresponding values, in which case the variable data structure includes multiple columns, each column identifying a different corresponding value for the variable data structure.

[0032] Collection of mutable data structures Furthermore, in the example, the graphic design dataset 157 may contain a collection of variable data structures, each variable data structure in the collection having one or more corresponding values. The collection of variable data structures can be structured as a multidimensional table, where each variable data structure is partially defined by corresponding values ​​(or sets of values), and the corresponding values ​​of each variable data structure 159 are provided in their respective columns.

[0033] Theme set of values ​​for collections The columnar sets of values ​​for the collection's variable data structure 159 can also be linked separately to themes or theme sets. The values ​​assigned to the collection's variable data structure 159 can be switched from one theme set to another. The user can interact with the variable data structure 159 or the collection via the design interface 130 to select alternative theme sets for the collection's variable data structure. For example, the design interface 130 can allow the user to interact with a tabular data structure representing a set of variable data structures by enabling the user to specify or select corresponding values ​​for individual variable data structures related to theme sets. Alternatively, the design interface can allow the user to toggle between alternative theme value sets for the collection's variable data structure.

[0034] In the example, the corresponding values ​​for each variable data structure 159 can determine the visual attributes of the corresponding layer of the graphic design. In one embodiment, a collection of variable data structures 159 can be used to enable variations of a given graphic design to accommodate production environments where the attributes of design elements change for, for example, aesthetic, design, or functional reasons. There are various different scenarios in which variations of the graphic design 135 are justified or desired. For example, if the graphic design is targeted at a user's computing environment, the graphic design may differ among groups of users based on the hardware being used (e.g., mobile devices, laptops, desktops, etc.) and the operating system and / or platform used by the user's computing device. Thus, the type of hardware, operating system, and computing environment may represent alternative production environments for the graphic design, and the designer may be motivated to modify the aspects of the graphic design to accommodate the preferences or requirements of each environment. If alternative branding may exist in the production environment, an alternative set of graphic designs can also be used. Furthermore, alternative sets of graphic designs can enable the implementation of alternative modes in production environments, such as light and dark mode implementations for the same application.

[0035] Association of variable data structures for determining attributes In the example, the user can use the design interface 130 to specify stateful aspects of a graphic design. A stateful aspect of a graphic design can define (i) the visual appearance of the graphic design in its current state, (ii) actions / events that cause the graphic design to change state to a stateful aspect, and / or (iii) the rendering of the graphic design in the next state following an action or event. In the example, the graphic design may include multiple top layers, each of which represents a page or screen where the graphic design is implemented in the production environment. Furthermore, the graphic design may include multiple stateful layers whose state can be visually changed during the implementation of production changes. For example, an icon may change color or size in response to actions corresponding to click or hover actions. The user can interact with the design interface 130 to specify logical associations that include various states of the graphic design. User input can specify a sequence that defines transitions between multiple different layers, actions that cause a particular state change, and changes to the layer attributes to reflect the state change. The user can also link the mutable data structure 159 to a stateful layer whose attributes should be changed (for example, color or shading should be changed). In such cases, the set of values ​​in the linked mutable data structure 159 can define the changes to the layer. User input can also specify the sequence or method in which the values ​​of the mutable data structure should be used to change the corresponding attributes of the linked layer.

[0036] The design interface 130 allows the user to create a variable data structure 159 and an association between the variable data structure 159 and layers of graphic design. In some examples, the variable data structure 159 can be created by user input. Alternatively, the variable data structure 159 can be received from a network source (e.g., collaborators, external sources, etc.), and the user can provide input to link selected layers to the corresponding variable data structure. The user can create such associations for layers that are intended to be stateful in a production environment. The variable data structure 159 can be selected or configured to define the attributes of a layer in each of multiple states. Each state of a stateful layer can be represented by the values ​​of the linked variable data structure 159. Thus, a stateful layer in a simulated environment can change its state based on the alternative values ​​of the linked variable data structure 159. Furthermore, the attributes of a stateful design element are dynamically determined based on the attributes of other design elements (e.g., components or multi-state design elements).

[0037] In the example, the association between the variable data structure 159 and the layer may be such that the selected value in the variable data structure 159 determines the attributes of the linked layer. For example, the variable data structure 159 may specify a set of numerical values ​​to represent alternative states of the layer, with variations between states based on attributes such as size / dimensions, line features, and / or corner features. In a modified example, the variable data structure 159 may specify a set of color values ​​(e.g., hexadecimal) to represent alternative states of the layer, with variations between states based on color attributes (e.g., fill, line color, etc.). Alternatively, the variable data structure 159 may specify a string value to represent an alternative state of the layer, with variations between states based on text attributes or text content. Furthermore, the variable data structure 159 may specify a boolean value relating to the linked layer or the attributes of the layer. In this way, the variable data structure 159 can associate multiple values ​​with a given layer, each value being associated with a state of the layer. The user can also specify logical relationships regarding the order or sequence in which individual values ​​in a set of values ​​of a variable data structure should be "active" to reflect the current state of the linked layer. For example, in the case of a soft button whose fill color changes from black to gray and then to blue in response to a click action, the specific values ​​that are active in a given state reflect the rendered color of the soft button at that point. Additionally, the logical relationships specified via the design interface 130 can also form the basis for generating programming code and other datasets for implementing the graphic design in a production environment.

[0038] The rendering engine 120 can implement a simulation mode via the simulation interface 132 to dynamically render the graphic design 135 in an interactive manner that represents the production environment in which the graphic design 135 is deployed. In other words, the simulation mode can be enabled during the design phase of the graphic design, and the simulation mode simulates the implementation of the graphic design in the production or execution environment. Furthermore, in at least some examples, the simulation mode may be dynamic in that the attributes of stateful elements are based on the values ​​of other stateful elements.

[0039] When generating a simulation of a graphic design, the rendering engine 120 renders a portion of the graphic design corresponding to, for example, a display screen in a production environment, via the simulation interface 132. Before rendering the simulation mode, the user can specify state relationships between layers and between layers and variable data structures. Once the simulation mode is started, the simulation interface 132 can receive user input and / or detect other events (e.g., the passage of time) and perform state changes on the simulated graphic design based on the user-specified logical relationships. State changes can include transitions between screens in response to user input and can indicate changes in attributes for individual layers based on variable data structures associated with variable data structures. In the example, the use of a variable data structure 159 to represent stateful design elements is visualized in the simulation mode.

[0040] The simulation interface 132 can render stateful design elements so that they include attributes based on the active values ​​of their respective variable data structures 159. Each stateful design element's variable data structure 159 can contain multiple values, each of which defines an attribute that at least partially defines the state of the design element. For each variable data structure 159, the simulation interface 132 can include logic to determine the initial or default values ​​of the corresponding value set and the subsequent values ​​after state transitions for changing the attributes of each layer. A particular value in the variable data structure can be referred to as the "active" value. Therefore, if the variable data structure 159 contains multiple values, the active value can represent a specific value used to render the associated layer in a particular state during simulation rendering.

[0041] In some examples, the rendering engine 120 may allow the user to interact with the design interface 130 to specify an association between a graphic design layer and a variable data structure 159, which sets the active value of the variable data structure 159, at least partially based on the instructions or specified attributes of the value-setting layer. Furthermore, the rendering engine 120 may allow the user to specify an action or event with respect to a layer to set the active value of the variable data structure by a specified layer or attribute of the layer. For example, the user may specify "click" or "hover" as the action or event to trigger a change to the active value of the variable data structure 159. An alternative value selected to become active may be determined, for example, from the attribute of the associated layer from which user input or interaction (e.g., click, hover) is received. In this way, during simulation mode, the active value of the variable data structure 159 (representing the current state of the linked layer) can be determined by the attributes of the value-setting layer.

[0042] As described, when the simulation mode is implemented, the rendering engine 120 simulates the rendering of a page or screen of the graphic design in a production environment. The user can interact with layers of the simulated design in a manner that simulates user interaction with the corresponding functional user interface in the production environment. The simulated design may include stateful layers that can change state in response to user input and other events. The values ​​of the stateful layers may be based on a set of values ​​in an associated mutable data structure. To simulate user interaction, the rendering engine 120 can determine the state of the stateful layers using the corresponding mutable data structure 159 and the logical relationships associated with the mutable data structure 159. The rendering engine 120 renders the graphic design to reflect any possible state changes that may occur with respect to the graphic design.

[0043] In the example, the logical relationships specified between individual layers and their corresponding variable data structures include a relationship in which the attributes of a layer, as rendered in simulation mode, are based on a set of values ​​in the variable data structure 159. In relation to such logical relationships, the user can also specify user inputs or events received in relation to the associated layer to trigger the implementation of the logical relationship. For example, a logical relationship can dictate the attributes of a layer to provide a basis for the values ​​of the variable data structure for simulation purposes when a certain type of input is received on the layer in simulation mode. In this way, the logical relationship can include a relationship in which the active value of a variable data structure is set by the attribute of the corresponding layer for the purpose of simulation. Furthermore, the active value of the variable data structure can be determined in response to directed user interaction regarding the simulated rendering of the corresponding layer. For example, in simulation mode, a user selection regarding a first layer can be triggered to change the value of the second layer based on the association between the first layer and the variable data structure 159, and based on the link between the variable data structure 159 and the second layer. In the example, the variable data structure 159 can enable the use of expressions using a set of values. These expressions can include mathematical and / or logical formulas. Furthermore, the values ​​of the expressions in the variable data structure can incorporate the active values ​​of other variable data structures in the graphic design. In some examples, the simulation interface 132 determines the values ​​of logical formulas for the variable data structure in response to inputs or other events that modify values. For example, the expressions can include mathematical operations such as addition, subtraction, division, multiplication, averaging, etc., of values ​​in one or more other variable data structures. Thus, in some cases, when a simulation mode is implemented, the active values ​​of a variable data structure for a given stateful layer can be partially determined by the attributes of different layers (represented by different variable data structures). Furthermore, the expressions can also include mathematical operations to modify the values ​​related to the attributes. In some modifications, the expressions for a particular variable data structure can incorporate conditional logic, such as conditional logic, that determines the active values ​​of the variable data structure based on another condition (e.g., the values ​​of another variable data structure). Furthermore, expressions for specific variable data structures can incorporate nested logical expressions, such as conditional statements with nested logical and / or mathematical operations. Moreover, logical expressions can be reduced to specific data types, such as numerical, color, or string values.

[0044] methodology Figure 2A shows an exemplary method for using a variable data structure with graphic design in one or more embodiments. Figure 2B shows an exemplary method for using a variable data structure to determine the attributes of design elements in one or more embodiments. Figure 2C shows an exemplary method for using a variable data structure to simulate graphic design in a production environment in one or more embodiments. When describing the examples in Figures 2A to 2C, references to elements in Figure 1 are made to illustrate the appropriate components and functions for performing the steps or substeps.

[0045] Referring to Figure 2A, in step 204, the GDS100 provides a design interface that enables the user to view, create, and edit graphic designs.

[0046] In step 208, GDS100 associates a collection of variable data structures with a graphic design. Each variable data structure can be associated with one or more design elements of the graphic design. Furthermore, each variable data structure in the collection can be assigned to multiple values, and each of these multiple values ​​can be associated with a specific type of value (e.g., numeric, string, color value, boolean, etc.). In the example, the multiple values ​​of each variable data structure include a first value for a first theme and a corresponding second value for a second theme.

[0047] In step 212, the GDS100 renders the graphic design according to the first theme by assigning each variable data structure of the collection to the corresponding first value of the first theme.

[0048] In response to user input (e.g., theme change input) or other events, in step 216, the GDS100 renders the graphic design according to the second theme by assigning each variable data structure of the collection to the corresponding second value of the second theme. As illustrated by several examples, the user can switch between theme values ​​of the collection using interactive features, such as a menu function.

[0049] In the example, GDS100 allows a collection of variable data structures to be updated by a user, account owner, or remote source of the collection. GDS100 can also allow a user or account owner to update a collection that was initially received from a third party or remote source. In some variations, when a user or account owner updates a particular variable data structure in a collection, subsequent updates to the collection can selectively update the collection. For example, when updating a collection by the original source, GDS100 can exclude selected variable data structures that were last updated by the user, account owner, or alternative source. In this way, GDS100 can implement variable execution logic 122 or other processes to selectively apply updates to a collection and exclude updates to variable data structures updated by, for example, a user or other source.

[0050] Referring to Figure 2B, in step 220, the GDS100 provides a design interface for rendering at least a portion of the graphic design. While the graphic design is being rendered, in step 224, the GDS100 allows the user to associate a first layer of the graphic design with a variable data structure. The first layer may contain a single component associated with multiple instances, these multiple instances collectively defining multiple states associated with that component. These multiple states may reflect, for example, production environment features represented by the component, which change states based on events and / or user input.

[0051] In step 228, the GDS100 allows the user to link or associate a second layer of graphic design with a variable data structure, the second layer being different from the first layer and containing different objects from the components of the first layer. Each of the first and second layers can correspond to, for example, an object, a group of objects, or a specific type of object. Similarly, each of the first and second layers can correspond to, for example, a frame object, a combination of frame objects (e.g., a parent object and child objects), or a top-level frame (e.g., a page or screen of objects).

[0052] In step 232, GDS100 performs a simulation of the graphic design as it would appear when deployed in a production environment. During the simulation, GDS100 can determine the active values ​​of the variable data structure based on the attributes of the first layer. Additionally, GDS100 can automatically configure the attributes of the second layer based on the active values ​​of the variable data structure.

[0053] Referring to the example in Figure 2C, in step 236, GDS100 provides a design interface for rendering at least a portion of the graphic design. In step 240, GDS100 implements a mutable data structure for use with the graphic design, which is defined at least partially by a value type and one or more values. In step 244, GDS100 links a multi-state design element, which has multiple states, to the mutable data structure such that each of the multiple states is at least partially based on a corresponding value of the value type.

[0054] Exemplary Interface Figures 3A to 3F and 4 illustrate various examples of implementing a graphic design system according to one or more embodiments. When describing the examples in Figures 3A to 3F and 4, references to elements in Figure 1 are made to illustrate appropriate components for implementing the features and functions described in the examples.

[0055] Figure 3A shows an exemplary graphic design interface 300 for displaying information about a collection of variables for a computing device. In the example, the graphic design interface 300 is generated in relation to a user who interacts with the GDS 100 (via a corresponding user device 10) to edit a graphic design. In the illustrated example, the graphic design interface 300 utilizes multiple collections 310, each collection containing one or more variable data structures 312. Each variable data structure 312 may contain an identifier 311, a data type 313 (e.g., numeric, string, color, boolean, etc.), and one or more values ​​315 of the data type. The collections 310 may be tabular data structures, where each row corresponds to a variable data structure and each column corresponds to a corresponding set of values ​​for the variable data structures in the collection. In some implementations, each collection 310 may be edited to include additional columns (or values) for each variable data structure in the collection. Furthermore, each collection 310 may be edited to include additional rows (or variable data structures) with corresponding assigned values. Furthermore, the attributes or values ​​of individual variable data structures may be modified by the user.

[0056] The graphic design interface 300 may include a panel 314 or list that allows a user to view and / or edit collections 310 associated with a specific graphic design file, or alternatively, associated with a user or user account. A collection 310 may be organized by category labels 308 and subcategory labels 309 (or other descriptors). Individual collections (or parts thereof) may be designated by a user, a collaborator (a user operating on a different computing device and collaborating on the same graphic design), or a third party. In some examples, a third party may communicate one or more collections 310 to individual users (or their respective computing devices). For example, the GDS 100 may employ a programmatic application interface (e.g., a REST API) to receive collections (and updates thereof) of variable data structures from a selected or designated third-party source.

[0057] Figure 3B shows a panel interface 320 for defining a variable data structure. Panel 320 can provide an interface that allows users to view, edit, or create variable data structures. In the illustrated example, panel 320 allows the user to provide an identifier 321 for a layer to be associated with the variable data structure, additional descriptors, and attribute type indications (e.g., spacing, sizing, radius). Thus, when a user associates a layer (e.g., radius) with a variable data structure, the attributes of the layer to be represented by that variable data structure will be indicated by the variable data structure itself.

[0058] Figure 3C shows an interface 330 for displaying a collection 310C containing multiple variable data structures 312, each variable data structure 312 containing multiple alternative (or possible) values ​​315A, 315B. The collection 310C can be structured such that each column 331, 332 of the collection is associated with a theme. If each column 331, 332 of each value is associated with a corresponding theme (e.g., light theme, dark theme), then each value constituting the column can be selected at once such that each variable data structure 312 of the collection has values ​​associated with the same theme. In some examples, the interface 330 may include or be associated with a selection mechanism that allows the user to switch between theme sets of values ​​for the variable data structures 312 of the collection 310. For example, a designer can toggle between a light mode and a dark mode for graphic design simply by selecting between columns 331 and 332 of the interface 330.

[0059] In the example, columns 331 and 332 of the collection can represent alternative theme value sets for the collection's variable data structure. For example, a theme value set can represent alternative modes (e.g., light mode, dark mode) for implementing graphic design in a production environment. For such a theme value set, collection 310 includes a variable data structure 312 that has a color data type and contains a corresponding first set of values ​​representing the corresponding colors for a first theme (e.g., light mode), and a second set of values ​​representing the corresponding colors for a second theme (e.g., dark mode). By using a collection that includes alternative theme value sets for a variable data structure, a designer can more efficiently view and edit graphic designs for all alternative implementation modes. For example, a designer only needs to edit one layer with respect to an attribute of the first type (e.g., corner shape) to make the modified layer available in both light mode and dark mode. Theme value sets can be used for all types of variable data structures to accommodate various types of variations that may be required for graphic design in a production environment. For example, alternative variations of graphic design may be required to accommodate (i) different operating modes (e.g., light mode, dark mode), (ii) multiple display sizes (e.g., compact size for mobile devices, large size for desktops), (iii) combinations between platforms and operating systems, (iv) color rendering discrepancies between different computing environments, and / or (v) differences in the capabilities or functions of different computing environments.

[0060] Therefore, as an addition or variation, collection 310 may include a variable data structure 312 having numerical types that reflect shape, size (e.g., dimensions along one or two axes), spacing, position, or other numerical attributes. The theme value set can render alternative versions of the graphic design, in which the shape, size, and / or layer arrangement differ to reflect variations for the production environment implementation of the graphic design. These variations may reflect, for example, (i) tolerance to alternative types of computing devices (e.g., a mobile device with a smaller screen might require a user interface that embodies a graphic design that should be compressed to accommodate the size of the display screen) and (ii) differences in representation to various different computing platforms.

[0061] As an additional illustrative example, a theme value set may include boolean values ​​for mutable data structures, for example, indicating whether an attribute or feature identified by the corresponding mutable data structure should be turned on or off (e.g., whether it should be rendered in production). This allows for, for example, reducing the functionality provided to the user to accommodate smaller screen sizes in a mobile environment.

[0062] Figure 3D shows a panel that allows the user to switch between sets of values ​​for a variable data structure for a collection. For example, a panel 336 may be provided in the design interface 300. Panel 336 may include a function 337 that allows the user to select a specific collection (e.g., "Semantic Colors") and a function to select a set of values ​​for the collection from one set of values ​​associated with the current theme (e.g., "Light Mode") to another theme (e.g., "Dark Mode").

[0063] Figure 3E shows an exemplary interface 340 for utilizing theme values ​​for a collection 310 of variable data structures 312 having string value data types. In the illustrated example, the variable data structure 312 contains alternative string values ​​315A, 315B, 315C with the same content in alternative languages ​​(e.g., English, French, German, etc.). The set of theme values ​​can determine the language of text content provided on a screen, page, or other part of a graphic design.

[0064] Figure 3F illustrates the application of formulas to determine the values ​​of stateful layers, using one or more examples. In Figure 3F, the user can interact with the design interface to set the values ​​of a variable data structure as formulas. In the illustrated example, a portion of the graphic design corresponding to screen 355 is rendered for the design interface 130. Furthermore, to implement stateful design elements in simulation mode, a separate variable / property panel 358 may be provided in the design interface to allow the user to configure variable data structures and logic. Panel 358 may allow the user to specify state changes or values, for example, through the occurrence of action 359 and instructions for variable data structures (e.g., “fullprice”, “figplantcount”, and “figplantprice”). In the example, the formula sets the value of the variable “fullprice” as the product of the variables “figplantcount”, and “figplantprice”. The formula can be reduced to a number that is rendered as content for layer 351. In this way, layer 351 may be a stateful layer containing content representing the current values ​​of the user's shopping cart. Interface 350 can be designed to include interactive and stateful elements, including the product selection function 349 and the total amount layer 351. During simulation mode, the user can interact with the product selection layer 349 to select the number of fig plants. The product selection layer 349 may contain sub-layer elements 347a and 347b, which can be associated with a corresponding variable data structure "figplantcount" by a click action. The variable data structure for "figplantcount" may contain the value of an expression that maintains a count regarding the number of selected products.As an example, the formula for “figplantcount” can increase the value of “figplantcount” in response to a click action on sublayer element 347a, and decrease the value of “figplantcount” in response to a click action on sublayer element 347b.

[0065] As shown in the example, a logical expression is provided for stateful elements, and this expression reduces to a dynamic value based on state changes that occur during the simulation rendering of the graphic design (e.g., provided by the user). In this way, the manner of simulation rendering is dynamically determined as state changes occur during the simulation (e.g., in response to user input). An example is shown for reducing a dynamic expression to a number, but in variations, the dynamic expression can be used to reduce to one of several types of values, including string values ​​and Boolean values. Furthermore, the logical expression can contain various types of logic, including Boolean logic and arithmetic logic.

[0066] When simulation mode is implemented, the contents of layer 351 also change state in response to a change in the value of “figplantcount,” and this content reflects the user-selected price value (which corresponds to the numerical value for each product). When simulation mode is initially implemented, for example, layer 351 may have content that renders “$0,” and the number of selected products is “0.” Subsequently, when the user interacts with sub-elements 347a and 347b, the variable data structure “figplantcount” is iterated over, and the active value of layer 351 is calculated based on the value of the expression for the corresponding variable data structure (e.g., “figplantcount” * “figplantprice”). In the illustrated example, the user may also be able to interact with, for example, “figplantprice” to directly manipulate the rendered value. The simulation interface 132 can cache the active value and use it when determining the active value of other variable data structures that depend on this active value.

[0067] Figure 4 shows another example of a graphic design system utilizing a variable data structure in one or more embodiments. Referring to Figure 4, a portion of the graphic design is shown rendered on the canvas of the design interface. The graphic design includes multiple layers, which include a screen layer 402, an avatar layer 404, and a set of button layers 410, which includes a cat button layer 412, a dog button layer 414, and a squirrel button layer 416. The avatar layer 404 can include elements corresponding to a label 403 (string value) and a graphic content component 407. Each button in the set of button layers 410 contains a string attribute corresponding to the text content of the frame object. Additionally, the graphic design includes a variant component layer ('animals') 430, which includes variants containing a squirrel variant 432, a dog variant 434, and a cat variant 436. The attributes of the sublayers can include their respective text string identifiers 431 and images 433.

[0068] In the illustrated example, a variable input panel 440 can be provided as part of the design interface 130 (see Figure 1), allowing the user to specify and configure logical relationships between specific layers and variable data structures. The user can interact with the variable input function 440 of the design interface 130 (see Figure 1) to structure logical relationships between a given layer and a corresponding variable data structure. By interacting with the variable input function 440, the user can specify an action 441 (e.g., click, hover, double-click, etc.) to trigger an association between each layer (e.g., a cat button layer 412) and an identified variable data structure 445 (e.g., a variable data structure labeled “avatar” or “avatar variable”). Furthermore, the user can provide an input 442 specifying the nature of the logical relationship. In the illustrated example, the nature of the logical relationship is that, in response to the action 441 performed on the cat button layer 412, the associated variable data structure is set to have a specific value 443. A specific value 443 can correspond to a string value (e.g., "cat") specified by the designer during interaction with the input function 440. In a modified example, the specific value 443 for the avatar variable can be based on an attribute of the value setting layer. For example, the string attribute ("cat") of the cat layer 412 can be extracted and used as the identified value 443 for each variable data structure.

[0069] The variable input panel 440 allows the designer to create and configure logical relationships similar to those that exist between avatar variables and the dog button layer 414 and the squirrel button layer 416, respectively. For example, a user can interact with the variable input function 440 to specify a corresponding action 441 (e.g., click), a variable data structure associated with the relationship (e.g., 'variable avatar'), and a string value that should be set for the avatar value when the selected action is performed.

[0070] In the case of avatar layer 404, the text element 403 can be set by the avatar variable 445. In the example, additional logic for linking the graphic content component 407 to an object having a matching string identifier can be employed along with the simulation interface. Thus, the string identifier can identify one of the variant objects, and the graphic content component 407 can use the image of the variant having a text identifier that matches the specified string value 443.

[0071] Once the logical relationships are established, the rendering engine 120 can implement a simulation mode for rendering a simulation of the graphic design. During the simulation, a designated portion of the graphic design (e.g., screen layer 402) is displayed on a simulated display screen (e.g., for a mobile device). The user can interact with (e.g., click) any of the button layers 410 so that the string value of the avatar variable 445 is set by a specific value 443 associated with each soft button layer 412, 414, 416 (e.g., "dog", "cat", "squirrel"). During the simulation, the text string element 403 of the avatar layer can be set by the string value of the clicked button layer. Furthermore, a simulation interface 132 (see Figure 1) is provided.

[0072] Network Computer System Figure 5 shows a computer system that can implement one or more embodiments. The computer system 500 may be implemented, for example, on one server or on a combination of multiple servers. For example, the computer system 500 may be implemented as the network computing system 150 in Figure 1.

[0073] In one implementation, the computer system 500 includes a processing resource 510, a memory resource 520 (e.g., read-only memory (ROM) or random access memory (RAM)), one or more instruction memory resources 540, and a communication interface 550. The computer system 500 includes at least one processor 510 for processing information stored in the memory resource 520, such as information provided by random access memory (RAM) or other dynamic storage devices for storing information and instructions executable by the processor 510. The memory resource 520 can also be used to store temporary variables or other intermediate information during the execution of instructions to be executed by the processor 510.

[0074] The communication interface 550 enables the computer system 500 to communicate with one or more user computing devices via one or more networks (e.g., cellular networks) using a network link 580 (wireless or wired). Using the network link 580, the computer system 500 can communicate with one or more computing devices, dedicated devices and modules, and / or one or more servers.

[0075] In the example, the processor 510 can execute service instructions 522 stored in memory resource 520 in an example such as the one described with reference to Figure 1, in order to enable the network computing system to implement network services 172 and to operate as the network computing system 170.

[0076] Computer system 500 may also include additional memory resources ("instruction memory 540") for storing executable instruction sets ("IGDS instructions 545") embedded in web pages and other web resources, in order to enable user computing devices to implement functions such as those described with respect to system 100.

[0077] Accordingly, the examples described herein relate to the use of a computer system 500 for implementing the techniques described herein. In one embodiment, these techniques are implemented by the computer system 500 in response to the processor 510 executing one or more sequences of one or more instructions contained in memory 520. Such instructions can be read into memory 520 from another machine-readable medium. By executing the sequence of instructions contained in memory 520, the processor 510 performs the process steps described herein. In alternative implementations, hardwired circuits can be used instead of or in combination with software instructions to implement the examples described herein. Accordingly, each example described is not limited to any particular combination of hardware circuitry and software.

[0078] User computing device Figure 6 shows a user computing device for use with one or more examples as described. For example, the user computing device 600 can be a workstation, desktop computer, laptop, or other computer system with graphics processing capabilities suitable for enabling design interfaces and rendering graphic design work. In variations, the user computing device 600 can be a mobile computing device such as a smartphone, tablet computer, laptop computer, VR or AR headset device, and similar devices.

[0079] In this example, the computing device 600 includes a central processor or main processor 610, a graphics processing unit 612, a memory resource 620, and one or more communication ports 630. The computing device 600 can use the main processor 610 and the memory resource 620 to store and launch a browser 625 or other web-based applications. The user can operate the browser 625 and use the communication port 630 to access network sites of network service 152 and download one or more web pages or other resources 605 for network service 152 (see Figure 1). The web resources 605 can be stored in active memory 624 (cache).

[0080] As illustrated by various examples, the processor 610 can detect and execute scripts and other logic embedded in web resources to implement system 100 (see Figure 1). In some of these examples, some of the scripts 615 embedded in web resource 605 may include GPU-accelerated logic that is executed directly by the GPU 612. The main processor 610 and the GPU can be combined to render the design interface being edited ("DIUE611") onto the display component 640. The rendered design interface may include web content from browser 625, as well as design interface content and functional elements generated by scripts and other logic embedded in web resource 605. By including scripts 615 that can be executed directly on the GPU 612, the logic embedded in web resource 605 can better execute system 100, as illustrated by various examples.

[0081] summary While each example is described in detail with reference to the accompanying drawings, it should be understood that these concepts are not limited to these exact examples. Therefore, the scope of the concepts is intended to be defined by the following claims and their equivalents. Furthermore, it is intended that it may be possible to combine specific features described individually or as part of an example with other features described individually or as part of other examples, even if these other features and examples do not refer to that particular feature. Therefore, the absence of description of such combinations should not negate any right to such combinations.

Claims

1. A computer system, wherein the computer system is One or more processors, Memory for storing a set of instructions and The processors include, and the one or more processors are capable of executing instructions stored in the memory to cause the computer system to perform the following operations, the operations being: Steps to provide a design interface for graphic design, A step that enables a user to associate a first layer of the graphic design with a variable data structure, wherein the first layer includes a single component associated with a plurality of instances, and the plurality of instances collectively define and enable a plurality of states associated with the component. A step enabling a user to link a second layer of the graphic design to the variable data structure, wherein the second layer is different from the first layer and includes objects different from the components. (i) setting an active value for the variable data structure based on the attributes of one instance of the plurality of instances of the component, and (ii) automatically configuring the attributes of the object in the second layer based on the active value of the variable data structure, thereby performing a simulation of the graphic design to be deployed in a production environment. A computer system, including a computer system.

2. The aforementioned operation is A step that allows the user to specify events or conditions when associating the first layer with the variable data structure. It further includes, The step of setting the active value of the variable data structure is performed in response to the occurrence of the event or the condition. The computer system according to claim 1.

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

4. The aforementioned operation is The steps include enabling the user to associate multiple layers of the graphic design, including the first layer, with the variable data structure, A step that allows the user to specify the interaction when associating each of the plurality of layers with the variable data structure. It further includes, The step of performing the graphic design simulation includes detecting multiple user interactions with the multiple layers, and, in response to each of the multiple user interactions being detected, setting an active value of the variable data structure based on the attribute value of the corresponding layer of the multiple layers that received the interaction. The computer system according to claim 1.

5. The step of performing the aforementioned simulation is: Steps to automatically change the attributes of another layer among the plurality of layers based on the active value of the variable data structure in response to the detection of each of the plurality of interactions The computer system according to claim 4, including the computer system according to claim 4.

6. A computer implementation method, wherein the computer implementation method is Steps to provide a design interface for graphic design, A step that enables a user to associate a first layer of the graphic design with a variable data structure, wherein the first layer includes a single component associated with a plurality of instances, and the plurality of instances collectively define and enable a plurality of states associated with the component. A step enabling a user to link a second layer of the graphic design to the variable data structure, wherein the second layer is different from the first layer and includes objects different from the components. (i) setting an active value for the variable data structure based on the attributes of one instance of the plurality of instances of the component, and (ii) automatically configuring the attributes of the object in the second layer based on the active value of the variable data structure, thereby performing a simulation of the graphic design to be deployed in a production environment. Computer implementation methods, including those mentioned above.

7. The operation is, A step that allows the user to specify events or conditions when associating the first layer with the variable data structure. It further includes, The step of setting the active value of the variable data structure is performed in response to the occurrence of the event or the condition. The computer implementation method according to claim 6.

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

9. The aforementioned operation is The steps include enabling the user to associate multiple layers of the graphic design, including the first layer, with the variable data structure, A step that allows the user to specify the interaction when associating each of the plurality of layers with the variable data structure. It further includes, The step of performing the graphic design simulation includes detecting multiple user interactions with the multiple layers, and, in response to each of the multiple user interactions being detected, setting an active value of the variable data structure based on the attribute value of the corresponding layer of the multiple layers that received the interaction. The computer implementation method according to claim 6.

10. The step of performing the aforementioned simulation is: Steps to automatically change the attributes of the second layer based on the active value of the variable data structure in response to the detection of each of the plurality of interactions: The computer implementation method according to claim 9, including the method described in claim 9.

11. A non-temporary computer-readable medium, the non-temporary computer-readable medium storing instructions that, when executed by one or more processors of a computer system, cause the computer system to perform the following operations, the operations being: Steps to provide a design interface for graphic design, A step that enables a user to associate a first layer of the graphic design with a variable data structure, wherein the first layer includes a single component associated with a plurality of instances, and the plurality of instances collectively define and enable a plurality of states associated with the component. A step enabling a user to link a second layer of the graphic design to the variable data structure, wherein the second layer is different from the first layer and includes objects different from the components. (i) setting an active value for the variable data structure based on the attributes of one instance of the plurality of instances of the component, and (ii) automatically configuring the attributes of the object in the second layer based on the active value of the variable data structure, thereby performing a simulation of the graphic design to be deployed in a production environment. Non-temporary computer-readable media, including [specific examples of such media].

12. The aforementioned operation is A step that allows the user to specify events or conditions when associating the first layer with the variable data structure. It further includes, The step of setting the active value of the variable data structure is performed in response to the occurrence of the event or the condition. The non-temporary computer-readable medium according to claim 11.

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

14. The aforementioned operation is The steps include enabling the user to associate multiple layers of the graphic design, including the first layer, with the variable data structure, A step that allows the user to specify the interaction when associating each of the plurality of layers with the variable data structure. It further includes, The step of performing the graphic design simulation includes detecting multiple user interactions with the multiple layers, and, in response to each of the multiple user interactions being detected, setting an active value of the variable data structure based on the attribute value of the corresponding layer of the multiple layers that received the interaction. The non-temporary computer-readable medium according to claim 11.

15. The step of performing the aforementioned simulation is: Steps to automatically change the attributes of another layer among the plurality of layers based on the active value of the variable data structure in response to the detection of each of the plurality of interactions A non-temporary computer-readable medium according to claim 14, including the following:

Images