Annotations for graphic design systems

Abstract

The graphic design system maintains a graphic design dataset for graphic design, which is organized into a group of layers. In response to user interaction with a selected layer from the group, the graphic design system generates annotations that display, indicate, or are based on selected attributes of the selected layer. The graphic design system also logically links the annotations to the selected attributes. As a result, updates to the selected layer from the group automatically update the annotations.

Description

Related Application

[0001] This application claims the benefit of priority from (1) U.S. Patent Application No. 18 / 751084 filed on June 21, 2024, (2) U.S. Provisional Patent Application No. 63 / 522526 filed on June 22, 2023, and (3) U.S. Provisional Patent Application No. 63 / 522411 filed on June 21, 2023, the entire contents of each of which are incorporated herein by reference. Technical Field

[0002] Embodiments described herein relate generally to graphic design systems, and more specifically to annotations for graphic design systems. Background Art

[0003] Software design tools have many forms and applications. In the field of application user interfaces, for example, software design tools require designers to integrate aesthetic sensibility and even legal requirements into the functional aspects of a program, to generate a set of pages that form the user interface of an application. For a given application, designers often have many goals and requirements that are difficult to track.

[0004] Developers are often unfamiliar with the esoteric and potentially fine-grained details of graphic design. This unfamiliarity can often cause inefficiencies for developers, who must carefully review graphic designs while paying attention to details, review annotations from designers, and write code. While a developer's work can be efficient, the level of detail often involved in graphic design makes the developer's work prone to errors. For example, pixel distances between objects, corner attributes, and other attributes can be difficult to discern without careful attention, and developers can easily misread these values. Summary of the Invention Means for Solving the Problem

[0005] The graphic design system of the present invention maintains a graphic design dataset for graphic design. The graphic design dataset consists of a set of layers in which the graphic design is organized, with each layer corresponding to an object, a group of objects, or an object of a certain type, and each layer being associated with a set of attributes including a character identifier. In response to user interaction with a selected layer from the set, the graphic design system generates annotations that display, indicate, or are based on the selected attributes of that layer. The graphic design system also logically links these annotations to the selected attributes. As a result, updates to the selected layer from the set automatically update its annotations. [Brief explanation of the drawing]

[0006] [Figure 1] A graphic design system for creating annotations according to one or more embodiments is illustrated. [Figure 2A] An example of a method for generating attribute-bound annotations according to one or more embodiments is illustrated. [Figure 2B] An example of a method for creating attribute objects pinned to layers of a graphic design according to one or more embodiments is illustrated. [Figure 3] Examples of design interfaces for executing annotation objects according to several embodiments are illustrated. [Figure 4A] An example of a design interface including a graphic design on which attribute-linked annotations according to one or more embodiments may be provided is illustrated. [Figure 4B] An example of a design interface including a graphic design on which attribute-linked annotations according to one or more embodiments may be provided is illustrated. [Figure 4C] An example of a design interface including a graphic design on which attribute-linked annotations according to one or more embodiments may be provided is illustrated. [Figure 5A] An example design interface for enabling a user of one or more embodiments to create attribute-bound annotations for graphic design is illustrated. [Figure 5B] An example design interface for enabling a user of one or more embodiments to create attribute-bound annotations for graphic design is illustrated. [Figure 5C] An example design interface for enabling a user of one or more embodiments to create attribute-bound annotations for graphic design is illustrated. [Figure 5D] An example design interface for enabling a user of one or more embodiments to create attribute-bound annotations for graphic design is illustrated. [Figure 5E] An example of a design interface that runs in another mode in which attribute-bound annotations according to one or more embodiments are drawn or made available is illustrated. [Figure 6] A computer system on which one or more embodiments may be implemented is illustrated. [Figure 7] A user computing device used in conjunction with one or more of the described embodiments is illustrated. [Modes for carrying out the invention]

[0007] In this embodiment, the graphic design system maintains a graphic design dataset for graphic design. The graphic design dataset consists of a set of layers, each layer corresponding to an object, a group of objects, or an object of a certain type, and each layer is associated with a set of attributes, including a character identifier. In response to user interaction with a selected layer from the set, the graphic design system generates annotations that display, indicate, or are based on the selected attributes of that layer. The graphic design system also logically links these annotations to the selected attributes. As a result, updates to the selected layer from the set automatically update its annotations.

[0008] In the embodiments, term attributes and characteristics are interchangeable. In some embodiments, attribute (or characteristic) values ​​may be formatted as numeric or character values. Other types of values ​​are possible. For example, in the case of color, its value may be expressed as hexadecimal, hue, saturation, or lightness (HSL) and / or sample.

[0009] In this embodiment, the graphic design system provides multiple drawing modes for viewing the graphic design. These modes may include a design mode (e.g., annotations are hidden) and a developer mode. In developer mode, all annotations created for the graphic design are visible. Therefore, for a specific part of the graphic design being viewed, the user can see all annotations created for that part of the graphic design by simply switching the design interface of the graphic design system from the first mode (e.g., design mode) to developer mode.

[0010] As explained, annotations can be linked to one or more design elements, layers, and / or attribute values. Linked annotations are also automatically updated based on modifications to the graphic design. For example, if an attribute or measurement mentioned in an annotation is modified as a result of editing the graphic design system, the annotation is also automatically changed to reflect the modified attribute or measurement.

[0011] One or more embodiments described herein specify that the methods, techniques, and operations performed by the computing device are performed by program or as computer execution. As used herein, “by program” means by the use of code or a set of computer-executable instructions. These instructions may be stored in one or more memory resources of the computing device. The steps performed by program may or may not be automatic.

[0012] One or more embodiments described in this document may be executed using a program module, engine, or component. A program module, engine, or component may include a program, a subroutine, a part of a program, or a software or hardware component capable of performing one or more described tasks or functions. As used in this document, a module or component may reside on a hardware component independently of other modules or components. Alternatively, a module or component may be a common element or process of other modules, programs, or machines.

[0013] Some embodiments described herein may typically require the use of a computing device having processing and memory resources. For example, one or more embodiments described herein may be implemented in whole or in part on computing devices such as servers, desktop computers, mobile phones or smartphones, tablets, wearable electronic devices, laptop computers, printers, digital picture frames, network equipment (e.g., routers), and tablet devices. Memory, processing resources, and network resources may all be used in connection with the establishment, use, or execution of any embodiment described herein (including in connection with the execution of any method or the implementation of any system).

[0014] Furthermore, one or more embodiments described herein may be implemented using instruction sets executable by one or more processors. These instructions may be stored on computer-readable media. The machines shown or described in the following figures provide examples of processing resources and computer-readable media on which instruction sets for implementing embodiments of the present invention may be stored and / or executed. In particular, many of the machines shown in embodiments of the present invention include a processor and various forms of memory for holding data and instruction sets. Examples of computer-readable media include permanent memory storage devices such as hard drives on personal computers or servers. Other examples of computer storage media include portable storage devices such as CD or DVD drives, flash memory (e.g., stored in smartphones, multifunction devices, and / or tablets), and magnetic memory. Computers, terminals, and networkable devices (e.g., portable devices such as mobile phones) are all examples of machines and devices that utilize a processor, memory, and instruction sets stored on computer-readable media. Furthermore, embodiments may be implemented in the form of computer programs or in the form of computer-readable storage media on which such programs can be stored.

