US-12625591-B2 - Tool for arranging objects and adjusting spacing in a layout

US12625591B2US 12625591 B2US12625591 B2US 12625591B2US-12625591-B2

Abstract

Computer-implemented design tool functions are described herein for recognizing organized collections of objects in a design layout, and providing controls to manipulate, in a selected organized collection, individual objects and arrangements of multiple objects. In an embodiment, a computing device determines whether an arrangement of selected objects in a design layout satisfies certain criteria, and if so, the computing device recognizes the arrangement as an organized collection, and provides controls within a selected organized collection to perform various operations to manipulate an individual object within the selected organized collection while automatically and dynamically modifying the organized collection to maintain desired uniformity in the collection.

Inventors

Rasmus Mathias Andersson
Ryan Jonathan Kaplan
Shuaihang Wang
Joshua Shi
Badrul Farooqi
Dave Pagurek van Mossel

Assignees

Figma, Inc.

Dates

Publication Date: 20260512
Application Date: 20230516

Claims (20)

1 . A method comprising: causing a display device to display a plurality of objects in a design layout, wherein within the design layout, a subset of objects from the plurality of objects is arranged in a first arrangement; determining that the first arrangement of the subset of objects satisfies criteria for treating the subset of objects as an organized collection, the criteria being based on a spatial relationship between objects in the subset of objects in the design layout; after determining that the first arrangement of the subset of objects satisfies the criteria, receiving one or more inputs to perform a criteria-violating arrangement operation, wherein the criteria-violating arrangement operation violates the criteria based on performing the criteria-violating arrangement operation resulting in an intermediate arrangement of the subset of objects that violates the criteria for treating the subset of objects as an organized collection; in response to determining (a) that the first arrangement of the subset of objects satisfies the criteria and (b) that the intermediate arrangement for the subset of objects violates the criteria for treating the subset of objects as an organized collection, automatically rearranging the subset of objects into a second arrangement, different from both the first arrangement and the intermediate arrangement, that satisfies the criteria for treating the subset of objects as an organized collection; and causing the display device to display the second arrangement of the subset of objects.
2 . The method of claim 1 , wherein: each object of the subset of objects is included in one or more lists; and the criteria includes, within each list of the one or more lists, uniform spacing along a first axis for each object in each said list.
3 . The method of claim 2 , wherein the criteria further include: an overlap along the first axis of each object in each said list including overlap along the first axis between a bounding box around each object in each said list; and the uniform spacing along the first axis between each object in each said list including uniform spacing along the first axis between bounding boxes of adjacent objects in each said list.
4 . The method of claim 3 , wherein a list including a single object satisfies the criteria of the overlap along the first axis of each object in each said list, and the uniform spacing along the first axis between each object in each said list.
5 . The method of claim 3 , wherein the criteria further include each object of the subset of objects being included in a single list of the one or more lists.
6 . The method of claim 3 , wherein the criteria further include, when the one or more lists include a plurality of lists, within each list: overlap along the first axis of each object in each said list includes a center of each object in each said list being aligned along the first axis; and uniform spacing along the first axis between each object in each said list includes uniform spacing along the first axis between a bounding box of adjacent objects in each said list.
7 . The method of claim 6 , wherein the criteria further include, when the one or more lists include the plurality of lists, the uniform spacing along a second axis between lists of the plurality of lists includes uniform spacing along the second axis between respective bounding boxes around adjacent lists of the plurality of lists.
8 . The method of claim 2 , further comprising, in response to determining that the first arrangement of the subset of objects satisfies the criteria: causing the display device to display a first control and a second control, wherein the first control is configured to receive input to select one or more objects for interaction within the organized collection, and wherein the second control is configured to receive input to adjust at least one of spacing between objects within the organized collection or to adjust spacing between lists within the organized collection; allowing arrangement operations on the one or more objects selected via the first control and on spacing adjustments received via the second control; wherein the arrangement operations comprise operations on the one or more objects selected via the first control or on spacing adjustments received via the second control; wherein rearranging the subset of objects into the second arrangement comprises automatically adjusting spacing to maintain, within each list, uniform spacing along the first axis between each object in each said list, and to maintain, when the one or more lists include a plurality of lists, uniform spacing along a second axis between lists of the plurality of lists.
9 . The method of claim 2 , wherein performing the criteria-violating arrangement operation on the organized collection includes: marking multiple objects of the subset of objects; and one or more of moving the marked multiple objects as a group, or adjusting one or more dimensions of the marked multiple objects as a group.
10 . The method of claim 1 , further comprising: causing the display device to display a third arrangement of the subset of objects; in response to determining that the third arrangement of the subset of objects violates the criteria for treating the subset of objects as an organized collection, receiving input to generate a fourth arrangement of the subset of objects; in response to receiving the input to generate the fourth arrangement, generating the fourth arrangement of the subset of objects that satisfies the criteria; and causing the display device to display the fourth arrangement of the subset of objects.
11 . The method of claim 10 , further comprising: after determining that the fourth arrangement of the subset of objects satisfies the criteria, receiving one or more second inputs to perform a subsequent criteria-violating arrangement operation, wherein the subsequent criteria-violating arrangement operation violates the criteria based on a resulting subsequent arrangement of the subset of objects that violate the criteria for treating the subset of objects as an organized collection; in response to the one or more second inputs, performing the subsequent criteria-violating arrangement operation on the organized collection to generate a subsequent intermediate arrangement for the subset of objects; determining that the subsequent intermediate arrangement for the subset of objects violates the criteria for treating the subset of objects as an organized collection; in response to determining that the subsequent intermediate arrangement for the subset of objects violates the criteria for treating the subset of objects as an organized collection, automatically rearranging the subset of objects into a fifth arrangement that satisfies the criteria for treating the subset of objects as an organized collection.
12 . One or more non-transitory computer-readable storage medium storing instructions that, when executed by one or causing one or more processors, cause the one or more processors to perform functions comprising: causing a display device to display a plurality of objects in a design layout, wherein within the design layout, a subset of objects from the plurality of objects is arranged in a first arrangement; determining that the first arrangement of the subset of objects satisfies criteria for treating the subset of objects as an organized collection, the criteria being based on a spatial relationship between objects in the subset of objects in the design layout; after determining that the first arrangement of the subset of objects satisfies the criteria, receiving one or more inputs to perform a criteria-violating arrangement operation, wherein the criteria-violating arrangement operation violates the criteria based on performing the criteria-violating arrangement operation resulting in an intermediate arrangement of the subset of objects that violates the criteria for treating the subset of objects as an organized collection; in response to determining (a) that the first arrangement of the subset of objects satisfies the criteria and (b) that the intermediate arrangement for the subset of objects violates the criteria for treating the subset of objects as an organized collection, automatically rearranging the subset of objects into a second arrangement, different from both the first arrangement and the intermediate arrangement, that satisfies the criteria for treating the subset of objects as an organized collection; and causing the display device to display the second arrangement of the subset of objects.
13 . The one or more non-transitory computer-readable storage medium of claim 12 , wherein: each object of the subset of objects is included in one or more lists; and the criteria includes, within each list of the one or more lists, uniform spacing along a first axis for each object in each said list.
14 . The one or more non-transitory computer-readable storage medium of claim 13 , wherein the criteria further include: an overlap along the first axis of each object in each said list including overlap along the first axis between a bounding box around each object in each said list; and the uniform spacing along the first axis between each object in each said list including uniform spacing along the first axis between bounding boxes of adjacent objects in each said list.
15 . The one or more non-transitory computer-readable storage medium of claim 14 , wherein a list including a single object satisfies the criteria of the overlap along the first axis of each object in each said list, and the uniform spacing along the first axis between each object in each said list.
16 . The one or more non-transitory computer-readable storage medium of claim 14 , wherein the criteria further include each object of the subset of objects being included in a single list of the one or more lists.
17 . The one or more non-transitory computer-readable storage medium of claim 14 , wherein the criteria further include, when the one or more lists include a plurality of lists, within each list: overlap along the first axis of each object in each said list includes a center of each object in each said list being aligned along the first axis; and uniform spacing along the first axis between each object in each said list includes uniform spacing along the first axis between a bounding box of adjacent objects in each said list.
18 . The one or more non-transitory computer-readable storage medium of claim 13 , further comprising, in response to determining that the first arrangement of the subset of objects satisfies the criteria: causing the display device to display a first control and a second control, wherein the first control is configured to receive input to select one or more objects for interaction within the organized collection, and wherein the second control is configured to receive input to adjust at least one of spacing between objects within the organized collection or to adjust spacing between lists within the organized collection; allowing arrangement operations on the one or more objects selected via the first control and on spacing adjustments received via the second control; wherein the arrangement operations comprise operations on the one or more objects selected via the first control or on spacing adjustments received via the second control; wherein rearranging the subset of objects into the second arrangement comprises automatically adjusting spacing to maintain, within each list, uniform spacing along the first axis between each object in each said list, and to maintain, when the one or more lists include a plurality of lists, uniform spacing along a second axis between lists of the plurality of lists.
19 . The one or more non-transitory computer-readable storage medium of claim 12 , further comprising: causing the display device to display a third arrangement of the subset of objects; in response to determining that the third arrangement of the subset of objects violates the criteria for treating the subset of objects as an organized collection, receiving input to generate a fourth arrangement of the subset of objects; in response to receiving the input to generate the fourth arrangement, generating the fourth arrangement of the subset of objects that satisfies the criteria; and causing the display device to display the fourth arrangement of the subset of objects.
20 . The one or more non-transitory computer-readable storage medium of claim 19 , further comprising: after determining that the fourth arrangement of the subset of objects satisfies the criteria, receiving one or more second inputs to perform a subsequent criteria-violating arrangement operation, wherein the subsequent criteria-violating arrangement operation violates the criteria based on a resulting subsequent arrangement of the subset of objects that violate the criteria for treating the subset of objects as an organized collection; in response to the one or more second inputs, performing the subsequent criteria-violating arrangement operation on the organized collection to generate a subsequent intermediate arrangement for the subset of objects; determining that the subsequent intermediate arrangement for the subset of objects violates the criteria for treating the subset of objects as an organized collection; in response to determining that the subsequent intermediate arrangement for the subset of objects violates the criteria for treating the subset of objects as an organized collection, automatically rearranging the subset of objects into a fifth arrangement that satisfies the criteria for treating the subset of objects as an organized collection.

