Into Design Systems Favorites — Figma Variables & Design Tokens
Hey Design System Friend 👋🏻,
We are thrilled to share with you our handpicked selection of the latest favorites from the ever-evolving Design Systems universe. 🪐✨
Happy learning & hope to see you next time! 🚀
Cheers,
Your Design System Friends
🎨 📐 Into Design Systems Meetup at Volvo Cars
🎙️Speakers: Volvo Cars, Atlassian, Spotify & more.
🗓️ Date: Nov 14h — 7PM CEST live on Zoom
👉🏻 Free Entry Online & In-Person: https://www.intodesignsystems.com/meetup
The Design Systems Process Cheatsheet 🛠️🎨
A cheatsheet highlighting key considerations for a successful design system, this cheatsheet helps with:
💡 Define a clear vision and robust strategy.
💡 Foster a unified team that champions cross-functional collaboration.
💡 Craft an achievable roadmap.
💡 Execute efficient design system processes.
💡 Gain invaluable knowledge and hands-on experience
💡 Reap the benefits of design systems, multiplying consistency and efficiency across the organization
📝💫 by Mark Reynolds + Knapsack
🔗 Free FigJam File: https://www.figma.com/file/KEW4rZdiKjAxqdgaDLX6e0/Design-Systems-Process-Cheatsheet
Tips how to manage Figma variables 🎨 in your Design System
💫 Here are some steps to help you streamline your workflow and improve control:
1️⃣ Start with Core/Foundation Collections: Set up Primitive Tokens and Semantic Tokens as the foundation of your UI.
2️⃣ Consider Contextual Tokens: This optional layer acts as a bridge between Core/Foundation and Theme Collections, enhancing control and maintenance.
3️⃣ Organize Theme Collections: Split them into Layout Tokens and Color Tokens to handle UI-specific elements effectively.
4️⃣ Localization/Translation Collection: Define the languages your project supports for better organization.
💡Separating collections can make your work easier. You can hide or keep accessible specific collections, reducing clutter and improving discoverability.
By establishing an “Inherit” hierarchy, you can maintain control over variables.
Each collection serves its purpose and feeds into the next layer, creating a seamless structure.
✌🏻Remember, building a well-structured design system takes time and iteration. Experiment, learn, and refine your understanding along the way. 🚀💫
📝🙌🏻 by Gheyath Huzayen
🔗 If you want to dive deeper into this topic, feel free to check out the detailed article:
Improve efficiency of your Design System team with Scrum 🛠️
Why to try Scrum?
✅ Keep focus on long term plans
✅ Manage a growing team
✅ Helps with unclear cope of tickets and no definition of done
Here are some actionable steps you can take to improve your team’s workflow:
1️⃣ Define clear sprint goals to keep focus on important projects and prioritize long-term plans.
2️⃣ Follow meetings’ guidelines to maximize their value and have structured discussions with valuable outcomes.
3️⃣ Foster continuous improvement and feedback through regular sprint retrospectives.
4️⃣ Adapt Scrum practices to fit your team’s specific needs and goals.
✏️ Author: Roman Lihhavtsuk
👉🏻 More tips & full article:
Harmony: Free Accessible UI Color Palette 🎨 for Figma
The Harmony palette 🧑🏼🎨 is designed to elevate control over color contrast in your Design System.
With the OKLCH color space and the innovative APCA contrast algorithm, Harmony offers highly consistent color shades, previously unavailable P3 gamut colors, and precise control over text and UI element contrast.
Features
⭐️ Equal contrast within lightness groups
⭐️ Mirrored contrast pairs
⭐️ Contrast levels for readability
⭐️ Consistent chroma for similar objects
⭐️ P3 gamut for maximum color
⭐️ Tailwind compatibility
⭐️ Figma variables
⭐️ OKLCH format for CSS
🙌🏻 Big shoutout to the creators: Roman Shamin, Anton Lovchikov, Gleb Stroganov, Evil Martians
🔗 Free Figma File:
Actionable Steps for Refactoring Design Tokens 🎨🛠️
Are you looking to enhance collaboration, save time, and ensure consistency in your design system? Here are some actionable steps to refactor your Design System tokens for seamless maintenance:
✨ Establish a unified naming convention and hierarchy: Create a standardized structure for token names that reflects the purpose and role of each token. This will facilitate effective communication between designers and developers.
📊 Analyze and categorize existing tokens: Review your current design tokens and identify any naming discrepancies or redundancies. Group tokens based on their properties to establish a clear hierarchy.
🔍 Consult existing naming standards: Research industry best practices and existing naming standards to simplify the process. Consider frameworks like the W3C Design Tokens Community Group or articles like “Naming Tokens in Design Systems” by Nathan Curtis.
👥 Collaborate with designers and developers: Seek feedback from both designers and developers to ensure that the new token names are intuitive and easily recognizable. Make adjustments based on their suggestions to achieve alignment.
🗓️ Plan an implementation strategy: Determine the most efficient way to introduce the new tokens into your existing component libraries. Organize workshops or meetings to coordinate the update process and minimize disruption to ongoing projects.
📁 Create a centralized repository: Establish a repository where designers and developers can access and update token names and values. This will serve as a reference point to ensure consistency between design specs and code.
🧪 Test and iterate: Test the newly refactored design tokens across various scenarios, such as different themes, internationalization, and accessibility. Identify and resolve any bugs before implementing the changes.
✏️🙌🏻 Thanks for all the amazing insights Mark Malek & Rebecca Hemstad
🔗 Check out the full article to learn more:
How to create a color 🎨 ramp used in Design Systems
🎨 A color ramp, also known as a color scale, is a visual representation of how colors transition from light to dark in a smooth and continuous manner.
Here are some actionable steps to get you started:
1️⃣ Start by defining your brand colors.
2️⃣ Adjust the lightness at each color stop in your color ramp.
3️⃣ Fine-tune the saturation to achieve the desired color richness.
4️⃣ Ensure accessibility by checking contrast ratios.
5️⃣ Repeat the process for all other colors, aiming for similar lightness and saturation.
6️⃣ Easily add new colors by adjusting the hue value on a duplicated color ramp.
By following these steps, you’ll create a solid foundation for your design system and empower other designers to use colors effectively. ✌🏻
📝💫 by Katie Cooper
🔗 Check out the full article for more insights and tips:
Thanks for reading & supporting us!
Have an amazing day! 💫
High fives. 🙌🏻
