Design System
2020
Web Data Extraction
Using Figma to craft a system-based approach helped designers solve complex problems without worrying about creating individual UI elements from scratch.
Design System
2020
Web Data Extraction
Using Figma to craft a system-based approach helped designers solve complex problems without worrying about creating individual UI elements from scratch.
Design System
2020
Web Data Extraction
Using Figma to craft a system-based approach helped designers solve complex problems without worrying about creating individual UI elements from scratch.
Challenge
Pain Points
Designing without a design system can be time-consuming, as each element must be created from scratch. Without a single source of truth for evolving UI elements, teams often struggle with scalability for future projects and maintaining consistency across the product.
Zyte (formerly Scrapinghub) is a growing remote-based business. As the demand grows, keeping track of the UI elements, design processes, and management can be challenging. I led the creation of their first design system in Figma to reduce setup times by up to 70%.
Challenge
Pain Points
Designing without a design system can be time-consuming, as each element must be created from scratch. Without a single source of truth for evolving UI elements, teams often struggle with scalability for future projects and maintaining consistency across the product.
Zyte (formerly Scrapinghub) is a growing remote-based business. As the demand grows, keeping track of the UI elements, design processes, and management can be challenging. I led the creation of their first design system in Figma to reduce setup times by up to 70%.
Challenge
Pain Points
Designing without a design system can be time-consuming, as each element must be created from scratch. Without a single source of truth for evolving UI elements, teams often struggle with scalability for future projects and maintaining consistency across the product.
Zyte (formerly Scrapinghub) is a growing remote-based business. As the demand grows, keeping track of the UI elements, design processes, and management can be challenging. I led the creation of their first design system in Figma to reduce setup times by up to 70%.
I used Information Architecture to organize and label content so users can easily find what they need and get things done.
I used Information Architecture to organize and label content so users can easily find what they need and get things done.
I used Information Architecture to organize and label content so users can easily find what they need and get things done.
Figma variants are a feature that allows designers to group and organize similar components into a single container. Variants map to properties that align with code components following the prop/value format used in popular frontend frameworks like React and Vue.
Figma variants are a feature that allows designers to group and organize similar components into a single container. Variants map to properties that align with code components following the prop/value format used in popular frontend frameworks like React and Vue.
Figma variants are a feature that allows designers to group and organize similar components into a single container. Variants map to properties that align with code components following the prop/value format used in popular frontend frameworks like React and Vue.
Design Solutions
UI Design
I complied with the marketing brand guidelines, while the UI design choices such as colours, typography, spacing, and interactive states were created to focus on hierarchy, readability, and accessibility.
Design Solutions
UI Design
I complied with the marketing brand guidelines, while the UI design choices such as colours, typography, spacing, and interactive states were created to focus on hierarchy, readability, and accessibility.
FIGMA VARIANTS
BEFORE
AFTER
When atoms, molecules, and organisms are combined, templates and pages are formed to show unity and consistency in the user interface with real content in place.
When atoms, molecules, and organisms are combined, templates and pages are formed to show unity and consistency in the user interface with real content in place.
When atoms, molecules, and organisms are combined, templates and pages are formed to show unity and consistency in the user interface with real content in place.
Conclusion
It is essential to start developing a single source of truth early on because, as a designer, it saved me a lot of time focusing on more important tasks. Syncing design decisions with front-end development code using tokens would be even more satisfying, so everything you see is as pixel-perfect as possible!
Conclusion
It is essential to start developing a single source of truth early on because, as a designer, it saved me a lot of time focusing on more important tasks. Syncing design decisions with front-end development code using tokens would be even more satisfying, so everything you see is as pixel-perfect as possible!
© 2026 telo santos
© 2026 telo santos
© 2026 telo santos