# US 12,182,912 B2 · Systems and methods of generating a design based on a design template and another design

> Agents: this data is available as JSON from the patentgrep API and MCP server — see https://patentgrep.com/llms.txt

- Number: US 12,182,912 B2
- Document ID: US12182912B2
- Status: Granted
- Kind: B2
- Application number: 17/603,615
- Filed: 2020-04-15
- Published: 2022-07-07
- Granted: 2024-12-31
- Earliest claimed: 2019-04-15
- Assignees: Canva Pty Ltd
- Applicants: Canva Pty Ltd
- Inventors: William Radford; Melanie Joy Perkins; Tristan Martin; Sam Parkinson; Stanislav Salnikov; Adam Schuck; Lynneal Santos
- Web page: https://patentgrep.com/patent/US12182912B2

## CPC

- G06F 40/103: Formatting, i.e. changing of presentation of documents (automatic justification G06F40/189; automatic line break hyphenation G06F40/191)
- G06F 16/9577: {Optimising the visualization of content, e.g. distillation of HTML documents}
- G06F 40/109: Font handling; Temporal or kinetic typography
- G06F 40/186: Templates
- G06T 11/60: Creating or editing images; Combining images with text
- G06T 2200/24: involving graphical user interfaces [GUIs]
- G06F: ELECTRIC DIGITAL DATA PROCESSING (computer systems based on specific computational models G06N)
- G06T: IMAGE DATA PROCESSING OR GENERATION, IN GENERAL

## Abstract

An apparatus includes a processor configured to receive, during editing of a first design, user input indicating that a first design element has a first content role. The processor is configured to generate a content signature of the first design indicating that the first design element has the first content role, to generate a second design based on a design template, and to update the second design by applying the content signature to the second design. Generating the second design includes, based on determining that the design template includes a second design element having the first content role, adding a third design element having the first content role to the second design. Applying the content signature to the second design includes transferring content from the first design element to the third design element. The processor is configured to generate a graphical user interface including an image of the second design.

## Claims

### Claim 1

An apparatus comprising:
a processor configured to:
cause the display of a first graphical user interface (GUI) for editing a first design on a client device, including display of the first design that was created based on a first template and that comprises a first design element;
receive, during the editing of the first design, user input assigning a first content role to the first design element of the first design, wherein the assignment is not part of the first template;
generate from the first design a content signature of the first design, the content signature indicating that the first design element has the first content role;
generate a second design by applying a second design template to the first design, the second design template being different to the first design template and including a second design element having the first content role, wherein responsive to determining based on the content signature that the second design template requires an additional design element having the first content role, generating the second design includes adding a third design element having the first content role to the second design, wherein responsive to determining that the second design element is included as a foreground element in a first group of design elements of the design template, adding the third design element as a foreground element in a second group of design elements of the second design;
update the second design by applying the content signature to the second design, wherein applying the content signature to the second design includes transferring content from the first design element to the third design element;
generate a second GUI that includes an image of the second design; and
cause the second GUI to be displayed by the client device.

### Claim 2 (depends on 1)

The apparatus of claim 1, wherein the first design element includes a text element, a foreground image, or a background image.

### Claim 3 (depends on 1)

The apparatus of claim 1, wherein the first design element indicates at least a first text and the processor is further configured to transfer the content from the first design element to the third design element by updating the third design element based on the first text.

### Claim 4 (depends on 1)

The apparatus of claim 1, wherein the processor is further configured to, prior to receiving the user input, determine the first content role of the second design element based on at least one of a width, a height, a text-transform attribute, a count of text words, a count of text lines, a relative position, a relative font size, a relative width, a count of words that are included in each of the text of the second design element and a description of the second design template, a position rank, element group membership, or an element count of the second design element.

### Claim 5 (depends on 1)

The apparatus of claim 1, wherein the processor is further configured to:
train a machine learning model to identify content roles of design elements of a plurality of test templates; and
determine the first content role of the second design element by applying the machine learning model to the design template.

### Claim 6 (depends on 1)

The apparatus of claim 1, wherein the processor is further configured to:
determine that the content signature indicates that a fourth design element having a second content role is included in the first design; and
based at least in part on determining that the second design does not include any design elements having the second content role, add the fourth design element to the second design.

### Claim 7 (depends on 1)

The apparatus of claim 1, wherein the processor is further configured to, in response to determining that the content signature indicates that a fourth design element is included in the first design and that the fourth design element is not associated with a content role, add the fourth design element to the second design.

### Claim 8 (depends on 1)

The apparatus of claim 1, wherein the processor is further configured to:
determine that the content signature indicates that a fourth design element is included in the first design;
determine a first rank of the fourth design element in the first design;
determine that a fifth design element is included in the second design; and
determine another rank of the fifth design element,
wherein applying the content signature to the second design includes, based at least in part on determining that the rank of the fourth design element matches the rank of the fifth design element, transferring content of the fourth design element to the fifth design element.

### Claim 9 (depends on 1)

The apparatus of claim 1, wherein the first design element includes a first text element, wherein the second design element includes a second text element, wherein the processor is further configured to:
determine a size of a bounding box of the second text element, and
determine a largest font size that results in a bounding box of the third design element has a size that is less than or equal to the determined size of the bounding box of the second text element, and
update the third design element to have the determined largest font size.

### Claim 10 (depends on 1)

The apparatus of claim 1, wherein the processor is further configured to, based on determining that the second design element is included in a first group of design elements of the design template, add the third design element to a second group of design elements of the second design.

### Claim 11 (depends on 1)