[0015] System Description Figure 1 illustrates a graphic design system according to one or more embodiments. As shown in Figure 1, the graphic design system 100 (GDS 100) provides tools for a designer to create graphic user interface content (graphic design 135) for runtime and manufacturing environments. Among other aspects, GDS 100 can be used to define various types of interactions, state transitions, and runtime behaviors that may occur when the graphic user interface content is executed in a runtime or manufacturing environment, based on constraints and logical relationships defined between design elements of the graphic user interface content, for example. The graphic user interface content can be used to generate a code representation of the graphic user interface content, the code representation including various constraints and logical relationships that define interactions, state transitions, and behaviors in a runtime or manufacturing environment. As described in various examples, GDS 100 allows a designer to create annotations that assist a developer when developing code for implementing a runtime or manufacturing environment in which the graphic design 135 is used.

[0016] According to an embodiment, GDS 100 may be implemented in any one of a number of different computing environments including device-side applications, network services, and / or collaborative platforms. In an embodiment, GDS 100 may be implemented using a web-based application 80 running on the user device 10. In another embodiment, GDS 100 may be implemented through use of a dedicated web-based application. Additionally or alternatively, one or more components of GDS 100 may be implemented as a distributed system, wherein processes described in various embodiments run on both a network computer (e.g., a server) and the user device 10.

[0017] In an embodiment, GDS100 includes a process executed by a web-based application 80 installed in a user device 10. The web-based application 80 may execute scripts, codes, and / or other logic (program elements) to implement the functions of GDS100. Also, 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., a server used for the network service) to execute the process of GDS100.

[0018] In an embodiment, the present invention includes a web-based application 80 that loads processes and data for providing GDS100 onto a user device 10. GDS100 may include a drawing engine 120 that allows a user to generate, edit, and update graphic design files. In variations, GDS100 may also include a code integration subsystem that combines or integrates programming code, data, assets, and other logic codes for developing graphic designs as part of a manufacturing environment.

[0019] In some embodiments, the web-based application 80 reads program resources from a network site to implement GDS100. Additionally or alternatively, the web-based application 80 may read some or all of the program resources from local resources (e.g., a local memory present in the computing device 10). The web-based application 80 may also access various types of data sets when providing the functions described for GDS100. The data sets may correspond to files and libraries that can be stored remotely (e.g., associated with an account on a server) or locally.

[0020] In one embodiment, a user of the device 10 can run a web-based application 80 to access a network site where program resources are read and executed to realize the GDS 100. In some embodiments, the GDS 100 is provided to two classes of users: (1) a design user who can start a session to run the GDS 100 and view, create, and edit graphic designs 135; and (2) a developer who develops code to run the graphic designs 135 in a runtime or production environment.

[0021] In some embodiments, the web-based application 80 may correspond to commercially available browsers, such as Google Chrome (developed by Google), Safari (developed by Apple), and Internet Explorer (developed by Microsoft). In such embodiments, 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 executes code embedded in a web page to run the GDS100 process. The web-based application 80 may also execute scripts to load other scripts and program resources (e.g., libraries) from network sites and / or other local or remote sites. For example, the web-based application 80 may execute JAVASCRIPT® embedded in an HTML resource (e.g., a web page configured according to HTML5.0 or other versions specified in standards published by the W3C or WHATWG consortium). In other variations, the GDS100 may be implemented by using a dedicated application such as a web-based application.

[0022] The GDS100 may include a process represented by a program interface 102, a drawing engine 120, a design interface 130, a code interface 132, and a code generation component 140. Depending on the embodiment, the component may operate on a user device 10, a network system (e.g., a server or a combination of servers), or the user device 10 and the network system (e.g., as a distributed system).

[0023] The program interface 102 includes a process for sending and receiving data to realize components of the GDS 100. In addition, the program interface 102 may be used to read program resources and a set of datasets, including a user or user account workspace file 155, from a local or remote source. In some embodiments, the workspace file 155 includes one or more datasets (represented as graphic design datasets 157) that represent the corresponding graphic designs 135 drawn by the drawing engine 120. The workspace file 155 may include one or more graphic design datasets 157 that collectively define the graphic designs 135 when drawn. The graphic design datasets 157 may be configured as one or more hierarchical data structures. In some embodiments, the graphic design datasets 157 may be configured to define the graphic designs as a group of layers and / or nodes, where each layer or node corresponds to an object, a group of objects, or an object of a particular type. In some embodiments, the graphic design dataset 157 may be configured to include graphic designs on multiple screens, with each graphic design including one or more cards, pages (e.g., one canvas per page), or sections containing one or more pages.

[0024] In one embodiment, the program interface 102 also loads program resources, including an application framework for implementing the design interface 130. The design interface 130 can utilize a combination of local browser-based resources and / or network resources (e.g., the application framework) provided by the program interface 102 to generate interactive functions and tools that can be integrated with the representation of a graphic design on a canvas. The application framework can enable the user to view and edit the drawn graphic design. Thus, the design interface 130 can be implemented as a functional layer on which the graphic design is integrated with the canvas on which it is presented.

[0025] The design interface 130 can detect and interpret user input, for example, based on the input location and / or input type. The input location can refer to the canvas or screen location for, for example, the start and / or end positions of a tap or continuous input. The input type corresponds to one or more types of inputs that occur with respect to the canvas or design elements drawn on the canvas. Such inputs can select and manipulate design elements or parts thereof in correlation with the canvas or screen location. Based on the canvas or screen location, user input can also be interpreted as input for selecting a design tool (for example, which may be provided by the application framework). In embodiments, the design interface 130 can determine the screen location of a user input (e.g., a click) using a corresponding canvas reference. Furthermore, the design interface 130 can interpret user input operations based on the location of detected inputs (for example, the location of an input indicating the selection of a tool, an object drawn on the canvas, or an area of ​​the canvas), the frequency of inputs detected over a specific period (for example, double-clicks), and / or the start and end positions of an input or a series of inputs (for example, the start and end positions of clicks and drags), as well as various other input types that the user can specify via one or more input devices (for example, right-clicks, screen taps, etc.).

[0026] In some embodiments, the rendering engine 120 and / or other components utilize logic accelerated by a graphics processing unit (GPU), such as logic provided by a WebGL (Web Graphics Library) program that runs a Graphics Library Shader Language (GLSL) 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 in various examples. The web-based application 80 may also 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.).

