---
name: generating-ui-in-figma-make
description: Produces on-system UI in Figma Make and the Figma agent by writing and using the guidelines folder correctly, binding raw values to variables, and preferring library components over generated ones. Use when generating a screen, prototype or component in Figma Make, when authoring the guidelines folder for a Make file, when Make output does not match the design system, or when the user mentions Figma Make, the Figma agent, guidelines.md, or design system packages in Figma. Applies before the first generation in any Make file.
license: CC0-1.0
---

# Generating UI in Figma Make

Figma Make can inspect design system packages to see which components and
tokens exist. It still needs to be taught what to reach for and when. That
teaching lives in the `guidelines/` folder, and it is read before generation.

## The folder Make actually reads

```
guidelines/
├── Guidelines.md        # read first, always
├── components/          # one file per component or family
└── design-tokens/       # colour, type, spacing, elevation
```

`Guidelines.md` is the entry point. Treat it as the introduction: what the
system is, which packages are available, and the handful of rules that apply
everywhere. Push detail down into the subfolders so the entry file stays short.

## Write it like onboarding docs, not like a style guide

The useful comparison is the documentation you would hand a new engineer on
their first day. If you already have design system docs or a Storybook, you
already have the content — it needs rewriting for a reader who will follow it
literally.

Be prescriptive. Figma's own guidance draws the line clearly:

- Good: "Do not use small text for anything except captions."
- Weak: "Use small text sparingly."

The second one is unenforceable. An agent cannot tell whether it has been
sparing. Every rule should be checkable by reading the output.

## Order of preference when generating

1. **A library component**, used as-is.
2. **A library component with supported props.** Variants before overrides.
3. **A composition of library components.**
4. **Something new** — only after saying out loud that nothing existing fits.

Search the library before creating anything. That is the rule to put first in
`Guidelines.md`, because it is the one that prevents the most rework.

## Bind values, do not paint them

Every colour, spacing value, radius and type style should resolve to a
variable or style. A raw hex in a Make output is the same defect as a raw hex
in code: correct today, wrong in dark mode, wrong after the rebrand.

When converting an existing frame, treat unbound raw values as findings and
list them rather than silently leaving them.

## Custom skills

The Figma agent and Figma Make accept uploaded skills: in the prompt box,
choose Skills, then Add skill, and upload the Markdown file. That makes the
skills in this pack usable inside Figma as well as in a code editor — the
same file, both surfaces.

## Verification

Before handing the output on:

1. Every component used is a library component, or is explicitly flagged as new.
2. No unbound raw colour, spacing or type values remain.
3. The screen reads correctly at the smallest supported width.
4. Text that carries meaning is real text, not an image or a flattened vector.