Dynamically generating code for implementing design components in a production environment

Abstract

When a first design component is rendered on the design interface as part of a graphical design, the computational system detects the selection of the first design component, which is associated with a corresponding set of design component characteristics. The computational system determines the code attribute values ​​for that design component characteristic set based on this rule set. In response to detecting a user selection, the computational system dynamically generates a code signature or sample for implementing the first design component in a production environment based on the code attribute values ​​mapped to the design component characteristic set of the first design component.

Description

[0001] Cross-references to related applications This application claims priority to each of (i) U.S. Patent Application No. 18 / 750,948, filed June 21, 2024, and (ii) U.S. Provisional Patent Application No. 63 / 626,526, filed January 29, 2024, the entire contents of which are incorporated herein by reference. Technical Field

[0002] The examples described in this article relate to a graphical design system, and more specifically to a system for dynamically generating code for implementing design components in a production environment. Background Technology

[0003] Software design tools are diverse and widely used. In the field of application user interfaces, for example, software design tools require designers to integrate the functional aspects of a program with aesthetic and even legal requirements, thereby obtaining a set of pages that form the user interface of the application. For a given application, designers often have many goals and requirements that are difficult to track.

[0004] Developers are often unfamiliar with the intricate and numerous details of graphic design. This unfamiliarity can be a source of inefficiency, as they frequently need to meticulously examine graphic designs, review designer annotations, and keep these details in mind while writing code. This not only reduces the efficiency of their tasks but also makes them prone to errors due to the inherent layers of detail in graphic design. For example, developers can easily overlook pixel distances between objects, corner properties, and other attributes that are difficult to spot without close inspection. Attached Figure Description

[0005] Figure 1A The figure illustrates a system implemented using a graphical design according to one or more embodiments.

[0006] Figure 1B An example of a developer resource component 140 according to one or more embodiments is illustrated.

[0007] Figure 2A The illustration depicts example methods for connecting design components to a code representation, according to one or more embodiments.

[0008] Figure 2B and Figure 2C Each illustration depicts an example method, according to one or more embodiments, for dynamically generating a code set for implementing design components in a production environment.

[0009] Figure 3The illustration shows an example design interface according to one or more embodiments, including a user interface for displaying dynamically generated code for implementing design components in a production environment.

[0010] Figure 4 The illustration shows a computer system on which one or more embodiments can be implemented.

[0011] Figure 5 The illustration depicts a user computing device used in conjunction with one or more examples. Detailed Implementation

[0012] Examples include computing systems, computer implementation methods, and non-transitory computer-readable storage media for implementing a graphical design interface that automates or otherwise facilitates the creation of production environment code and documentation and its association with specific design elements of the graphical design.

[0013] The computational system implements operations to store a set of rules for mapping design component characteristics to code attribute values. When a first design component is rendered on the design interface as part of a graphical design, the computational system detects a user selection for the first design component, which is associated with a corresponding set of design component characteristics. The computational system determines the code attribute values ​​for that design component characteristic set based on this set of rules. In response to detecting a user selection, the computational system dynamically generates a code signature or sample for implementing the first design component in a production environment based on the code attribute values ​​mapped to the design component characteristic set.

[0014] In each example, while rendering the first design component selected by the user on the design interface, the computing system displays dynamically generated code signatures or samples in a panel area. For example, the panel area can be positioned adjacent to the design interface. Users (e.g., developers) can interact with components such as those rendered on the design interface via the design interface to trigger the creation of code signatures and / or samples for the components of the graphic design.

[0015] Additionally, in each example, if the same user or another user (e.g., a collaborating user) changes the properties of a component, the computing system can automatically update the code signature and / or sample to reflect the changes made to the component through the design interface.

[0016] In each example, the computing system stores a set of custom code snippets for components in a component library, which are then reused by the designer, for example, by combining them with enterprise accounts. The computing system dynamically generates code signatures or samples by integrating code attribute values ​​with the custom code snippets of the first designed component.

[0017] In each variant, the computing system filters custom code snippets for the first design component based on code attribute values ​​mapped to the design component feature set. Thus, when the signature and / or sample are displayed in the panel area provided by the design interface, the signature and / or sample are also configured to include code specifically customized for the first design component.

[0018] Furthermore, in the examples, users can interact with the panel area (or the features provided herein) to open a code editor and interact directly with at least a portion of the codebase used to implement the first design component. Users / developers can, for example, generate additional or alternative samples to display in the panel area and / or use with the codebase to implement the graphical design in a production environment.

[0019] The one or more embodiments described herein specify methods, techniques, and actions performed by a computing device that are executed in a programmatic manner or as computer-implemented methods. As used herein, "in a programmatic manner" means using code or computer-executable instructions. These instructions may be stored in one or more memory resources of the computing device. The steps executed in a programmatic manner may or may not be automatic.

[0020] One or more embodiments described herein may be implemented using program modules, engines, or components. A programmatic module, engine, or component may include a program, subroutine, part of a program, or a software or hardware component capable of performing one or more specified tasks or functions. As used herein, a module or component may exist independently of other modules or components on a hardware component. Alternatively, a module or component may be a shared element or process of other modules, programs, or machines.