[0027] In the embodiment, the drawing engine 120 generates a graphic design 135 using a graphic design dataset 157, and the graphic design 135 includes geometric elements, attributes, and attribute values. Each attribute of a geometric element may include an attribute type and an attribute value. For objects, the attribute type may include shape, dimensions (or size), layer, type, color, line width, font size, font color, font, and / or other visual characteristics. Depending on the embodiment, the attributes represent characteristics of a two-dimensional or three-dimensional design. Thus, the attribute values ​​of individual objects may define, for example, the visual characteristics of the size, color, positioning, hierarchy, and content of elements drawn as part of the design.

[0028] The graphic design 135 can be composed of multiple screens (e.g., a manufacturing environment computer screen), multiple pages (e.g., each page contains a canvas on which the corresponding graphic design is drawn), and multiple sections (e.g., each screen contains multiple pages or screens). The user can interact with the graphic design 135 via the design interface 130, viewing and editing the graphic design. The design interface 130 can detect user input, and the workspace file 155 and / or GDDR 157 can be updated based on that input, and the drawing engine 120 can update the graphic design 135 in response to that input. The drawing engine 120 can also perform navigation operations to increase or decrease the zoom level and / or move the view left or right. When performing such navigation operations, the drawing engine 120 can specify the zoom level or portion of the graphic design 135 for the user's viewing area. The user can specify inputs to change the display of the graphic design 135 (e.g., zoom in or out of the graphic design), and in response, the drawing engine 120 updates the graphic design 135 to reflect the change in the display.

[0029] The drawing engine 120 can also modify the graphic design 135. The design interface 130 can detect input, and the drawing engine 120 updates the graphic design dataset 157 and draws the updated graphic design 135. In addition, the drawing engine 120 can update the graphic design 135, and the user can immediately see the changes to the graphic design 135 resulting from user interaction.

[0030] collaborative environment In this embodiment, GDS100 may be implemented as part of a collaborative platform, and the graphic design 135 may be viewed and edited by multiple users operating separate computing devices in various locations. Each collaborator's user device receives a local version of the workspace file 155, and each user device can draw the graphic design 135 from the same workspace file 155. While each collaborator's workspace file 155 is synchronized, each collaborator can view and edit the graphic design 135 independently. As part of the collaborative platform, when a user edits the graphic design 135, the changes made by the user are reflected in real time in the instance of the workspace file 155 on the user devices of other collaborators. Similarly, when other collaborators make changes to the graphic design 135, those changes are reflected in real time in the workspace file 155 and the graphic design dataset 157. On each collaborator's device, the drawing engine 120 can update the local version of the workspace file 155 to reflect changes to the graphic design 135 (including changes made by other collaborators) in real time.

[0031] In this embodiment, when the drawing engine 120 makes a change to the graphic design dataset 157, the corresponding change data 111 representing that change may be sent to the network system 150. The network system 150 can maintain the network-side representation 151 of the graphic design by performing one or more synchronization processes (represented by synchronization components 152). In response to receiving the change data 111 from the user device 10, the network system 150 updates the network-side representation 151 of the workspace file 155 and sends the change data 111 to the user device of another collaborator. Similarly, when another collaborator makes a change to an instance of the workspace file 155 on their own device, the corresponding change data 111 may be sent from the collaborator's device to the network system 150. The synchronization component 152 updates the network-side representation 151 of the workspace file 155 and sends the corresponding change data 121 to the user device 10, updating each copy of the workspace file 155. On each collaborating device, the drawing engine 120 updates the graphic design 135 drawn from the corresponding copy of the workspace file 155 in real time.

[0032] Changed data In the embodiment, the GDS 100 may include a process represented by a change detection component 122 that records and / or detects changes to a graphic design dataset 157. The change detection component 122 can track changes entered, for example, by a user of the computing device 10 via the design interface 130. In addition or alternatively, the change detection component 122 can detect changes to the graphic design dataset 157 based on change data 121 received from a network system 150. The change detection component 122 can make a set of changes to the graphic design 135 based on changes made by other collaborators.

[0033] Furthermore, the change detection component 122 can take snapshots at various times and generate a change dataset 125 that reflects a series of updates to the graphic design 135 (and graphic design data representation or GDDR 157) over a specific period. For example, the change detection component 122 can compare snapshots of the graphic design dataset 157 between the time when the user last edited or viewed the graphic design 135 (e.g., the end of the previous day) and the current time when that user starts a new session to edit or view the graphic design (e.g., the current day). When the user starts a new session, the network system 150 updates the graphic design dataset 157 with change data 121 that reflects updates to the graphic design from different collaborating users who worked on the workspace file at different times.

[0034] In the embodiment, the drawing engine 120 generates a visual representation of the change dataset 125 on the graphic design 135. The design interface 130 can be implemented as an additional layer or with other functions that allow the user to navigate the design interface (e.g., from one point on the canvas to another or from one page to another). The user can navigate from one point to the next by providing input, for example, to see the next change or the previous change. Based on the change dataset 125, the design interface 130 can automatically find points on the canvas or screen where design elements of the graphic design 135 have been changed (e.g., erased, modified, added, etc.). The drawing engine 120 can also use the change dataset 125 to visually indicate what changes have occurred, for example, by making the previous version of that part of the design interface visible.

[0035] Code generation In the embodiment, GDS100 is a process represented by a code generation component 140 that includes a process for generating code data for a code representation 145 of a graphic design. The code generation component 140 may include a process for accessing GDDR157 of a workspace file 155 to generate code data representing elements of the graphic design. The generated code data may include a set of manufacturing environment executable instructions (e.g., "JavaScript", HTML, etc.) and / or information (e.g., CSS (Cascading Style Sheets)), resources (e.g., elements in a library), and other types of data.

[0036] In some embodiments, the graphic design dataset 157 is configured to define multiple layers, each layer corresponding to an object, a group of objects, or an object of a particular type. In specific examples, layer types may include frame objects, groups of objects, parts (i.e., objects consisting of multiple objects that reflect states or other variations between instances), character objects, images, constructive logic that enables layout or positional linking between multiple objects, and other default types of elements. For each layer, the code generation component 140 generates a set of code data associated with or linked to the design element. For example, each layer of the graphic design dataset 157 may contain an identifier, and the code generation component 140 may generate a set of code data associated with the identifier of that layer for each layer. The code generation component 140 may generate the code representation 145 such that the code line entries and elements (e.g., lines of code, sets of executable information, etc.) of the code representation 145 are associated with a particular layer of the graphic design 135. The association may map a line of code entry in the code representation 145 to a corresponding design element (or layer) in the graphic design 135 (represented by the graphic design dataset 157). Thus, each line of code in the code representation 145 may be associated with a specific layer or design element in the graphic design. Similarly, in the embodiment, each layer or design element may be associated with a line of code in the code representation 145 of the graphic design 135.

[0037] Code representation drawing In the embodiment, the code interface 132 depicts an organized representation of the code representation 145. For example, the code interface 132 may divide the representation area into separate areas (including separate segments where manufacturing environment executable code instructions are displayed; for example, separate areas for HTML and CSS code). The code interface 132 may also include another segment that identifies assets used in the graphic design (for example, design elements that are part of a library related to a user-related account library).

