figma-design-handoff
Figma Design Handoff
Figma dominates design tooling in 2026, with the majority of product teams using it as their primary design tool. A structured handoff workflow eliminates design drift — the gap between what designers create and what developers build. This skill covers the full pipeline: Figma Variables to design tokens, component spec extraction, Dev Mode inspection, Auto Layout to CSS mapping, and visual regression testing.
Quick Reference
| Rule | File | Impact | When to Use |
|---|---|---|---|
| Figma Variables & Tokens | rules/figma-variables-tokens.md |
CRITICAL | Converting Figma Variables to W3C design tokens JSON |
| Component Specs | rules/figma-component-specs.md |
HIGH | Extracting component props, variants, states from Figma |
| Dev Mode Inspection | rules/figma-dev-mode.md |
HIGH | Measurements, spacing, typography, asset export |
| Auto Layout → CSS | rules/figma-auto-layout.md |
HIGH | Mapping Auto Layout to Flexbox/Grid |
| Visual Regression | rules/figma-visual-regression.md |
MEDIUM | Comparing production UI against Figma designs |
Total: 5 rules across 1 category
Figma Dev Mode MCP Server (2026 default path)
The Figma Dev Mode MCP Server replaces most manual REST + Dev Mode inspection. Configure it once and any Claude Code session with Figma access can pull design context, tokens, and code mappings directly.
More from yonatangross/orchestkit
responsive-patterns
Responsive design with Container Queries, fluid typography, cqi/cqb units, subgrid, intrinsic layouts, foldable devices, and mobile-first patterns for React applications. Use when building responsive layouts or container queries.
492ui-components
UI component library patterns for shadcn/ui and Radix Primitives. Use when building accessible component libraries, customizing shadcn components, using Radix unstyled primitives, or creating design system foundations.
477devops-deployment
Use when setting up CI/CD pipelines, containerizing applications, deploying to Kubernetes, or writing infrastructure as code. DevOps & Deployment covers GitHub Actions, Docker, Helm, and Terraform patterns.
453rag-retrieval
Retrieval-Augmented Generation patterns for grounded LLM responses. Use when building RAG pipelines, embedding documents, implementing hybrid search, contextual retrieval, HyDE, agentic RAG, multimodal RAG, query decomposition, reranking, or pgvector search.
374architecture-decision-record
Use this skill when documenting significant architectural decisions. Provides ADR templates following the Nygard format with sections for context, decision, consequences, and alternatives. Use when writing ADRs, recording decisions, or evaluating options.
369domain-driven-design
DDD tactical patterns for complex business modeling including entities, value objects, aggregates, domain services, repositories, specifications, and bounded contexts. Python dataclass implementations with TypeScript alternatives. Use when building rich domain models, enforcing invariants, or separating domain logic from infrastructure.
356