{"id":16692,"date":"2023-07-20T08:57:42","date_gmt":"2023-07-19T23:57:42","guid":{"rendered":"https:\/\/designcompass.org\/?p=16692"},"modified":"2023-07-20T08:58:50","modified_gmt":"2023-07-19T23:58:50","slug":"figma-variable-fonts","status":"publish","type":"post","link":"https:\/\/designcompass.org\/en\/2023\/07\/20\/figma-variable-fonts\/","title":{"rendered":"Figma Variable Fonts: Handling fonts to your liking"},"content":{"rendered":"

Figma has released a website where you can try out the new Variable fonts.<\/p>\n\n\n\n

Variable fonts are next-generation font formats that can be freely changed in width, weight, and slant in a single file. It was developed in collaboration with Adobe, Apple, Google, and Microsoft and was announced in 2016.<\/p>\n\n\n\n

\"\"
\u00a9Figma<\/figcaption><\/figure>\n\n\n\n
\"\"
\u00a9Figma<\/figcaption><\/figure>\n\n\n\n
\"\"
\u00a9Figma<\/figcaption><\/figure>\n\n\n\n
<\/div>\n\n\n\n

\ud83d\udc41\ufe0f Designer Eye<\/h3>\n\n\n\n

The first interaction on hover is captivating. It responds when you move the mouse cursor over the cute illustration and move it left and right. Various axes that affect font properties are intuitively expressed.<\/p>\n\n\n\n

Variable fonts are explained intuitively so that you can understand them right away. You can specify and use the properties of various typefaces with one font file. There is no need to use separate font files for weights such as Thin, Regular, and Black, or styles such as Italic and Condensed. It's like using a freehand svg file instead of using multiple png images.<\/p>\n\n\n\n

Fine details are directly linked to usability and aesthetics. You can use an appropriate font depending on the size and volume of your text. As the font size decreases, the font looks thicker. You can set the appropriate thickness according to the size. When designing a button, changing the font properties can change the size of the layer, but only the thickness can be changed while the size is fixed. You can also narrow the width to fit more characters into a small space. The time axis can be set, and animation can also be added.<\/p>\n\n\n\n

\"\"
\u00a9Figma<\/figcaption><\/figure>\n\n\n\n
\"\"
\u00a9Figma<\/figcaption><\/figure>\n\n\n\n
\"\"
\u00a9Figma<\/figcaption><\/figure>\n\n\n\n
<\/div>\n\n\n\n

\ud83d\udcd5 Editor's Notes<\/h3>\n\n\n\n

The way the service introduces new features is cool. It is intuitive to explain concepts in an easy-to-understand manner with pigmlike graphics and to let you try them out yourself. You can get them to try out the figma tool right away, but it's not easy to focus on just the features you'll be looking at. It is attractive to compress only what you want to say and share it as an attractive website.<\/p>\n\n\n\n

There are also files that you can play with, so be sure to handle them!<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

More and Sources<\/h2>\n\n\n\n