[0038] The code interface 132 can implement a combination of local browser-based resources and / or network resources (e.g., application frameworks) provided by the program interface 102, and can generate a set of interactive functions and tools to display the code representation 145. In the embodiment, the code interface 132 can make elements of the code representation 145 individually selectable as input. For example, the user may select one or more of the following as input: (1) a line of code, (2) a portion of a line of code corresponding to an attribute, or (3) a portion of a line of code reflecting an attribute value. The user can also select program code data displayed in separate areas, different types of program code (e.g., HTML or CSS), assets, and other program data elements.

[0039] Select the code and view the design elements. The code interface 132 can detect user input and select code elements. Upon detecting user input for a specific code element, the code interface 132 can identify the design elements (or layers) associated with that code element and notify the design interface 130. For example, the code interface 132 can identify a specific layer indicated by the user's selection input. The code interface 132 can then display the identified layer or design element to the design interface 130, causing the design interface 130 to highlight or make prominent the design elements associated with the selected code element. In some examples, the design interface 130 can display the design elements associated with the code element selected via the code interface 132 visually isolated or separated from other design elements of the graphic design. In this case, the associated design elements may be displayed within the window of the design interface 130, while other design elements of the graphic design are hidden. Thus, when a user interacts with the code interface 132, the user can easily distinguish the associated design elements from other design elements of the graphic design.

[0040] Select the code and navigate to the design element. Furthermore, the selection of code elements in the code interface 132 can lead to navigation in the design interface 130 to a specific set of design elements identified by the selected code elements. For example, the code interface 132 can identify a layer selected by user input, and the design interface 130 can navigate the display of the graphic design 135 to the canvas location where the relevant design elements reside. In addition, or alternatively, the design interface 130 can focus on specific design elements related to the design elements identified by navigating by changing the zoom level of the display.

[0041] Synchronize the design interface and the code interface. In the embodiment, the design interface 130 and the code interface 132 may be synchronized with respect to the content displayed in each interface. For example, the code interface 132 may be provided as a window displayed alongside or together with the design interface 130 window. In one embodiment, the code interface 132 displays code elements that constitute part of a code representation, and each code element is associated with a layer or design element that has a corresponding identifier. The design interface 130 then uses the layer / design element identifier to draw design elements of a graphic design 135 that match the code elements of the code representation 145 displayed by the code interface 132.

[0042] Furthermore, GDS100 can perform the process of continuously linking the content of the design interface 130 with the content of the code interface 132. For example, if a user scrolls through code data displayed by the code interface 132, the design interface 130 can navigate or center the representation of the graphic design 135 to reflect the code elements displayed in the code interface 132. As described, the design interface 130 and the code interface 132 can utilize a common set of identifiers for layers or design elements provided by the graphic design dataset 157.

[0043] Modify graphic designs via a code interface. In this embodiment, a user of the device 10 can modify the graphic design 135 by changing the code representation 145 using the code interface 132. For example, the user can select a code element displayed by the code interface 132 and change its attributes, attribute values, or other aspects of the code element. The input can identify and modify layers or design elements defined in the structure defined by the graphic design dataset 157. The drawing engine 120 can then update the display of the graphic design 135 to reflect the changes made by the code interface 132. In this way, developers can make real-time changes, for example, to the design interface, adding, deleting, or modifying layers or design elements (for example, by changing attributes or attribute values).

[0044] View and modify code elements using the design interface. In addition, in the embodiment, the user can select design elements of the graphic design 135 by interacting with the design interface 130. For example, the user can select or modify layers of the graphic design. The design interface 130 can identify those layers for the code interface 132. Accordingly, the code interface 132 can highlight or visually distinguish the code elements (e.g., lines of code) from the rest of the code representation 145 that are related to the identified design element. In this way, the developer can easily examine the code elements generated for a design element of interest by selecting a design element or the layer corresponding to the design element in the design interface 130 and then viewing the code generated for the selected element or layer in the code interface 132.

[0045] In addition, in this embodiment, the user can edit the graphic design 135 through interaction with the design interface 130. The drawing engine 120 can respond to input by updating the graphic design 135 and the graphic design dataset 157. When the graphic design dataset 157 is updated, the code generation component 140 can update the code representation 145 to reflect the changes. The code interface 132 can also highlight, make prominent, or otherwise visually indicate code elements that have been changed as a result of changes made to the graphic design 135 via the design interface 130.

[0046] Code generation that reflects changes to the design interface. In additional embodiments, the change detection component 122 can identify changes in the graphic design 135, and these changes may be shown in the graphic design dataset 157 and the code representation 145. For example, in a collaborative environment, the graphic design dataset 157 may be modified as a result of work by other collaborators between user sessions of the device 10. In embodiments, the design interface 130 may show design elements of the graphic design that have been modified since a previous point in time (e.g., between user sessions).

[0047] In the embodiment, the code generation component 140 can generate code that updates the code representation 145 based on a change dataset. The code interface 132 may indicate code elements that have been modified from a new or previous user session of the graphic design 135. In this way, the designer can see what has changed between graphic designs. Similarly, the developer can see the corresponding changes in the code representation 145 that may be the result of changes made by the designer of the graphic design 135.

[0048] annotation In the embodiment, the drawing engine 120 generates annotations 159 for the graphic design 135 based on user input. As described in the embodiment, annotations are content items that may be displayed with the graphic design 135, but the annotations themselves are not part of the graphic design 135; this means that annotations do not form any content drawn as part of the corresponding runtime or manufacturing environment. Based on the embodiment, the GDS 100 can enable the user to create one or more annotations of various types. These annotations include (1) annotations configured as self-contained notes or messages, (2) annotations that display attribute values ​​of selected parts of the graphic design 135 (e.g., nodes, design elements, etc.), and / or (3) annotations that display information about selected parts of the graphic design 135, such as measured values ​​(e.g., spacing between design elements, etc.). Specific examples of the various types of annotations include annotation objects (e.g., see Figure 3) and attribute-bound annotations (e.g., see Figure 5E).

[0049] A user (e.g., a design user) can provide input (e.g., selection of an annotation tool, specified annotation dialogue, etc.) to mark the location where annotation 159 will be drawn. This location may be constrained to, for example, a design element or layer (or a node representing a design element), a canvas location or area, or a part of the graphic design 135. In the embodiment, annotation 159 may be drawn, for example, as another layer of content (e.g., an overlay).

[0050] In the embodiment, the GDS100 is configured to draw the graphic design 135 in multiple drawing modes, including a first mode (e.g., design mode) and a second mode (e.g., developer mode). Annotations may include annotation objects and / or attribute-bound annotations. Annotation objects may include structure (e.g., notes) and can be manipulated when displayed. Attribute-bound annotations display attribute values ​​or are based on one or more attribute values. Attribute-bound annotations may or may not include structure and additional content (e.g., text from the user). Attribute-bound annotations are also automatically modified in response to modifications to the graphic design that result in changes to the attributes mentioned in the annotation.