[0021] Some of the embodiments described herein may typically require the use of computing devices, including processing and memory resources. For example, one or more embodiments described herein may be implemented, wholly or partially, on computing devices such as servers, desktop computers, cellular or smartphones, tablets, wearable electronic devices, laptops, printers, digital photo frames, network devices (e.g., routers), and tablet devices. Memory resources, processing resources, and network resources can all be used in conjunction with building, using, or performing any of the embodiments described herein, including by performing any method or by implementing any system.

[0022] Furthermore, one or more embodiments described herein can be implemented using instructions executable by one or more processors. These instructions can be carried on a computer-readable medium. The machines illustrated or described in the accompanying drawings provide examples of processing resources and computer-readable media on which instructions for implementing embodiments of the invention can be carried on and / or executed. Specifically, the numerous machines illustrated by embodiments of the invention include one or more processors and various forms of memory for storing data and instructions. Examples of computer-readable media include persistent storage devices, such as hard disk 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 that carried on mobile phones, multifunction devices, or tablets), and magnetic storage. Computers, terminals, and network-enabled devices (e.g., mobile devices such as mobile phones) are examples of machines and devices utilizing processors, memory, and instructions stored on computer-readable media. Additionally, embodiments can also be implemented in the form of a computer program or a computer-usable carrier medium capable of carrying such a program.

[0023] System Description Figure 1A The illustration shows a graphical design implementation system according to one or more embodiments. (See also: Regarding...) Figure 1A The described Graphical Design Implementation System 100 (“GDIS 100”) can be implemented in any of several different computing environments, including as a device-side application, as a network service, and / or as a collaboration platform. In various examples, GDIS 100 can be implemented using a web-based application 80 executing on user device 10. In other examples, GDIS 100 can be implemented using a dedicated web-based application. As a supplement or alternative, one or more components of GDIS 100 can be implemented as a distributed system, such that the processes described with respect to the various examples execute both on a network computer (e.g., a server) and on user device 10.

[0024] In the various examples, GDIS 100 includes processes 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 to implement the functionality of GDIS 100. Additionally, in some variations, GDIS 100 can be implemented as part of a network service, wherein the web-based application 80 communicates with one or more remote computers (e.g., servers for the network service) to execute the processes of GDIS 100.

[0025] In various examples, user device 10 includes a web-based application 80 that loads processes and data for providing GDIS 100 on user device 10. GDIS 100 may include a rendering engine 120 that enables users to create, edit, and update graphic design files. Furthermore, GDIS 100 may also include a code integration subsystem 180 that combines or otherwise integrates programming code, data, assets, and other logic used for developing graphic designs as part of a production environment.

[0026] In some examples, the web-based application 80 retrieves programmatic resources for implementing GDIS 100 from a website. As a supplement or alternative, the web-based application 80 may also retrieve some or all of the programmatic resources from a local source (e.g., local storage residing on computing device 10). In providing functionality such as that described regarding GDIS 100, the web-based application 80 may also access various types of datasets. These datasets may correspond to files and libraries, which may be stored remotely (e.g., on a server associated with an account) or locally.

[0027] According to the example, a user of device 10 operates a web-based application 80 to access a website where they retrieve and execute programmatic resources to implement GDIS 100. The user can initiate a session to implement GDIS 100, thereby viewing, creating, and editing graphic designs, as well as generating program code for implementing the graphic designs in a production environment. In some examples, the user corresponds to a designer who creates, edits, and refines graphic designs for later use in a production environment.

[0028] In various examples, the web-based application 80 may correspond to commercially available browsers such as Google Chrome (developed by Google), Safari (developed by Apple), and Internet Edge (developed by Microsoft). In such examples, the processes of GDIS 100 can be implemented as scripts and / or other embedded code downloaded by the web-based application 80 from a website. For example, the web-based application 80 may execute code embedded in a webpage to implement the processes of GDIS 100. The web-based application 80 may also execute these scripts to retrieve other scripts and programmatic resources (e.g., libraries) from websites and / or other local or remote locations. By way of example, the web-based application 80 may execute JavaScript embedded in HTML resources (e.g., webpages built according to HTML 5.0 or other versions provided under standards published by the W3C or WHATWG consortium). In other variations, GDIS 100 may be implemented using a dedicated application, such as a web-based application.

[0029] GDIS 100 may include processes represented by a procedural interface 102, a rendering engine 120, a design interface 130, a code editor 132, and a developer resource component 140. Depending on the implementation, these components may execute on user device 10, on a network system (e.g., a server or a combination of servers), or simultaneously on user device 10 and the network system (e.g., as a distributed process).

[0030] The programmatic interface 102 includes procedures for receiving and sending data to components that implement GDIS 100. Additionally, the programmatic interface 102 can be used to retrieve programmatic resources and workspace files 155 for users or user accounts from local or remote sources. In various examples, workspace files 155 include one or more datasets (represented by "graphic design dataset 157") that represent corresponding graphic designs that can be rendered by rendering engine 120. Graphic design dataset 157 can be constructed as one or more hierarchical data structures. In some examples, the graphic design dataset can be constructed to define a graphic design as a collection of design elements, including objects with frames (or shapes) and design attributes.

