This article is a short extract from The Designer’s Guide to Figma, available on SitePoint Premium. Figma has a video tutorial that walks us through this, but the Font Awesome plugin is probably the best solution for implementing icons today. Icon design itself is also very time-consuming, especially when there are so many free design resources out there. However, it does require quite a bit of skill and time to learn. 411 premium vector icons ready to use for your next UX design project. Includes 372 brand and social media icons. Up to date with the Font Awesome 5.1.0 release. 1,264 free and premium vector icons ready to use for your next UX design project. We now have complete icon! We can also try our hand at drawing from scratch and/or using shapes and editing them. Font Awesome 5 icon component library for Figma. To ensure that an icon scales with a Frame when we resize the Frame, change the “Left” and “Top” to “Scale” in the Design panel (in the Constraints section).įinally, select the Frame and then click on the “Resize to fit” icon to trim the negative space, thus resizing the Frame. Doing so doesn’t affect Stroke width, so we won’t need to worry about them looking inconsistent. However, this isn’t always feasible, so it’s okay to resize icons slightly when necessary. However your app allows you, create a new layer or text block to insert text into. When designing icons, we should try to use all available Frame space so that multiple icons can be aligned horizontally or vertically if needed. 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. We’ll see that, while the Rotation is no longer in effect, the Layer remains how we set it, which means that we can now resize it horizontally and vertically instead of diagonally (which yields an odd effect).Īfter that, click on the “Constrain proportions” icon in the Design panel, set the largest dimension (which should be “W”) to 16, click on the “Constrain proportions” icon once more (so that the dimensions are no longer constrained), round the “H” down to 14 (so that the icon only fills full pixels), drag-snap it into the center of the Frame, and then click on the - icon in the Fill section to remove the Fill. Next, right-click on the icon, and then choose Flatten ( command + E / ctrl + E). Plugin allows you to filter the list of icons by name. The plugin provides access to the entire free icon collection. The difference is that the Scale tool-under the “Move tools” icon in the horizontal toolbar ( K)-also scales sizes such as Stroke width proportionally, whereas resizing doesn’t affect sizes such as Stroke width. Start using icons in Figma today with a free Font Awesome account Plus youll get access to all kinds of other goodies like Kits, the easiest way to use icons on the web. This is the unofficial plugin for the Font Awesome Icon Collection. Note: to display icons at a different size, it’s best to scale them rather than resize them.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |