A behind-the-scenes look at building a scalable, modern design system from scratch
Introduction
What does it take to create a Figma UI system that’s not only beautiful, but scalable, maintainable, and developer-friendly?
That’s the challenge we took on when building Voit — a professional-grade design system crafted for freelancers, startups, and product teams. In this article, we’ll walk you through the step-by-step process of building Voit in Figma — from foundations and variables to components, documentation, and release.
The Mission: Build for Scale, Not Just Style
We didn’t want to make “just another UI kit.”
Voit was built to:
- Handle light/dark themes with tokens
- Support modern UX patterns like properties, variants, and auto layout
- Be easy to adopt by freelancers but powerful enough for agencies
- Work for real-world teams building real-world products
Step 1: Foundations First (Tokens + Structure)
We started with variables and naming logic:
- Defined over 550 design tokens, including:
- Color primitives & semantic mappings
- Radius, shadows, spacing scales
- Typography sizes, weights, line heights
- Created light/dark mode collections in Figma’s Variables panel
- Named tokens semantically:
--color-surface, --color-border-subtle, --font-heading-xl, etc.
Why first? Because tokens make the system flexible for any theme or brand.
Step 2: Component Architecture
The hardest part was balancing flexibility + clarity.
- Built over 10,000 component variants using:
- Auto Layout 4.0 (for responsive flexibility)
- Component Properties (text, icons, booleans, etc.)
- Variants for states, sizes, modes, and behaviors
Examples:
- Button / Primary / Filled → size (sm, md, lg) + icon (left/right) + state (hover/active)
- Input → with/without label + state (error/success)
We tested each layer by building common UI flows: forms, signups, modals, dashboards, etc.
Step 3: Build Blocks & Patterns, Not Just Atoms
Voit includes more than individual components — we built:
- 50+ UI blocks (hero sections, pricing tables, testimonials, etc.)
- 100+ design patterns for app dashboards, settings pages, onboarding
- Future-ready templates (coming soon)
This allowed users to ship designs in hours—not days.
Step 4: Developer-Friendly Design
From the start, we structured components with devs in mind.
- All layers named clearly (no “Rectangle 42”)
- Props and logic mapped to common naming conventions in CSS/JS
- Ready for Dev Mode in Figma
- Full support for tokens → exportable to code via tools like Tokens Studio or Style Dictionary
Our goal: zero confusion during design-to-dev handoff.
Step 5: Documentation & Scale
We created:
- A “Start Here” onboarding file inside the system
- Sections for:
- Token logic
- Component guidelines
- Patterns & layout rules
- Usage principles
Future versions will include full web documentation and video walkthroughs.
Step 6: Testing with Real Teams
Before launching publicly, we:
- Collaborated with early adopters (freelancers & product designers)
- Identified confusing props, naming gaps, missing edge cases
- Refined blocks to work across common use cases (SaaS, mobile, e-commerce)
Final Launch: Voit v1
After months of iteration, we launched Voit v1 with:
- 10,000+ components
- 550+ tokens
- 100+ patterns
- Light & dark mode
- Team + solo licenses
- Updates included with license
- Compatible with Dev Mode, Tokens Studio, and modern design workflows
Explore Voit → https://voit.io/pricing
Final Thoughts
Voit wasn’t built overnight—but it was built with purpose. Every component, token, and file structure was designed to help designers move faster and scale smarter.
Whether you’re building your first product or running multiple client projects, Voit is ready to grow with you.
