Variable Fonts

Variable fonts has just been added to Figma! Let's introduce ourselves to it:

OK, so this isn't a wireframe or design system but we think it's important that this free Figma template gets included here on FFT as it's an beautiful resource that lets you trying something new, the 'new' we're talking about right now is variable fonts. In future we can forsee that variable fonts are going to be extremely popular, especially so for modern and large scale design systems as they provide for so much flexibility.

First things first, what is a variable font? Well basically it's a font that you can scale up the font weight from incredibly thin to incredibly thick using a slider, based on it's settings you can also variably adjust heights and widths too, this is a replacement for most fonts which usually only allow you to choose from: thin/regular/bold.  It provides for a lot more nuance in your font design and it also means you can play around with fonts in more visually interesting ways, such as having the font fatten up every time you open Uber Eats or it could get thinner every time you select your diet app. So many possibilities.

To use variable fonts, click on the font, then in the weighting box scroll down and click 'variable font axes...' as shown below. Then you can start adjusting the fonts using the sliders.

‍