Logo

dev-resources.site

for different kinds of informations.

Building Flo Design System automation with Figma as a source

Published at
1/11/2025
Categories
mobile
designsystem
designtokens
tutorial
Author
sasha_zi_dc978886c2fb9388
Author
25 person written this
sasha_zi_dc978886c2fb9388
open
Building Flo Design System automation with Figma as a source

Image description
Creating a scalable design system is no small feat. We tackled challenges like ensuring team alignment, fostering collaboration, and maintaining consistency.

I documented such a journey in a two-part series:
1️⃣ Part 1: Tackling initial challenges and laying the foundation
2️⃣ Part 2: Scaling the system and key lessons learned

We are sharing our findings, tools, and plans so you can save time while starting your own design system. Other articles on the same subject often contain either information about structuring design tokens or instructions for building DS pipelines. Here, we tried to paint the whole picture and show our DS workflow end-to-end with real, simple examples from the Flo mobile app.

It is more about the DS foundations — design tokens — but there are also examples of some components.

If you’re building or scaling a design system, I’d love to hear your thoughts or answer any questions—let’s chat in the comments!

designsystem Article's
30 articles in total
Favicon
Building Flo Design System automation with Figma as a source
Favicon
Color Theory in UI Design
Favicon
How to start with micro services ?
Favicon
Observer Design Pattern O'zbek tilida
Favicon
The Power of Design Systems: How to Create and Maintain a Consistent Design Language
Favicon
Database Performance Strategies
Favicon
Structuring Your React Applications with "Layout Primitives": Today, let's focus on the unbeatable <Stack /> 🚀
Favicon
Figma Components: Supercharge Your Design System
Favicon
What’s a API REST?
Favicon
Top 10 Books on Design System that i Read last year
Favicon
Top 5 Design Patterns Every Software Engineer Should Know
Favicon
Monday joke
Favicon
Repositories Explained: A Simple Analogy
Favicon
Mixins in typescript
Favicon
Designing a better user interface system
Favicon
Design Systems, Design Tokens and the eternal battle between efficiency and flexibility
Favicon
Using mental models to think about software
Favicon
Top 50 System Design Terminologies You Must Know
Favicon
Your Design System is Not a Solution
Favicon
All about design systems
Favicon
O que ninguĂŠm te conta sobre Design Systems
Favicon
Configuring Tailwind as a Design System
Favicon
10 sec for UX Design Principles.
Favicon
What are Design Sytems? Definition and Types
Favicon
Design Systems Explained
Favicon
Building a Robust Design System: Solving the Challenge of Consistent UI Development
Favicon
Tailwindcss is not Bootstrap nor Materialize
Favicon
Why design systems fail
Favicon
Como Implementar um Design System em Projetos Vue.js: Boas PrĂĄticas e BenefĂ­cios
Favicon
Getting Started with Mitosis: Creating a Cross-Framework Design System

Featured ones: