Figma Plugins & Experiments: Bridging Design and Development
My exploration into Figma's extensibility ecosystem has resulted in several innovative plugins that solve real workflow problems for design and development teams. These tools focus on automating design-to-code workflows, ensuring consistency, and scaling design systems effectively.
1. TokenBridge (DTCG Export Plugin)
What it does:
TokenBridge is a Figma plugin I created to bridge the gap between design and development through design tokens. It allows designers to export Figma variables directly into DTCG-compliant (Design Token Community Group) JSON.
Why it matters:
This ensures that tokens defined in Figma—colors, typography, spacing, radii, etc.—can be exported into a standardized format, ready for developers to integrate in codebases (CSS, Tailwind, GitHub/GitLab repos, etc.). It eliminates manual copy/paste, reduces inconsistencies, and keeps the design system synchronized across tools.
2. Design System Radar
What it does:
Design System Radar is a plugin that helps analyze and audit design system adoption inside Figma. It scans files to identify which components and styles are used, how often they are instanced, and where inconsistencies might occur.
Why it matters:
It provides visibility on the health and coverage of a design system: which components are most used, which ones are underutilized, and where local overrides or custom solutions are breaking consistency. This data empowers teams to prioritize improvements, track adoption over time, and make informed decisions about the system's evolution.
3. ColorCraft.app
What it does:
ColorCraft is both a Figma plugin and a standalone app I built to generate, manage, and transform color palettes. A key feature is its ability to automatically create a dark mode palette from an existing light mode palette, applying accessible contrast rules and smooth scaling.
Why it matters:
Designers often struggle to maintain consistency between light and dark themes. ColorCraft automates this process, turning a repetitive manual task into a fast, reliable, and creative workflow. It also supports token export for dev teams, ensuring palettes are not just pretty but also usable in code.
4. PropTable
What it does:
PropTable is a plugin that generates documentation tables of component properties (props) directly inside Figma. It connects components with their usage guidelines, listing configurable props (states, variants, sizes, colors, etc.) in a structured, developer-friendly format.
Why it matters:
It brings developer-style documentation into the design file, ensuring designers and developers speak the same language when working with components. This improves onboarding, reduces ambiguity, and creates a tighter alignment between Figma and component libraries (like React or Vue).
✨ Together, these plugins reflect my focus on bridging design and development, automating workflows, and scaling design systems. They all solve very real pain points: token synchronization, system adoption visibility, palette generation, and component documentation.