Figma library

How to create and maintain 12PM Figma variables and text styles from the same token source used by frontend consumers.

Guide

Figma library handoff

Designers and frontend repos should share one source of truth: edit src/tokens/tokens.json, regenerate the Figma artifacts and CSS, then promote the same Git revision to consumers.

Variables + styles

Import artifact

Generated

pnpm tokens:build
src/tokens/figma.variables.json
src/tokens/figma.tokens.json

Generate from sourcesrc/tokens/figma.variables.json

Run pnpm tokens:build. The native Figma manifest is generated from src/tokens/tokens.json with variable type, scope and web code syntax metadata.

Import variables12PM Variables / Light

Create one collection named 12PM Variables. Use slash-separated ref/sys/comp names as namespaces and keep primitive ref variables unscoped.

Create text stylesPrompt / Medium titles

Create the public text styles from figma.variables.json. Line-height ratios are converted to percent or computed pixels for Figma text styles.

Publish libraryReview, then publish

Publish variables/styles only after the Figma values match the repo revision promoted to frontend consumers.

Collections

Clean semantic set

12PM / RefPrimitive values

Brand Red, Sun, Cream, Ink, sizes, spacing, radius, font weights and timing primitives.

12PM / SysSemantic roles

Brand, action, surface, text, status, focus, motion and typography roles designers should pick first.

12PM / CompComponent contract

BrandMark, Button, StatusChip, TextField and icon sizing variables used by shared React primitives.

Text styles to create

Prompt

Display32 / 1.2 / 500--12pm-sys-type-display-*

Page title24 / 1.2 / 500--12pm-sys-type-page-title-*

Section title20 / 1.2 / 500--12pm-sys-type-section-title-*

Subsection16 / 1.35 / 500--12pm-sys-type-subsection-*

Body14 / 1.55 / 400--12pm-sys-type-body-*

Label14 / 1.35 / 500--12pm-sys-type-label-*

Caption12 / 1.35 / 400--12pm-sys-type-caption-*

Data ID13 / 1.35 / 400--12pm-sys-type-data-id-*

Publishing rules

No second authority

Single source

GitHub token source wins. If Figma and code differ, update src/tokens/tokens.json first, regenerate, then re-apply.

Clean publishing

Figma artifacts omit legacy sage/mint/warm compatibility aliases so designers see only the active Red / Sun / Cream system.

Strong text

Browser strong/b maps to sys.type.emphasis at Medium. Use semantic text styles for titles instead of applying Bold locally.

Logo source

Logo artwork stays as BrandMark variants. Figma may hold presentation components, but product UI imports the shared primitive.