How to set up fluid typography styles in Figma?

Instead of fixed breakpoints, we can build a system where elements scale fluidly. ✨ Yep, in Figma, too.

Why?

To ensure visual harmony and consistency. Plus, it will streamline collaboration between design and development roles.

These tools and posts can help you implement fluid concepts in your design (systems)👇

Tim Brown
📹 Talk https://vimeo.com/17079380
🔗 Post https://lnkd.in/eMg9qK5H

A modular scale is a sequence of numbers that relate to one another in a meaningful way.
-Tim Brown

Nate Baldwin
Talk at Into Design Systems Community & Conference
📹 Scalable Scales That Scale

Billy Whited - R(a|ela)tional Design
🔗 Read the article

Nathan Ford - Deriving layout from your typeface
🔗 Read the article

Owen Gregory - Composing the New Canon: Music, Harmony, Proportion
🔗 Read the article


Utopia Fluid Responsive Design Calculator for type, space, grid, clamp
🔗 Calculator https://utopia.fyi/
🔗 Figma plugin https://lnkd.in/emKWbYmn

Typescale
https://typescale.com/

Proportio by Nate Baldwin
https://proportio.app/

Fluid Type Scale Calculator
Generate font size variables for a fluid type scale
🔗 Try it out

Modular Scale
🔗 Try it out

Grid lover
🔗 Try it out

Graph Resolver by Tokens Studio
🔗 Try it out

Typescale Figma Plugin
Quickly generate a modular scale for your typography.

🔗 Figma plugin https://lnkd.in/epD9Zjxx
🔗 Website https://typescale.io/