{"id":671,"date":"2024-02-24T16:10:01","date_gmt":"2024-02-24T16:10:01","guid":{"rendered":"https:\/\/amyoukey.com\/blog\/?p=671"},"modified":"2024-02-24T16:10:03","modified_gmt":"2024-02-24T16:10:03","slug":"15-minute-tutorial-building-icons-using-google-material-design-icons-and-a-figma-design-system","status":"publish","type":"post","link":"https:\/\/amyoukey.com\/blog\/15-minute-tutorial-building-icons-using-google-material-design-icons-and-a-figma-design-system\/","title":{"rendered":"15 Minute Tutorial \u2013 Building Icons Using Google Material Design Icons and a Figma Design System"},"content":{"rendered":"\n
Welcome to my quick and informative 15-minute tutorial series. This series of articles will teach you the process of building effective and visually appealing styles and components in Figma using a prebuilt design system. In no time, you’ll gain hands-on experience in leveraging Figma’s powerful features to streamline your design workflow, while expanding your knowledge of design systems. For this series, I’ll be using the Figma design system that was built at my current job, but you can use any number of Figma design systems<\/a> to build your components.<\/h5>\n\n\n\n
These tutorials assume you have basic knowledge of Figma. This step-by-step guide will walk you through building icons.<\/h5>\n\n\n\n

 <\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

 <\/p>\n\n\n\n

Step 1<\/h3>\n\n\n\n

If you or your team aren’t planning on creating your own bespoke icons, you can choose icons from a number of different icon sets in the Figma Plugins panel. We chose to use the Google Material Design Icons plugin, which is free to use and has 7000+ icons to choose from. To access these or other icons sets, select the Plugins button in the menu and search for icons. <\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

 <\/p>\n\n\n\n

Step 2<\/h3>\n\n\n\n

For this tutorial, I chose the close (X) icon. All you have to do is click the icon in the Google Material icons panel and it puts it on your canvas.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

 <\/p>\n\n\n\n

Step 3<\/h3>\n\n\n\n

Next, choose what color you want your icon to be. Either select the color from the color swatch, or if your design system has styles or variables, choose one using the “Styles and variables” button in the Fill panel. <\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

 <\/p>\n\n\n\n

We use a Figma variable called “action-color” for most of our icons.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

 <\/p>\n\n\n\n

Step 4<\/h3>\n\n\n\n

Set the width and height to your desired sizes and set the Constraints to Scale horizontally and vertically.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

 <\/p>\n\n\n\n

Step 5<\/h3>\n\n\n\n

Since some of our icons are less than 16px wide or tall, I wrap them in an Auto layout frame that is 16 x 16 pixels, and center the icon in the frame. That way, the icons stay centered and align correctly in buttons and other components you might use icons in.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

 <\/p>\n\n\n\n

Step 6<\/h3>\n\n\n\n

I then make it a component and name it. It’s easier to find icons if you name them properly. I’ve named all of our icons beginning with “Icons\/”. This puts them in a folder called “Icons” in the Assets panel and makes it easy to find when your’e swapping instances.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

 <\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

The Swap Instance panel<\/p>\n\n\n\n

 <\/p>\n\n\n\n

Step 7<\/h3>\n\n\n\n

I took the extra step of organizing our icons on the Icons page in Figma by wrapping the icon and the name of the icon in an Auto layout frame.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

 <\/p>\n\n\n\n

Step 8<\/h3>\n\n\n\n

Then wrapping those frames in another Auto layout frame. This also makes it easy to add or remove icons as you need to.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

Done!<\/h3>\n\n\n\n

Here you see some of the icons I and the team created, some of which have variants (in the right-hand ACTION column), which I’ll cover in another tutorial.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

Happy creating, and stay tuned – more tutorials are coming soon!<\/p>\n\n\n\n

 <\/p>\n

\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722\u2722<\/p>\n

Comment below to share your thoughts. \ud83d\ude42<\/p>\n

Learn more about design systems<\/a><\/p>\n

I’m a designer with 20 years of experience in web, eLearning and visual design. Follow me:<\/p>\n\n\"Anne<\/a>\n\"Anne<\/a>\n\"Anne<\/a>\n\"Anne<\/a>\n\"Anne<\/a>\n\"Anne<\/a>\n","protected":false},"excerpt":{"rendered":"

Welcome to my quick and informative 15-minute tutorial series. This series of articles will teach you the process of building effective and visually appealing styles and components in Figma using a prebuilt design system. In no time, you’ll gain hands-on experience in leveraging Figma’s powerful features to streamline your design workflow, while expanding your knowledge […]<\/p>\n","protected":false},"author":1,"featured_media":691,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21,28],"tags":[],"class_list":["post-671","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-system-fundamentals","category-figma"],"_links":{"self":[{"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/posts\/671","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/comments?post=671"}],"version-history":[{"count":1,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/posts\/671\/revisions"}],"predecessor-version":[{"id":692,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/posts\/671\/revisions\/692"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/media\/691"}],"wp:attachment":[{"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/media?parent=671"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/categories?post=671"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/amyoukey.com\/blog\/wp-json\/wp\/v2\/tags?post=671"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}