[0051] While annotations may be viewed by designers or developers, they may also be ignored by default in order to integrate graphic designs or code representations into the manufacturing environment. In examples, for instance, in a handover where a developer views a graphic design and develops the code to execute that graphic design in the manufacturing environment, annotations may be included in the graphic design to facilitate communication between the developer and the designer.

[0052] In some embodiments, annotation objects may be generated as graphic elements created via the design interface 130. Each annotation object 131 may be generated as one type of object (e.g., a formatted text frame) that can be pinned to an object and / or a canvas location. Designers can create annotation objects using tools provided in the design interface 130. For example, a user can manipulate the tools to create an object configured to contain text content. The user can provide text content to the annotation object and provide input to pin the annotation object to an object or canvas location. Once an annotation object is pinned to an object, the annotation object maintains a spatial relationship with the pinned object. For example, if the pinned object is moved or resized on the canvas, the annotation object may be moved to maintain its spatial relationship with the pinned object. In addition or alternatively, the annotation object may be displayed as a graphic marker visually connected to the pinned object.

[0053] In this embodiment, an annotation object is created via the design interface 130 and may automatically include a set of attributes, such as an object type (e.g., a text object), and a set of characteristics that control the behavior of the annotation. Initially, the annotation object may include characteristics that define the visibility state of the annotation object. The user can toggle the visibility characteristic value to switch between a visible state and a hidden state for the annotation object.

[0054] Annotation Viewer In this embodiment, the design interface 130 includes an annotation viewer / editor 128 for viewing and editing annotations 159 created for graphic design. The annotation viewer / editor 128 may allow the user to view annotation objects 159 that are separate from or distinct from the graphic design 135. For example, the drawing engine 120 may allow the annotations 159 (e.g., attribute objects or attribute-bound attributes) to be seen in the foreground or in other prominent ways relative to the graphic design. In other variations, the annotation viewer / editor 128 may allow the user to view annotations while the graphic design is hidden.

[0055] In addition, or alternatively, in the embodiment, the annotation viewer / editor 128 can enable the user to navigate between annotation objects. For example, the user can interact with the annotation viewer / editor 128 to navigate from a first position on the canvas where a first annotation object 159 is pinned (e.g., by a canvas position or a design element at that position) to a second position on the canvas where a second annotation object is pinned. When the annotation viewer / editor 128 navigates to a particular annotation object, the canvas may be traversed and / or the zoom setting may be adjusted to draw the next annotation object. When determining the order in which to navigate multiple annotation objects, the annotation viewer / editor 128 calculates a screening or canvas distance between the annotation objects. The position of an annotation object may be based, for example, on the canvas position or the position of a design element to which the annotation object is pinned. Thus, the navigation can use proximity-based navigation, where proximity is based on the calculated distance between two annotation objects along the X and Y axes. Proximity-based navigation allows the user to view a first annotation object and navigate to a second annotation object, where the second annotation object is determined to be the closest to the first annotation object among all other annotation objects. Depending on the embodiment, the distance between annotation objects may be calculated as canvas distance or display (or screen) distance. In the process of handing over the graphic design to the developer, the mechanism for navigating annotations can allow the developer to scan areas of the graphic design that are highlighted or potentially problematic, enabling the designer to better understand the context of the annotation objects.

[0056] Furthermore, when an annotation is pinned to a specified object, the annotation object may remain with the specified object even if the specified object is moved or resized on the canvas. In some embodiments, the user can select an annotation and view the object in the design interface. Simultaneously, the portion of the code expression that matches the pinned object may be displayed in the code interface 132. In this way, the user can view the content of the annotation and see instructions, comments, notes, or suggestions regarding the pinned design element and its code expression 145.

[0057] In some embodiments, the annotation viewer 128 may be provided when the design interface 130 is in a specified mode (e.g., developer mode). For example, the design interface 130 may be switched from design mode to developer mode, in which case the annotation viewer 128 is visible. Also, as shown and explained in the example in Figure 5D, annotation tools may be provided by user selection (e.g., by interaction with the toolbar or by right-clicking), allowing the user to create or edit annotations.

[0058] Attribute-linked annotation In the embodiment, attribute-bound annotations may be automatically generated in response to user selection input specifying the drawn attributes of the graphic design 135. Attribute-bound annotations may be generated for attributes including, for example, spacing or padding, font size, dimension attributes, corner attributes, vertical or horizontal alignment, and / or dimension attributes (width, height, etc.). In addition or alternatively, annotations may be generated for attributes including, for example, font size, text content, text attributes, color attributes, and other types of attributes.

[0059] As described in the examples, the design interface 130 can be run in other drawing modes of the graphic design 135. In design mode, the graphic design 135 may be editable with attribute values ​​hidden by default. In alternative developer mode, attribute values ​​may be displayed next to the graphic design. The user can interact with the displayed attributes by, for example, copying the drawn attribute values ​​or performing some other operation (see, for example, Figures 5A-5D) to specify that a particular attribute is the target of annotation.

[0060] Accordingly, the annotation viewer 128 (1) generates an annotation in the form of automatically extracted characters that identify the attribute and attribute value, and (2) pins a value based on the attribute value of the corresponding layer (determined by GDDR157) adjacent to the layer that received the interaction. In this way, when the target layer is modified and its attributes are changed, the content of the annotation is also automatically changed by GDS100. Therefore, for example, if an attribute represents spacing, the corresponding content of the annotation may change if the spacing is adjusted. Similarly, the content of the annotation may change in response to other modifications, such as resizing, changing characters or fonts, changing colors, or moving objects. In the case of object movement, the annotation may move on the canvas along with the layer associated with the annotation. Furthermore, modifications to the graphic design 135 can be made by any of the many users collaborating on the graphic design 135. Any changes to the graphic design 135 can update attribute-bound annotations to reflect changes in the attribute values ​​of the graphic design (mentioned by that particular annotation).

[0061] In other embodiments, attribute-linked annotations allow developers to immediately see aspects of the graphic design that might be difficult to see otherwise. Furthermore, annotations can be placed adjacent to specific areas of the graphic design that require the developer's attention.

[0062] Annotation sorting, sorting, and / or search In the embodiment, the annotation viewer 128 may include functionality that enables the filtering, sorting, and / or searching of annotations (e.g., annotation objects, attribute-bound annotations, etc.). For example, regardless of the type of annotation described, the user can filter annotations by various criteria. The user can filter or sort attribute-bound annotations by attribute type, attribute value, or other criteria. Similarly, the user can search for annotations by type or their content (e.g., attribute characteristics).

[0063] method Figure 2A illustrates a method for generating attribute-linked annotations that are linked to design elements or layers of a graphic design according to one or more embodiments. Figure 2B illustrates a method for creating attribute objects pinned to layers of a graphic design according to one or more embodiments. The examples described in Figures 2A and 2B may be performed using the features and functions described in the graphic design system shown in the example in Figure 1.

