Icons in Figma — Best Practice
Icons Sets by Studio Refine
Creating icons in Figma can be tricky, following a few steps will let you leverage Figma’s ability to manage and scale your design icons.
It’s all about consistency
In order to get the most out of Figma’s ability all of your icons should be set by the same layer structure and naming convention.
Layer Structure
Icon symbols in Figma should be set with a consistent structure of layers.
The layers structure throughout your Icon symbols should follow this structure — Icon Frame, Shape for the icon shape, and Bounding Box.
Icon Frame
This one wraps our icon’s inner layers (Shape & Bounding Box).
Icon frame properties need to be set as follows:
Name:
It is recommended to give it a descriptive name that also includes the base size of the frame.
Size:
Set a 1/1 ratio size to your icon — In the old days 16 X 16 px was a good starting point, but as screen resolution ability increased, today 24 x 24 px is also used — as long as you are consistent with the size you chose through all of your design you will be good.
Constrain Proportions:
In order to prevent your icon from being distorted we must set the constrained proportions on.
Constraints:
The last setting will let us scale the icon if we need to.
go to the “Constraints” panel and set both direction dropdowns to “Scale”.
Shape Layer
Containing the icon shape — we can name it whatever we want as long as we are consistent with the naming convention in all our designs (In my example I used shape).
Shape Layer properties need to be set as follows:
Size: Shape layer size must be feet within the frame we just set — mining if the frame we created is 16 x 16 px, max-width can be 16px and max-height can be 16px — do not distort the icon shape, make sure you constrained proportions as we did in the previous stage before you scale it down or up.
Flatten layer: The shape layer must be flattened (Cmd & E / Ctl & E) and any stroke should be converted to outline (Cmd & Shift & O / Ctrl & Shif & O).
or right-click the layer and choose those options.
Color: set the shape layer with a basic color — a color from the dark gray spectrum will be a good choice — I am using #555555.
make sure to keep this color in your libraries as a variant or as a style — so if needed you will be able to edit it a cross-app with just one edit point.
Remember to be consistent and use this color for all your icon shape layers.
Constrain proportions: in order to prevent your icon from being distorted we must set the constrained proportions — as we did on the icon frame.
Constraints: the last setting we do will let us scale the icon if we need to.
go to the “Constraints” panel and set both direction dropdowns to “Scale”.
Bounding Box Layer
This layer acts as the “stage” on which the icon shape sits.
It creates the 1/1 ratio icon symbol even if your icon shape does not have a 1/1 ratio.
Be sure to center the “Shape” layer to the “Bounding Box” layer, so the icon will stay centered.
Bounding Box Layer properties need to be set as follows:
Color: none.
Constrain proportions: in order to prevent your icon from being distorted we must set the constrained proportions — as we did on the shape layer.
Constraints: same as in the shape layer, let’s go to the “Constraints” panel and set both direction dropdowns to “Scale”.
Last Stage — Creating Component for the icon:
Right-click (Opt&Cmd&K) the icon wrapping frame — in our example,
it is the frame named “Icons-Smile_(16x16)”,
this will convert the icon you just created into a component.
This component can easily be used across your designs and also be swapped inside another component without losing any override (changes in color, size, etc…)setting you made on that specific instance of the component.
See it in action:
Link:
Link to the icon file structure as described above.
https://www.figma.com/community/file/1304758500113988376/figma-icons-bestpractice-template
It’s a wrap! 🙏🏽