Annotation for a graphic design system

Abstract

A graphic design system maintains a graphic design dataset for a graphic design, where the graphic design dataset is structured as a collection of layers. In response to a user interacting with a selected layer in the collection, the graphic design system generates an annotation that displays or otherwise indicates or is based on a selected property of the selected layer. In addition, the graphic design system logically links the annotation with the selected property. Thus, updates to the selected layer in the collection automatically update the annotation.

Description

[0001] Cross-references to related applications This application claims priority to the following: (i) U.S. Patent Application No. 18 / 751,084, filed June 21, 2024; (ii) U.S. Provisional Patent Application No. 63 / 522,526, filed June 22, 2023; and (iii) U.S. Provisional Patent Application No. 63 / 522,411, filed June 21, 2023, the full text of which is incorporated herein by reference. Technical Field

[0002] The examples described in this article relate to graphic design systems, and more specifically, to annotations used in graphic design systems. Background Technology

[0003] Software design tools come in various forms and are widely used. For example, in the field of application user interfaces, software design tools require designers to combine the functional aspects of a program with aesthetics and even legal requirements, ultimately forming a series of pages that constitute the application's user interface. For a specific application, designers often have many goals and requirements that are difficult to track.

[0004] Developers are often unfamiliar with the intricate details of graphic design, which can be incredibly complex and tedious. This unfamiliarity leads to inefficiency, as developers frequently have to meticulously examine the graphic design, review the designer's annotations, and write code based on these details. This not only reduces developer productivity but also makes the level of detail in graphic design prone to errors. For example, developers can easily misinterpret pixel distances between objects, corner attributes, and other properties that are difficult to discern without close examination. Attached Figure Description

[0005] Figure 1 The illustration depicts a graphical design system for creating annotations according to one or more embodiments.

[0006] Figure 2A The illustration shows example methods for generating attribute-link annotations according to one or more embodiments.

[0007] Figure 2B The illustration shows example methods for creating attribute objects that are anchored to a graphic design, according to one or more embodiments.

[0008] Figure 3 The illustration shows an example design interface for implementing annotation objects according to some embodiments.

[0009] Figures 4A to 4CAn example of a design interface that includes a graphical design that provides attribute-link annotations, according to one or more embodiments, is illustrated.

[0010] Figures 5A to 5D The illustration depicts a sample design interface, according to one or more embodiments, for enabling users to create attribute-link annotations for graphic designs.

[0011] Figure 5E The illustration shows an example design interface according to one or more embodiments, implemented in an alternative mode in which attribute-link annotations are rendered or otherwise made available.

[0012] Figure 6 The illustration shows a computer system that can implement one or more embodiments.

[0013] Figure 7 The illustration shows a user computing device used in conjunction with one or more examples as described above. Detailed Implementation

[0014] In the example, the graphic design system maintains a graphic design dataset for graphic design. This dataset constructs graphic designs as a collection of layers, where each layer corresponds 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 text identifiers. In response to user interaction with a selected layer in the collection, the graphic design system generates annotations that display or otherwise indicate selected attributes of the selected layer or are based on selected attributes of the selected layer. Furthermore, the graphic design system logically links the annotations to the selected attributes. Therefore, updates to the selected layer in the collection automatically update the annotations.

[0015] In the examples, the terms "attribute" and "property" are used interchangeably. In some examples, attribute (or characteristic) values ​​can be formatted as numeric or text values. Other types of values ​​can also be used. For example, for color, the value can be represented as hexadecimal, hue, saturation or brightness (HSL), and / or saturation.

[0016] For example, a graphic design system offers multiple rendering modes for viewing graphic designs. These modes can include a design mode (where annotations are hidden) and a developer mode. In developer mode, all annotations created for the graphic design are viewable. Therefore, for a specific part of the graphic design being viewed, the user simply needs to switch the graphic design system's design interface from the first mode (e.g., design mode) to developer mode to view all annotations created for that part of the graphic design.

[0017] As mentioned earlier, annotations can link to one or more design elements, layers, and / or attribute values. Linked annotations will also update automatically based on modifications to the graphic design. For example, when an attribute or measurement referenced in an annotation is modified due to editing of the graphic design system, the annotation will automatically change to reflect the modified attribute or measurement value.

[0018] The one or more embodiments described herein illustrate that the methods, techniques, and operations performed by a computing device are executed in a programmatic manner or as computer-implemented methods. As used herein, "programmatically" 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 be automatic or non-automatic.

[0019] One or more embodiments described herein may be implemented using program modules, engines, or components. Program modules, engines, or components may include programs, subroutines, portions of programs, or software or hardware components capable of performing one or more predetermined tasks or functions. As used herein, modules or components may exist independently of other modules or components on hardware components. Alternatively, modules or components may be shared elements or processes of other modules, programs, or machines.

[0020] Some of the embodiments described herein 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 networks or smartphones, tablets, wearable electronic devices, laptops, printers, digital photo frames, network devices (e.g., routers), and tablet devices. Memory, processing, and network resources may be used in conjunction with building, using, or performing any of the embodiments described herein, including performing any methods or implementing any system.