[0031] Furthermore, in some examples, the graphic design dataset 157 can be organized to include graphic designs on the screen, where each graphic design includes one or more pages (e.g., where each page is a canvas); or to include segments of one or more pages.

[0032] According to one aspect, the programmatic interface 102 also retrieves programmatic resources including an application framework for implementing the design interface 130. The design interface 130 can utilize a combination of native browser-based resources and / or web resources (e.g., application frameworks) provided through the programmatic interface 102 to generate interactive features and tools that can be integrated with the rendering of the graphic design on the canvas. The application framework enables users to view and edit various aspects of the graphic design. Thus, the design interface 130 can be implemented as a functional layer integrated with the canvas on which the graphic design is provided.

[0033] Design interface 130 can detect and interpret user input based on, for example, the location and / or type of the input. The location of the input can refer to a canvas or screen location (such as a touched location) or the start and / or end location of a series of inputs. The type of input can correspond to, for example, one or more input types occurring on the canvas or design elements rendered on the canvas. Such input can be associated with a canvas or screen location to select and manipulate design elements or portions thereof. Based on the canvas or screen location, user input can also be interpreted as input for selecting design tools, such as input provided by the application framework. In an implementation, design interface 118 can use a reference to the corresponding canvas to identify the screen location of the user input (e.g., a "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 location of the input indicates the selection of a tool, an object rendered on the canvas, or an area of ​​the canvas), the frequency of inputs detected within a given time period (e.g., double-click) and / or the start and end positions of an input or a series of inputs (e.g., the start and end positions of a click and a drag), as well as various other input types specified by the user through one or more input devices (e.g., right-click, screen touch, etc.).

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

[0035] Rendering engine 120 uses a graphical design dataset to provide a corresponding graphical user interface design 135 (“GUI design 135”) for design interface 130. GUI design 135 may include a combination of design elements representing a functional user interface for a production environment. In various examples, developers / users can view (and potentially edit) the individual elements of GUI design 135 to see the custom code and resources used to ensure that the element is properly rendered in a production environment. Simultaneously, design users can view and edit GUI design 135 using GDIS 100. Further, in various examples, GUI design 135 may represent multiple states of a functional user interface or feature. For example, GUI design 135 may include design elements representing soft button features for a production environment, which may change state in response to events (e.g., receiving a notification) or user interactions (e.g., input, hover, etc.). Changes in the state of a soft button feature may correspond to, for example, changes in the soft button feature's fill color, size, or other visual attributes. Through GUI design 135, soft button features may be represented by “components” having multiple instances, variations, or alternative sets of characteristics associated with them. Therefore, in the various examples, GUI design 135 can include different types of graphical elements, each of which can be associated with a property having a property value. Each property of a graphical element can include a property type and a property value. For objects, property types include shape, dimension (or size), layer, type, color, line thickness, text size, text color, font, and / or other visual characteristics. Depending on the implementation, these properties reflect the characteristics of a two-dimensional or three-dimensional design. Thus, the property values ​​of individual objects can, for example, define the visual characteristics of the size, color, positioning, layering, and content of elements rendered as part of the design. Further, GUI design 135 can include one or more components, each representing a reusable design element or a set of reusable design elements. In some examples, components can be represented by a main component and instances of the main component, where each instance of the main component and instances differs from each other by variations in one or more properties. The main component and instances of the main component collectively define the state of the corresponding graphical element in the runtime production environment. Although the examples are described in the context of code, alternative examples can be implemented for other types of design elements, such as other types of reusable design elements. In some variations, a component may be defined at least in part by a set of component properties and property values, wherein the component properties and values ​​are associated with the component to define, for example, different states or behaviors of the corresponding graphical element in a runtime production environment.

[0036] In some examples, GDIS 100 enables components to be associated with one or more component property types. Component property types can include, for example, Boolean properties, text properties, and variant properties. Boolean property types can associate graphical or design properties of a component (or an instance thereof) with true / false values. Through design interface 130, a user can toggle Boolean properties to turn the component's graphical properties on or off. Text properties can indicate layers of a component (or an instance thereof) that can be modified using a text string or allow an existing text string to be modified. Variant properties can define a set of design properties (e.g., size, shape, fill color, line color, etc.) for variants (or instances) of a component. Furthermore, in some examples, component property types can include instance swap properties that identify which variant (or instance component) can be swapped with a default value or instance from, for example, a library or collection. Other types of property components can be defined for use with GUI design 135 via GDIS 100.

[0037] GDIS 100 can organize the GUI design 135 by cards, screens (e.g., representing production environment monitor screens), pages (e.g., where each page includes a canvas on which a corresponding graphic design is rendered), and sections (e.g., where each screen includes multiple pages or screens). Users can interact with the design interface 130 to view and edit the GUI design 135. The design interface 130 can detect user input, and the rendering engine 120 can update the GUI design 135 in response to the input. For example, a user can specify input to change a component of the GUI design 135, and in response, the rendering engine 120 updates the GUI design 135 to reflect the change to the component. Additionally, the rendering engine 120 can update the GUI design 135 of the graphic design so that the user immediately sees the changes to the GUI design 135 resulting from the user's interaction.

[0038] Collaborative Environment In the examples, GDIS 100 can be implemented as part of a collaboration platform where multiple users can view and edit graphic designs by operating different computing devices at various locations. As part of the collaboration platform, when a user edits graphic design 135, the changes made by the user are applied in real time to instances of the graphic design on the computer devices of other collaborating users. Similarly, when other collaborators make changes to the graphic design, these changes are reflected in real time through the graphic design dataset. The rendering engine 120 can update the local version of GUI design 135 in real time to reflect the changes made to GUI design 135 by collaborators.

[0039] When the rendering engine 120 makes a change to the graphics design dataset 157, change data 111 representing that change can be transmitted 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 graphics 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 graphics design and transmits the change data 111 to the user devices of other collaborators. Similarly, if another collaborator makes a change to its local instance of the GUI design 135, the corresponding change data 111 can be transmitted from the collaborator's device to the network system 150. The synchronization component 152 updates the network-side representation 151 of the graphics design and transmits the corresponding change data 121 to the user device 10 to update the graphics design dataset 157. The rendering engine 120 then updates the GUI design 135 to reflect the changes from the collaborator's device.

[0040] Change data In various examples, GDIS 100 includes a process for recording and / or detecting changes to the graphic design dataset 157. Change detection can track changes, for example, those entered by a user on a computing device. Alternatively, change detection can be based on change data 121 received from the network system 150 to detect changes to the graphic design dataset 157. Change detection can also be based on changes made by other collaborators to establish a change set for the GUI design 135.

[0041] Furthermore, change detection can take snapshots at different time instances and generate a change dataset to reflect a series of updates to the GUI design 135 (and the graphic design data) within a given time period. For example, change detection can compare snapshots of the graphic design dataset between the time period when the user last edited or viewed the GUI design 135 (e.g., the end of the previous day) and the current time when the user starts a new session (e.g., the same day) to edit or view the graphic design. When the user starts a new session, the network system 150 updates the graphic design dataset with change data 111, which reflects updates to the graphic design from different collaborating users who may have been working on the workspace file 155 at different times.

[0042] In the examples, rendering engine 120 generates visual indicators of the changed dataset on GUI design 135. Design interface 130 can implement the visual indicators as an additional layer or have other functionality that allows users to navigate across the design interface, such as from one point on the canvas to another or from one page to another. Users can navigate from one point to the next by providing input, for example, to view the "next" or "previous" change. Based on the changed dataset, design interface 130 can automatically locate points on the canvas or screen where design elements of GUI design 135 have been changed (e.g., deleted, modified, added, etc.). Furthermore, rendering engine 120 can use the changed dataset to visually indicate what changes have occurred, such as by making previous versions of that part of the design interface visible.

[0043] Code generation In various examples, GDIS 100 includes a process represented by Developer Resource Component 140. Developer Resource Component 140 includes a program interface 142, a Developer Resource User Interface 144, and a mapping engine 146. Program interface 142 includes a process for communicating with Developer Library 138 to retrieve Developer Resource 145. Developer Resource 145 may include a text-based representation of code and scripts, such as a representation provided by a lower-level representation in JavaScript. Alternatively, Developer Resource may be provided as a JavaScript Object Concept (JSON) file for implementing specific elements or aspects of the graphical design and / or GUI design 135 in a production environment. Further, Developer Resource 145 may include code customized for a user or a user's account. In some examples, Developer Resource Component 140 displays Developer Resource 145 in Developer Resource User Interface 144. User Interface 144 may include one or more panels or areas provided adjacent to or concurrently with Design Interface 130. In this way, users / developers can select design elements from GUI design 135 and simultaneously view the associated Developer Resource 145 for that element in Developer Resource User Interface 144.

[0044] In the examples, developer resource component 140 associates a set of developer resources 145 with other reusable design elements of one or more specific design components or graphical design datasets (e.g., design files). This allows developer resources for design components reused in different GUI designs 135 to also be reused. For example, a given account can store a component library along with corresponding development resources 145 for implementing the component library in a production environment. Among other benefits, by enabling the reuse of developer resources 145 using corresponding reusable components and elements, enterprises and other account holders can ensure consistent representation of design elements in code and ensure that developers adhere to guidelines and best practices for representing design elements in a production environment.

[0045] According to the example, developers / users can select components of GUI design 135 through design interface 130 or otherwise interact with components of GUI design 135 to trigger developer resource component 140 to generate or otherwise display the corresponding developer resource 145 for the user-selected component. On design interface 130, the selected component can be represented by a node in the node representation of GUI design 135. The node representing the selected component can include one or more identifiers (“Node ID 141”), such as node identifiers and / or node attributes (e.g., text descriptors provided by the design user). In some examples, program interface 142 uses the node identifier 141 of the selected design component to retrieve and display the corresponding developer resource 145 for that element in developer resource user interface 144.

[0046] Furthermore, in some examples, the mapping engine 146 dynamically generates one or more code representations 159 for the design component. In response to a user selecting a design component via the design interface 130, the mapping engine 146 dynamically generates one or more code representations 159 for the selected component, at least in part, based on the design and component characteristics of the selected component and custom developer resources including code snippets or templates. Thus, in various examples, the developer resources and the program code specifically displayed via the developer resource user interface 144 are generated based on: (i) the corresponding developer resources for the component, which include program snippets or templates customized for the account holder or user of GDIS 100; (ii) the design characteristics of the selected component; and / or (iii) one or more component characteristics of the selected component. In this way, code provided with the developer resource user interface 144 is dynamically generated using custom developer resources (e.g., code snippets or templates) for the component and the design and component characteristics of the selected design component. Dynamically generated code can become part of the codebase used for GUI design 135, making the execution of the code consistent with other programmatic implementations of the same components and tailored to the requirements and / or guidelines of the account holder or user for the corresponding production environment characteristics.

[0047] In some examples, components rendered on GUI design 135 can be updated via user (e.g., designer) input, causing changes to the component's design or characteristics (as indicated by "Node Update 143" for the selected component). Alternatively, changes to components can be made collaboratively by different users using different computers on GUI design 135. In response, developer resource component 140 detects changes to components and automatically and dynamically updates the code representation of the selected component. The updated code representation can be displayed to the user in developer resource user interface 144.

[0048] Users (e.g., developers) can store, copy, edit, or transfer program code displayed using the developer resource user interface 144. Users can interact with the developer resource user interface 144 to open a code editor 132, in which they can view, edit, and / or perform operations such as copying / pasting or transferring the displayed program code to a code repository for use in implementing the GUI design 135. Furthermore, users can interact with the program code to generate examples (or additional examples) of how the program code is implemented.

[0049] Figure 1B An example of a developer resource component 140 according to one or more embodiments is illustrated. Developer resource component 140 represents a process of dynamically generating custom code based on the design and / or characteristics of selected components of GUI design 135.

[0050] According to the example, Developer Resource Component 140 responds to input from a user (e.g., a developer) to select a component of GUI Design 135. In response to the user selection, Developer Resource Component 140 identifies the design and characteristics of the selected component based on attributes, such as those associated with the node elements represented by the selected component. Developer Resource Component 140 may use one or more identifiers of the selected component (e.g., node identifiers and descriptors, represented by “Node ID 141”) to retrieve one or more custom code snippets 139 (or templates) from Developer Resource Library 138 via Program Interface 142, wherein the custom code snippets 139 are associated with components having the same or similar identifiers as the selected component.

[0051] Mapping engine 146 includes design feature / code attribute mapping logic (“DPCA”) 148 that maps the features of a design component to attribute values ​​for the code representation of the design component. In various examples, component features may include boolean features (e.g., features that turn a component on or off), text features (e.g., layers of a component that can be modified using a text string), variant features for defining a set of design features that vary for variants (or component instances), and exchange features (e.g., features for identifying which variants of a component set can be exchanged with other components). Other types of component features may also be included. DPCA mapping logic 148 may include, for example, rules and other logic developed to reflect the goals, guidelines, or practices of one or more users of account holders (e.g., enterprises) and / or GDIS 100. Developer resource component 140 may load DPCA mapping logic 148 from network system 150 and / or developer resource library 138.

[0052] In response to a user selection of a component via a design interface, developer resource component 140 identifies the design and component characteristics of the selected design component. Developer resource component 140 uses one or more identifiers of the selected component to identify a set of custom fragments 149 from developer resource library 138, where each fragment includes a portion of the component's signature or a portion of a sample. Developer resource component 140 uses DPCA mapping logic 148 to map the identified design and component characteristics to attribute values ​​in the code representation of the design component. Additionally, developer resource component 140 integrates the code attribute values ​​with the custom fragments 149 to generate a signature or sample.

[0053] Methodology Figure 2A The illustration depicts example methods for connecting design components to a code representation, according to one or more embodiments. Figure 2B and Figure 2CEach illustration depicts an example method, according to one or more embodiments, for dynamically generating code sets for implementing design components in a production environment. In the description... Figures 2A to 2C For example methods, you can refer to Figure 1A and Figure 1B The components are used to describe the functionality used to perform the described steps or sub-steps.

[0054] refer to Figure 2A Users can interact with components of the design interface to associate the design component with a code set used to implement that design component in a production environment. In some variations, the code set can be predetermined to be customized for an account holder or user. In step 202, the user can select a component of the GUI design 135 via the design interface 130. In step 204, GDIS 100 determines an identifier for the component. For example, the user can generate a link for the component, where the link identifier represents a node of the component. Alternatively, one or more identifiers can be determined based on attributes representing the node of the selected design component. For example, GDIS 100 can determine that the selected component is a "button" based on text attributes (e.g., label) or other attributes of the node representing the component on the design interface 130.

[0055] In step 206, a design-to-code file can be created for the selected design component to link the design component to its code representation. This file logically links the selected design component with the set of code used to implement that component.

[0056] By way of explanation, in the case of a button component, the following pseudocode can represent the code included in the design-to-code file to link the design component with the code set: Designtocode [( designtocodefile: "https: / / local.linktodesigncomponent..." component: Button Examples: [Exampleusage] )] In the provided example, the code representation for the "button" is imported and logically linked to a reference or other identifier used for the design component. Therefore, GDIS 100 can import code from, for example, external resources (e.g., code libraries) based on the identifier or attribute of a node or design component. Furthermore, users can interact with the design-to-code file to modify or expand its contents.

[0057] In step 208, the design-to-code file can be published along with or otherwise integrated with design interface 130. For example, the design-to-code file can be converted into a JavaScript template function, wherein the code representation provided with the design-to-code file can be downcompiled into a low-level JavaScript template function, which can be executed in the sandbox environment of GDIS 100. By utilizing low-level JavaScript representations, the design-to-code file enables various types of code representations to be utilized along with the design-to-code file. In particular, code representations for any of the many different platforms (e.g., iOS, Android, etc.) and code representations that can implement or otherwise provide extensibility using third-party implementations of custom code representations can be downcompiled into the same low-level JavaScript representation used with the design-to-code file.

[0058] Subsequently, when the user interacts with the design components via the design interface, the selection of nodes causes GDIS 100 to call, for example, a JavaScript template function, in which the design component is linked to the corresponding code set.

[0059] In step 210, the code set included in the JavaScript template function is displayed in the developer resources user interface. This allows users (e.g., developers) to interact with the object to see samples or signature sets of the code in a panel area, such as the accompanying design interface.

[0060] As a supplement or variation, JavaScript template functions containing the code set used to implement the design component can be linked to other design components that share the same or similar properties as the substantially selected design component. Therefore, for example, JavaScript template functions can be provided for use with other GUI designs135 that utilize the "button" component.

[0061] according to Figure 2A Some examples show that the code sets used to implement design components or design component types (such as buttons) can be iterated upon or expanded by the user. For example, a user can view successive iterations of the code set used to implement the button code, or view examples illustrating alternative implementations and use cases.

[0062] refer to Figure 2BIn step 220, the logic for mapping design component characteristics to code attribute values ​​(e.g., DPCA mapping logic 148) can be stored as a developer resource. The mapping logic may include a set of dependencies and / or rules for mapping component characteristics (e.g., Boolean characteristics, variant characteristics, interchangeable characteristics, text characteristics, etc.) to code attribute values. The mapping logic can be developed by a user or a user sharing developer resources (e.g., a developer user holding an account).

[0063] In step 222, the user can select a component of the GUI design 135 via design interface 130. In step 224, GDIS 100 determines an identifier for the component. For example, the user can generate a link for the component, where the link identifier represents a node of the component. Alternatively, one or more identifiers can be determined based on attributes representing nodes of the selected design component. According to some variations, in step 226, a design-to-code file can be created for the selected design component to link the design component to a set of developer resources for that component. In this example, developer resources may include mapping logic (e.g., mapping logic such as that described using DPCA mapping logic 148), custom fragments, and / or program code (e.g., samples). In step 228, in conjunction with the design interface for rendering the GUI design 135, the design-to-code file is published along with or otherwise integrated with the design interface 130.

[0064] Subsequently, when the user interacts with the design components via the design interface, the selection of nodes causes GDIS 100 to call, for example, a JavaScript template function linked to the selected design component.

[0065] In step 230, GDIS 100 uses JavaScript template functions to dynamically generate code for implementing the designed components in a production environment. In various examples, GDIS 100 uses the mapping logic of the JavaScript template functions (or DPCA mapping logic 148) to map the design and characteristics of the selected components to attribute values ​​in the code representation used to design the components. Attribute values ​​can be integrated with custom code snippets to dynamically generate a code set for implementing the designed components. The code set can be customized to meet, for example, the goals, guidelines, and practices of users or account holders. For example, the code set can be formatted, structured, and / or integrated with values ​​and code attributes that meet the preferences or requirements of users or account holders.

[0066] Subsequently, when a user or collaborator edits a design component, the dynamically generated code can be automatically updated to reflect changes in the design and / or component characteristics. Updates to the code can be displayed, for example, in the developer resource user interface 144. Depending on some aspects, in response to changes made to the design component, updates to the code can be displayed in the developer resource user interface 144 immediately or almost immediately.

[0067] refer to Figure 2C In step 210, a set of logic for mapping design component characteristics to code attribute values ​​is stored. This logic may include rules, dependencies, values, and other data. This logic may be developed by the user or through a machine learning process.

[0068] In step 252, when the first design component is rendered on the design interface as part of the canvas, the GDIS100 detects the user selection of the first design component, which is associated with the corresponding design and component feature set.

[0069] In step 254, GDIS 100 determines the code attribute values ​​of the design and component feature set used for designing the component based on mapping logic.

[0070] In step 256, in response to detecting a user selection of a design component, a code set is dynamically generated for the first design component based on code attribute values ​​mapped to the design component feature set of the first design component. As described by other examples, the dynamically generated code set may be displayed to the user (e.g., a developer) along with or together with the rendered GUI design 135.

[0071] Example Interface Figure 3 The illustration shows an example design interface, based on one or more examples, including a user interface for displaying dynamically generated code used to implement design components in a production environment. Design interface 300 can render a GUI design 300 (see also GUI design 135 in Figure 1) that can be viewed and edited by a designer or other user. Developers can access design interface 300 to (i) view the GUI design 300; (ii) view design data (e.g., attributes, characteristics, names, etc.) used in conjunction with code representation 145; (iii) inspect and / or edit portions of code representation 145, particularly in the context of corresponding portions of GUI design 135; and / or (iv) write or generate code to implement design elements rendered on the canvas as part of GUI interface 300.

[0072] GUI design 300 may include, for example, components and their variants or instances (collectively referred to as "components"). These components may represent alternative states of graphical user interface features in a production environment. In the illustrated implementation, the appearance of a component can be varied by a limited number of design properties (e.g., fill color), where changes in property values ​​represent specific states of functional features. Users can interact with individual components to view the data and code used to implement each design component. When design component 304 is selected, design component properties panel 312 may display component properties (e.g., Boolean property values) and design properties (e.g., fill color) for the component. GUI design 300 may include design properties panel 314, which, for example, displays CSS data for the selected component. GUI design 300 may also include code panel 320, in which dynamically generated code can be rendered based on the described examples. Code panel 320 provides information on how developer resource user interface 144 can be implemented (see...). Figure 1A and Figure 1B Examples of ).

