How to create a design system in Figma from scratch (startup size)

To create a design system in Figma from scratch, build it in this order: color variables (a raw palette plus a layer of named roles), text styles, spacing and radius variables, a small set of components that use only those values, one documentation page, and finally publish the file as a library. For a startup or a solo designer, that's the whole system. Everything else can wait until a real screen asks for it.

This guide is for the "one designer, a few developers, a product that's still changing" situation. I'll keep it as small as it can be while still being a system rather than a sticker sheet.

Decide how big it needs to be

A design system for a team of three has one job: stop people from picking a slightly different gray every time. It doesn't need governance docs, a contribution process or component tokens.

A useful test: if nobody would notice a missing piece in the next month of work, leave it out. You can add a layer later much more easily than you can remove one that screens already depend on.

Here's the minimum I'd build:

Step 1: set up the file

Create one Figma file for the system and give it a clear name, because a published library takes its name from the file. Add four pages: Cover, Foundations, Components and Docs. If the file sits in your drafts, move it into a project folder; Figma requires that before you can publish it as a library.

Step 2: colors as variables

Open the Variables tab and make two collections.

• Primitives holds every color you allow, grouped by family: neutral/50 to neutral/950, brand/50 to brand/950, plus red, amber and green for status. No other file should ever bind to these directly, so clear their scopes in Edit variables.
• Semantic holds roles like background/default, text/primary, border/default, action/primary and status/danger. Every value is an alias to a primitive.

If the difference between those two layers is new to you, our primitive vs semantic tokens explainer covers it in more depth. If you want dark mode from day one, add a second mode to the semantic collection; our variable modes setup guide walks through it. Note that modes need a paid Figma plan (more on that below).

Step 3: type as text styles

Create text styles rather than loose font settings. A startup product usually gets by with:

• Display, Heading/L, Heading/M, Heading/S
• Body/M, Body/S
• Label, Caption

Text styles are available on every Figma plan (Figma). If you want the font family or sizes to be switchable later, store them as string and number variables and apply those inside the styles. Pick one font family to start. A second family is a decision you can make once you've seen real screens.

Step 4: spacing and radius as number variables

Make a third collection, Dimensions, with number variables:

• Spacing: space/1 = 4, space/2 = 8, space/3 = 12, space/4 = 16, space/6 = 24, space/8 = 32, space/12 = 48, space/16 = 64.
• Radius: radius/sm = 4, radius/md = 8, radius/lg = 16, radius/full = 999.

Scope spacing variables to gap and padding and radius variables to corner radius, using the scoping options in Edit variables (Figma). That keeps the pickers short and stops a radius value from ending up as padding.

Step 5: ten core components

These cover most early product screens:

1. Button (primary, secondary, ghost; three sizes; default, hover, disabled)
2. Text input (with label, hint and error)
3. Select
4. Checkbox and radio
5. Toggle
6. Card
7. Badge
8. Alert or banner
9. Modal
10. Avatar

Build each one with auto layout, bind every fill, stroke, gap, padding and radius to a variable, and use text styles for every label. Then make it flexible with component properties instead of extra variants where you can: a boolean property to show or hide an icon, a text property for the label, an instance swap property for the icon itself, and variants only for the things that really change the design, like size or state. Figma supports variants and component properties on all plans (variants, component properties).

Resist building a table, a date picker or a data grid now. Build them the first time a screen needs one, inside the system file.

Step 6: one docs page

On the Docs page, put a frame for each foundation: the color roles with their names, the type styles with sample text, the spacing scale as blocks. Add a short note per component: when to use it and when not to. Put the same notes in each component's description field in Figma, so they travel with the component.

Keep it in the file. A separate documentation site is a project of its own, and for a small team nobody will read it.

Step 7: publish it as a library

Publishing makes the components, styles and variables available in your product files, and lets you push updates to them. This is where your Figma plan matters.

Sources: Figma's Modes for variables, Publish a library, Starter plan overview and plans and features.

On Starter, Figma says you can still create components and styles but can't publish them to other files. In practice that means keeping the system and the screens in one file until the team upgrades. That works for a while; it gets slow once the file holds a few dozen screens.

The generator shortcut

Steps 2 to 4 are the slow, fiddly part, and they're also the most mechanical. A generator plugin can create the variables and styles for you, which you then edit:

• Kigen turns well-known palettes into color variables with a dark mode, adds status colors, type and sizing variables, and its listing describes it as free for now.
• Foundation Studio grows a full palette out of one primary color and adds scales for type, spacing, shadows and radius, with a documentation page. It's in beta and its listing notes support for free Figma accounts.
• Huekit is our plugin. We generate the color scales, the semantic layer with Light and Dark modes, foundations for spacing, radius, sizes and typography, documentation pages, and a components page, starting from your own colors, one of our presets or an editor theme like Dracula. See huekit.io for what each plan includes.

Whatever you use, check the result against Steps 2 to 4: two color layers, every semantic value an alias, scopes set. Then build Step 5 by hand, because your components are where your product actually looks like yours. For a wider comparison of generators, see our list of design system generator plugins.

What to skip for now

• Component tokens (button/primary/background). Bind components to semantic roles until one really needs to differ.
• Multiple brands or themes beyond dark mode.
• A token pipeline to code. A JSON export your developer imports by hand is enough at this size.
• Every possible state. Add focus and error states as soon as you build forms; loading and empty states can wait for the screens that need them.

FAQ

How long does it take to create a design system in Figma from scratch?

It depends on the number of components more than anything else. Foundations (colors, type, spacing) are a short job, especially with a generator. Ten well-built components with variants and properties take the most time, so start there once foundations are in place.

Can I create a design system on Figma's free plan?

Yes, inside one file. Variables, text styles, components and variants all work on Starter. You can't add a Dark mode or publish the system as a library for other files.

Should a startup buy a design system kit instead?

It can, if the kit's style is close to what you want. You'll still need to replace its colors and type with your own, and rename its tokens to match how your team talks. Building a small system yourself often takes similar effort and leaves you with nothing you don't use.

What should a minimum design system include?

Color variables with a semantic layer, six to eight text styles, a spacing and radius scale, about ten core components, and a docs page.

Can AI create a design system in Figma?

Some plugins and web apps generate a starting system with AI, and generator plugins create foundations from a few inputs. Either way, review what they produce against the steps above before your product files depend on it.

Start today

Create the file, add the four pages, and do Step 2 before anything else. Once your buttons use action/primary instead of a hex value, the rest of the system has something to hang on.