[0021] Furthermore, one or more embodiments described herein can be implemented using one or more processor-executable instructions. These instructions can be carried on a computer-readable medium. The machines shown or described below provide examples of processing resources and computer-readable media that can be used to carry and / or execute the instructions of the embodiments of the present invention. In particular, the numerous machines shown with the embodiments of the present invention include 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 in personal computers or servers. Examples of other computer storage media include portable storage units, such as CDs or DVDs, flash memory (e.g., flash memory used in smartphones, 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 that utilize processors, memory, and instructions stored on computer-readable media. Furthermore, embodiments can be implemented in the form of computer programs or in the form of computer-usable carrier media capable of carrying such programs.

[0022] System Description Figure 1 A graphical design system based on one or more examples is shown. For example... Figure 1 The illustrated graphical design system 100 (“GDS 100”) provides designers with a tool for creating graphical user interface content (“graphical design 135”) for runtime and production environments. Among other things, GDS 100 can be used to define various interactions, state transitions, and runtime behaviors that may occur when implementing graphical user interface content in a runtime or production environment, through constraints and logical relationships defined, for example, between design elements of the graphical user interface content. The graphical user interface content can be used to generate a coded representation of the graphical user interface content, including various constraints and logical relationships defining interactions, state transitions, and behaviors in a runtime or production environment. As illustrated using various examples, GDS 100 enables designers to create annotations, thereby helping developers develop code for implementing runtime or production environments using graphical design 135.

[0023] According to the examples, GDS 100 can be implemented in any of a variety of different computing environments, including as a device-side application, a network service, and / or a collaboration platform. For example, GDS 100 can be implemented using a web-based application 80 that runs on user device 10. In other examples, GDS 100 can be implemented using a dedicated web-based application. As an additional or alternative approach, one or more components of GDS 100 can be implemented as a distributed system, such that the processes described using the various examples can be executed either on a network computer (e.g., a server) or on user device 10.

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

[0025] In some examples, user device 10 includes a web-based application 80 that loads processes and data to provide GDS 100 on user device 10. GDS 100 may include a rendering engine 120, enabling users to create, edit, and update graphic design files. In some variations, GDS 100 may also include a code integration subsystem for combining or otherwise integrating programming code, data, resources, and other logic to develop graphic designs as part of a production environment.

[0026] In some examples, the web-based application 80 retrieves program resources for implementing GDS 100 from a website. As part of a production environment, the web-based application 80 may retrieve some or all of the program resources from a local source (e.g., local storage on computing device 10). The web-based application 80 may also access various types of datasets to provide functionality similar to that described in GDS 100. 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, users of device 10 operate web-based application 80 to access a website where they retrieve and execute program resources to implement GDS 100. In some examples, GDS 100 is provided to two types of users: i) design users, who can initiate sessions to implement GDS 100 to view, create, and edit graphic designs 135; and ii) developers, who develop code to implement graphic designs 135 in a runtime or production environment.

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

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

[0030] Program interface 102 includes procedures for receiving and sending data to implement GDS 100. Furthermore, program interface 102 can be used to retrieve program resources and datasets from local or remote sources, including a user's or user account's workspace file 155. In an example, workspace file 155 contains one or more datasets (represented by "graphic design dataset 157") that represent corresponding graphic designs 135 rendered by rendering engine 120. Workspace file 155 may contain one or more graphic design datasets 157 that collectively define the graphic design 135 during rendering. Graphic design dataset 157 may be constructed as one or more hierarchical data structures. In some examples, graphic design dataset 157 may be constructed as a collection of layers and / or nodes defining a graphic design, where each layer or node corresponds to an object, a group of objects, or an object of a specific type. Furthermore, in some examples, graphic design dataset 157 may be organized to contain graphic designs on a screen, where each graphic design contains one or more cards, pages (e.g., one canvas per page), or segments containing one or more pages.

[0031] According to one aspect, program interface 102 also retrieves program resources, including an application framework for implementing design interface 130. Design interface 130 can utilize a combination of local resources, browser-based resources, and / or web resources (e.g., application frameworks) provided through program 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 the user to view and edit various aspects of the rendered graphic design 135. In this way, design interface 130 can be implemented as a functional layer integrated with the canvas providing the graphic design.

[0032] Design interface 130 can detect and interpret user input, for example, based on the location and / or type of the input. The location of the input can represent a canvas or screen location, such as for a tap operation, or the start and / or end location of continuous input. The input type can correspond to one or more types of input occurring on the canvas, or design elements rendered on the canvas. These inputs can be associated with the 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 design tools provided by the application framework. In an implementation, design interface 130 can use a reference to the corresponding canvas to identify the screen location of the user input (e.g., a "click"). In addition, the design interface 130 can interpret user input actions based on the detected input location (e.g., whether the input location indicates a selection of a tool, an object rendered on the canvas, or a canvas area), the frequency of input 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 drag), as well as various other input types that the user may specify through one or more input devices (e.g., right-click, screen tap, etc.).

[0033] 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 other variations, web-based application 80 can be implemented as a dedicated web-based application optimized to provide the functionality described in the various examples. Furthermore, web-based application 80 may vary depending 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.).

[0034] For example, rendering engine 120 uses graphic design dataset 157 to generate graphic design 135, where graphic design 135 includes graphic elements, attributes, and attribute values. Each attribute of a graphic element can include an attribute type and an attribute value. For objects, attribute types include shape, size (or dimensions), layer, type, color, line thickness, text size, text color, font, and / or other visual characteristics. Depending on the implementation, these attributes reflect the nature of the two-dimensional or three-dimensional design. Thus, the attribute values ​​of individual objects can define, for example, the size, color, positioning, layering, and content visual characteristics of elements rendered as part of the design.

[0035] Graphic design 135 can be organized by screen (e.g., a computer screen representing a production environment), page (e.g., where each page contains a canvas on which the corresponding graphic design is rendered), and section (e.g., where each screen contains multiple pages or screens). Users can interact with graphic design 135 through design interface 130 to view and edit it. Design interface 130 can detect user input and update workspace file 155 and / or GDDR157 based on the input, and rendering engine 120 can update graphic design 135 in response to the input. Rendering engine 120 can also implement navigation operations, such as increasing or decreasing magnification and panning left and right. When implementing such navigation operations, rendering engine 120 can specify the magnification or portion of graphic design 135 for the user's viewport. Users can specify input to change the view of graphic design 135 (e.g., zoom in or out of the graphic design), and in response, rendering engine 120 updates graphic design 135 to reflect the change in view.

[0036] The rendering engine 120 can also modify the graphic design 135. The design interface 130 can detect input, and the rendering engine 120 updates the graphic design dataset 157 representing the updated graphic design 135. Furthermore, the rendering engine 120 can update the graphic design 135, allowing the user to immediately see the changes to the graphic design 135 resulting from user interaction.

