Matthew Dent
This project is a Figma plugin that is designed to enhance the design to development workflow by reducing the inefficiencies when translating high-fidelity designs into deployable code. It was developed through the Figma Plugin API and TypeScript primarily. Users can apply Tailwind CSS design tokens directly to the design frames, live visual updates are performed in the Figma environment. Providing a consistent styling throughout the design, including spacing, colours, typography and layouts.
Additionally, code generation is provided with a live code preview, frameworks supported include, HTML + CSS, HTML + Tailwind CSS, and React + Tailwind CSS. Filter and search features were implemented to provide efficient navigation and ease of use.
This project aims to improve the efficiency and consistency of design to development workflows by defining pre-existing issues including, inconsistent code outputs, lacking usability in user interfaces, and reliance on manual translation of designs in the hand-off process.
Primary Objectives:
🎯 Create a Figma plugin that provides users with a token-based Tailwind CSS design system.
🎯 Implement a code generator that translates Figma designs into producable code outputs including various frameworks (HTML, CSS, Tailwind CSS, React).
🎯 Ensure consistent mapping of code outputs from visual designs, including spacing, colour, typography and layout properties.
🎯 Design a user-accessible interface including clear navigation, search and filter functionionality, and an aesthetic design panel.
🎯 Provide node extraction of the design frames through communication with the Figma Plugin API, to allow for manual editing of node properties.
🎯 Reduce manual requirements for converting designs to code during the hand-off process.
The target audience is directed at designers and developers in a frontend development or UX/UI design role. Additionally, the project targets students who design within the Figma environment and are in need of accurate code outputs of designs. The plugin focuses on modern workflows and are specified to those using React and Tailwind CSS.
FigFlow TW plugin was created as a design to development tool with these outcomes:
🗸 A functional Figma plugin that allows users to apply Tailwind CSS design tokens directly to the design frame.
🗸 Implement a code generator providing consistent outputs in various framework formats (HTML, CSS, Tailwind CSS, React).
🗸 Integrate a token-based design system to ensure consistency across design properties including, spacing, colours, typography and layouts.
🗸 Live code preview and visual design updates available in the plugin panel and Figma environemnt.
🗸 Search and filter functionality throughout the plugin to increase ease of use and efficiency of navigation.
🗸 Communication with the Figma Plugin API to extract nodes and allow manual editing of node properties.
Through qualitative user testing, the plugin revealed to be successful in improving the efficiency of design to development workflows. This was tested through the recreation of design components whilst using the plugin, this however highlighted areas of improvement in filtering and bug fixing in the user interface.
This project displays how a combination of clean code outputs with a token-based design system can improve frontend workflows through enhancing the consistency of code translation, reducing manual requirement in the hand-off process, and maintaining the fidelity of designs.
This thesis describes the development of my plugin. I aimed to create a Figma plugin that focuses on enhancing the design to development workflow and oppose the existing issues in this frontend pipeline, through the implementation of a code generator, token-based design system and a design panel with clear navigation, search and filter functionality.
Through a user-centred design and iterative development process, the plugin allows users to apply design tokens and produce code outputs that are consistent throughout the design. User testing demonstrated the improvements made to the design workflow whilst identifying the areas of that require further attention.
The process of creating the plugin contained numerous issues and pivoting of ideas, this included bugs found through user testing, inconsistencies between Figma and Tailwind CSS design properties, including margins. Additionally, the requirements originally set were further iterated to expand the project scope.
The project displays how combining a token-based design system with code generated outputs can increase efficiency in the design to development workflow.
Hello, I'm Matthew Dent, a final-year Creative Computing student with a passion for Front End development, UX/UI design and an interest in game development. I have experience in building applications through the use of React, Tailwind CSS and RESTful APIs.
My work includes the development of a Figma plugin that provides code generation, a token-based design system, and an interactive user interface. I enjoy providing solutions through exploring new tools, languages and creating designs to benefit users. I am eager to expand on my skills and improve further on my work over time.
