Bi-directional design-to-code
A system and method for bi-directional design to code are disclosed. In one embodiment, the system includes a processor; a memory storing instructions that, when executed, cause the system to obtain, by a plugin, a web application design, the web application design generated using a first design tool; generate, by the plugin, an object model based on the web application design; access, by a configurator, the object model; and generate, by the configurator, for presentation to a developer, the web application design.
1. A method comprising:
obtaining, using one or more processors, an object model associated with a web application design, wherein the web application design was initially designed using a first designer-selected design tool, and wherein the object model is integrated development environment and design tool agnostic;
updating, using the one or more processors, the object model based on a modification to the web application design made via one or more of a developer-selected, integrated development environment and a second designer-selected design tool; and
presenting, based on the updated object model, an updated web application design using one or more of:
the first designer-selected design tool,
the second designer-selected design tool when the modification is made via the developer-selected, integrated development environment, and
the developer-selected, integrated development environment when the modification is made via the second designer-selected design tool.
2. The method of claim 1 , comprising:
generating the object model based on the initial web application design.
3. The method of claim 1 , comprising:
receiving the modification to the web application design made using one or more of the developer-selected, integrated development environment and the second designer-selected design tool.
4. The method of claim 1 , wherein the first designer-selected design tool is selected from a group consisting of Sketch™, Adobe XD™, Invision™, Axure™, and UXPin™, and wherein the second designer-selected design tool is a different design tool than the first designer-selected design tool.
5. The method of claim 1 , wherein the updated web application design presents the modification made using one or more of the developer-selected, integrated development environment and the second designer-selected design tool as a suggestion, which a first designer can approve or reject.
6. The method of claim 1 , wherein the updated web application design presents the modification made using one or more of the developer-selected, integrated development environment and the second designer-selected design tool as a suggestion, which a first designer can approve or reject, when the modification made is a visual modification.
7. The method of claim 1 , comprising:
generating, based on the updated object model, a web application.
8. The method of claim 7 , wherein generating the web application includes:
generating a portion of code from the updated object model; and
inserting the portion of code generated from the updated object model into code associated with the generated web application.
9. The method of claim 1 , comprising:
receiving custom code written by a developer; and
subsequent to receiving the custom code:
updating the object model to include the modification to the web application design; and
generating a web application including the custom code.
10. The method of claim 1 , wherein the object model includes a set of .json files that contain Java Script Object Notation object models describing portions of a web application.
11. A system comprising:
a processor;
a memory storing instructions that, when executed, cause the system to
obtain an object model associated with a web application design, wherein the web application design was initially designed using a first designer-selected design tool, and wherein the object model is integrated development environment and design tool agnostic;
update the object model based on a modification to the web application design made via one or more of a developer-selected, integrated development environment and a second designer-selected design tool; and
present, based on the updated object model, an updated web application design using one or more of:
the first designer-selected design tool,
the second designer-selected design tool when the modification is made via the developer-selected, integrated development environment, and
the developer-selected, integrated development environment when the modification is made via the second designer-selected design tool.
12. The system of claim 11 , the memory further storing instructions that, when executed cause the system to:
generate the object model based on the initial web application design.
13. The system of claim 11 , the memory further storing instructions that, when executed cause the system to:
receive the modification to the web application design made using one or more of the developer-selected, integrated development environment and the second designer-selected design tool.
14. The system of claim 11 , wherein the first designer-selected design tool is selected from a group consisting of Sketch™, Adobe XD™, Invision™, Axure™, and UXPin™, and wherein the second designer-selected design tool is a different design tool than the first designer-selected design tool.
15. The system of claim 11 , wherein the updated web application design presents the modification made using one or more of the developer-selected, integrated development environment and the second designer-selected design tool as a suggestion, which a first designer can approve or reject.
16. The system of claim 11 , wherein the updated web application design presents the modification made using one or more of the developer-selected, integrated development environment and the second designer-selected design tool as a suggestion, which a first designer can approve or reject, when the modification made is a visual modification.
17. The system of claim 11 , the memory further storing instructions that, when executed cause the system to:
generating, based on the updated object model, a web application.
18. The system of claim 17 , wherein generating the web application includes:
generating a portion of code from the updated object model; and
inserting the portion of code generated from the updated object model into code associated with the web application.
19. The system of claim 11 , the memory further storing instructions that, when executed cause the system to:
receive custom code written by a developer; and
subsequent to receiving the custom code:
updating the object model to include the modification to the web application design; and
generating a web application including the custom code.
20. The system of claim 11 , wherein the object model includes a set of .json files that contain Javascript Object Notation object models describing portions of a web application.