[0037] Collaborative Environment In the example, GDS 100 can be implemented as part of a collaboration platform where multiple users can operate computer devices in different locations to view and edit graphic design 135. Each collaborator's user device can receive a local version of workspace file 155, allowing each user device to render graphic design 135 from the same workspace file 155. With each collaborator's workspace file 155 synchronized, each collaborator can independently view and edit graphic design 135. As part of the collaboration platform, when a user edits graphic design 135, the changes made by the user are implemented in real time in the workspace file 155 instances on the user devices of other collaborating users. Similarly, when other collaborators make changes to graphic design 135, these changes are also reflected in workspace file 155 and graphic design dataset 157 in real time. On each collaborator's device, rendering engine 120 can update the local version of workspace file 155 to reflect changes to graphic design 135 in real time, including changes made by other collaborators.

[0038] In the implementation, when the rendering engine 120 makes changes to the graphic design dataset 157, it can transmit the corresponding change data 111 representing that change to the network system 150. The network system 150 can implement one or more synchronization processes (represented by the synchronization component 152) to maintain the network-side representation 151 of the graphic design. In response to receiving change data 111 from user device 10, the network system 150 updates the network-side representation 151 of the workspace file 155 and transmits the change data 111 to the user devices of other collaborators. Similarly, if another collaborator makes changes to an instance of the workspace file 155 on their respective device, the corresponding change data 111 can be transmitted from the collaborator device to the network system 150. The synchronization component 152 updates the network-side representation 151 of the workspace file 155 and transmits the corresponding change data 121 to user device 10 to update their respective copies of the workspace file 155. On each collaborator device, the rendering engine 120 updates the graphic design 135 rendered from the corresponding copy of the workspace file 155 in real time.

[0039] Change data In the example, GDS 100 may include a process represented by change detection component 122 for recording and / or detecting changes to the graphic design dataset 157. Change detection component 122 may track changes input by, for example, a user of computing device 10 via design interface 130. As a supplement or variation, change detection component 122 may also detect changes to the graphic design dataset 157 based on change data 121 received from network system 150. Change detection component 122 may also implement a set of changes to the graphic design 135 based on changes made by other collaborators.

[0040] Furthermore, the change detection component 122 can also take snapshots at different time instances and generate a change dataset 125 to reflect a series of updates to the graphic design 135 (and its data representation, or "GDDR157") within a given time period. For example, the change detection component 122 can compare a snapshot of the graphic design dataset 157 between the time when a user last edited or viewed the graphic design 135 (e.g., the end of the previous day) and the current time when the user starts a new session (e.g., on the same day) to edit or view the graphic design. When a user starts a new session, the network system 150 updates the graphic design dataset 157 with change data 121, which reflects updates to the graphic design by different collaborating users working on the workspace file at different times.

[0041] In some examples, rendering engine 120 generates visual indicators of the change dataset 125 on the graphic design 135. Design interface 130 can implement these visual indicators as additional layers or other functionalities to allow users to navigate on the design interface, such as from one point to another on the canvas 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 change dataset 125, design interface 130 can automatically locate the points on the canvas or screen where design elements of the graphic design 135 have changed (e.g., been deleted, modified, added, etc.). Furthermore, rendering engine 120 can use the change dataset 125 to visually display the changes, for example, by making previous versions of the displayed design interface sections visible.

[0042] Code generation In some examples, GDS 100 includes a process, represented by code generation component 140, for generating code data for a code representation 145 of a graphic design 135. Code generation component 140 may include a process for accessing GDDR157 of a workspace file 155 and generating code data representing graphic design elements. The generated code data may include production-executable instructions (e.g., JavaScript, HTML, etc.) and / or information (e.g., CSS (Cascading Style Sheets)), assets (e.g., elements in a library), and other types of data.

[0043] In some examples, the graphic design dataset 157 is constructed to define multiple layers, each corresponding to an object, a group of objects, or an object of a specific type. In specific examples, layer types may include frame objects, a group of objects, components (i.e., objects composed of multiple objects reflecting state or other changes between instances), text objects, images, configuration logic (for implementing layout or positional links between multiple objects), and other predefined element types. For each layer, the code generation component 140 generates a set of code data associated with or otherwise linked to that 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 that identifier for each layer. The code generation component 140 may generate a code representation 145 such that code line entries and elements (e.g., lines of code, sets of executable information, etc.) of the code representation 145 are associated with specific layers of the graphic design 135. These associations map code line entries of the code representation 145 to corresponding design elements (or layers) of the graphic design 135 (represented by the graphic design dataset 157). In this way, each line of code in code representation 145 can be mapped to a specific layer or design element in the graphic design. Similarly, in the example, each layer or design element can be mapped to a line of code in code representation 145 of the graphic design 135.

[0044] Code represents rendering In the example, code interface 132 renders a structured presentation of code representation 145. For example, code interface 132 may segment the presentation area into separate regions, including separate segments for displaying production-ready executable code instructions (e.g., separate regions for HTML and CSS code). Furthermore, code interface 132 may contain separate segments for identifying assets used in the graphic design, such as design elements that are part of a library associated with a user's associated account library.

[0045] Code interface 132 can combine local resources, browser-based resources, and / or web resources (e.g., application frameworks) provided by program interface 102 to generate a set of interactive features and tools for displaying code representation 145. For example, code interface 132 can make individual elements of code representation 145 selectable as input. For example, a user can select one or more of the following as input: (i) a line of code; (ii) a portion of a line of code corresponding to a certain attribute; or (iii) a portion of a line of code reflecting a certain attribute value. Furthermore, the user can also select program code data to be displayed in different areas, different types of program code (e.g., HTML or CSS), assets, and other program data elements.

[0046] Select the code to view the design elements. Code interface 132 can detect user input to select a code element. In response to detecting user input for a specific code element, code interface 132 can identify associated design elements (or layers) related to that code element and present them to design interface 130. For example, code interface 132 can identify a specific layer indicated by the user's selection input. Code interface 132 can indicate the identified layer or design element to design interface 130, thereby causing design interface 130 to highlight or emphasize the design element associated with the selected code element. In some examples, design interface 130 can visually isolate or separate one or more design elements associated with the code element selected through code interface 132 from other elements of the graphic design. In this case, other design elements in the graphic design can be hidden, while the associated design element is displayed in the window of design interface 130. In this way, when the user interacts with code interface 132, the user can easily distinguish the associated design element from other elements of the graphic design.

