![]() ![]() By default, Figma supports Font Awesome explains the Figma team. Sure, using the icons via the official FontAwesome component represents its own drawbacks, but it allows for easy management of sizes, weights, colors, naming, and still allows developers to make a custom svg spritesheet out of the icons actually used in the designs. If you use the Figma desktop app predominately, then there’s an awesome solution for you. ![]() also, it might require ajusting bouding boxes etc since all icons aren’t of the same exterior size, while as a font character it is aligned properly in the character bounding box. However your app allows you, create a new layer or text block to insert text into. Importing all this as individual vector layers will decouple each icon from its similar icons of different weight, and from its name that’s findable on the fontawesome website. After completing the steps in set up, open a new or existing document in the Desktop app you want to use Font Awesome icons in.Well use a new document in Figma (opens new window) for the walkthrough below. So my question is, how do more senior designers feel about this versus the import method ?Īs a junior, my concerns are that in the case of FontAwesome we use for example, it is 16000 icons, that are actually about 4000 unique icons available in 4 weights. Select all and use this plugin to scale all of the icons down to a 16px. This will import all of the svgs as separate frames into Figma. With a new Figma window open, select your desired SVGs (in a chosen style) in the downloaded folder and drag/drop them onto the Figma window. And then, for hand-off, the same FontAwesome provider has an easy tool to generate custom SVG sprites based on what icons are used overall in the project. Download the For Desktop Use files from Font Awesome. However, one of the more “traditional” or long standing icon providers, FontAwesome, provides the option to use a simpler component that uses an underlying OS or Figma hosted font to speficy which icon should be displayed (and a custom component can even be made to use Figma styles to simplify it). ![]() The general consensus for best practice, as well as what I see in most pro UI kits for sale, seems to be importing a huge set of icons as SVG individually in the Figma design system files, and creating one component out of each icon with a vector layer only, and building components using icons based on that. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |