Your Brand System in Figma
A Figma file with every shadcn/ui component, where your tokens decide how everything looks.

1. The same names as your repository.color/ink, color/surface, color/action, color/alert, font/display, font/text, and the sizes and spacing from 05-tokens.
2. Every swatch on the page reads from a token.When you change a value, the page changes too, so this is the quickest way to check that your colors work together.
3. Each color has one job.Action is the one thing you want the reader to do. Alert is only for errors and warnings.

1. What it is.What the page is for, in a sentence or two.
2. Avoid.The most common mistake on that page.
3. Try this.One small thing to do with your own brand.
4. Hide them when you present.Each note sits in a layer called Help, to the left of the page.

1. Move the file into a team project.Files in your drafts cannot be published. Drag your copy into a project in your team.
2. Publish it.Open the Assets panel, click the book icon for Libraries, and click Publish next to this file.
3. Turn it on in a new file.In any other design file, open the same Libraries window and switch on your brand's library.

4. Change it here, then publish again.When you change a token in this file, publish again. Every file that uses the library gets an update to accept.
5. Name it after your brand.The library takes the file's name, so name the copy after your brand before you publish.

1. Make the screen first.Finish one screen on Your screens, in your brand, built from a block.
2. Start a Make file.In Figma, create a new Figma Make file.
3. Attach the screen.In the prompt box, click +, choose Add context, and paste a link to your frame.
4. Attach your tokens and rules.Click + again, choose Upload files, and add 05-tokens/tokens.css and 04-brand/rules.md from your repository.

5. Ask for one screen at a time.For example: "Build this sign-in screen as a working prototype. Use only the colors and fonts in tokens.css, and follow every rule in rules.md."
6. Check it against your system.Compare the result with your Your brand page. If Make used a color that is not one of your tokens, tell it which token to use instead.

1. Open the code view in your Make file.Find the guidelines folder and open Guidelines.md.
2. Name your tokens first.List the tokens Make may use, and say that nothing else is allowed.
3. Then paste your rules.The Do and Because parts from rules.md are what Make needs most.
4. Say what not to do.Figma's own advice is that the don'ts matter as much as the tokens.

# Guidelines

Use only these colors from tokens.css:
--color-ink, --color-surface,
--color-action, --color-alert.
Do not invent new colors.

Headings use --font-display.
All other text uses --font-text.

--color-action is for the one main
button on a screen. Never use it
as a page background.

--color-alert is only for errors.

1. Publish your library first.A kit can only take styles from a published library.
2. Create the kit.In a new Make file, click Settings, choose Create a kit, then Assemble your kit, and add your library.
3. Write the guidelines.The kit makes an empty Guidelines.md. Fill it the same way as the last slide.

4. Test, then publish the kit.Ask Make for one screen, fix what it gets wrong, then click Publish kit. The kit has to be in a team folder, not your drafts.
5. Use it.In any new Make file, click Select a Make kit in the prompt box and choose yours.