[0047] Select the code to navigate to the design elements. Furthermore, selecting a code element in code interface 132 allows design interface 130 to navigate to a specific set of design elements identified by the selected code element. For example, code interface 132 can recognize a layer selected by user input, and design interface 130 can navigate the view of graphic design 135 to a canvas location that provides the associated design element. As an addition or variation, design interface 130 can navigate by changing the zoom level of the view, thereby focusing on a specific design element associated with the identified design element.

[0048] Synchronous design of interfaces and code interfaces In the example, design interface 130 and code interface 132 can be synchronized regarding the content displayed through each interface. For example, code interface 132 can be provided as a window displayed side-by-side with or simultaneously with the window of design interface 130. In one aspect, code interface 132 displays code elements that constitute the code representation, where each code element is associated with a layer or design element having a corresponding identifier. Then, design interface 130 uses the identifier of the layer / design element to render design elements in the graphic design 135 that are consistent with the code elements of the code representation 145 displayed by code interface 132.

[0049] Furthermore, GDS 100 can implement processes that link the content of design interface 130 with the content of code interface 132. For example, if a user scrolls through code data displayed via code interface 132, design interface 130 can navigate the rendering of graphic design 135 or center the rendering of graphic design 135 to reflect the code elements visible in code interface 132. As previously mentioned, design interface 130 and code interface 132 can use a shared set of identifiers for layers or design elements provided by graphic design dataset 157.

[0050] Modify graphic design via code interface For example, a user of device 10 can modify the graphic design 135 by changing the code representation 145 through code interface 132. For instance, a user can select a code element displayed through code interface 132 and then change the attributes, attribute values, or other aspects of that code element. Input can identify and modify layers or design elements defined in the structure defined by the graphic design dataset 157. In response, rendering engine 120 can update the rendering of the graphic design 135 to reflect the changes made through code interface 132. In this way, developers can modify, for example, the design interface in real time, to add, remove, or otherwise modify (e.g., by changing attributes or attribute values) layers or design elements.

[0051] View and modify code elements through the design interface. Furthermore, in the example, a user can select design elements in a graphic design 135 by interacting with the design interface 130. For example, a user can select or modify a layer in the graphic design. The design interface 130 can identify this layer for the code interface 132. In response, the code interface 132 can highlight or otherwise visually distinguish the code element (e.g., a line of code) associated with the identified design element from the rest of the code representation 145. In this way, developers can easily examine the code elements generated for the design element of interest by selecting a design element or the layer corresponding to that design element in the design interface 130 and viewing the code generated for the selected element or layer in the code interface 132.

[0052] Furthermore, in the example, a user can edit the graphic design 135 by interacting with the design interface 130. The rendering 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. Additionally, the code interface 132 can highlight, emphasize, or otherwise visually indicate code elements that have been changed due to modifications made to the graphic design 135 via the design interface 130.

[0053] Code generation to reflect changes in the design interface. In an additional example, change detection component 122 can identify changes in graphic design 135, and these changes can be indicated in graphic design dataset 157 and code representation 145. For example, in a collaborative environment, graphic design dataset 157 may change between user sessions of device 10 due to work done by other collaborators. In the example, design interface 130 can indicate design elements in the graphic design that have changed compared to a previous point in time (e.g., between user sessions).

[0054] For example, code generation component 140 can generate code to update code representation 145 based on a changed dataset. Code interface 132 can instruct on newly added or modified code elements in graphic design 135 relative to previous user sessions. This allows designers to view changes made between graphic designs. Similarly, developers can view corresponding changes to code representation 145, which may be the result of changes made by designers to graphic design 135.

[0055] Notes For example, rendering engine 120 generates annotations 159 for graphic design 135 based on user input. As illustrated in the example, annotations are content items that can be displayed along with graphic design 135, but the annotations themselves are not part of graphic design 135, meaning that the annotations do not constitute part of the rendered content as part of the corresponding runtime or production environment. Depending on the implementation, GDS 100 allows users to create one or more different types of annotations, including: (i) annotations constructed as self-contained notes or messages; (ii) annotations that display attribute values ​​of selected portions (e.g., nodes, design elements, etc.) in graphic design 135; and / or (iii) annotations that display information about selected portions in graphic design 135, such as measurements (e.g., spacing between design elements, etc.). Specific examples of different types of annotations include annotation objects (e.g., see...). Figure 3 ) and attribute-link comments (for example, see Figure 5E ).

[0056] Users (e.g., design users) can provide input (e.g., selecting annotation tools, specifying annotation interactions, etc.) to mark the location where annotation 159 should be rendered. This location can be associated with, for example, a design element or layer (or a node representing a design element), a position or area on the canvas, or a portion of the graphic design 135. In the example, annotation 159 can be rendered as, for example, a separate content layer (e.g., an overlay).

[0057] In the example, GDS 100 is configured to render the graphic design 135 in multiple rendering modes, including a first mode (e.g., design mode) and a second mode (e.g., developer mode). Annotations can include annotation objects and / or attribute-linked annotations. Annotation objects can include structure (e.g., notes), and annotation objects can be manipulated as they are displayed. Attribute-linked annotations display attribute values, or are based on one or more attribute values. Attribute-linked annotations may or may not include structure and additional content (e.g., user-input text). Attribute-linked annotations are automatically modified in response to changes in the attributes referenced by the annotations due to modifications to the graphic design.

[0058] While designers or developers can view comments, they can also be ignored by default to integrate graphic designs or code representations into production environments. For example, comments can be included in graphic designs to facilitate communication between developers and designers, such as during a "handover" process where developers review the graphic design to develop code that will then be implemented in production.

[0059] In some examples, annotation objects can be generated as graphical elements created through design interface 130. Each annotation object 131 can be generated as an object of a certain type (e.g., a formatted text box) that can be anchored to an object and / or canvas location. Designers can create annotation objects using tools provided by 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 for the annotation object and provide input to anchor the annotation object to an object or canvas location. Once the annotation object is anchored to an object, the annotation object will maintain a spatial relationship with the anchored object. For example, if the anchored object moves or resizes on the canvas, the annotation object can also move to maintain its spatial relationship with the anchored object. As an additional or variation, annotation objects can also be displayed as graphical indicators visually connected to the anchored object.

