Dynamic Fonts in Figma
Responsive design is among the most valuable things in UI and UX design. It can be impactful for cross-platform products to improve user experience. Despite being useful, It isn’t effortless, as well as being time-consuming. In this article, we will introduce a new concept for improving the responsive design in Figma.
What’s the problem?
Most of us, as designers and developers, struggled with responsive fonts in Figma. We spend plenty of time on responsive fonts there. And now, imagine what happens if you have more than three breakpoints for each artboard. That's when Dynamic Fonts will come in handy.
How do we collect data?
We found many designers spending much time in Figma for responsive fonts in various breakpoints. Therefore, we decided to test with some of our friends.
Based on our data, each artboard takes 6 to 20 minutes to convert fonts from desktop to mobile breakpoints.
Here are some of our data with the same artboard:
Our solution:
We designed a new approach for this feature. We called this feature Dynamic Font with the DF abbreviation.
Here is the magic!
Let’s introduce Dynamic Font without hesitation. Dynamic Font is a new feature we designed for Figma, in which designers can make their fonts more vibrant with a few clicks.
We will show you how to activate and use the DF in Figma. Even though this feature is still in its infancy and not yet available in Figma.
Generally, DF will be set on your Figma document and your artboards to have more control over your font sizes.
From idea to implement:
We started with gathering data and drawing some rectangles. We sketched over 30 designs and ideated many ways to implement the best one. We looked at this concept from various aspects through this process.
How does it work?
The Dynamic Font feature in Figma allows for faster and easier responsive font creation. Designers and developers can more efficiently use responsive fonts with this feature.
Follow these three steps below to come across more with this feature:
1) Set a Parent font size for the Figma document
Designers can set a base font for their Figma file, Although it’ll affect all the fonts which use the Dynamic Font feature. We named this part Dynamic Font - Parrent font style.
2) DF unit instead of PX
DF is an abbreviation of Dynamic Font, a new dynamic unit for fonts in Figma.
From now on, Designers should use DF instead of Px if they want to use dynamic Font for their designs. Despite DF, you can use PX if you don’t want to affect some of your fonts dynamically.
3) Change the artboard base font
The magic is here!
Now, you can change your artboard base Font for each breakpoint, and Dynamic Font will change all your fonts immediately to what you set.
Does your design system and font style concern you?
We have a solution for your design system and font styles even. With Dynamic Font, you don’t need to create multiple font styles for your breakpoints in the Figma file.
You must create a DF base font style for your font styles and design system instead of using PX.
Before using Dynamic Fonts:
After using Dynamic Fonts:
