Back to Plugins
Variable Fonts

Variable Fonts

<h2>Variable fonts, now in Figma!</h2><p><br></p><p>A plugin to provide basic variable fonts support through&nbsp;<a href="https://github.com/Lorp/samsa" rel="noreferrer noopener nofollow" target="_blank">samsa.js</a>.</p><h2><br></h2><p>This plugin enables you to:</p><ul><li>Render variable fonts&nbsp;as graphics&nbsp;on the Figma canvas</li><li>Preview, create, and edit/update these graphics</li><li>Choose from all the axes in a variable font</li><li>Choose from all the variable fonts available from Google Fonts</li></ul><p><br></p><h2>Usage</h2><p><br></p><p>You should see the Variable Fonts palette appear, similar to the screenshot above.</p><p><br></p><ul><li>Pick one of the dozens of variable fonts available from&nbsp;<a href="https://fonts.google.com/?vfonly=true" rel="noreferrer noopener nofollow" target="_blank">Google Fonts</a>.</li><li>In the Preview section, enter some custom text.</li><li>Set the color and axes values you want.</li><li>Then click the&nbsp;Add&nbsp;button at the top of the Preview section.</li></ul><p><br></p><p>This will add a Vector graphic object to your Figma canvas.</p><p><br></p><p>That result is a normal Figma Vector object that you can do all the normal things you can typically do with such objects.</p><p><br></p><p>It is&nbsp;<strong>NOT</strong>&nbsp;a Text object!</p><p><br></p><p>Do you have a bug, feature request, or improvement? Submit a PR or file an issue here: <a href="https://github.com/Tgemayel/variable-fonts-figma/issues" rel="noreferrer noopener nofollow" target="_blank">https://github.com/Tgemayel/variable-fonts-figma/issues</a></p>

variable fontstypographyopen typefontgoogle fonts

Plugin Preview

Variable Fonts preview

About this plugin

Variable fonts, now in Figma!


A plugin to provide basic variable fonts support through samsa.js.


This plugin enables you to:

  • Render variable fonts as graphics on the Figma canvas
  • Preview, create, and edit/update these graphics
  • Choose from all the axes in a variable font
  • Choose from all the variable fonts available from Google Fonts


Usage


You should see the Variable Fonts palette appear, similar to the screenshot above.


  • Pick one of the dozens of variable fonts available from Google Fonts.
  • In the Preview section, enter some custom text.
  • Set the color and axes values you want.
  • Then click the Add button at the top of the Preview section.


This will add a Vector graphic object to your Figma canvas.


That result is a normal Figma Vector object that you can do all the normal things you can typically do with such objects.


It is NOT a Text object!


Do you have a bug, feature request, or improvement? Submit a PR or file an issue here: https://github.com/Tgemayel/variable-fonts-figma/issues

Plugin Details

Version2
CreatedApril 20, 2021
Last UpdatedMay 26, 2021
Categoryfonts-typography
CreatorToni Gemayel
Stats9087 installs, 193 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:dist/ui.html
  • main:dist/code.js