[0064] Referring to Figure 2A, in step 210, GDS100 maintains a graphic design dataset for the graphic design. The graphic design dataset consists of a series of layers, each layer corresponding to an object, a group of objects (e.g., a frame, a parented or combined frame, etc.), or a specific type of object (e.g., a multi-state part or element). Each layer may be associated with a set of attributes, including a character identifier.

[0065] In step 220, GDS100 enables a drawing mode in which the attribute values ​​of individual layers are displayed alongside the graphic design. In the example, the design user can interact with the design interface and immediately see the attribute values ​​of the graphic design. The design interface 130 may include a set of tools (e.g., menus) or mechanisms for displaying the attributes of design elements. In the example, attributes may be displayed as layers (e.g., overlays), and the attributes are displayed simultaneously with the graphic design. As a variation, attributes may be associated with corresponding markers or elements that are displayed to indicate the presence of attribute values ​​used in annotations, and the markers are interactive to view the corresponding attribute values. In some examples, the design interface 130 can operate in multiple modes, including a design mode in which annotations are hidden and a developer mode in which all annotations of the graphic design are visible. In design mode, as another example, the user may also select other modes, including a submode in which attribute values ​​and measured values ​​are permanently displayed as additional content (e.g., overlays) in the design interface.

[0066] In step 230, the user can provide input to cause GDS100 to create an attribute-bound annotation. In the example, the user can interact with one or more of the following: (1) selected design elements, (2) displayed attributes of the selected design elements, and / or (3) markers indicating attribute readings of the selected design elements. To create an attribute-bound annotation, in the example, the user can interact with the design interface to select some design elements of the graphic design and then interact with the annotation toolbar to view the attribute values ​​of that selection. The user can further interact with the annotation toolbar to select one or more attribute values, each attribute value corresponding to a graphic design characteristic (e.g., vertical or horizontal alignment, dimension attribute, padding (e.g., spacing between elements), fill attribute, etc.).

[0067] In step 240, GDS100 responds to user input (step 230) by creating an attribute-bound annotation by logically linking the annotation to the selected attribute value identified by the user input. Once the attribute-bound annotation is created, it (1) displays the selected attribute of the design element or some attribute value of the graphic design, and (2) is bound to the displayed attribute, so that if the user input changes the selected attribute, the annotation also changes to include the updated attribute value. In the example, the attribute-bound annotation is displayed when the design interface 130 switches to developer mode (for example, from design mode). This allows the developer user to view the annotation using mode selection at the same time that the developer interacts with the code interface 132 to view parts of the code representation 145.

[0068] Referring to Figure 2B, in step 250, GDS100 maintains the graphic design dataset for the graphic design. The graphic design dataset constitutes the graphic design as a group of layers, each layer corresponding to an object, a group of objects (e.g., a frame, a parented or joined frame, etc.), or a specific type of object (e.g., a multi-state part or element). Each layer may be associated with a set of attributes, including character identifiers. In step 260, GDS100 maintains or accesses the code representation of the graphic design. In some examples, GDS100 maintains the developer's code for running the graphic design in a production environment by integrating an external code editor and / or repository. In step 270, GDS100 allows the user to create annotation objects, which are pinned to one or more layers of the graphic design. In the example, annotation objects may also be linked to parts of the code representation of the graphic design. Thus, when viewing an annotation object in developer mode, the GDS100 can automatically navigate the user to the part of the graphic design that the annotation is directed at, while navigating the code interface 132 to the part of the code representation 145 for executing the referenced part of the graphic design.

[0069] In the example, annotation objects may contain content derived from graphic design (e.g., attribute values), and in some variations, this content is obtained automatically. Additionally, in some variations, annotation objects may contain content generated by the designer or developer.

[0070] Interface example Figure 3 illustrates a design interface 300 for executing annotation objects 310 according to several embodiments. Annotation objects 310 can be pinned to layers of the design interface 300, such as the top-level node or other type layers. Annotation objects 310 can be linked to design elements or layers 320. The content of annotation objects can include, for example, text content (e.g., manual user input) or, for example, messages from designers to developers. In some examples, annotation objects 320 are displayed selectively based on the mode of the design interface 300. For example, the design interface 300 can be switched to developer mode, and graphic design annotation objects are automatically drawn on the design interface 300 as additional layers or overlays. In the example, annotation objects 310 are linked to the corresponding design element or layer 320, and changes to the design element or layer 320 automatically update the annotation objects. For example, when the design element or layer 320 is moved, the annotation object 320 is also moved. Furthermore, if the annotation object 320 contains content such as attributes of a referenced design element or layer 320, changes to the graphic design 300 may change the content of the annotation object 320, and the attribute values ​​included in the annotation may be automatically updated.

[0071] Figures 4A to 4C illustrate examples of design interfaces that include a graphic design 410 in which attribute-linked annotations relating to one or more embodiments may be provided.

[0072] Referring to Figures 4A and 4B, the design interface 400 is displayed in a first mode (e.g., design mode). In design mode, any annotations already created are hidden. The user (e.g., the designer) can also specify or create annotations. In Figure 4B, the design interface 400 can run a sub-mode in which the attributes 412 and 414 of the design elements are displayed as a layer of content on top of the graphic design 410. In some examples, while the graphic design 410 is displayed, the user can interact with the displayed attributes and create corresponding annotations.

[0073] Referring to Figure 4C, the design interface 400 is shown to switch to a second mode (e.g., developer mode) in which attribute-bound annotations 420A, 420B, 420C, and 420D (collectively referred to as annotations 420) are displayed simultaneously on the graphic design 410, for example, as an overlay. By making all annotations visible at the same time, the user (e.g., developer) does not have to search for or risk missing annotations on the canvas.

[0074] As shown, in the examples, the content of annotation-bound attributes can correspond to attribute values. Therefore, in some examples, a note-style structure that holds the annotation content is not used. Also, attribute-bound annotations 420A-420C contain text descriptors for the attributes of selected design elements, and attribute 420D indicates measured values ​​(e.g., 180 pixels) between adjacent design elements. Text descriptors can be attributes provided by GDS100. Alternatively, descriptors can be generated from attribute values. Other examples of attribute-bound annotations can highlight additional types of attributes, such as font attributes (e.g., size and type), fill color attributes, line attributes, etc.

[0075] In the example, attribute-bound annotations may also include attribute-based calculated values, where the values ​​reflected by the annotation are calculated values ​​that utilize one or more attributes (or characteristics) related to the selected design elements. For example, attribute-bound annotations may include measured values ​​that reflect the spacing or padding between selected design elements, such as between adjacent design elements (e.g., pixel distance).