[0073] Network computer system Figure 4 The illustration shows a computer system on which one or more embodiments can be implemented. Computer system 400 can be implemented, for example, on a server or a combination of servers. For example, computer system 400 can be implemented as... Figure 1A The GDIS100.

[0074] In one implementation, computer system 400 includes processing resources 410, memory resources 420 (e.g., read-only memory (ROM) or random access memory (RAM)), one or more instruction memory resources 440, and a communication interface 450. Computer system 400 includes at least one processor 410 for processing information stored with memory resources 420, such as information provided by random access memory (RAM) or other dynamic storage devices for storing information and instructions executable by processor 410. Memory resources 420 can also be used to store temporary variables or other intermediate information during instruction execution by processor 410.

[0075] Communication interface 450 enables computer system 400 to communicate with one or more user computing devices over one or more networks (e.g., cellular networks) via network link 480 (wireless or wired). Using network link 480, computer system 400 can communicate with one or more computing devices, dedicated devices and modules, and / or one or more servers.

[0076] In each example, processor 410 can execute service instructions 422 stored together with memory resources 420, so that the network computing system can implement the examples described.

[0077] Computer system 400 may also include additional memory resources (“instruction memory 440”) for storing executable instruction sets (“IGDS instructions 444”) embedded through web pages and other web resources to enable user computing devices to implement functionalities such as those described by GDIS 100.

