Design Sync
A plugin design for Figma that improves design-to-production consistency.
The Problem
Product teams—including product managers, designers, and engineers—struggle to maintain consistency between design and production due to the lack of automated tools. Current manual processes are error-prone, leading to misalignments and inefficiencies.
The solution
I designed a plugin for Figma to bridge the gap between design and production. It cross-references design files with production code, flags inconsistencies, and provides actionable solutions to ensure alignment and maintain design consistency.
User Research
Direction: Exploring challenges a nd opportunities in improving digital workspace tools.
Research approach
Phase 1: Discovery
User interviews across diverse roles to identify general pain points
Key Insights Identified
Design-to-production inconsistencies emerged as a critical issue
Phase 2: Narrow Focus
Targeted surveys to explore design-to-production challenges in depth
Phase 1: User Interviews
The initial phase involved broad exploration through interviews with professionals from diverse roles and industries. These conversations helped identify general pain points in digital workspace tools.
Interview Participants
Diverse roles across multiple industries
Creative Director, Brand Agency
Full-stack Dev, Healthcare
Back-end Dev, Finance
Coffee Shop Owner, Retail
Product Manager, Tech
Pain Points
Issues identified across participants
Gaps in task management and scheduling
Inefficient team coordination
Lack if seamless calendar integration
Design-to-production inconsistencies
The Standout Insight That Narrowed Our Focus
While the interviews revealed several pain points, one issue stood out significantly:
Design-to-production inconsistencies emerged as a key issue worth deeper exploration, highlighted particularly by the product manager.
This insight directly shaped the second phase of research, narrowing our focus to specifically investigate this critical challenge through targeted surveys.
Phase 2: Targeted Surveys
Based on the key insight from interviews, the survey phase narrowed the research scope to focus specifically on design-to-production inconsistencies, collecting targeted data from product teams.
Survey Participants
Targeting product team members
Product Managers
UX/UI Designers
Developers
Focused Survey Areas
Targeting design-to-production challenges
Tools and workflows used
Communication methods
Frequency and impact of design-production mismatches
Key Survey Findings
Communication Challenges: While communication between designers and developers is generally effective (rated 3/5 or 4/5), misunderstandings, especially via tools like Slack, often lead to misalignments.
Design-Production Mismatches: Half of respondents encounter mismatches frequently, stemming from versioning issues, inconsistent templates, and unclear processes.
Current Solutions Are Limited: Teams rely on frequent communication, Jira tickets, and QA testing, but larger organizations struggle to standardize workflows effectively.
Desired Improvements: Respondents want centralized tools for version control, automated design-production comparisons, and a clear "source of truth" for live production status.
User Personas
The research points to three primary personas which represents the core of a product team, the "Triad".
User Flow
Low Fidelity wireframes
High Fidelity Mock-ups
Usability testing
Goals
This usability test aimed to evaluate the intuitiveness and effectiveness of a Figma prototype feature designed to streamline the design-to-production process. The primary objective is to determine whether the tool successfully addresses key pain points such as versioning issues, communication gaps, and alignment challenges. By enabling users to cross-reference design files with the live production environment and automatically flag inconsistencies, the feature seeks to save time and improve workflow efficiency for design and development teams.
Results
Usability testing validated the tool’s potential and highlighted areas for improvement. Participants praised its intuitive design and workflow benefits but suggested enhancements to boost usability. Key requests included zoom and click-to-detail functionality for inspecting flagged inconsistencies, improved formatting and button placement in the action bar, and clearer terminology. Safety features like confirmation prompts and interactive breadcrumb navigation were also recommended to reduce errors and confusion. Overall, participants recognized the tool’s ease of use and value in addressing design-to-production challenges.
Iterations
Reformat the action bar & include breadcrumbs
Change: Reorganize the action bar by aligning text and buttons more consistently and repositioning the buttons to the right for a cleaner layout. Add breadcrumbs.
Benefit: This will make the action bar more visually appealing and easier to navigate, improving the overall user experience. Breadcrumbs will help with navigation and make it clear to the user what they are applying changes to.
Before
After
Implement Safety Measures
Change: Add confirmation prompts (e.g., “Are you sure you want to update?”) before making significant changes or updates to design files.
Benefit: This will prevent accidental changes and provide an added layer of protection for users, especially in high-stakes workflows.
Next steps
Additional research
Defining the most common types of inconsistencies, such as alignment, incorrect use of semantic tokens, spacing, sizing, typography, etc.
Building the tool
Develop MVP in Figma's plugin environment. Test and iterate.
Demo
Lets chat.
Now that you've seen some of my work, lets talk business!
Email me