[0076] As illustrated by the example, attribute-linked annotations can be logically linked to the graphic design and the specific design elements that form the basis of the annotation. When an attribute used with an attribute-linked annotation changes as a result of a change in the graphic design, the attribute value or content reflected by the annotation is automatically updated to reflect the changed attribute value. Similarly, in the case of attribute-linked annotations that include measured or calculated values, when the design input updates the graphic design and changes the measured values, the content of such annotations is automatically updated to include the updated measured values ​​of the selected design elements of that annotation.

[0077] Figures 5A to 5D illustrate example design interfaces that enable a user to create attribute-bound annotations for graphic designs relating to one or more embodiments. Figure 5E illustrates an example design interface that runs in another mode in which attribute-bound annotations relating to one or more embodiments are drawn or made available.

[0078] In Figure 5A, the design interface 500 includes a graphic design 510 consisting of multiple design elements corresponding to images, frames, and text elements. The design interface 500 also includes a tool panel 520 that allows the user to view attributes and measured values ​​and place attribute-bound annotations on the design interface 510. In one example, the tool panel 520 includes an inspection tool 522 that, when selected, displays the attributes of the design interface 500 on the graphic design 510. The tool panel 520 also includes an annotation tool 524 that can be selected to allow the user to specify attribute-bound annotations for specific design elements. As illustrated in Figure 5E, when the design interface is switched to another mode (e.g., developer mode), the attribute-bound annotations are displayed to the developer, allowing the developer to immediately detect fine details of the graphic design 510. In the example, the user can interact with the tool panel 520 and select the annotation tool 524 to link an annotation to a selected design element 512 and display the value of a specific type of attribute or characteristic.

[0079] The tool panel 520 may also include a measurement tool 526 for generating or calculating measured values ​​(relative to another design element or criterion) for a specific design element. The measurement tool may also reflect padding between adjacent design elements. The measurement tool may be used to automatically measure dimensions and generate attribute-bound annotations that include those dimensions.

[0080] As shown in Figures 5B to 5D, the user (designer) can interact with the design element 512 or the corresponding part of the graphic design 510 to generate an annotation panel 530. In the example, the annotation panel 530 is implemented as a floating panel that appears adjacent to or near the selected design element 512 in response to specified user input. The annotation panel 530 may become available, for example, when the user selects the annotation tool 524. The annotation panel 530 allows the user to select attribute types for new or existing annotations. In the example, each characteristic type corresponds to an attribute type. The annotation panel 530 may also be generated to automatically measure attribute values ​​for the selected design element and display them as part of the annotation toolbar 530.

[0081] Therefore, the user can interact with the annotation panel 530 and select one of several types of characteristics for the selected design element 512. The annotation panel 530 can be dynamic in that it can expand to display a menu of choices for selecting characteristics for that annotation. In the examples shown in Figures 5B and 5C, the annotation panel 530 is reduced to allow the user to choose to add a first characteristic (e.g., font size) (Figure 5B) and a second characteristic (Figure 5C). With each characteristic selection, the annotation panel 530 expands to display a set of characteristics. The user can interact with the annotation tool 530 and select a specific characteristic type. In the example, the characteristic values ​​(i.e., attribute values) of the selected design element 512 are displayed in the annotation tool 530. The annotation tool 530 allows the user to select any of several characteristics and display the corresponding attribute values ​​for the selected design element 512. In the example, the characteristic types shown with the annotation panel 530 include, for example, (1) a dimensional characteristic that specifies the height or width of the design element on the canvas, (2) an orientation attribute that specifies whether the design element 512 is aligned vertically or horizontally, (3) an alignment characteristic that specifies a padding (or spacing) attribute for the selected design element 512 (e.g., the spacing between the design element 512 and other design elements), and / or (4) a fill attribute.

[0082] Figure 5E illustrates the design interface 500 when run in a different mode (e.g., developer mode). In developer mode, attribute-bound annotations 540 are displayed on the graphic design 510. Attribute-bound annotations may appear automatically when the design interface 500 switches to the alternative developer mode. As shown in the figure, the annotation 540 may display attribute values ​​of the design element 512 based on the user's selection of characteristics from the annotation panel 530. In variations, the attribute-bound annotation 540 may also be configured as an overlay object, such as a note. In some variations, the annotation 540 may contain text or other content manually inserted by one or more users (e.g., designer, developer, etc.).

[0083] In the example, annotation 540 is attribute-bound, meaning that (1) when it is displayed (for example, when developer mode is running), it shows the value of the bound attribute, and (2) when the bound attribute is changed (for example, as a result of a design user changing the design interface), the annotation is automatically updated to reflect the changed value of the bound attribute. Therefore, when design element 512 receives an edit that changes the attribute displayed with the annotation, the content of the annotation is also automatically changed to reflect the updated characteristic value of design element 512.

[0084] In addition to the other advantages, the example shown allows developers to view annotation 540 or inspect / write code to run the design interface 510 in a production environment when using the design interface in developer mode.

[0085] Network Computer System Figure 6 illustrates a computer system on which one or more embodiments may be implemented. The computer system 600 may be implemented on, for example, a server or a combination of servers. For example, the computer system 600 may be implemented as the network computing system 150 in Figure 1.

[0086] In one embodiment, the computer system 600 includes processing resources 610, memory resources 620 (e.g., read-only memory (ROM) or random access memory (RAM)), one or more instruction memory resources 640, and a communication interface 650. The computer system 600 includes at least one processor 610 for processing information stored in memory resources 620 for storing information and instruction sets, such as random access memory (RAM) or other dynamic storage devices, and instruction sets can be executed by the processor 610. The memory resources 620 may also be used to store temporary variables or other intermediate information during instruction execution by the processor 610.

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

[0088] In this example, the processor 610 may execute a set of service instructions 622 stored in the memory resource 620 to enable the network computing system to perform the functions described in the network computing system 150 in Figure 1.

[0089] The computer system 600 may also include additional memory resources (instruction memory 640) for storing executable instructions for running the graphic design system 100, for example, via a browser application 80. The graphic design system instruction set (GDS instruction set 645) can be embedded in web pages and other web resources so that a user computer can perform the functions described in GDS 100.

[0090] Thus, the examples described herein relate to the use of a computer system 600 to perform the techniques described herein. In one embodiment, the technique is performed by the computer system 600 in response to a processor 610 executing one or more sequences of one or more instructions stored in memory 620. Such instructions may be read into memory 620 from another machine-readable medium. The execution of the sequence of instructions stored in memory 620 causes the processor 610 to perform the process steps described herein. In another embodiment, wired circuits may be used in place of or in combination with software instructions to perform the examples described herein. Therefore, the examples described herein are not limited to any particular combination of hardware circuits and software.

[0091] User computing device Figure 7 illustrates the user computing device used in one or more of the examples described. In the examples, the user computing device 700 corresponds to, for example, a workstation, desktop computer, laptop, or other computer system that has graphic processing capabilities and is suitable for enabling the design interface and drawing of graphic design works. Alternatively, the user computing device 700 may correspond to a portable computing device such as a smartphone, tablet computer, laptop computer, or VR or AR headset.