[0078] Thus, the examples described herein relate to implementing the techniques described herein using computer system 400. According to one aspect, the techniques are executed by computer system 400 in response to processor 410 executing one or more sequences of one or more instructions contained in memory 420. These instructions may be read into memory 420 from another machine-readable medium. Executing the sequence of instructions contained in memory 420 causes processor 410 to perform the process steps described herein. In various alternative implementations, hard-wired circuitry may be used in place of or in combination with software instructions to implement the examples described herein. Therefore, the described examples are not limited to any particular combination of hardware circuitry and software.

[0079] User computing devices Figure 5 The illustration depicts a user computing device used in conjunction with one or more examples. In each example, user computing device 500 may correspond to, for example, a workstation, desktop computer, laptop computer, or other computer system with graphics processing capabilities, suitable for enabling the rendering of design interfaces and graphic design work. In various variations, user computing device 500 may correspond to a mobile computing device, such as a smartphone, tablet, laptop computer, VR or AR headset, etc.

[0080] In various examples, computing device 500 includes a central processing unit or main processor 510, a graphics processing unit 512, memory resources 520, and one or more communication ports 530. Computing device 500 can use the main processor 510 and memory resources 520 to store and launch a browser 525 or other web-based applications. A user can operate the browser 525 to access web service websites using communication ports 530, where one or more web pages or other resources 505 can be downloaded for the web service. Web resources 505 can be stored in active memory 524 (cache).

