How to Prepare a Simple Design System in Figma
A beginner, interface-by-interface guide to prepare a simple design system in figma, including what each design term means, where to click and how to verify the exported/resulting asset.
By the end: You will complete prepare a simple design system in figma and keep an editable source plus a checked output.
You will complete prepare a simple design system in figma and keep an editable source plus a checked output.
Key terms before you start
These definitions make the steps easier to follow and help distinguish controls, files and concepts that can look similar at first.
What you need before starting
- Access to Figma
- A source/project you are allowed to edit
- A clear final destination/size/use for the result
Step-by-step tutorial
Every step is shown below. Work through them in order and use each checkpoint to confirm the result before moving on.
Open Figma and use a safe working copy
Open the real project in Figma. Duplicate the file/document first if the tutorial could alter important source work.
The editable source is different from the final exported asset; preserve recoverability.
Inspect export dimensions, transparency, crop, color and output format; judge the exported file as the final artifact.
Identify the final destination
Write where the result will be used: website width, social platform, handoff, print, prototype, etc.
Dimensions, color, format and responsive behavior depend on destination.
Inspect export dimensions, transparency, crop, color and output format; judge the exported file as the final artifact.
Audit actual repeated values/components
List text styles, brand colors, spacing and UI repeated in current screens.
Build system from product needs, not an abstract giant library.
Use Auto Layout/flexible components or revise layout constraints rather than shrinking type until it barely fits.
Create color variables/styles
Define text, surface, accent, border roles using project’s approved system.
Role-based names explain usage.
Inspect export dimensions, transparency, crop, color and output format; judge the exported file as the final artifact.
Create text styles
Define major heading/body/label roles actually used.
Avoid dozens of nearly identical sizes.
Use Auto Layout/flexible components or revise layout constraints rather than shrinking type until it barely fits.
Define spacing/sizing variables if workflow supports them
Create only scales used by components.
Consistency matters more than token quantity.
Use Auto Layout/flexible components or revise layout constraints rather than shrinking type until it barely fits.
Build Button with Auto Layout
Use label → Shift+A → padding/gap/alignment → component.
Start with a foundational component.
Use Auto Layout/flexible components or revise layout constraints rather than shrinking type until it barely fits.
Build Input and Card components
Use real states/content and shared variables.
Components should model real UI, not empty boxes.
Use Auto Layout/flexible components or revise layout constraints rather than shrinking type until it barely fits.
Create variants for real states
Default, Hover/Focus, Disabled, Error where product/design needs them.
State names should correspond to behavior.
Use Auto Layout/flexible components or revise layout constraints rather than shrinking type until it barely fits.
Use components in real screens
Replace local copies with instances.
A design system is only useful when consumed.
Use Auto Layout/flexible components or revise layout constraints rather than shrinking type until it barely fits.
Change one shared variable/component
Test propagation.
This verifies the system actually centralizes decisions.
Return to the layered/component source or backup. Keep future export/flatten operations on separate delivery copies.
Document usage rules
Add brief examples/notes for when to use each component and constraints.
Names alone cannot communicate every behavior.
Use Auto Layout/flexible components or revise layout constraints rather than shrinking type until it barely fits.
Open the exported/result outside the editor
Inspect the actual PNG/JPEG/SVG/prototype/output rather than assuming it matches the canvas.
Exports can change dimensions, transparency, font rendering or compression.
Inspect export dimensions, transparency, crop, color and output format; judge the exported file as the final artifact.
Store source and delivery files predictably
Use clear names/versioning and keep the source separate from public delivery assets.
Future revisions should start from editable source.
Return to the layered/component source or backup. Keep future export/flatten operations on separate delivery copies.
Always know whether you are editing source structure or generating a delivery copy.
Concrete examples
Troubleshooting
Undo, then select the target through Layers panel and verify its name before editing.
Inspect export dimensions, transparency, crop, color and output format; judge the exported file as the final artifact.
Use Auto Layout/flexible components or revise layout constraints rather than shrinking type until it barely fits.
Return to the layered/component source or backup. Keep future export/flatten operations on separate delivery copies.
Files can be found/reused.
How the topic comes up in practice
Short excerpts from public discussions that directly relate to the task. Use the source link for the complete context.
“No manual work — it works with any collection, style, and organizes everything for you.”
documenting a design system ↗
Continue with these tutorials
Documentation and references
Use these primary and supporting sources to verify current controls, browser behavior and product-specific details.