[0092] In this example, the computing device 700 includes a central or main processor 710, a graphics processing unit 712, memory resources 720, and one or more communication ports 730. The computing device 700 can use the main processor 710 and memory resources 720 to store and launch a browser 725 or other web-based applications. The user can use the browser 725 to access network sites of the network computing system 150 using the communication port 730 and download one or more web pages or other resources 705 of the network computing system 150 (see Figure 1). The web resources 705 may be stored in active memory 724 (cache).

[0093] As illustrated in various examples, the processor 710 can detect and execute scripts and other logic embedded in the web resource 705 to implement the graphic design system 100 (Figure 1). In some examples, some scripts 715 embedded in the web resource 705 may include GPU-accelerated logic that is executed directly by the GPU 712. The main processor 710 and the GPU can work together to draw the design interface (DIUE 711) being edited on the display 740. The drawn design interface may include web content from the browser 725 and design interface content and functional elements generated by the scripts and other logic embedded in the web resource 705. By including scripts 715 that can be executed directly on the GPU 712, the logic embedded in the web resource 715 can better execute the graphic design system 100 as described in various examples.

[0094] conclusion While examples are described in detail with reference to the accompanying drawings, it should be understood that the concepts are not limited to those exact examples. Accordingly, the scope of those concepts is intended to be defined by the accompanying claims and their equivalents. Furthermore, it is taken into consideration that certain features described individually or as part of an example may be combined with other individually described features or parts of other examples, even if other features and examples do not refer to those particular features. Therefore, the absence of a description of combinations should not prevent any right to such combinations. [Explanation of symbols]

[0095] 10 User devices 80 Web-based applications 100 Graphics Design Systems (GDS) 102 Programming Interface 120 rendering engines 122 Change Detected 128 Annotation Viewer / Editor 130 Design Interfaces 132 Code Interface 140 code generation components 145 Code Expressions 150 Network Systems 152 Synchronized parts 155 Workspace files 159 Annotation

Claims

1. A computer execution method, A step of maintaining a graphic design dataset for graphic design, wherein the graphic design dataset comprises the graphic design as a group of layers, each layer corresponding to an object, a group of objects, or an object of a certain type, and each layer is associated with a set of attributes including a character identifier, The steps include generating annotations that indicate or are based on selected attributes of a selected layer in response to user interaction with a selected layer from the group, Updating the selected layer from the aforementioned group involves the steps of logically linking the annotation to the selected attribute so that the annotation is automatically updated. A computer execution method that includes this.

2. A step of providing a plurality of drawing modes for viewing the aforementioned graphic design, wherein the plurality of modes include a design mode and a developer mode, further comprising the step of providing a plurality of drawing modes for viewing the aforementioned graphic design, The method according to claim 1, wherein in the developer mode, all annotations created for the graphic design are visible simultaneously.

3. The method according to claim 1, wherein the annotation corresponds to an alphanumeric input that includes or is equivalent to an attribute value.

4. The method according to claim 1, wherein the step of logically linking the annotation to the selected attribute includes automatically updating the annotation to reflect the change in the selected attribute in response to the user providing input to update the graphic design to change the selected attribute.

5. The method according to claim 4, wherein the annotation includes a numerical value corresponding to the selected attribute, and in response to a change in the selected attribute, the numerical value is also changed to match the change in the selected attribute.

6. The method according to claim 4, wherein the selected attribute corresponds to one or more of the following: font size or type, spacing or padding value or dimensions, or other attributes.

7. The method according to claim 1, wherein the selected attribute includes measured values.

8. The method according to claim 1, further comprising the step of enabling a user to toggle each annotation of the graphic design on and off, and to sort multiple annotations by type or content.

9. A network computer system, One or more processors, Memory that stores instruction sets and The system comprises one or more processors that execute the instruction set to perform an operation, and the operation is A step of maintaining a graphic design dataset for graphic design, wherein the graphic design dataset comprises the graphic design as a group of layers, each layer corresponding to an object, a group of objects, or an object of a certain type, and each layer is associated with a set of attributes including a character identifier, The steps include enabling a drawing mode in which the attribute values ​​of each layer are displayed together with the graphic design, The steps include generating an annotation indicating the displayed attribute in response to the user selecting a displayed attribute value, The steps include logically linking the aforementioned annotation with the displayed attribute, Network computer systems, including

10. The aforementioned operation is A step of providing a plurality of drawing modes for viewing the aforementioned graphic design, wherein the plurality of modes include a design mode and a developer mode, further comprising the step of providing a plurality of drawing modes for viewing the aforementioned graphic design, The computer system according to claim 9, wherein in the developer mode, all annotations created for the graphic design are visible simultaneously.

11. The computer system according to claim 9, wherein the annotation corresponds to an alphanumeric input that includes or is equivalent to an attribute value.

12. The computer system according to claim 9, wherein the step of logically linking the annotation to the selected attribute includes automatically updating the annotation to reflect the change in the selected attribute in response to the user providing input to update the graphic design to change the selected attribute.

13. The computer system according to claim 12, wherein the annotation includes a numerical value corresponding to the selected attribute, and in response to a change in the selected attribute, the numerical value is also changed to match the change in the selected attribute.

14. The computer system according to claim 9, wherein the selected attribute corresponds to one or more of the following: font size or type, spacing or padding value or dimensions, or other attributes.

15. The computer system according to claim 9, wherein the selected attribute includes measured values.

16. The aforementioned operation is The computer system according to claim 9, further comprising the steps of enabling a user to toggle each annotation of the graphic design on and off, and to sort multiple annotations by type or content.

17. A persistent computer-readable medium for storing a set of instructions, wherein the set of instructions, when executed by one or more processors of a computer system, causes the computer system to perform an operation, and the operation is A step of maintaining a graphic design dataset for graphic design, wherein the graphic design dataset comprises the graphic design as a group of layers, each layer corresponding to an object, a group of objects, or an object of a certain type, and each layer is associated with a set of attributes including a character identifier, The steps include enabling a drawing mode in which the attribute values ​​of each layer are displayed together with the graphic design, The steps include generating an annotation indicating the displayed attribute in response to the user selecting a displayed attribute value, The steps include logically linking the aforementioned annotation with the displayed attribute, A persistent computer-readable medium, including [specific data / information].

18. The aforementioned operation is A step of providing a plurality of drawing modes for viewing the aforementioned graphic design, wherein the plurality of modes include a design mode and a developer mode, further comprising the step of providing a plurality of drawing modes for viewing the aforementioned graphic design, The persistent computer-readable medium according to claim 17, wherein in the developer mode, all annotations created for the graphic design are visible simultaneously.

19. The persistent computer-readable medium according to claim 17, wherein the annotation corresponds to an alphanumeric input including or equivalent to an attribute value.

20. The persistent computer-readable medium according to claim 17, wherein the step of logically linking the annotation to the selected attribute includes automatically updating the annotation to reflect the change in the selected attribute in response to the user providing input to update the graphic design to change the selected attribute.

Images