[0060] For example, annotation objects can be created through design interface 130 to automatically include a set of properties, such as the object type (e.g., a text object) and a set of properties that control the annotation's behavior. By default, annotation objects can include properties that define the annotation object's visibility state. Users can toggle the values ​​of the visibility properties, causing the annotation object to switch between a visible and hidden state.

[0061] Comment viewer For example, design interface 130 includes an annotation viewer / editor 128 for viewing and editing annotations 159 created for the graphic design. Annotation viewer / editor 128 allows the user to view annotation objects 159 separately or distinctly from the graphic design 135. For example, rendering engine 120 can make annotations 159 (e.g., attribute objects or attribute-linked attributes) visible in the foreground or other prominent position relative to the graphic design. Furthermore, in other variations, annotation viewer / editor 128 can also allow the user to view annotations even when the graphic design is hidden.

[0062] As an addition or variation, in this example, the annotation viewer / editor 128 may allow 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 the first annotation object 159 is anchored (e.g., by canvas position or a design element located at that position) to a second position on the canvas where the second annotation object is anchored. When the annotation viewer / editor 128 navigates to a particular annotation object, it can traverse the canvas and / or adjust the scaling settings to render the next annotation object.

[0063] When determining the sequence of navigation annotation objects, the annotation viewer / editor 128 calculates the screen distance or canvas distance between annotation objects. The position of an annotation object can be based on, for example, the canvas position to which the annotation object is anchored or the position of a design element. This allows navigation to employ a proximity-based approach, where proximity is based on the calculated distances between two annotation objects along the X and Y axes. Proximity-based navigation allows a user to view a first annotation object and then navigate to a second annotation object, where the second annotation object is determined to be the object closest to the first annotation object among all other annotation objects. Depending on the implementation, the distance between annotation objects can be calculated as canvas distance or display (or screen) distance. In the process of delivering graphic designs to developers, the annotation navigation mechanism allows developers to scan highlighted or problematic areas in the graphic design by region, thereby enabling designers to better understand the context of annotation objects.

[0064] Furthermore, when an annotation is anchored to a specified object, the annotation object remains attached to that object even if the specified object is repositioned or resized on the canvas. In some examples, users can select the annotation to view the object in the design interface. Simultaneously, the portion of the code representation consistent with the anchored object can be displayed in the code interface 132. This allows users to view the annotation's content to see explanations, comments, notes, or suggestions related to the anchored design element and its code representation 145.

[0065] In some examples, an annotation viewer 128 can be provided when design interface 130 is in a specified mode (e.g., developer mode). For example, design interface 130 can be switched from design mode to developer mode, and when in developer mode, the property viewer 128 is visible. Furthermore, as... Figure 5D The examples and descriptions show that annotation tools can be provided based on the user's selection (e.g., by interacting with the toolbar or right-clicking), enabling the user to create or edit annotations.

[0066] Attributes - Link Comments For example, attribute-link annotations can be automatically generated in response to user input selection, where the selected input specifies rendering attributes for the graphic design 135. Attribute-link annotations can be generated for attributes that include: such as spacing or padding, font size, size attributes, corner attributes, vertical or horizontal alignment, and / or dimension attributes (e.g., width, height, etc.). As an additional or variation, annotations can also be generated for attributes that include: such as font size, text content, text attributes, color attributes, and other types of attributes.

[0067] As described in the example, design interface 130 can be implemented using alternative rendering modes of graphic design 135. In design mode, graphic design 135 is editable, and attribute values ​​are hidden by default. In the alternative developer mode, attribute values ​​can be displayed next to the graphic design. Users can interact with the displayed attributes, for example, by copying rendered attribute values, or performing some other action (see, for example, see...). Figures 5A to 5D Use ) to specify a particular attribute as the subject of the annotation.

[0068] In response, the annotation viewer 128 (i) generates annotations in the form of automatically extracted characters to identify attributes and attribute values; and (ii) anchors values ​​next to the layer that received the interaction, where the values ​​are attribute values ​​of the corresponding layer as determined by GDDR 157. Thus, if a modification to the subject layer causes a change in its attributes, GDS 100 will automatically change the content of the annotations. For example, if the attribute represents spacing, adjusting the spacing will change the corresponding content of the annotation. Similarly, the content of the annotations may change due to other modifications, such as resizing, changing text or font, changing color, repositioning objects, etc. In the latter case, the annotation may move across the canvas along with the layer associated with it. Furthermore, any of the multiple users collaborating on the graphic design 135 can modify it. Any change to the graphic design 135 may result in attribute-linked annotation updates to reflect changes in the graphic design attribute values ​​referenced by the specific annotation.

[0069] As with other examples, attribute linking annotations allow developers to easily see aspects of a graphic design that might otherwise be difficult to spot. Furthermore, annotations can be used to pinpoint specific areas of the graphic design that the developer needs to focus on.

[0070] Annotation filtering, sorting, and / or searching In the example, the annotation viewer 128 may include features that allow annotations (e.g., annotation objects, attribute-link annotations, etc.) to be filtered, sorted, and / or searched. For example, for any of the annotation types described, a user can filter annotations based on various criteria. A user can filter or sort attribute-link annotations by attribute type, attribute value, or other criteria. Similarly, a user can search for annotations by type or their respective content (e.g., attribute characteristics).

[0071] Methodology Figure 2A The illustration shows a method for generating attribute-link annotations that link design elements or layers in a graphic design, based on one or more examples. Figure 2B The illustration depicts a method for creating an attribute object anchored to a layer in a graphical design, according to one or more embodiments. This can be achieved using information about the graphical design system (such as information about...). Figure 1 The features and functions described in the examples shown and described are used to achieve the purpose of implementing the information about Figure 2A and Figure 2B The example described in [the document].

[0072] refer to Figure 2A In step 210, GDS 100 maintains a graphic design dataset for graphic design. This graphic design dataset constructs the graphic design as a collection of layers, where each layer corresponds to an object, a set of objects (e.g., a frame, a parent frame, or a composite frame), or an object of a specific type (e.g., a multi-state component or element). Each layer can be associated with a set of attributes, including a text identifier.

