Community / AGENT SKILL

figma-to-code

0 installs 23 GitHub stars

Use when implementing or updating a component from a Figma link — how to turn the Figma design variables into code tokens, on both platforms: Tailwind classnames for libs/ui-react and themeJS (`t.*`) paths for libs/ui-rnative. For the full token catalogues and styling mechanics, see component-styling.

One new superpower.

Run this command in your project to choose an agent and install the skill.

npx skillycli add https://github.com/LedgerHQ/lumen --skill figma-to-codeView original source

BEFORE YOU INSTALL

Understand the trade-offs.

SECURITY REVIEW

Not yet assessed

Review the original instructions and requested permissions before installing.

No security review is available for this catalog entry yet.

SKILL QUALITY

Not yet assessed

How clearly the skill guides your agent, how complete its workflow is, and how you can check the outcome.

No quality assessment is available for this catalog entry yet.

The full skill.

Original instructions from the publisher’s SKILL.md

# Figma → code

Use the Figma MCP server to read the design. This skill covers only the
**variable → token derivation** — the part that is specific to extracting from
Figma. For the full token lists, `cva`, `useStyleSheet` and the rest, see
`component-styling`.

Route by the lib you're implementing in (see the `Libraries` table in
`AGENTS.md`): web → the Tailwind mapping; React Native → the themeJS mapping.

## React web (`libs/ui-react`) — Figma variable → Tailwind class

Combine the Tailwind prefix for the CSS property with the **unique part** of the
token name (the segment after the last hyphen of the CSS variable).

| Figma shows | Prefix | Write | Not |
| --- | --- | --- | --- |
| `background-color: var(--background-base)` | `bg-` | `bg-base` | `bg-background-base` |
| `color: var(--text-on-accent)` | `text-` | `text-on-accent` | `text-text-on-accent` |
| `border-color: var(--border-muted)` | `border-` | `border-muted` | `border-border-muted` |
| `padding: var(--spacing-4)` | `p-` | `p-4` | `p-spacing-4` |
| `border-radius: var(--radius-lg)` | `rounded-` | `rounded-lg` | `rounded-radius-lg` |
| `border-width: var(--border-width)` | `border` | `border` | `border-width` |
| `border-width: var(--border-width-active)` | `border` | `border-2` | `border-width-active` |

- **Typography**: Figma shows a style-name comment like `/* body/3 */`. No prefix
  — replace `/` with `-`: `body-3`.
- **Drop shadow**: Figma shows `/* box-shadow/sm */`. Prefix `shadow-`, take the
  unique part after the last `-`: `shadow-sm`. Values: `shadow-sm`…`shadow-2xl`.

## React Native (`libs/ui-rnative`) — Figma variable → themeJS path

There are no classnames on RN. The same Figma variable maps to a path on the
`t` object inside `useStyleSheet((t) => …)` (same token vocabulary as web, JS
object shape — see `component-styling/references/rnative.md`).

| Figma shows | themeJS path |
| --- | --- |
| `var(--background-base)` | `t.colors.bg.base` |
| `var(--text-on-accent)` | `t.colors.text.onAccent` |
| `var(--border-muted)` | `t.colors.border.muted` |
| `var(--spacing-4)` | `t.spacings.s4` |
| `var(--radius-lg)` | `t.borderRadius.lg` |
| typography `/* body/3 */` | `t.typographies.body3` |

- **Colours** are nested under a category key (`bg` / `text` / `border`), and
  kebab segments become camelCase keys (`on-accent` → `onAccent`).
- **Spacings and sizes are `s`-prefixed by pixel value**: `--spacing-4` →
  `t.spacings.s4`, `--spacing-16` → `t.spacings.s16`; sizes likewise
  (`t.sizes.s112`, plus `t.sizes.full` for `100%`).
- **Border radius keys are named**, not pixel values: `none`, `xs`, `sm`, `md`,
  `lg`, `xl`, `2xl`, `full` (so `t.borderRadius['2xl']`).
- **Typography keys are camelCase**: `body/3` → `t.typographies.body3`,
  `body/2-semi-bold` → `t.typographies.body2SemiBold`.
- Source of truth for the key sets:
  `libs/design-core/src/lib/themes/js/primitives/primitives.others.ts` (spacings,
  sizes, borderRadius) and the per-brand `theme.*.ts` colour objects. Confirm a
  key there rather than inventing one.

## When a Figma size has no token (both platforms)

1. **Use the closest available token** (e.g. `112` for Figma's 108, `96` for 90).
2. **Document the deviation** in a code comment.
3. **Consider requesting the token** be added if it's needed often.

```tsx
// ✅ Web — closest token, documented
<Tile className='w-112' size='md' /> // 112px (closest to Figma's 108px)
```