[0081] As described through various examples, processor 510 can detect and execute scripts and other logic embedded in web resources to implement GDIS 100. In some examples, some scripts in script 515 embedded with web resource 505 may include GPU-accelerated logic, which is executed directly by GPU 512. Main processor 510 and GPU can be combined to render GUI design 511 on display component 540. The rendered design interface may include web content from browser 525 and design interface content and functional elements generated by scripts and other logic embedded with web resource 505. As described through various examples, the logic embedded with web resource 505 can better perform GDIS 100 by including script 515 that is directly executable on GPU 512.

[0082] in conclusion Although examples have been described in detail herein with reference to the accompanying drawings, it should be understood that these concepts are not limited to these precise examples. Therefore, the scope of these concepts is intended to be defined by the following claims and their equivalents. Furthermore, it should be contemplated that a particular feature described in various ways, or a particular feature described as part of an example, may be combined with other features described in various ways or portions of other examples, even if the other features and examples do not mention that particular feature. Therefore, the lack of description of combinations should not exclude rights to such combinations.

Claims

1. A computer-implemented method, comprising: Stores a set of rules used to map design component characteristics to code attribute values; When the first design component is rendered on the design interface as part of the graphic design on the canvas, the user selection of the first design component is detected, and the first design component is associated with the corresponding design component feature set. The code attribute values ​​for the feature set of the design component are determined based on the rule set. as well as In response to detecting the user selection, a code signature or sample for implementing the first design component in a production environment is dynamically generated based on the code attribute values ​​mapped to the design component feature set of the first design component.