[0073] In step 220, GDS 100 enables a rendering mode in which the attribute values ​​of each layer are displayed along with the graphic design. For example, a design user can interact with the design interface to easily view 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) so that attributes are displayed simultaneously with the graphic design. As a variation, attributes may be associated with corresponding tags or elements that are displayed to indicate the presence of attribute values ​​for use with annotations, and these tags are interactive for viewing the corresponding attribute values. In some examples, the design interface 130 may operate in multiple modes, including a design mode where annotations are hidden and a developer mode where all annotations of the graphic design are visible. In design mode, the example also provides that the user can choose between alternative modes, including a sub-mode in which attribute values ​​and measurements are continuously displayed as additional content (e.g., overlays) to the design interface.

[0074] In step 230, the user can provide input to allow the GDS 100 to create attribute link annotations. In the example, the user can interact with one or more of the following: (i) a selected design element; (ii) the display attributes of the selected design element; and / or (iii) a marker indicating the attribute readings of the selected design element. To create attribute link annotations, the example provides a user who can interact with the design interface to select a portion of the graphic design as a design element, and then interact with the annotation toolbar to view the selected attribute values. The user can also interact with the annotation toolbar to select one or more attribute values, where each attribute value corresponds to a property of the graphic design (e.g., vertical or horizontal alignment, dimension attributes, padding (e.g., the size of the space between elements), fill attributes, etc.).

[0075] In step 240, GDS 100 responds to user input (step 230) by creating an attribute-linked annotation by logically linking the annotation to the selected attribute value identified by the user input. Once the attribute-linked annotation is created, it (i) displays the attribute value of the selected attribute of a design element or section of the graphic design; and (ii) is linked to the displayed attribute such that if user input causes a change in the selected attribute, the annotation also changes to include the updated attribute value. In the example, the attribute-linked annotation is displayed when the design interface 130 switches to developer mode (e.g., from design mode to developer mode). This allows developer users to view the annotation using modal selection, while also allowing developers to interact with the code interface 132 to view portions of the code representation 145.

[0076] See Figure 2BIn step 250, GDS 100 maintains a graphic design dataset for the graphic design. This dataset constructs the graphic design as a collection of layers, where each layer corresponds to an object, a set of objects (e.g., a frame, parent frame, or composite frame), or an object of a specific type (e.g., a multi-state component or element). Each layer can be associated with a set of attributes, including a text identifier. In step 260, GDS 100 maintains or accesses a code representation of the graphic design. In some examples, GDS 100 integrates an external code editor and / or repository to maintain the code implemented by the developer in a production environment. In step 270, GDS 100 allows the user to create annotation objects, which are anchored to one or more layers of the graphic design. In the example, the annotation objects can also be linked to certain parts of the code representation used for the graphic design. Thus, when viewing the annotation objects in developer mode, GDS 100 can automatically guide the user to the part of the graphic design that serves as the subject of the annotation, while simultaneously guiding the code interface 132 to the part of the code representation 145 used to implement the referenced part of the graphic design.

[0077] In the examples, annotation objects may include content obtained from the graphic design (e.g., attribute values), where in some variations this content is obtained automatically. Additionally, in some variations, annotation objects may also include content generated by the designer or developer.

[0078] Example Interface Figure 3 The illustration shows a design interface 300 for implementing annotation object 310, based on some examples. Annotation object 310 can be anchored to a layer of design interface 300, such as a top-level node or other type of layer. Annotation object 310 can be linked to design elements or layers 320. The content of the annotation object can include, for example, text content (e.g., user input), such as a message from the designer to the developer. In some examples, annotation object 320 may be selectively displayed depending on the mode of design interface 300. For example, design interface 300 can be switched to developer mode, in which annotation objects of graphical design are automatically rendered as additional or overlay layers on design interface 300. In the examples, annotation object 310 is linked to the corresponding design element or layer 320; therefore, changes to the design element or layer 320 will cause the annotation object to update automatically. For example, if the design element or layer 320 is repositioned, annotation object 320 will also be repositioned. Furthermore, if the annotation object 320 contains content such as referenced design elements or attributes of layer 320, changes to the graphic design 300 may cause changes to the content of the annotation object 320, thereby automatically updating the attribute values ​​contained in the annotation.

[0079] Figures 4A to 4CThe illustration shows an example of a design interface based on one or more examples, which includes a graphic design 410 on which property-linked annotations can be provided.

[0080] refer to Figure 4A and Figure 4B The design interface 400 is displayed in a first mode (e.g., design mode). In design mode, any comments that may have been created will be hidden. Furthermore, users (e.g., designers) can specify or otherwise create comments. Figure 4B In this design interface 400, a sub-pattern can be implemented where the attributes 412 and 414 of the design element are displayed as a content layer on top of the graphic design 410. In some examples, users can interact with the displayed attributes on the graphic design 410 to create corresponding annotations.

[0081] refer to Figure 4C As shown, the design interface 400 switches to a second alternative mode (e.g., developer mode), in which attribute link annotations 420A, 420B, 420C, and 420D (collectively referred to as annotations 420) are displayed simultaneously, for example, as an overlay on the graphic design 410. By making all annotations visible simultaneously, users (e.g., developers) do not need to "search" for annotations on the canvas, nor do they need to worry about missing any.

[0082] As shown in the figure, the examples demonstrate that the content of an annotation-link attribute can correspond to an attribute value. Therefore, in some examples, a note-style structure for storing annotation content is not used. Furthermore, attribute-link annotations 420A-420C include text descriptors associated with the attributes of a specific design element, and attribute 420D displays a measurement between adjacent design elements (e.g., 180 pixels). The text descriptors can be attributes, as provided by GDS 100. Alternatively, the descriptors can be generated based on attribute values. Other examples of attribute-link annotations can highlight other types of attributes, such as font attributes (size and type), fill color attributes, line attributes, etc.

