Into Design Systems Resources - Figma Variables Plugins & more

Into Design Systems Resources - Figma Variables Plugins & more

Apr 30, 2024

Bazzle: Color Palette & Variable Builder by Mohamed Fawzy

🪄 Effortlessly Generate Comprehensive Global Variables in No Time! 🪄

  • Using color generator technique by ColorBox to generate color grades and palettes as variables.

  • Exporting color list to Figma canvas

  • Using mathematical ways to generate different scales of numbers for your spacing, sizing, font scale, border radius, and border width variables.

  • Exporting all to a variable collection with hierarchical group of variables, supporting both primitives and component tokens structures.

Variablize Text Styles by masha sh

This plugin scans local text styles, converts their properties into typography variables, and binds those variables back to the text styles.

Works for:

- Font sizes

- Font weights

- Line heights

📚 Learn to master Design Tokens at Into Design Systems Conference 🟢 May 15-17

🌟 Get practical tips on how to get started

🌟 Bring your Design Tokens to the next level by implementing accessibility

🌟 Explore how Babble's team has implemented Design Tokens into their Multi-Platform product

At this year's conference, we're bringing 3 deep dives into Design Tokens:

How to name & automate Design Tokens

Samantha Gordashko - Design Systems Lead

Romina Kavcic - Design Strategist -

Design Tokens Sets for Accessibility Needs

Marcelo Paiva - Inclusive Design and Accessibility LeaderAEM Corporation

Streamlining Multi-Platform Product with Design Tokens: Babbel's Journey

Patrycja Radaczyńska - Principal Design System Engineer at Babbel

Ralf Chille - Head of Design System at Babbel

💪🏻 Join us to learn the latest in Design Tokens hands-on

👉🏻 Get your ticket:

Design Library Showcase Generator by Brandon Ward

The plugin allows designers to easily create a comprehensive showcase of their design components and variations, with customizable settings for the appearance of the showcase page.

Component analytics and insights for React by Omlet

Measure production component usage to optimize your codebase and drive design system adoption.

  • Easily get instant usage analytics for your components. Understand how components across projects are adopted over time using ready to use charts.

  • Make improvements to your design system based on real world data and historical trends.

  • Provide tangible and measurable data to help demonstrate the value of your design system.


Into Design Systems Live from Miro in Amsterdam 🇳🇱

Hybrid Meetup by Into Design Systems streamed live from Miro in Amsterdam 🇳🇱

📚 Sessions:

Design Systems at Miro

Eddie Machado - Design Systems at Miro

How to use surveys to define OKRs and measure a design system

Alex Chan-Perryman - Design Systems at Deel

🙌🏻 Miro is hiring - Staff Product Designer (Design Systems)

🎨 Fluent — Free #Figma UIKit by Microsoft

Explore the next evolution of Microsoft’s #DesignSystem with the Fluent 2 Web UI Kit.

🗂️ Includes:

- Components use variables instead of color styles

- Theme switching done using variables

Happy Design System building 🛠️🎨

See you at our conference 🎉
High fives 🙌🏼

Your Design System Friends