Prepare for Figma Text Variables: Start Building Your Type Scales Correctly
29.9K views · 2024-01-15
UI Design
Figma text variables are estimated to be on their way this year. So, in this lesson, unlock the secrets to perfect typography scales/typography styles for your design system in Figma, so you can build the perfect text variables when released! 🎨
*Please note that line height can also follow the 4px grid, and the lo-fi mockup illustrating the combination of display and H tags is just for illustration purposes.
Build a community profile + join the community: https://www.uicollective.co/
NEW - Purchase our official design system: https://collectivekit.co/
We build design systems: https://designsystemlabs.co/
Resources: https://uicollective.co/designer-tools-and-resources
Our Figma Plugin: https://www.figma.com/community/plugin/1301974711562028600/design-system-tracker
0:00 An Introduction
0:24 Types of Text Sizes
2:43 What Text Sizes are Accessible?
4:35 Using TypeScales
7:10 Building a Type Scale
#figma #uxdesign #uidesign
*Please note that line height can also follow the 4px grid, and the lo-fi mockup illustrating the combination of display and H tags is just for illustration purposes.
Build a community profile + join the community: https://www.uicollective.co/
NEW - Purchase our official design system: https://collectivekit.co/
We build design systems: https://designsystemlabs.co/
Resources: https://uicollective.co/designer-tools-and-resources
Our Figma Plugin: https://www.figma.com/community/plugin/1301974711562028600/design-system-tracker
0:00 An Introduction
0:24 Types of Text Sizes
2:43 What Text Sizes are Accessible?
4:35 Using TypeScales
7:10 Building a Type Scale
#figma #uxdesign #uidesign