Making a Customized Button Icon in Figma — SitePoint | Digital Noch

Iconography is a misplaced artwork. Illustration is tremendous time-consuming, and there’s an abundance of assets on the market already. So it’s not at all times value reinventing the wheel. However we might have a selected artwork type, or the icon framework we’re utilizing could not have the icon we would like, so it’s value diving into how illustration works in Figma just a little bit. On this tutorial, we’ll learn to draw and manipulate vectors in Figma as we create a heart-shaped icon to accompany the button.

Begin by making a 16×16 Body, which would be the bounding field for our icon. Paul Wilshaw explains why it’s greatest to make use of 16×16 in his write-up on icon design.

Our new 16x16 Frame

Subsequent, click on on the + icon subsequent to “Format grid” within the Design panel so as to add a Grid to the Body, click on on the “Format grid settings” icon, after which change the “Dimension” to 1 to make the person sq. pixels clearer. To make sure the icon shows clearly at most sizes and display screen resolutions, the target will likely be to align the icon with the grid strains as a lot as potential.

Our Frame with a Layout grid

Now for the icon itself. Begin by making a Rectangle form and specifying the “W” as 16 and “H” as 10, after which click on on the “Unbiased corners” icon earlier than specifying the nook radii as 0, 5, 5, and 0 in that order (that’s, clockwise ranging from the top-left nook).

Our icon taking shape

Subsequent, duplicate the Layer and alter the “Rotation” to 90.

Duplicating and rotating the icon

After that, snap the Layer to the left fringe of the Body and the opposite Layer to the underside fringe of the Body, after which, with each Layers chosen, click on on the “Union choice” icon within the horizontal toolbar to fuse the Layers right into a single Layer.

Fusing the layers

Change the “Rotation” to 45—and that’s the guts form completed.

Our heart-shaped icon

Earlier than we make the guts form match into the Body, add a Stroke (border) by clicking on the + icon subsequent to “Stroke” within the Design panel, selecting 2 for the “Stroke width”. In a while, this can provide us the chance to make use of outlined icons in addition to crammed icons.

Setting the stroke width

Notice: to show icons at a unique measurement, it’s greatest to scale them somewhat than resize them. The distinction is that the Scale software—underneath the “Transfer instruments” icon within the horizontal toolbar (Ok)—additionally scales sizes resembling Stroke width proportionally, whereas resizing doesn’t have an effect on sizes resembling Stroke width.

Subsequent, right-click on the icon, after which select Flatten (command + E / ctrl + E). We’ll see that, whereas the Rotation is not in impact, the Layer stays how we set it, which implies that we are able to now resize it horizontally and vertically as an alternative of diagonally (which yields an odd impact).

Flattening the icon

After that, click on on the “Constrain proportions” icon within the Design panel, set the biggest dimension (which must be “W”) to 16, click on on the “Constrain proportions” icon as soon as extra (in order that the size are not constrained), around the “H” right down to 14 (in order that the icon solely fills full pixels), drag-snap it into the middle of the Body, after which click on on the icon within the Fill part to take away the Fill.

Our heart icon after the latest changes

When designing icons, we should always attempt to use all obtainable Body area in order that a number of icons might be aligned horizontally or vertically if wanted. Nevertheless, this isn’t at all times possible, so it’s okay to resize icons barely when obligatory. Doing so doesn’t have an effect on Stroke width, so we received’t want to fret about them trying inconsistent. To make sure that an icon scales with a Body once we resize the Body, change the “Left” and “Prime” to “Scale” within the Design panel (within the Constraints part).

Our constraints applied

Lastly, choose the Body after which click on on the “Resize to suit” icon to trim the destructive area, thus resizing the Body.

Selecting the Resize to fit icon

We now have full icon! We will additionally strive our hand at drawing from scratch and/or utilizing shapes and enhancing them. Nevertheless, it does require fairly a little bit of ability and time to study. Icon design itself can be very time-consuming, particularly when there are such a lot of free design assets on the market. Figma has a video tutorial that walks us by means of this, however the Font Superior plugin might be one of the best resolution for implementing icons in the present day.

This text is a brief extract from The Designer’s Information to Figma, obtainable on SitePoint Premium.

Related articles

spot_img

Leave a reply

Please enter your comment!
Please enter your name here