SYSTEMS AND METHODS FOR GENERATING USER INTERFACE PROTOTYPES BASED ON PRODUCTION SYSTEM COMPONENTS

• US 20180181413A1
• Filed: 12/27/2016
• Published: 06/28/2018
• Est. Priority Date: 12/27/2016
• Status: Active Grant

• Current Assignee: Meta Platforms, Inc. (f/k/a Facebook, Inc.)
• Original Assignee: Meta Platforms, Inc. (f/k/a Facebook, Inc.)
• Inventors: Arunyaangkul, Phannipha, Obermiller, Ian Thomas Andrew, Brown, Rowland Lee
• Granted Patent: US 11,119,792 B2
• Time in Patent Office: Days
• CPC Class Codes: G06F 8/38 for implementing user interfaces
• CPC Class Codes: G06F 9/451 Execution arrangements for user interfaces

Abstract

Systems, methods, and non-transitory computer readable media can obtain a user interface (UI) component of a production system, wherein the UI component is associated with one or more properties. Each of the one or more properties can be mapped to a graphical user interface (GUI) element for display in a user interface of a design application. A value of a property of the one or more properties can be set based on user input from a GUI element associated with the property. A rendering of the UI component can presented in the user interface based on the set value of the property.

Claims

1. A computer-implemented method comprising:

obtaining, by a computing system, a user interface (UI) component of a production system, wherein the UI component is associated with one or more properties;

mapping, by the computing system, each of the one or more properties to a graphical user interface (GUI) element for display in a user interface of a design application;

setting, by the computing system, a value of a property of the one or more properties based on user input from a GUI element associated with the property; and

presenting, by the computing system, a rendering of the UI component in the user interface based on the set value of the property.

2. The computer-implemented method of claim 1, wherein the rendering of the UI component is obtained from the production system.

3. The computer-implemented method of claim 1, wherein the design application is based on the production system.

4. The computer-implemented method of claim 1, wherein the UI component includes one or more of:

a button, a table, a chart, a text field, a text box, a selector, or a navigation bar.

5. The computer-implemented method of claim 1, wherein the GUI element includes one or more of:

a text field, a text box, or a selector.

6. The computer-implemented method of claim 1, further comprising converting the user input to one or more data structures.

7. The computer-implemented method of claim 1, further comprising associating a first property of the UI component with a second property of the UI component.

8. The computer-implemented method of claim 1, further comprising specifying for an action associated with the UI component one or more of:

a page, an image, or data.

9. The computer-implemented method of claim 1, further comprising generating an interactive prototype including the UI component.

10. The computer-implemented method of claim 9, wherein the design application includes a design mode and a preview mode, and the interactive prototype is provided in the preview mode.

11. A system comprising:

at least one hardware processor; and

a memory storing instructions that, when executed by the at least one processor, cause the system to perform;

obtaining a user interface (UI) component of a production system, wherein the UI component is associated with one or more properties;

mapping each of the one or more properties to a graphical user interface (GUI) element for display in a user interface of a design application;

setting a value of a property of the one or more properties based on user input from a GUI element associated with the property; and

presenting a rendering of the UI component in the user interface based on the set value of the property.

12. The system of claim 11, wherein the rendering of the UI component is obtained from the production system.

13. The system of claim 11, wherein the instructions further cause the system to perform converting the user input to one or more data structures.

14. The system of claim 11, wherein the instructions further cause the system to perform specifying for an action associated with the UI component one or more of:

a page, an image, or data.

15. The system of claim 11, wherein the instructions further cause the system to perform generating an interactive prototype including the UI component.

16. A non-transitory computer readable medium including instructions that, when executed by at least one hardware processor of a computing system, cause the computing system to perform a method comprising:

obtaining a user interface (UI) component of a production system, wherein the UI component is associated with one or more properties;

mapping each of the one or more properties to a graphical user interface (GUI) element for display in a user interface of a design application;

setting a value of a property of the one or more properties based on user input from a GUI element associated with the property; and

presenting a rendering of the UI component in the user interface based on the set value of the property.

17. The non-transitory computer readable medium of claim 16, wherein the rendering of the UI component is obtained from the production system.

18. The non-transitory computer readable medium of claim 16, wherein the method further comprises converting the user input to one or more data structures.

19. The non-transitory computer readable medium of claim 16, wherein the method further comprises specifying for an action associated with the UI component one or more of:

a page, an image, or data.

20. The non-transitory computer readable medium of claim 16, wherein the method further comprises generating an interactive prototype including the UI component.