I built a Design System for a growing team
- Rafaela Kwiatkowski
- 23 de jun.
- 3 min de leitura
Atualizado: 25 de jun.
⚡This is Foton Design System
A scalable design system built for an energytech startup with four digital products. It was created to unify the visual language, improve team efficiency, and support consistency across platforms.
📋Overview
The company’s outdated design system was cluttered with inconsistencies, unused components, and excessive variants. A recent visual rebrand made the misalignment even more evident. Designers struggled to find and reuse components, while developers dealt with inconsistent styles, slowing delivery.
🎉Results
Three of the company’s products were successfully redesigned using it. The impact was clear:
Development efficiency increased by 60%.
Design efficiency improved by 85%.
User feedback highlighted a smoother, more intuitive experience.
👩💻My contributions
As the lead designer, I led the initiative from project management and task planning to team coordination and creation of the system’s component library, tokens, and variant logic.
📅Phases
Discovery → Planning → Creation → Handoff → Maintenance
🧐 Refinement: starting the process
Documentation
We started by reviewing and documenting everything from the old design system — what existed, what worked, what didn’t. This gave us a clear starting point.
Benchmarking
To guide our decisions, we explored how other companies built and manage their design systems. This helped identify patterns, best practices, and potential pitfalls.
Assessment
On a workshop in Miro, we listed out:
What we already had
What was missing
What we could reuse
What needed to be created from scratch
Component library
To keep things efficient for developers, we selected a UI library as the base of the new system. This helped speed up implementation and ensured consistency. The chosen library was Radix UI.
Planning the tasks
We created a weekly plan based on:
Team capacity and seniority
Ongoing projects and parallel demands
A balance between quick wins and larger tasks
🎨 Design System structure in Figma
Design tokens and icons were placed right at the top for quick access.
Each component was placed on its own page, sorted alphabetically.
I created an “About” page to guide users through the file. It contains the Design system's principles.
I included a visual identity summary with key brand elements like colors, typography, and logos.
Components' frames follow a consistent structure: it starts with a clear title and a short subtitle describing its purpose or usage. Below that, the component is broken down into organized sections, with variations, states, and examples.
Each component includes Do’s and Don’ts cards to show best practices and avoid common mistakes. I also added an Adjustments section for version control, it shows what was changed, when and by who, keeping the DS transparent.
🛠️ Maintenance: Keeping it consistent over time
Since its launch in October 2024, the design system has been actively used by the team and continues to support our products without major changes. Its structure has adapted well to our context, remaining stable and effective.
To ensure ongoing consistency and trust, I set up key practices:
Clear documentation: Each component includes usage guidelines, Do’s & Don’ts, and an “Adjustments” section to track edits over time.
Feedback loop: Occasional check-ins with designers and developers help identify new needs while avoiding unnecessary complexity.
Data tells the design system's success: After a redesign of the "Client's Area" platform, our monthly users went from 167 to 302 in 2 months after launch.
Before the redesign
After the redesign
🧠 Learnings
Building and maintaining a design system end-to-end taught me a lot, not just about components, but about people, processes and scale. Some key takeaways:
Alignment matters as much as structure: The system only worked because it reflected how the team actually worked, from dev handoff to design rituals.
Start small, scale smart: Focusing first on high-impact components helped us get quick wins and build trust before expanding.
Collaboration is key: Involving developers early made decisions around tokens and implementation much smoother later on.
