Figma Design System Expert

Type: Contract or Permanent (20–40 hrs/wk) Engagement: Initial 6-month contract Location: Remote Reports to: Head of UX

Overview

We are looking for a Figma Design System Expert with a deep technical background to lead the evolution of our design infrastructure. This is not just a UI design role; you will be the bridge between design and engineering, architecting a "design-to-code" contract for our white-label platform.

You will partner with developers and architects to define a robust token tree and translate complex, multi-variable Figma components into strictly typed React components.

Core Responsibilities

1. System Architecture & Refactoring

• Audit & Consolidate: Refactor existing Figma libraries into a single, high-performance, production-ready design system.
• Token Governance: Define a semantic token tree and implement Figma Variables/token collections that map directly to code variables.
• Workflows: Establish naming conventions, versioning, and CI-friendly export workflows (e.g., Tokens Studio → Style Dictionary → JSON/CSS).

2. Design-to-Code Contract

• Component Engineering: Collaborate with frontend architects to design component contracts (Props API, Types, Theming).
• Bridge Design & Logic: Convert multi-variable Figma components into reusable React component patterns suitable for a white-label solution.
• Theming Strategy: Ensure tokens-to-props mapping is consistent, accessible, and optimized for performance.

3. Documentation & Enablement

• Storybook Integration: Align Figma components with Storybook patterns to ensure a "single source of truth."
• Guidance: Document usage guidelines and migration plans for product squads.
• Mentorship: Run workshops to enable cross-functional teams to adopt the new design system contract.

Must-Have Requirements (Recruiter Highlights)

• Figma Mastery: Expert-level knowledge of components, variants, Auto Layout, and advanced Variables/Styles. Experience in library governance at scale.
• Technical Depth: Strong frontend knowledge, specifically React (hooks, composition), TypeScript, and CSS-in-JS or token-friendly theming.
• The Contract Experience: Proven track record of building design-to-code contracts, mapping multi-variable Figma components to React props, and collaborating with architects.
• Tooling Expertise: Hands-on experience with Tokens Studio (Figma Tokens) and Style Dictionary. Knowledge of automating exports and CI integration is a must.
• Accessibility & Performance: An accessibility-first mindset (WCAG) and awareness of how component design impacts performance.
• Communication: Full English proficiency with the ability to lead high-level architectural discussions and write clear technical documentation.
   

Selection Criteria

We will prioritize candidates who provde a portfolio or case studies that demonstrate:

1. Complex token trees and their mapping to code.
2. Refactoring of messy libraries into structured systems.
3. Working React integrations for white-label or highly reusable systems.