2. The computer-implemented method as described in claim 1, further comprising: Store a set of custom code snippets for one or more design components, said one or more design components including the first design component; The dynamic generation of the code signature or sample includes integrating the code attribute value with the custom code snippet used for the first design component.

3. The computer-implemented method of claim 2, wherein integrating the code attribute value with the custom code snippet for the first design component comprises: The custom code snippets used for the first design component are filtered based on the code attribute values ​​mapped to the design component feature set of the first design component.

4. The computer-implemented method as described in claim 1, further comprising: While rendering the first design component selected by the user on the design interface, a dynamically generated code set is displayed in the panel.

5. The computer-implemented method as described in claim 4, further comprising: This allows users to interact with the panel to view the dynamically generated code set in the code editor.

6. The computer-implemented method as described in claim 5, further comprising: This enables the user to interact with the code editor to create alternative code sets for implementing the first design component in the production environment; as well as The panel automatically displays the alternative code set.

7. The computer-implemented method as described in claim 1, further comprising: Changes to the first design component are detected based on user input provided through the design interface; The code signature for the first design component is automatically updated based on corresponding changes to the characteristics of the design component.

8. The computer-implemented method of claim 1, wherein the design component characteristics include a Boolean property for determining whether a layer of the first design component is visible or invisible.

9. The computer-implemented method of claim 1, wherein the design component characteristics include textual characteristics.

