What does it take to create a Figma UI system that isn’t just visually appealing but also scalable, maintainable, and developer-friendly? That was the challenge we set out to solve when building Voit — a professional-grade design system created for freelancers, startups, and fast-moving product teams. In this article, we walk you through the full process of how Voit came to life in Figma: from foundational tokens and structure to components, documentation, and launch. We didn’t set out to create just another UI kit. From the beginning, the mission was clear — Voit had to be robust enough for production teams, yet simple enough to onboard solo designers quickly. The system needed to support light and dark themes through tokens, include modern UX structures like component properties and variants, and be flexible for different types of real-world applications — all without compromising on performance or clarity.
We began by defining the foundational layer: design tokens and semantic structure. Over 550 tokens were created, covering color primitives, semantic color roles, spacing scales, shadows, border radii, typography sizes, weights, and line heights. Tokens were named semantically — such as –color-surface, –color-border-subtle, or –font-heading-xl — to ensure adaptability and clarity across teams. We also set up Figma’s Variables panel to support light and dark mode collections from the start. This gave us the flexibility to make the entire system theme-aware and brand-ready, right from the beginning. Designing components is where complexity truly ramps up. Our focus was to strike the perfect balance between flexibility and clarity. Using Auto Layout 4.0, we constructed over 10,000 component variants powered by properties and variants. For instance, our button components support multiple sizes (small, medium, large), icon placement (none, left, right), and states (default, hover, active). Inputs were built with and without labels, including states like error and success. Every component was stress-tested in real-world UI flows — from signup forms to dashboards — to ensure it held up under actual product scenarios.
Voit wasn’t just about the individual components. To help teams ship faster, we developed over 50 UI blocks like hero sections, pricing tables, feature lists, and testimonials. We also created more than 100 patterns tailored to real app flows such as onboarding, settings pages, and dashboards. Templates are in the works as well. This approach allowed designers to move beyond atomic design and build full layouts in hours instead of days. We made it a priority to ensure Voit worked as well for developers as it did for designers. All component layers were named clearly — you won’t find any “Rectangle 42” or “Group 88.” Logic and properties were aligned with common CSS and JavaScript naming conventions to streamline translation from design to code. The system was made Dev Mode-ready and integrated seamlessly with tools like Tokens Studio and Style Dictionary, making design-to-dev handoff as smooth and unambiguous as possible.
A scalable system isn’t complete without clear documentation. We included a “Start Here” onboarding file inside Voit with dedicated sections explaining token logic, component usage, layout rules, and naming principles. This helped users, whether freelancers or full teams, get up and running quickly. For future releases, we’re expanding into full web documentation and video walkthroughs to ensure clarity and adoption at scale. Before launching Voit publicly, we shared early versions with real users — freelancers, product designers, and front-end developers. Through this feedback loop, we uncovered naming inconsistencies, confusing properties, and edge cases we hadn’t considered. These insights allowed us to refine components, improve block flexibility, and make the system more robust across use cases including SaaS, e-commerce, and mobile.
After months of iteration and polish, we launched Voit v1. The system shipped with over 10,000 components, 550+ tokens, 100+ patterns, support for light and dark themes, and both individual and team licenses. Each license includes updates, and the system integrates effortlessly with Dev Mode and modern Figma workflows. Voit isn’t just a UI kit — it’s a design engine ready for any team. Voit wasn’t built overnight, but it was built with purpose. Every component, token, and structural decision was made with scalability, clarity, and real-world use in mind. Whether you’re launching your first product, managing multiple clients, or scaling a design team, Voit is ready to support your workflow — and grow with it.