[0083] In the example, attribute-link annotations can also include attribute-based calculations, where the value reflected by the annotation is a calculated value using one or more attributes (or properties) associated with the selected design element. For example, attribute-link annotations can contain measurements reflecting the spacing or padding between selected design elements (e.g., in pixels), such as the spacing or padding between adjacent design elements.

[0084] As illustrated in the examples, attribute-linked annotations can logically link to both the graphic design and the specific design element upon which the annotation is based. If an attribute used with an attribute-linked annotation changes due to a change in the graphic design, the attribute value or content reflected in the annotation will automatically update to reflect the changed attribute value. Similarly, for attribute-linked annotations that contain measured or calculated values, when the design input updates the graphic design to change the measured values, the content of such annotations will also automatically update to include the updated measured values ​​of the selected design element for that annotation.

[0085] Figures 5A to 5D The illustration shows a sample design interface based on one or more examples, which allows users to create attribute-link annotations for graphic design. Figure 5E The illustration shows an example design interface based on one or more examples, implemented in an alternative mode in which attribute-link annotations are rendered or otherwise made available.

[0086] exist Figure 5A In this design interface 500, a graphic design 510 is included, which consists of multiple design elements corresponding to images, frames, and text elements. The design interface 500 also includes a tool panel 520, allowing users to view attributes and measurements, and place attribute-link annotations on the design interface 510. In the example, the tool panel 520 includes an inspection tool 522; selecting this tool displays the attributes of the design interface 500 on the graphic design 510. Furthermore, the tool panel 520 includes an annotation tool 524; selecting this tool allows users to assign attribute-link annotations to specific design elements. (See also: [link to related documentation]). Figure 5E As described, when the design interface switches to an alternative mode (e.g., developer mode), attribute-linked annotations can be displayed to the developer so that the developer can easily discover the fine details of the graphic design 510. In one example shown, the user can interact with the tool panel 520 to select the annotation tool 524, thereby linking the annotation to the selected design element 512 to display the value of a specific type of attribute or property.

[0087] Tool panel 520 may also include measurement tool 526, which generates and calculates measurements of a specific design element (relative to another design element or reference). This measurement tool may also reflect the inner margins between adjacent design elements. The measurement tool can be used to automatically determine measurements and generate attribute-link annotations containing those measurements.

[0088] For reference Figures 5B to 5DAs shown, a user (e.g., a designer) can interact with design element 512 or a corresponding part of graphic design 510 to generate annotation panel 530. In the example shown, annotation panel 530 is implemented as a floating panel that appears next to or near the selected design element 512 in response to specified user input. For example, annotation panel 530 becomes available when the user selects annotation tool 524. Annotation panel 530 allows the user to select attribute types for new or existing annotations. In the example shown, each attribute type corresponds to one attribute type. Furthermore, annotation panel 530 can be generated to automatically determine and display attribute values ​​associated with the selected design element as part of annotation toolbar 530.

