Skip to main content
Home/Recipes/Paste tokens to Figma Make
AI Pipelines

27.Paste tokens to Figma Make

Designer

Overview

Figma Make generates components fast, but without brand context it guesses colors and type. Add extracted tokens as context first. The AI now builds components on the actual brand values, saving hours of manual correction.

Figma Make generates UI components from natural language prompts, but without brand context it defaults to generic colors, system fonts, and arbitrary spacing. The result looks like a prototype, not a product. Extract the actual brand tokens from the live site using Dembrandt, then paste the JSON into Figma Make as context before prompting. The AI now has exact hex values, font families, size scales, and border radii to work from. Components come out on-brand without manual correction of every color and type property.

Extract tokens

Terminal
dembrandt brand.com --json-only
Figma Make prompt
# Paste JSON output into Figma Make context, then:
"Use these extracted design tokens as the brand foundation.
Build a [component] that matches these colors,
type scale, spacing, and border radii exactly."
Output

Figma Make components built on real token values, not AI-guessed brand colors.

More in AI Pipelines

21.Clone a brand's design language22.Build a design system in Claude Code23.Rebrand an existing application24.Brand guide PDF vs. live site25.Cross-app token comparison26.Build a design system in Figma via MCP28.Improve a Google Stitch prompt with brand context29.Generate a branded presentation30.Find tokens that fit a page's purpose

Browse all

All recipes →

43 workflows