The apparatus of claim 1, wherein the processor is further configured to:
set the third design element to have a width equal to a width of the second design element determined by the processor; and
position the third design element to be a distance from a fourth design element of the second design equal to a distance of the second design element from a fifth design element of the design template, wherein the fourth design element is associated with the fifth design element.

### Claim 12 (depends on 1)

The apparatus of claim 1, wherein the processor is further configured to, based on determining that the second design element is included as a background element in a first group of design elements of the design template, add the third design element as a background element in a second group of design elements of the second design.

### Claim 13 (depends on 12)

The apparatus of claim 12, wherein the second group of design elements includes a plurality of foreground elements, and wherein a first size of a bounding box of the third design element is based on sizes of bounding boxes of the foreground elements.

### Claim 14

A method comprising:
causing, the display by a client device of a first graphical user interface (GUI) for editing a first design, including display of the first design that was created based on a first template and that comprises a first design element;
receiving, during editing at the client device of the first design, user input assigning a first content role to the first design element of the first design, wherein the assignment is not part of the first template;
generating from the first design, a content signature of the first design, the content signature indicating that the first design element has the first content role;
generating, a second design by applying a second design template to the first design, the second design template being different to the first design template and including a second design element having the first content role, wherein responsive to determining based on the content signature that the second design template requires an additional design element having the first content role, generating the second design includes adding a third design element having the first content role to the second design, wherein responsive to determining that the second design element is included as a foreground element in a first group of design elements of the design template, adding the third design element as a foreground element in a second group of design elements of the second design;
updating the second design by applying the content signature to a second design, wherein applying the content signature to the second design includes transferring content from the first design element to the third design element;
generating, a second GUI that includes an image of the second design; and
causing the display of the second GUI by the client device.

### Claim 15 (depends on 14)

The method of claim 14, wherein the first design element indicates at least a first image and the transferring content from the first design element to the third design element includes updating the third design element based on the first image.

### Claim 16 (depends on 15)

The method of claim 15, further comprising:
receiving, from the client device, user input indicating a selection of the image; and
in response to receiving the user input indicating a selection of the image, replacing the first design with the second design in a data storage device.

### Claim 17 (depends on 15)

The method of claim 15, further comprising:
receiving, from the client device, user input indicating a selection of the image;
in response to receiving the user input indicating a selection of the image, generating a third GUI including one or more fields to edit the second design; and
causing the client device to display the third GUI.

### Claim 18

A non-transitory computer-readable medium having stored thereon instructions that, when executed by one or more processors, cause the one or more processors to perform operations comprising:
causing, the display by a client device of a first graphical user interface (GUI) for editing a first design, including display of the first design that was created based on a first template and that comprises a first design element;
receiving, during editing at the client device of a first design, user input assigning a first content role to a first design element of the first design, wherein the assignment is not part of the first template;
generating from the first design a content signature of the first design, the content signature indicating that the first design element has the first content role;
generating a second design by applying a second design template to the first design, the second design template being different to the first template and including a second design element having the first content role, wherein responsive to determining that the second design template requires an additional design element having the first content role, generating the second design includes adding a third design element having the first content role to the second design, wherein responsive to determining that the second design element is included as a foreground element in a first group of design elements of the design template, adding the third design element as a foreground element in a second group of design elements of the second design;
updating the second design by applying the content signature to the second design, wherein applying the content signature to the second design includes transferring content from the first design element to the third design element;
generating a second GUI that includes an image of the second design; and
causing the display of the second GUI by the client device.

### Claim 19 (depends on 18)

The non-transitory computer-readable medium of claim 18, wherein the content is transferred from the first design element to the third design element based at least in part on determining that the content signature indicates that the first design element has been edited in the first design.

### Claim 20

An apparatus comprising:
a processor configured to:
receive, during editing of a first design that was created based on a first template and that comprises a first design element, user input assigning a first content role to the first design element of the first design, wherein the assignment is not part of the first template;
generate a content signature of the first design, the content signature indicating that the first design element has the first content role;
generate a second design based on a second design template different to the first design template and including a second design element having the first content role, wherein:
responsive to determining based on the content signature that the second design template requires an additional design element having the first content role, generating the second design includes adding a third design element having the first content role to the second design;
responsive to determining that the second design element is included as a foreground element in a first group of design elements of the design template, generating the second design includes adding the third design element as a foreground element in a second group of design elements of the second design;
update the second design by applying the content signature to the second design, wherein applying the content signature to the second design includes transferring content from the first design element to the third design element;
generate a graphical user interface (GUI) that includes an image of the second design; and
cause the GUI to be displayed by a client device.

### Claim 21

A method comprising:
receiving, during editing at a device of a first design that was created based on a first template and that comprises a first design element, user input assigning the first design element of the first design a first content role, wherein the assignment is not part of the first template;
generating, at the device, a content signature of the first design, the content signature indicating that the first design element has the first content role;
generating, at the device, a second design based on a second design template different to the first design template and including a second design element having the first content role, wherein generating the second design includes:
responsive to determining based on the content signature that the second design template requires an additional design element having the first content role, adding a third design element having the first content role to the second design; and
responsive to determining that the second design element is included as a foreground element in a first group of design elements of the design template, generating the second design includes adding the third design element as a foreground element in a second group of design elements of the second design;
updating the second design by applying the content signature to a second design, wherein applying the content signature to the second design includes transferring content from the first design element to the third design element;
generating, at the device, a graphical user interface (GUI) that includes an image of the second design; and
causing the display of the GUI by a client device.