ledgerhq 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 */. Prefixshadow-, 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, plust.sizes.fullfor100%). - Border radius keys are named, not pixel values:
none,xs,sm,md,lg,xl,2xl,full(sot.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-brandtheme.*.tscolour objects. Confirm a key there rather than inventing one.
When a Figma size has no token (both platforms)
- Use the closest available token (e.g.
112for Figma's 108,96for 90). - Document the deviation in a code comment.
- Consider requesting the token be added if it's needed often.
// ✅ Web — closest token, documented
<Tile className='w-112' size='md' /> // 112px (closest to Figma's 108px)