Design System and Variables ➤ My experience
Structure + Variables and Tokens + Modes
Creating a design system is a crucial step in ensuring consistency and efficiency in a company’s design workflow. Recently, I had the opportunity to organize a comprehensive design system for my company using our paid account in Figma. This system streamlined our design process, making it more intuitive and scalable. Here’s a detailed look at how I achieved this and the benefits that ensued.
Setting Up the Design System
To start, I created two files: one dedicated to the design system and the other for prototyping. This separation allowed us to maintain a clean and organized structure, where the design system file housed all components and styles, while the prototype file focused on the actual application designs.
Components and Styles
In the design system file, I meticulously organized components and styles into categories based on atomic design principles. These categories included:
Fondations and Styles
Colors & Fonts & Shadows & Grids
Components
- Atoms: The basic building blocks such as buttons, input fields, and icons.
- Molecules: More complex components made up of atoms, such as form fields that include a label and input.
- Organisms: Even larger components consisting of molecules and atoms, such as headers or form sections.
This hierarchical structure made it easy for our team to find and use components efficiently.
Variables and Tokens
To further enhance consistency, I created variables for colors, spacing, and fonts. These variables were crucial in maintaining uniformity across different designs and ensuring quick updates when needed.
Color Variables
All colors used in our prototypes were added to a collection of primitives. I then created tokens for each color, which could be easily referenced throughout the design system.
Spacing Variables
Spacing variables were another important aspect. These variables defined the margins, paddings, and gaps between elements. By creating tokens for spacing, we could ensure that our designs had a consistent look and feel, regardless of the platform or device.
Font Variables
Font variables were set up for different text styles, such as headings, subheadings, body text, and captions. Each variable included specifications for font family, size, weight, and line height. This setup ensured that our typography was consistent and adaptable to various screen sizes.
Prototyping with the Design System
In the prototype file, the design system was seamlessly integrated. This integration allowed us to use the components and styles from the design system directly in our prototypes, ensuring consistency and reducing redundancy.
Dark and Light Modes
One of the key features of our prototype project was the ability to switch between dark and light modes. This capability was essential for enhancing user experience and accessibility. By defining color variables for both modes in the design system, we could easily toggle between themes in the prototype.
Mobile and Desktop Variants
Another important aspect was designing for different devices. We created variables for spacing and fonts tailored to both mobile and desktop experiences. This approach allowed us to ensure that our designs were responsive and looked great on any screen size.
Benefits of a Well-Organized Design System
Implementing this design system brought several benefits to our workflow:
- Consistency: By using predefined variables and components, we ensured that our designs were uniform across all projects.
- Efficiency: Designer can quickly find and apply components, reducing the time spent on creating new designs from scratch.
- Scalability: The design system made it easy to update styles and components globally, which is particularly useful for large-scale projects.
- Collaboration: With a shared design system, our team could collaborate more effectively, as everyone was working with the same set of tools and guidelines.
- Developer-Friendliness: The organized and consistent structure made it easier for front-end developers to work with the design system, which improved the speed of implementation.⚡🚀
Organizing a design system with well-defined variables and components can greatly enhance a design team’s productivity and output quality. By separating the design system and prototype files, creating a hierarchical structure, and defining variables for key design elements, we established a robust framework that catered to both our present and future design needs.
Future Plans
Moving forward, we plan to synchronize our design system in Figma with components in Storybook, ensuring that our design system stays aligned with the actual codebase. Additionally, we aim to sync these components from Storybook directly with our working projects, creating a seamless and efficient workflow from design to development.
Thank you for your attention! I would greatly appreciate any feedback or comments you may have. Good luck with your own design systems!
