Fachhochschule Nordwestschweiz FHNW

Creating Functional UI Tests from Figma Prototype

Summary

Collaboration and communication are essential in cross-functional software development teams. Designers, developers and testers must have a common understanding and clear specifications for the product. For this thesis, we looked at whether functional UI tests can be generated from a design in Figma, and whether this can decrease the lead time from design to implementation and increase the quality of the specifications. A Figma plugin was developed to generate functional UI tests from a design with the aim to break up silos and streamline the development process.

Keywords

Figma, TypeScript

Objectives

The primary goal is to seamlessly integrate design and development processes. We aim to achieve this by developing a solution that generates functional UI tests directly from Figma designs and seamlessly integrates with our client's test infrastructure. This supports a test-driven development approach and aligns with the concept of "specification by example", effectively bridging the gap between design and development teams and involving all stakeholders from the early stages of the project.

Initial position

In cross-functional teams, collaboration and a shared understanding are key factors to produce high-quality products and features. A lack of these two factors can lead to misunderstandings and create more work for all team members, potentially even to longer lead times.

Results

The solution was validated through moderated discussions with all stakeholders. The results suggest that both the lead time and the quality of the specifications could be improved by using the plugin as a tool to enhance existing workflows. Furthermore, the stakeholders see benefits to boosting their collaboration with each other and would welcome working with this solution in the future.