skills.rest
satanyakiv
satanyakivCOMMUNITY
Explore all skills by this author →
GitHub

figma-handoff

Translate Figma frames into Compose Multiplatform UI code.

11|Updated Mar 10, 2026
Search Tags:#figma#handoff#ui-design#design-system#compose-multiplatform#mcp-dev-mode
One-click install
npx skills add https://github.com/satanyakiv/NutriSport --skill figma-handoff-satanyakiv
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-handoff
Source: https://github.com/satanyakiv/NutriSport/tree/main/.claude/skills/figma-handoff
Command: npx skills add https://github.com/satanyakiv/NutriSport --skill figma-handoff-satanyakiv

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Translates Figma frames into Compose Multiplatform UI code that adheres to NutriSport's design system, reducing handoff time and design drift.

Core Features & Use Cases

  • Figma → Compose handoff: Converts a Figma frame into a corresponding Compose Multiplatform UI implementation aligned with the design system.
  • Dev Mode MCP integration: Uses mcp__figma-dev-mode__ calls (get_design_context, get_screenshot, etc.) to ensure accurate tokens, metadata, and previews.
  • Design-system mapping: Applies color, font, and component tokens to the shared UI tokens; verifies compatibility with dark themes.
  • References-driven guidance: Leverages references/figma-protocol.md and references/cmp-mapping.md for best practices.

Quick Start

Create a Compose Multiplatform UI implementation from the selected Figma frame using the 13-step protocol, applying the design system mappings and generating a Preview.

Frequently Asked Questions about figma-handoff

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert Figma frames to Compose Multiplatform UI code?▼

The Figma to Compose Multiplatform handoff process uses Figma Dev Mode MCP calls like get_design_context and get_screenshot to extract metadata and previews. It then applies a 13-step protocol to map Figma elements to shared UI tokens, generating a Compose Multiplatform UI implementation with a Preview.

Do I need Figma Dev Mode MCP to translate Figma frames into Compose UI?▼

Yes, Figma Dev Mode MCP is required. The Skill uses mcp__figma-dev-mode__ calls like get_design_context and get_screenshot to retrieve accurate design tokens, metadata, and visual previews for mapping Figma frames to Compose Multiplatform components.

Can I map Figma design tokens to a specific design system in Compose Multiplatform?▼

Yes, you can map Figma design tokens to a specific design system in Compose Multiplatform. The Skill applies color, font, and component tokens to shared UI tokens, ensuring the generated Compose UI code adheres to the NutriSport design system and verifies dark-theme compatibility.

What's the best way to handle UI screen handoff from Figma to Compose?▼

The best way to handle UI screen handoff from Figma to Compose is using a references-driven protocol that applies best practices from figma-protocol.md and cmp-mapping.md. This approach ensures accurate design-token references and component translations, reducing handoff time and preventing design drift.

Why does my Figma to Compose UI translation have design drift?▼

Figma to Compose UI translation often has design drift when color, font, and component tokens are not properly mapped to shared UI tokens. This Skill prevents drift by following a 13-step protocol that verifies dark-theme compatibility and applies design-system mappings accurately.

Related Skills

Explore More Design & Creative Skills→
WesleyMarinhoWesleyMarinho

figma-implement-design

Translate Figma designs into production-ready code with visual fidelity.

Community
Advanced
RocapineRocapine
2

customize-onboarding-theme

Override Rocapine Onboarding UI theme tokens for light and dark modes in Expo or React Native apps.

Official
Advanced
cedric-champeixcedric-champeix
1

spoonfeeder-brand-design

Enforce Spoonfeeder's visual design system across Compose Multiplatform UI code.

Community
Advanced
warpdotdevwarpdotdev
64.1k

figma-implement-design

Convert Figma designs into production-ready UI code using design tokens.

Official
Intermediate