[0089] Therefore, users can interact with the annotation panel 530 to select one of several property types for the selected design element 512. The annotation panel 530 can be dynamic, meaning it can expand to display an options menu for selecting the properties of the annotation. (Regarding...) Figure 5B and Figure 5C In the example shown, the annotation panel 530 is collapsed, allowing the user to select to add a first feature (e.g., font size). Figure 5B ) and second characteristic ( Figure 5C Each time a property is selected, the property panel 530 expands to display a set of properties. Users can interact with the annotation tool 530 to select specific property types. For example, the value of the property (i.e., the attribute value) of the selected design element 512 is displayed in the annotation tool 530. The annotation tool 530 allows users to select any one of several properties to display the corresponding attribute value associated with the selected design element 512. In the example shown, the property types displayed using the annotation panel 530 include, for example: (i) size properties, specifying the height or width of the design element on the canvas; (ii) orientation properties, specifying whether the design element 512 is vertically or horizontally aligned; (iii) alignment properties, specifying the padding (or spacing) properties associated with the selected design element 512 (e.g., the spacing between design element 512 and other design elements); and / or (iv) padding properties.

[0090] Figure 5EThe design interface 500 implemented in an alternative mode (e.g., developer mode) is shown. In developer mode, attribute-link annotations 540 are displayed above the graphic design 510. When the design interface 500 switches to the alternative developer mode, the attribute-link annotations can be displayed automatically. As shown, annotation 540 can display the attribute values ​​of design element 512 based on the properties selected by the user in the annotation panel 530. Furthermore, in the variant shown, attribute-link annotations 540 can be constructed as overlay objects, such as notes. In some variants, annotation 540 can contain text or other content manually inserted by one or more users (e.g., designers, developers, etc.).

[0091] In the example, annotation 540 is linked to an attribute, meaning that the annotation (i) displays the value of the linked attribute when the attribute is displayed (e.g., when developer mode is implemented), and (ii) automatically updates to reflect the changed value of the linked attribute when the linked attribute changes (e.g., as a result of a design user changing the design interface). Therefore, when design element 512 receives an edit that changes the attribute displayed along with the annotation, the content of the annotation will also automatically change to reflect the updated property value of design element 512.

[0092] Among other advantages, the example shown in the figure allows developers to view annotation 540 when using the design interface in developer mode, or otherwise inspect / write the code that implements design interface 510 in a production environment.

[0093] Network computer system Figure 6 The illustration depicts a computer system that can implement one or more embodiments. Computer system 600 can be implemented, for example, on a single server or a combination of multiple servers. For example, computer system 600 can be implemented as... Figure 1 The network computing system 150 in the middle.

[0094] In one embodiment, 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. Computer system 600 includes at least one processor 610 for processing information stored in memory resource 620, such as information provided by random access memory (RAM) or other dynamic storage devices for storing information and instructions executable by processor 610. Memory resource 620 can also be used to store temporary variables or other intermediate information during the execution of instructions executed by processor 610.

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

[0096] For example, processor 610 can execute service instructions 622 stored in memory resource 620 to enable the network computing system to achieve, for example, Figure 1 The functions described in the network computing system 150.

[0097] Computer system 600 may also include additional memory resources (“instruction memory 640”) for storing executable instruction sets to enable the graphics design system 100 to be implemented via, for example, a browser application 80. Graphics design system instructions (“GDS instructions 645”) may be embedded in web pages and other network resources to enable user computing devices to perform the functions described with respect to GDS 100.

[0098] Therefore, the examples described herein relate to implementing the techniques described herein using a computer system 600. According to one aspect, the computer system 600 implements the techniques in response to processor 610 executing one or more sequences of one or more instructions contained in memory 620. These instructions may be read into memory 620 from other machine-readable media. Executing the sequence of instructions contained in memory 620 causes processor 610 to perform the processing steps described herein. In alternative implementations, hardwired circuitry may be used instead 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.

[0099] User computing devices Figure 7 The illustration depicts a user computing device for one or more examples, as described above. In the examples, user computing device 700 may correspond to, for example, a workstation, desktop computer, laptop computer, or other computer system with graphics processing capabilities suitable for rendering design interfaces and performing graphic design work. In some variations, user computing device 700 may correspond to a mobile computing device, such as a smartphone, tablet, laptop computer, VR or AR headset, etc.

[0100] For example, computing device 700 includes a central processing unit or main processor 710, a graphics processing unit 712, memory resources 720, and one or more communication ports 730. 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. Users can use communication ports 730 to operate the browser 725 to access the web site of network computing system 150, thereby downloading one or more web pages or other resources 705 (see [link to web page download]) for network computing system 150. Figure 1 These web resources 705 can be stored in active memory 724 (cache).

[0101] As described in various examples, processor 710 can detect and execute scripts and other logic embedded in web resources to implement the graphical design system 100. Figure 1 In some examples, certain scripts 715 embedded in Web resource 705 may contain GPU-accelerated logic that is executed directly by GPU 712. The main processor 710 and the GPU can work together to render the design interface being edited (“DIUE 711”) on display component 740. The rendered design interface may contain Web content from browser 725, as well as design interface content and functional elements generated by scripts and other logic embedded in Web resource 705. As described in various examples, by including scripts 715 that can be executed directly on GPU 712, the logic embedded in the Web resource can better perform the graphical design system 100.

[0102] in conclusion While 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 specific examples. Therefore, the scope of these concepts is intended to be defined by the following claims and their equivalents. Furthermore, specific features described individually or as part of examples may be combined with other individually described features or portions of other examples, even if the other features and examples do not mention that specific feature. Therefore, such undescribed combinations should not be excluded from rights.

Claims

1. A computer-implemented method, the computer-implemented method comprising: Maintain a graphic design dataset for graphic design, wherein the graphic design dataset constructs the graphic design as a collection of layers, wherein each layer corresponds 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 text identifier; In response to user interaction with a selected layer in the set, generate instructions or annotations based on selected attributes of the selected layer; and The annotation is logically linked to the selected attribute, such that an update to the selected layer in the set automatically updates the annotation.

2. The method of claim 1, further comprising: Multiple rendering modes are provided for viewing the graphic design, including a design mode and a developer mode, wherein in the developer mode, all annotations created for the graphic design can be viewed simultaneously.

3. The method as described in claim 1, wherein, The annotation corresponds to an entry that contains an attribute value or an alphanumeric entry that corresponds to an attribute value.

4. The method of claim 1, wherein, Logically linking the annotation to the selected attribute includes: automatically updating the annotation to reflect the change to the selected attribute in response to user input for updating the graphic design to change the selected attribute.

5. The method of 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 also changes to be consistent with the change in the selected attribute.

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

7. The method of claim 1, wherein, The selected attribute includes the measured value.

8. The method of claim 1, further comprising: This allows the user to switch each annotation in the graphic design between visible and invisible states, and to filter annotations by type or content.

9. A network computer system, the network computer system comprising: One or more processors; Memory used to store instructions; Wherein, the one or more processors execute the instructions to perform operations, the operations including: Maintain a graphic design dataset for graphic design, wherein the graphic design dataset constructs the graphic design as a collection of layers, wherein each layer corresponds 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 text identifier; Enable the rendering mode, in which the attribute values ​​of each layer are displayed along with the graphic design; and In response to the user's selection of the displayed attribute value, generate a comment indicating the displayed attribute; Logically link the annotations to the displayed attributes.

10. The computer system of claim 9, wherein, The operation also includes: Multiple rendering modes are provided for viewing the graphic design, including a design mode and a developer mode, wherein in the developer mode, all annotations created for the graphic design can be viewed simultaneously.

11. The computer system of claim 9, wherein, The annotation corresponds to an entry that contains an attribute value or an alphanumeric entry that corresponds to an attribute value.

12. The computer system of claim 9, wherein, Logically linking the annotation to the selected attribute includes: automatically updating the annotation to reflect the change to the selected attribute in response to user input for updating the graphic design to change the selected attribute.

13. The computer system of 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 also changes to be consistent with the change in the selected attribute.

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

15. The computer system of claim 9, wherein, The selected attribute includes the measured value.

16. The computer system of claim 9, wherein, The operation also includes: This allows the user to switch each annotation in the graphic design between visible and invisible states, and to filter annotations by type or content.

17. A non-transitory computer-readable medium storing instructions that, when executed by one or more processors of a computer system, cause the computer system to perform operations, the operations comprising: Maintain a graphic design dataset for graphic design, wherein the graphic design dataset constructs the graphic design as a collection of layers, wherein each layer corresponds 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 text identifier; Enable the rendering mode in which the attribute values ​​of each layer are displayed along with the graphic design; and In response to the user's selection of the displayed attribute value, generate a comment indicating the displayed attribute; Logically link the annotations to the displayed attributes.

18. The non-transitory computer-readable medium of claim 17, wherein, The operation also includes: Multiple rendering modes are provided for viewing the graphic design, including a design mode and a developer mode, wherein in the developer mode, all annotations created for the graphic design can be viewed simultaneously.

19. The non-transitory computer-readable medium of claim 17, wherein, The annotation corresponds to an entry that contains an attribute value or an alphanumeric entry that corresponds to an attribute value.

20. The non-transitory computer-readable medium of claim 17, wherein, Logically linking the annotation to the selected attribute includes: automatically updating the annotation to reflect the change to the selected attribute in response to user input for updating the graphic design to change the selected attribute.

Images