My Role: Lead UX Designer, Process Development, and Design Critique
Users: Portfolio Designers and Developers
Project Summary: Transition existing design system from Sketch to Figma, leveraging Figma’s features such as variables and variants, while also implementing processes for ongoing maintenance and collaboration.
Challenges: Learning Figma’s features, maintaining consistency, documentation, design variables, version control, collaboration, adoption, and governance.
Key Takeaways: Figma’s design system enhances efficiency, empowers designers, and elevates the quality of work.
Determine scope, and tackle the learning curve of a new application.
Migrated components over as is, and tackled bugs during the migration
Utilized style guides to effectively communicate the use of the system in the product.
Improve the system over time to fit the application needs.
Defined migration scope: Exclusively targeting the design system components, with other files considered for migration on a project basis.
Prepared the Sketch design system: By organizing and optimizing it for a seamless transition to Figma.
Enabling Auto Layout: To enhance component responsiveness, we systematically implemented Auto Layout where appropriate, ensuring that components scaled and adapted seamlessly to various screen sizes.
Expanding Component Library: Following an audit of our application and design needs, we began creating additional components, including a standardized table design and filter options selection, to cater to specific requirements.
Atomic Design Structure:
To optimize organization and reusability, we restructured the entire design system using the atomic design methodology. Breaking down our system using the following:
ATOMS
MOLECULES
TEMPLATES
PAGES
Utilizing this way of organizing our design system allowed for designers to easily understand the context of how and when to use components and as well give them the flexibility to create new patterns and templates when needed based off the needs of their design.
Style Guide: I provided comprehensive documentation, which included a style guide linking to both Boeing’s resources and PTA-specific materials.
Component Guidance: Within Figma components, I included clear usage guidelines along with external references to support team members.
Behavior Examples: I also offered practical examples to illustrate design behavior in different scenarios, promoting understanding and consistency.
Companion Piece: Additionally, I created a design checklist for our designers to use as a companion tool when starting new designs or projects.
For maintenance, we established a process called “design triage.” In our meetings, we created a MatterMost board where any team member could discuss potential updates to the design system or changes to the application as a whole. Here’s how it worked:
Meeting Structure: We established a process called “design triage” to address updates and changes within our design system and the application as a whole.
MatterMost Board: During these meetings, we utilized a MatterMost board to facilitate open communication, allowing any team member to propose new updates or changes.
Assignment of Responsibilities: Items on the board were reviewed collectively, and responsibilities were assigned to team members for addressing these updates.
Branching Strategy: To ensure careful handling of changes, we implemented a branching strategy for the design system. All proposed changes were created on separate branches before merging them into the main system.
UX Lead Review: Changes were reviewed and approved by the UX Lead (myself) for consistency and quality.
Team Alignment: Approved changes were communicated and trained to the entire team for alignment and cohesion.