As Computer Science students, we are all too familiar with the complications that can come with the design process. Are the text boxes supposed to stick in place? Do these squares always need to be next to each other? What about different screen sizes? A detailed developer's post on Experiments in Constraints-based Graphic Design by Anish Athalye inspired us to look for ways to fundamentally reconstruct typical design software with relationship-based positioning and constraint abstraction.
What it does
Deft is constraints-based design software that exports graphics into project-ready Swift code. For a proof of concept, we wrote Deft to design user interface designs for mobile applications. The dynamic application enables designers to transform shapes and text onto a canvas. Using Deft's built-in constraint editor, designers can generate constraints in relative to any of the elements on the canvas. Deft's powerful compiler will then export the design into ready made Swift frontend code that contains all the relationships specified in the design tool.
How we built it
Using Create-React-App, we built a web-based application as our base interface for user interface design. We engineered React components to handle the transformation and drag/drop animation for all of the elements including the rectangle, ellipse, and text box. Utilizing the React state and lifecycle features, we wrote hooks to add editing functionality for our objects that enabled hex-based coloring, as well as font, size, and border radius adjustments. These are all encapsulated in a master canvas layer for editing. To create relativity points between our objects, we added anchors to 6 different dimensions and created an abstracted API to handle the constraints. These were then connected to our constraint-editing interface and constraint view (to see the constraints of selected objects).
The last step was converting all of this design information to working Swift code. We used principles from Compiler Construction to do this. We stored data related to the design (shapes, constraints, etc) in a parse-tree like format. We then used this structure and implemented a visitor-pattern based compiler to convert each individual component to Swift code using 1-1 mappings. The visitor pattern allows tremendous possibilities for re-use and expansion - making Deft a truly unique solution that enables some insane collaboration between designers and frontend developers.
Challenges we ran into
Managing the life-cycle and states of our components, animations, and constraints required reasonable planning. We found that we needed to draft up several ideas in order to organize the application features in an efficient manner. Furthermore, building the compiler for the application was a tricky task. The sheer challenge of converting designs into usable code was something that we struggled with the most. There were numerous cases to handle when compiling the designs, and we had to research a lot about compilers and code generation in order to engineer our project thoroughly.
Accomplishments that we're proud of
Neither of us had experience building projects in React, building compilers, or writing constraint-managing APIs. We were able to build a functional design tool that could actually create usable designs, and we built a compiler to convert those designs into working code. Starting this project, we had absolutely no idea where to begin, what to build, and how to build it. Just the fact that we were able to finish the project meant a lot to us, as we've learned a lot.
What we learned
We learned React web-application development, building editing software, and engineering a compiler. As stated before, we've never had experience in these technologies, so this project was especially rewarding to us!
What's next for Deft
We want Deft to be a project for all designers. We truly believe that Deft can be used for projects beyond mobile applications, and that our design software can be improved as well. We plan to open source Deft and continue our work for a better constraints-based design approach. We also plan to implement an SMT-based constraint solver to provide real-time feedback to designers about the solvability of their constraints.