10. The computer-implemented method of claim 1, wherein the design component characteristics include variant characteristics that define the first design component as a variant of another design component.

11. The computer-implemented method of claim 1, wherein the design component characteristics include instance switching characteristics.

12. A non-transitory computer-readable medium storing instructions, which, when executed by one or more processors of a computer system, cause the computer system to perform operations including: Stores a set of rules used to map design component characteristics to code attribute values; When the first design component is rendered on the design interface as part of the graphic design on the canvas, the user selection of the first design component is detected, and the first design component is associated with the corresponding design component feature set. The code attribute values ​​for the feature set of the design component are determined based on the rule set. as well as In response to detecting the user selection, a code signature or sample for implementing the first design component in a production environment is dynamically generated based on the code attribute values ​​mapped to the design component feature set of the first design component.

13. The non-transitory computer-readable medium of claim 12, wherein the operation further comprises: Store a set of custom code snippets for one or more design components, said one or more design components including the first design component; The dynamic generation of the code signature or sample includes integrating the code attribute value with the custom code snippet used for the first design component.

14. The non-transitory computer-readable medium of claim 13, wherein integrating the code attribute value with the custom code snippet for the first design component comprises: The custom code snippets used for the first design component are filtered based on the code attribute values ​​mapped to the design component feature set of the first design component.

15. The non-transitory computer-readable medium of claim 12, wherein the operation further comprises: While rendering the first design component selected by the user on the design interface, a dynamically generated code set is displayed in the panel.

16. The non-transitory computer-readable medium of claim 15, wherein the operation further comprises: This allows users to interact with the panel to view the dynamically generated code set in the code editor.

17. The non-transitory computer-readable medium of claim 16, further comprising: This enables the user to interact with the code editor to create alternative code sets for implementing the first design component in the production environment; as well as The panel automatically displays the alternative code set.

18. The non-transitory computer-readable medium of claim 12, further comprising: Changes to the first design component are detected based on user input provided through the design interface; The code signature for the first design component is automatically updated based on corresponding changes to the characteristics of the design component.

19. The non-transitory computer-readable medium of claim 12, wherein the design component characteristics include variant characteristics that define the first design component as a variant of another design component.

20. A computing system, comprising: One or more processors; The memory stores resources, and the memory stores instruction sets; The one or more processors thereon execute the instruction set to perform operations including the following: Stores a set of rules used to map design component characteristics to code attribute values; When the first design component is rendered on the design interface as part of the graphic design on the canvas, the user selection of the first design component is detected, and the first design component is associated with the corresponding design component feature set. The code attribute values ​​for the feature set of the design component are determined based on the rule set. as well as In response to detecting the user selection, a code signature or sample for implementing the first design component in a production environment is dynamically generated based on the code attribute values ​​mapped to the design component feature set of the first design component.

Images