By Mehdi HassanHow do you create brand guidelines in Figma?
You create brand guidelines in Figma by building the brand as a system first (variables, styles and components) and then laying out guide pages that use that system. The difference from a PDF is that the guide isn't a picture of the brand. It is the brand: the same color variable that appears on the guide's color page is the one a designer applies to a button in a product file.
That's the angle of this how-to: one Figma file that's both the readable guide and the working source. If you haven't decided what the guide should contain, start with our brand guidelines template, which covers the five core sections. This article is about building them in Figma. Feature names below reflect Figma as of 2026; check Figma's help center for current plan limits, since library publishing and some variable features depend on your plan.
Why build brand guidelines in Figma instead of a PDF?
Build brand guidelines in Figma because that's where your brand is actually applied, so the guide stays current by default. A PDF is a snapshot. The day after export, someone tweaks the primary blue in a product file, and the PDF and the product now disagree. In a Figma library, changing the variable updates the guide page and every file that uses it once the change is published and accepted.
Pros
- One source of truth: guide pages and design files share variables and components.
- Updates spread through the library instead of being redrawn.
- Designers grab assets from the guide instead of hunting through folders.
- Light and dark versions can live in the same variables as modes.
- Developers can inspect values directly in Dev Mode.
Cons
- Non-designers often find Figma hard to browse, so they need a simpler view.
- Library publishing and some variable features depend on your Figma plan.
- Partners and press shouldn't get access to your working file.
- It takes discipline: one hand-drawn swatch breaks the single-source promise.
The cons are manageable. Give the wider team a view-only link to the guide pages, and give outsiders a public page, as covered in our guide to hosting brand guidelines online.
How should a Figma brand guide file be structured?
Structure the file with the system pages first, then the guide pages that a reader browses, then a page of ready-made assets. Keeping the system separate from the presentation means you can redesign how the guide looks without touching the brand itself.
Figma page | What's on it | Who uses it |
|---|---|---|
Cover and read me | Version, owner, how to use the library | Everyone |
Foundations | Variable collections, text styles, effect styles | Designers maintaining the system |
Logo components | Every lockup as a component with variants | Designers |
Guide: logo | Clear space, sizes, misuse, using logo instances | Everyone |
Guide: color and type | Swatches and type scale bound to variables | Everyone |
Guide: voice | Trait cards with do and don't sentences | Writers, founders, marketers |
Guide: applications | Website, deck and social examples built from components | Everyone |
Assets and templates | Export-ready logos, social and deck templates | Anyone making something |
Name pages for the reader, not the designer. 'Guide: color and type' beats '02_FND_CLR_v3'.
How do you build brand guidelines in Figma, step by step?
Build the system in this order: color variables, type, logo components, guide pages, then publish. Each step depends on the one before it, so resist the urge to start with the pretty cover page.
Create primitive color variables
Make a collection called Primitives with every raw color: blue-500, blue-600, neutral-50 to neutral-900 and so on. These are the palette, named by what they are.
Create brand role variables
Make a second collection, Brand, whose variables point to primitives: text-primary, surface-default, accent, border. Add Light and Dark modes if you need both.
Set up type
Create text styles for each level of the type scale (display, H1 to H3, body, caption). Where your plan supports it, bind font family, size and line height to number and string variables so the scale is editable in one place.
Build logo components
Make one component set for the logo with variants for lockup (full, horizontal, symbol) and color (brand, black, white). Bind fills to brand variables.
Lay out the guide pages
Build every swatch, type specimen and logo example from the variables, styles and instances above. Add short rules and do and don't examples beside each.
Add applications and templates
Build a website hero, a deck slide and a social post from the same components, and keep them as templates people can duplicate.
Publish the library and share
Publish the file as a team library, enable it for your design files, and share a view-only link to the guide pages with the rest of the company.
How do Figma variables make the brand guide the working source?
Variables make the guide the working source because the guide pages and the design work point to the same values. When a designer applies accent to a button in a landing page file, that's the same variable shown on the guide's color page. Change it in the guide's file, publish, and both update.
The two-layer setup in the steps matters. Primitives describe the palette; brand roles describe intent. Designers should apply roles, not primitives, because roles survive a palette change. If you later shift the accent from blue to green, you remap one role variable and every button follows. Modes add a second dimension: the same role can resolve to different primitives in Light and Dark, which is how you document a dark-mode brand without duplicating every page.
A naming convention that scales
Use a slash-separated path so Figma groups variables into folders. Primitives: color/blue/500, color/neutral/900. Brand roles: text/primary, text/muted, surface/default, surface/raised, accent/default, accent/hover, border/subtle.
Keep role names about purpose, never about color: accent/default, not brand-blue. If the names describe colors, a rebrand forces a rename across every file. If they describe purpose, a rebrand is a remap.
This is also the bridge to a design system. Once role variables exist, product components can use them too, which is where brand guidelines start turning into UI rules. We cover that boundary in brand guidelines vs design system.
How do you publish and share a Figma brand kit?
Publish the Figma brand kit as a library for designers, and share view-only links to the guide pages for everyone else. Designers enable the library in their files and pull components and variables from the assets panel. Non-designers open the guide link in a browser and browse it like a document, with no editing rights.
For outsiders such as press, partners and agencies, don't share the working file at all. Export a PDF snapshot for anyone who needs a single file, or better, publish a public page with downloads. Our startup press kit checklist covers what that page should include. For developers, Dev Mode lets them inspect variable names and values directly, which removes the step of retyping HEX codes into code.
How do you keep Figma brand guidelines in sync with your website?
Keep the guide and the website in sync by building the site from the same variables, then checking the two against each other whenever either changes. If the site is built in Framer, its color and text styles can mirror your Figma variables closely; our guide on Figma to Framer explains how to carry designs across without rebuilding. In a Next.js build, the variables become CSS custom properties or design tokens with the same names.
The names matter more than the tool. If Figma calls a color accent/default and the code calls it primaryBlue, nobody will notice when they drift. Our comparison of Figma to website options covers how each build path handles tokens. For voice, which Figma can't enforce, keep the voice page's examples current with the real site copy and link the source brand positioning document from the cover page.
