Into Design Systems Resources — Typography variables & more

Intodesignsystems
3 min readJun 12, 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 🙌🏻

🚦Frame Status Figma Plugin

Frame Status Figma Plugin

👉🏻 Track progress through statuses on your page. Choose from standard statuses or create your own unique one. Monitor who and when changed status states.

Plugin by Polina Vasilyeva & Sergey Novakovskii

🔗 Link: https://www.figma.com/community/plugin/1355869245746758544/frame-status

🪄 Plugin: Convert typography styles to variables in Figma

Plugin: Convert typography styles to variables in Figma

💡This plugin reads your existing styles and creates newly launched variables for typography.

👉🏻 Create variables for font family, font weight, font size, line height, paragraph spacing, letter spacing and paragraph indent.

Plugin by Mohit Yadav and figr.design

🔗 Link: https://www.figma.com/community/plugin/1363909945228814916/set-up-text-variables-instantly-figr-lazy-text

🎨 Figma Plugin: OKLCH Color Variations

Figma Plugin: OKLCH Color Variations

Use this Plugin to generate Color Palettes with Variations in the OKLCH Color Space. The shades can vary across Lightness, Chroma, Hue.

The ability to control these individual parameters makes it perfect for building palettes to be used in interface design, because you can use the shades that vary in these parameters to establish hierarchy, contrast, attention, etc

Why OKLCH over HSL?

Even HSL allows you to think of colors as these individual parameters, but HSL is not perfect. Different Hues with same Luminescence, and Saturation values can produce colors with different contrast levels (for example, yellow and blue).This makes it hard to consistently produce accessible color palettes for Interface Design.

OKLCH color space solves this because it’s modelled to be close to human perception of color.

Plugin by Abhishek Y

🔗 Link: https://www.figma.com/community/plugin/1261721955648857186/oklch-color-variations

🎨 Modular® — Design System and Templates

Modular® — Design System and Templates

A powerful, scalable design system with customizable UI components, accessibility focus, and a sleek, simple interface.

Creator: Unknown Digital Collective

🔗 Link: https://www.figma.com/community/file/1371408054561346134/modular-design-system-and-templates

📚 Design Tokens Crash Course

What are #DesignTokens? Do you feel overwhelmed about where to even start? Do you spend a lot of time trying to find the right approach or names? 🤯

🆘 Here is a guide:

Guide by Samantha Gordashko

Want to learn more? Get the full course, which includes 17 sessions and practical case studies where top experts teach you all about #DesignSystems 👉🏻 https://www.intodesignsystems.com

Happy Design System building 🛠️🎨

Hope to see you at one of our next events

Enjoy your day ☀️

Your Design System Friends

--

--

Intodesignsystems

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