Design system: a shared foundation so changes are made only once
When a product or a family of websites grows without a system, every change has to be repeated screen by screen. I build design systems in Figma, with tokens, components and usage documentation, so design and code speak the same language.
Signs you need a system
- The same button or form is solved differently on every screen.
- A style change has to be repeated on every site or module.
- Every new site or feature starts almost from scratch.
- Design and engineering call the same pieces by different names.
What a design system includes
- An audit of what exists: what repeats, what varies and what is common to everything.
- Design tokens: the foundation for color, typography and spacing.
- A component library in Figma, with its states.
- Usage rules and documentation so the team applies it consistently.
- Components named the same in design and in code.
- Brand or institution variants on a shared base.
- Accessibility built into each component, not left as a separate stage.
How I build a design system
- Take inventory of the existing screens and sites.
- Separate what is common from what changes between products, brands or institutions.
- Design the foundation: tokens and the minimum set of components.
- Test the system on real flows before expanding it.
- Document the use and the names of each piece.
- Support the implementation so the code respects the system.
What it looks like in real projects
At Start University, every site had its own version of the student portal. The answer was a single modular portal that adapts to each institution with minimal CSS changes, plus a shared base system used to launch the sites of new partner universities.
At Deep Creek Solutions, reusable UI components were shared across health and aesthetics products, so the same thing didn't have to be redesigned in each one.
Frequently asked questions
Do I need a design system or is a style guide enough?
A style guide defines how the brand looks. A design system adds components with behavior, usage rules and names shared with the code. If your problem is that screens get solved differently every time, you need the second.
Do you build it from scratch or from what I already have?
From what exists. First I identify which parts repeat and which change between screens or sites; that is the foundation of the system.
Does it work for several sites or brands at once?
Yes, it's one of the clearest uses. At Start University, a shared base system let each institution keep its visual identity on the same structure.
Do you implement it in code?
The main deliverable is the system in Figma. To take it to code, the web development page describes how I build component libraries aligned with the design system.
Do you work with a team that already has a designer?
Yes. I can build the system alongside the team's designer or take that part of the work, depending on how you prefer to organize it.
Related projects
Start University: student portal and education websites
UX/UI design for education platforms: a unified student portal and a shared base system for more than 20 university websites.
Deep Creek Solutions: health and beauty SaaS products
Product design for health platforms such as Red Sanitaria and Retia Health, an interactive dental chart and an app for beauty professionals.