Skip to content
Atomus

Figma Make kit

Figma Make builds working prototypes from prompts. A Make kit gives it a design system: an npm package with the components and styles, plus guidelines that tell Make how to use them.

What’s ready

Section titled “What’s ready”

The guidelines already follow Figma’s guidance for design-system guidelines:

  • Guidelines.md is the entry point. It covers what Atomus is, the reading order, the core rules and the forbidden list.
  • setup.md covers install, CSS imports, theme attributes and fonts, and what Make must not configure.
  • overview-components.md is the catalogue with other names and decision trees, so Make picks the right component.
  • One file per component with imperative Do / Forbidden rules and the generated React API, so Make uses only real props.
  • Plain Markdown with no JSX, split into small files Make can read on demand.

Use it today

Section titled “Use it today”

Until the kit ships, you can attach the guidelines yourself:

  1. Download the guidelines/ folder.
  2. In your Make file, add the files to the guidelines, with Guidelines.md at the top.
  3. Add the token CSS (css/atomus.css from the repo) to the project’s styles, and set data-theme, data-brand and data-radius on the root.

Make then styles with Atomus tokens and follows the rules. It can’t import the React components until they are on npm, so expect it to rebuild simple components from tokens.

When the kit ships

Section titled “When the kit ships”
  • The kit will install @stanvision/atomus-react and @stanvision/atomus-tokens and bundle the guidelines.
  • This page will link the kit, and the Overview will mark it as available.