Into Design Systems Resources - Typography variables & more

Jun 12, 2024

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

👉🏻 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

💡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

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

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