Description

BENEFIT CLAIM This application claims the benefit as a continuation of application Ser. No. 17/961,816, filed Oct. 7, 2022, by Rasmus Mathias Andersson et al.; which claims the benefit as a continuation of application Ser. No. 16/574,061, filed Sep. 17, 2019, now U.S. Pat. No. 11,481,083 issued Oct. 25, 2022; which claims the benefit under 35 U.S.C. § 119(e) of provisional application 62/733,010 filed Sep. 18, 2018, the entire content of which is hereby incorporated by reference for all purposes as if fully set forth herein. FIELD OF THE INVENTION The present disclosure relates to a design tool, and more particularly to a computer-implemented design tool that facilitates arranging objects and adjusting spacing in layouts. BACKGROUND A designer uses computer-implemented design tools to create a design, layout, or interface for a wide variety of applications, such as for a graphical user interface, an email application layout, a social media timeline, an advertising graphic, a technical drawing, a flowchart, a set of slides, an image gallery, and/or some other table or grid view or other collection of data or other content. Computer-implemented design tools help to facilitate various aspects of the creation process, however, some aspects remain quite tedious. For instance, designers spend considerable time and effort placing and rearranging objects in a design layout and/or adjusting spacing between objects, which often requires separate and repetitive inputs to move and adjust each of potentially many objects in the layout. Generally, objects in a design layout may include different design elements, such as text boxes, containers for media elements or other content, user-input controls, and other design elements, each of which may practically have any desired shape. The approaches described in this section are approaches that could be pursued, but not necessarily approaches that have been previously conceived or pursued. Therefore, unless otherwise indicated, it should not be assumed that any of the approaches described in this section qualify as prior art merely by virtue of their inclusion in this section. BRIEF DESCRIPTION OF THE DRAWINGS The example embodiment(s) of the present disclosure are illustrated by way of example, and not in way by limitation, in the figures of the accompanying drawings and in which like reference numerals refer to similar elements. FIG. 1 is a flowchart for providing computer-implemented design tool functions according to an embodiment. FIG. 2 illustrates arrangements of objects and organized collections. FIG. 3 illustrates an arrangement of objects and operations performed on the arrangement to adjust spacing between objects and lists according to an embodiment. FIG. 4 illustrates an arrangement of objects in a list and operations to adjust spacing between objects according to an embodiment. FIG. 5 illustrates an arrangement of objects and operations performed to rearrange objects within the arrangement according to an embodiment. FIG. 6 illustrates an arrangement of objects in a list and operations performed to rearrange objects within the list according to an embodiment. FIG. 7 illustrates an arrangement of objects in a list and operations performed to rearrange multiple objects at once within the list according to an embodiment. FIG. 8 illustrates an arrangement of objects in a list and operations performed to rearrange objects within the list using keyboard input according to an embodiment. FIG. 9 illustrates an arrangement of objects in a list and operations performed to resize an object within the list according to an embodiment. FIG. 10 illustrates an arrangement of objects in a list and operations performed to resize multiple objects at once within the list according to an embodiment. FIG. 11 illustrates an arrangement of objects in a list and operations performed to duplicate and delete objects according to an embodiment. FIG. 12 illustrates an operation to create an organized collection from an arrangement of objects according to an embodiment. FIG. 13 is a block diagram of a computing device in which the present disclosure may be embodied. FIG. 14 is a block diagram of a basic software system for controlling the operation of the computing device. DESCRIPTION OF THE EXAMPLE EMBODIMENT(S) In the following description, for the purposes of explanation, numerous specific details are set forth in order to provide a thorough understanding of the example embodiment(s) of the present disclosure. It will be apparent, however, that the example embodiment(s) may be practiced without these specific details. In other instances, well-known structures and devices are shown in block diagram form in order to avoid unnecessarily obscuring the example embodiment(s). General Overview Computer-implemented design tool functions are described herein for recognizing organized collections of objects in a design layout, and providing controls to manipulate, in a selected organized collection,