From Design to Code: A Study on Generating Production Code From User Interface Design Software

Sammanfattning

Creating modern web applications is often done with a modular mindset using components (such as buttons, lists, layouts). These components are beneficial and do not need to be redesigned between projects if the design language is the same. However, if there is a need to have components with different design languages between each project, creating components can feel unnecessary. In collaboration with Knowit Experience, this thesis tries to solve this problem by creating an open-source prototype that converts components from the user interface design program Figma into web components. The thesis shows how to make this prototype user-friendly by usability testing. In addition to this, the thesis shows how to measure the effectiveness of this prototype with A/B testing. The results of the thesis are a working open-source prototype that is user-tested for all essential features.