Into Design Systems Resources — Figma Variables Plugins & more

Intodesignsystems
4 min readApr 30, 2024

--

Into Design Systems Resources

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 at our conference! 🚀

Cheers,

Your Design System Friends

Component analytics and insights for React by Omlet

Component Analytics 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.

Omlet

Bazzle: Color Palette & Variable Builder by Mohamed Fawzy

Color Palette & Variable Builder

🪄 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

Variablize Text Styles

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

Master Design Tokens at Into Design Systems Conference

🌟 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 — thedesignsystem.guide

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: https://www.intodesignsystems.com/design-tokens

Design Library Showcase Generator by Brandon Ward

Design Library Showcase Generator Figma

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.

🎨 Fluent — Free #Figma UIKit by Microsoft

Fluent Design System Kit

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

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)

Into Design Systems at Miro Amsterdam

Happy Design System building 🛠️🎨

See you at our conference
High fives 🙌🏼

Your Design System Friends

--

--

Intodesignsystems

🚀 We’ve Helped Thousands Become Better Design System Experts 👉🏻 Join our expert network: https://www.intodesignsystems.com