FME Form Design System
2 Team Members
April - September 2025
Design System Guy
Overview
The updated design system significantly boosting productivity in mockup creation by 70% while ensuring a consistent and cohesive final design output across projects.
This project is a continuation of the work I undertook during the final four months of my internship at Safe Software, where I led the comprehensive development and improvement of the design system. I played a key role in shaping the update process, overseeing the project from start to finish to ensure the system's scalability and relevance to the team’s needs.
Context & Problem Space
When I joined the team, I found the design system scattered and hard to navigate, with updates buried in multiple Figma files. To fix this, I dug into the root issues holding it back.
Design assets were scattered and difficult and hard to find
Components were outdated and misaligned with the product
Updates are not centrally documented and recorded causing inconsistencies
Syncing changes becomes a manual and error-prone task.
Context 1.1 - unorganized library
Context 1.2 - inaccurate design assets
Finding Suitable Principles (Atomic Design)
I explored various principles and frameworks to determine the most effective way to separate components into distinct parts. After careful consideration, I decided to follow the Atomic Design methodology, as it offers a clear and structured approach to building and organizing the design assets.
Breakdown
To create a more structured, scalable, and efficient design workflow, the design system will be divided into three distinct parts based on areas of the program that are frequently updated or require significant time to create mockups.
Audit
With the help of my team members, we collaboratively summarized all the audits to ensure that each component included all the necessary variations and properties.
Audit 1.1 - broke down complex interface into smaller parts
Audit 1.2 - identified similar components within every interface
Audit 1.3 - listed different component states
Audit Feedback
The Slots
Considering that some components could have different layouts, the team proposed using a slot-based method that combines the instance swap and preferred values approach. This method allows for the creation of reusable components that can be easily swapped or replaced within a predefined structure.
Audit feedback 1.1 - slots method
Color Tokens
To maintain consistency in the colors used within the components, I collaborated with another team member experienced in creating design tokens. By leveraging design tokens, we were able to standardize color usage, and simplify future updates.
Audit feedback 1.2 - color tokens
Building the Components
With all the resources prepared, I began building the components. Throughout the process, different team members tested the components to ensure that all properties, including states and variations, were correctly implemented.
Components 1.1 - transformer structure
Components 1.2 - transformer components
Components 1.3 - overall design system layout
Minor addition
Adding Filled Variants
Variants of a component with pre-filled content should also be provided. This allows designers the option to either customize the content according to their needs or use the predefined content as it is. Offering these options ensures efficiency while creating mockups that don’t require specific context.
Minor addition 1.1 - filled variants
Extra Slots
The team agreed that extra slots should be included in the component to allow for future replacement or customization. This approach ensures that the template remains future-proof, enabling updates or additions to be made without the need for a complete rebuild of existing components.
Minor addition 1.2 - extra slots
Documentation
In addition to creating the components, I also created documentation outlining the methods and processes I used to build them. This documentation ensures that other team members responsible for maintaining the design system can seamlessly continue updating existing components and creating new ones as needed by the team.
Documentation 1.1 - component guideline
The Impact
The design system significantly enhanced the quality of the mockups generated by the team. Instead of relying on screenshots of product interfaces, all mockups could now be created directly in Figma, allowing for easy modifications.
Impact 1.1 - impact for the team
Retrospective
Designing for designers
Creating a design system is like trying to build a house for a bunch of architects, they're technically your "users," but they all have wildly specific needs!
Be flexible
While conventional methods for creating components exist, they might not always suit what you're trying to build.