skills.rest
LedgerHQ
LedgerHQOFFICIAL
Explore all skills by this author →
WebsiteGitHub

figma-to-code

Converts Figma design variables into Tailwind classnames and React Native themeJS token paths.

23|5|Updated Apr 3, 2025
Search Tags:#design system#figma#design tokens#tailwind#react native#css variables#component implementation
One-click install
npx skills add https://github.com/LedgerHQ/lumen --skill figma-to-code-ledgerhq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-to-code
Source: https://github.com/LedgerHQ/lumen/tree/main/.claude/skills/figma-to-code
Command: npx skills add https://github.com/LedgerHQ/lumen --skill figma-to-code-ledgerhq

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Translating Figma design variables into correct code tokens is error-prone: developers often write redundant classnames like bg-background-base or invent theme keys that don't exist. This Skill provides the exact mapping rules from Figma CSS variables to Lumen design system tokens on both web and React Native. ## Core Features & Use Cases - Figma variable to Tailwind mapping: Converts variables like var(--background-base) into correct utility classes (bg-base), covering colors, spacing, radius, border width, typography, and shadows. - Figma variable to themeJS mapping: Maps the same variables to React Native t.* paths such as t.colors.bg.base, t.spacings.s4, and t.typographies.body3. - Missing-token handling: Defines a workflow for sizes without tokens — use the closest token, document the deviation in a comment, and consider requesting a new token. - Use Case: While implementing a Button component from a Figma link in libs/ui-react, you read var(--text-on-accent) in Figma and correctly write text-on-accent instead of the redundant text-text-on-accent. ## Quick Start Read the Figma design for this component and convert its variables into the correct Lumen tokens for the lib I'm working in.

Frequently Asked Questions about figma-to-code

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

FAQPage Schema
How do I convert Figma variables to Tailwind classes?▼

Combine the Tailwind prefix for the CSS property with the unique part of the token name after the last hyphen. For example, `var(--background-base)` becomes `bg-base`, not `bg-background-base`, and `var(--spacing-4)` becomes `p-4`.

How do I map Figma variables to React Native theme tokens?▼

Map each Figma variable to a path on the `t` object inside `useStyleSheet`. Colors nest under category keys like `t.colors.bg.base`, spacings use s-prefixed pixel keys like `t.spacings.s4`, and typography uses camelCase like `t.typographies.body3`.

How are Figma typography styles converted to code tokens?▼

On web, replace the slash in the Figma style comment with a hyphen: `/* body/3 */` becomes the class `body-3`. On React Native, use camelCase keys: `body/3` becomes `t.typographies.body3` and `body/2-semi-bold` becomes `t.typographies.body2SemiBold`.

What should I do when a Figma size has no matching design token?▼

Use the closest available token, such as `w-112` for a Figma value of 108px, and document the deviation in a code comment. If the size is needed frequently, consider requesting that the token be added to the design system.

Where is the source of truth for React Native theme token keys?▼

Check `libs/design-core/src/lib/themes/js/primitives/primitives.others.ts` for spacings, sizes, and borderRadius keys, plus the per-brand `theme.*.ts` files for color objects. Confirm a key exists there rather than inventing one.

Related Skills

Explore More Software Engineering Skills→
lushly-devlushly-dev
4

implement-designs

Extract Figma design tokens and convert them to CSS custom properties.

Official
Advanced
TechsioCZTechsioCZ
2

component-consistency-validation

Validate UI-kit changes across TSX, token CSS, Storybook, and Figma mappings.

Official
Advanced
balintbrewsbalintbrews
14

canvas-styling-conventions

Enforce Tailwind CSS 4 theme tokens and CVA variants for Canvas components.

Community
Intermediate
wredziowredzio

using-tailwind-design-tokens

Enforce Tailwind design tokens from globals.css in TSX/CSS files.

Community
Basic