Can it help with component documentation?

Yes, it provides rules for extracting component props, variants, and states from Figma to generate accurate TypeScript interfaces and component specifications.

How does this skill handle Figma Variables?

It provides patterns to export Figma Variables via the REST API into a W3C-compliant Design Tokens format, which are then transformed into CSS or Tailwind code using Style Dictionary.

What is visual regression in this context?

It utilizes Applitools patterns to compare production UI screenshots against original Figma frames, helping developers identify and fix spacing, typography, or color deviations.

Does it support Tailwind CSS mapping?

Yes, it includes a comprehensive mapping table that translates Figma Auto Layout properties (like gap, padding, and alignment) directly into Tailwind CSS utility classes.

Figma Design Handoff

Name: Figma Design Handoff
Author: yonatangross

byyonatangross

•

140

•

设计工具

Automates the transition from Figma designs to production-ready code using design tokens, layout mapping, and visual regression patterns.

This skill bridges the gap between design and development by providing structured patterns for converting Figma assets into code. It automates the extraction of Figma Variables into W3C design tokens via Style Dictionary, maps Figma Auto Layout properties to CSS Flexbox or Tailwind classes, and establishes a robust visual QA workflow with Applitools. It is ideal for frontend developers and design system engineers looking to eliminate design drift and maintain a single source of truth across design systems and frontend implementations.

主要功能

01140 GitHub stars

02Style Dictionary configuration for CSS and Tailwind themes

03Direct mapping of Auto Layout to CSS Flexbox/Grid and Tailwind

04Figma Variables to W3C Design Tokens JSON pipeline

05Component specification and variant property extraction

06Visual regression testing patterns with Applitools Eyes

使用场景

01Setting up automated visual QA to detect design drift in CI/CD pipelines

02Implementing pixel-perfect UI components from Dev Mode specifications

03Converting Figma Variables into a synchronized design token system

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yonatangross/orchestkit figma-design-handoff

For use in Claude.ai and ChatGPT

主要功能

01140 GitHub stars

02Style Dictionary configuration for CSS and Tailwind themes

03Direct mapping of Auto Layout to CSS Flexbox/Grid and Tailwind

04Figma Variables to W3C Design Tokens JSON pipeline

05Component specification and variant property extraction

06Visual regression testing patterns with Applitools Eyes

使用场景

01Setting up automated visual QA to detect design drift in CI/CD pipelines

02Implementing pixel-perfect UI components from Dev Mode specifications

03Converting Figma Variables into a synchronized design token system

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yonatangross/orchestkit figma-design-handoff

For use in Claude.ai and ChatGPT