Figma and mockups
Enma's source of truth is code (tokens.json), and Figma reads from it, never the other way round. That keeps mockups and shipped screens in step.
Bring Enma into Figma
@enma/tokens ships Figma-ready files in dist/figma/:
| File | What it creates |
|---|---|
<theme>.light.tokens.json, <theme>.dark.tokens.json | One variable collection per theme, with Light and Dark modes: every color role plus the radius dial |
core.tokens.json | A shared collection for spacing and sizes |
tokens-studio.json | Everything above plus text styles per theme, for the Tokens Studio plugin |
The files use the Design Tokens (DTCG) format that Figma imports natively.
Native import (variables)
- In Figma, open the Variables panel and create a collection named after the theme, for example Ember.
- Rename the default mode to Light, then use Import and pick
ember.light.tokens.json. - Add a mode named Dark and import
ember.dark.tokens.jsoninto it. - Repeat for the other themes you use, and import
core.tokens.jsoninto a Core collection.
Bind fills, strokes and corner radius to the variables (color/surface, radius/lg) instead of raw values, so switching a frame's mode or collection re-themes it the way data-theme does on the web.
Tokens Studio (variables and text styles)
Figma's own import can't create text styles. With the Tokens Studio plugin, load tokens-studio.json, enable the theme's sets, and export to Figma variables and styles. You get the type scale (display-xl to num-inline) in the theme's faces as text styles.
Get the files with pnpm add @enma/tokens@npm:@enma-design/tokens and look in node_modules/@enma/tokens/dist/figma/, or build the repo and take them from packages/tokens/dist/figma/.
Sketch mockups quickly
- Start from the gallery screens. The themes page and the samples are built only from Enma. A screenshot at 2x is a faithful starting point for a moodboard or a pitch.
- Mock in the browser for anything interactive. The html starter is one file: copy a sample's structure, change the words and numbers, open it in the browser. It already looks finished, because it is the real CSS.
- In Figma, compose from the variables, not from screenshots, once a design is going to be built. Name layers after components (
Card/hero,Stat/kpi) so the handoff is obvious. - Write real copy and real numbers. "12,480 kg" and "Northwind" make a mockup feel true; "Lorem ipsum" and "100" hide layout problems.
Ask Claude for a mockup
Claude reads Enma from a URL and builds in the class recipes:
Mock up the weekly review screen for Alter (a fitness app) in Enma, theme ember, dark. Read https://enma.manishmandal.com/llms.txt first. One hero with this week's volume, a line chart of the last 8 weeks, the three best lifts as a list, and one primary button to share the week. Mobile, 390px wide, as an HTML artifact.
Tips:
- Always name the theme and the mode, and say mobile or desktop.
- Ask for one screen at a time, then for its loading, empty and error states.
- Paste the result into the html starter to keep iterating locally.