Into Design Systems Resources — Color Tokens, accessibility workshop & more
We are thrilled to share with you our handpicked selection of the latest favorites from the ever-evolving Design Systems universe. 🪐✨
Happy learning 🙌🏻
🎨 Color Tokens in UXPin
🎨 Manage Colors Across Projects — Easy as 1,2,3.
Try out Color Tokens in UXPin (now in Beta). Streamline your design workflow:
👉 Save and manage color values in the design library in bulk
👉 Control all components with colors
👉 Quickly update your Design System
🔜Coming Soon: you’ll be able to facilitate your whole design process with Color Tokens by even easier management of colors across all your libraries and projects.
🏗️ Design Tokens Starter Set | JSON, Variables & Tokens Studio sync by Philipp Jeroma
👀 Are you just starting with a design system and the associated design tokens and don’t know where to begin?
💪🏻 With this set, you have a starting point to guide you.
Included in this set are:
- Predefined variables and variable groups (divided into global, alias, and an exemplary component set)
- Linked GitHub repo of the token set as a JSON file
- Get Started section with explanations of the token anatomy and short instructions on how to insert the JSON
🔗 Link: https://www.figma.com/community/file/1316042479653154791
💪🏻 Prioritising design systems — How we handle requests and manage expectations with Alexander Fandén
Get all 17 hands-on design system videos and case studies from the Into Design Systems Conference 2024! 🌟
Access the full recordings including practical case studies where top experts teach you everything about Design Systems and Design Tokens.
👉🏻 Get all recordings: https://www.intodesignsystems.com
🧜♀️ Moja UI 👉🏻 Free #Figma UI Kit (Variable + Darkmode ) by John Itebu
About Moja UI:
🌈 HIGHLY customisable components & variants with rich features and api🎨 Theming support with color variables setup LIGHT & DARK modes
🚀 Extensive Icons: 1000+ Functional Icons with Size & stroke/fill Variants || 500+ Popular Brand Logos & Icons || 250+ Flag Icons
🆕 New Figma Properties: Advanced component crafting
🌐 Free Forever: Moja UI is, and will always be, FREE!
🚀 Regular Updates: Exciting additions and cool features await.
Bonus:
🎉 Sample/Demo Components
📘 Documentation/feature api
🚀 UX Best Practices & tips
🔗 Link: https://www.figma.com/community/file/1108679668074690379
🎨 Color Variables Style Guide Generator for #Figma by novu
💡This plugin enables you to generate a color style guide based on your local variables.
Tailored for teams following the Tailwind Design system and its naming convention (e.g., “Blue/500”), the generator displays styles in sections according to the defined groups in the variables panel, with subgroups if applicable.
For each color, a swatch is generated. If the collection includes modes, these will be displayed alongside the color swatches, showing the hex code or referenced variable for each mode.
The generator traces references to display the hex code of the original variable. However, if a referenced variable includes modes, it will simply display the variable name, as determining the hex code in such cases is not feasible.
🔗 Link: https://www.figma.com/community/plugin/1349082257648855815/color-variables-style-guide-generator
🎨 Design Tokens: Unified approach to Design System implementation by Diego Cobelo
💡 Design Tokens represent a paradigm shift in how we approach hashtag#DesignSystem implementation, offering a unified approach that bridges the gap between design and development.
📚 By leveraging Figma variables, Style Dictionary, and Storybook, the team has established a robust foundation for Standard Design System, enabling them to deliver cohesive and polished user experiences across all their digital products.
🔗 Full article: https://medium.com/design-at-exxonmobil/design-tokens-unified-approach-to-design-system-implementation-d5013027c655
🌟 Functional UI Kit, Design to Code Design System by Alex Yakir
💪🏻 A free and open-source design-to-code system
The key features:
- React components linked to Storybook
- Identical props between Figma and React
- CSS variables matching Figma
- Accessibility standards
- Quality components in both Figma and React
- Design, UX, coding, and styling best practices
- Dark mode support
🔗 Link: https://www.figma.com/community/file/1338456115232271694
🙌🏻 Upcoming Events:
🌟 Workshop: Creating Accessible Design Systems with Sarah Massengale and Marcelo Paiva
Elevate your Design Systems skills to expert level with Marcelo Paiva and Sarah Massengale.
2 Day Workshop — September 9 and 10 — Online Event
Limited spots available!
This workshop teaches you to create accessible design systems and components from the ground up. Hosted by Marcelo Paiva, the creator of the WCAG plugin for Figma and Sarah Massengale, a blind technologist, will give participants firsthand insights into the challenges and solutions for designing experiences with accessibility in mind.
Over the course of two days, we’ll cover the fundamentals and advanced techniques of accessible design, ensuring that product owners, user researchers, and product designers can plan, architect and design high-quality systems that are usable by everyone.
🙌🏻 What you will learn:
- Define accessible user stories and acceptance criteria
- Design accessible components and experiences
- Conduct user research with participants with disabilities
- Create accessible prototypes and test them with screen reader users
- Collaborate and hand-off accessible components with developers
- Leverage design tokens for accessibility
Time & Schedule
The workshop sessions will run on the following days:
Monday, September 9, 12:00 PM — 4:00 PM ET (6PM — 10 PM CEST)
Tuesday, September 10, 12:00 PM — 4:00 PM ET (6PM — 10 PM CEST)
Reserve one of the limited spots:
Thanks for reading!
Happy Design System building 🛠️🎨
Hope to see you at one of our next events
Enjoy your day ☀️
Your Design System Friends
