Systems and methods for adding a design element to a design

Patent metadata

Field	Value
Publication number	US-12412002-B2
Application number	US-202217994376-A
Country	US
Kind code	B2
Filing date	Nov 27, 2022
Priority date	Dec 3, 2021
Publication date	Sep 9, 2025
Grant date	Sep 9, 2025

Abstract

Described herein is a computer implemented method for adding an element to a design. The method includes displaying a design canvas and, in response to detecting an insert element user interaction, displaying a quick-add GUI. Text query data is received via the quick-add GUI and a submit query user interaction is detected. In response to determining that the submit query user interaction is associated with an add defined element command, a first design element that is associated with the add defined element command is added to the design.

First claim

The invention claimed is:

1. A computer implemented method for adding an element to a design, the method including:
displaying a design canvas in a design preview area of a user interface;
detecting an insert element user interaction;
in response to detecting the insert element user interaction, displaying a quick-add graphical user interface (GUI), wherein the quick-add GUI is displayed in the design preview area of the user interface and includes a text input field;
receiving text query data via the text input field, wherein the text query data is received through user interaction with the text input field;
detecting a submit query user interaction that submits the text query data, wherein the submit query user interaction is performed after receiving the text query data; and
in response to detecting the submit query user interaction:
determining that the text query data is associated with a defined element string, the defined element string being associated with a first design element; and
in response to determining that the text query data is associated with the defined element string, automatically adding the first design element to the design and displaying the first design element on the design canvas.

2. The computer implemented method of claim 1 , wherein in response to receiving the text query data, the method further includes:
determining that the text query data matches the defined element string; and
in response to determining that the text query data matches the defined element string, displaying a first element name that is associated with the defined element string in the quick-add GUI as a suggested command.

3. The computer implemented method of claim 1 , wherein automatically adding the first design element to the design includes:
determining one or more first element attributes for the first design element;
causing a first element record to be generated, the first element record including data identifying the first design element and the one or more first element attributes;
causing the first element record to be added to design data defining the design; and
displaying the first design element on the canvas in accordance with the one or more first element attributes.

4. The computer implemented method according to claim 3 , wherein determining the one or more first element attributes for the first design element includes determining at least one default first element attribute for the first design element, and wherein the at least one default first element attribute is selected from a group including: a default element size attribute; a default element position attribute; and one or more default element colour attributes.

5. The computer implemented method according to claim 3 , wherein determining the one or more first element attributes for the first design element includes determining a position attribute, and the method further includes:
determining an interaction position on the canvas, the interaction position based on a position of the insert element user interaction; and
determining the position attribute based on the interaction position.

6. The computer implemented method according to claim 3 , wherein determining the one or more first element attributes for the first design element includes determining a size attribute, and the method further includes:
determining the size attribute based on a design page size.

7. The computer implemented method according to claim 3 , wherein determining the one or more first element attributes for the first design element includes determining a size attribute, and the method further includes:
determining the size attribute based on size data associated with one or more existing design elements that have already been added to the design.

8. The computer implemented method according to claim 3 , wherein determining the one or more first element attributes for the first design element includes determining a colour attribute, and the method further includes:
determining the colour attribute based on colour data associated with one or more existing design elements that have already been added to the design.

9. The computer implemented method according to claim 1 , wherein the first design element is selected from a group including: a text element; a line element; an arrow element; a circle element; a square element; a rectangle element; a heart element; a chart element; a star element; a triangle element; a hexagon element; and a pentagon element.

10. The computer implemented method according to claim 1 , wherein after displaying the first design element on the design canvas the method further includes automatically ceasing to display the quick-add GUI.

11. The computer implemented method according to claim 1 , wherein the method further includes displaying an asset preview area that is separate to the design preview area and is displayed while the design preview area is displayed.

12. The computer implemented method according to claim 11 , wherein the asset preview area includes a search control via which a user can submit search data to search for design elements, and wherein the search control is separate to the text input field of the quick-add user interface and the search control is displayed while the text input field of the quick-add user interface is displayed.

13. The computer implemented method according to claim 1 , wherein the insert element user interaction is a keyboard shortcut.

14. The computer implemented method according to claim 1 , wherein the quick-add GUI is displayed on top of the design canvas.

15. A computer implemented method for adding an element to a design, the method including:
displaying a design canvas in a design preview area of a user interface;
detecting an insert element user interaction;
in response to detecting the insert element user interaction, displaying a quick-add graphical user interface (GUI), wherein the quick-add GUI is displayed in the design preview area of the user interface and includes a text input field;
receiving text query data via the text input field, wherein the text query data is received through user interaction with the text input field;
detecting a submit query user interaction that submits the text query data, wherein the submit query user interaction is performed after receiving the text query data; and
in response to detecting the submit query user interaction:
determining that the text query data is associated with a search category; and
in response to determining that the text query data is associated with the search category:
causing a design element search to be performed based on the search category and the text query data, wherein the design element search identifies one or more search results, and wherein each search result is associated with a design element; and
displaying previews of the one or more search results in the quick-add GUI.

16. The computer implemented method according to claim 15 , further including:
receiving user input selecting a particular preview, the particular preview associated with a second design element; and
responsive to receiving the input selecting the particular search preview, adding the second design element to the design.

17. The computer implemented method of claim 16 , wherein adding the second design element to the design includes:
determining one or more second element attributes for the second design element;
causing a second element record to be generated, the second element record including data identifying the second design element and the one or more second

Assignees

• Canva Pty Ltd

Inventors

• Fallows Marc
• Wu Danny
• Rothe Shannon Michael
• Zorz Katherine Nicole
• Perkins Melanie Joy
• Freeman Andrew Francis Argente

Classifications

• G06F16/9038

  Presentation of query results · CPC title

• G06F3/0481

  based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance · CPC title

• G06F30/12 Primary

  characterised by design entry means specially adapted for CAD, e.g. graphical user interfaces [GUI] specially adapted for CAD · CPC title

• G06T11/60 Primary

  Creating or editing images; Combining images with text · CPC title