Learn how to create 30,000 icons in Figma like a pro!

Learn how to create 30,000 icons in Figma like a pro!

Table of Contents

  1. Introduction
  2. The Power of Figma for Icon Design
  3. Creating Icon Systems in Figma
  4. Using Boolean Operations for Icon Design
  5. Implementing Components and Reusability
  6. Managing and Organizing Icon Libraries
  7. Using Icons in Figma
  8. Conclusion

Introduction

Welcome back! Whether You're attending in person or joining virtually, we hope you enjoyed your lunch break and had a chance to catch up with friends. If you need any assistance finding your way around, our friendly team in Blue shirts is here to help. In this session, we have Jory and Noah from Font Awesome, sharing their expertise on how they created an impressive collection of 30,000 icons in Figma. They will discuss the benefits of using Figma for icon design, the power of collaboration, and how to create efficient icon systems. Get ready to be inspired and learn a thing or two about icon design!

The Power of Figma for Icon Design

Jory and Noah kick off their talk by introducing themselves. Noah, a fantastic icon designer and illustrator, is known for his obsession with the color yellow. Jory, on the other HAND, brings a creative and thoughtful approach to icon design. Together, they are part of the Font Awesome team, responsible for creating an icon library and toolkit used by over 200 million websites worldwide.

They explain that their goal at Font Awesome is to save time by providing an extensive collection of icons for various use cases. They highlight the importance of using a GRID to ensure consistency and accessibility in icon design. By using key shapes and understanding visual density, designers can Create harmonious and balanced icons. They emphasize the need to embrace constraints in icon design to maintain consistency and save time.

Creating Icon Systems in Figma

To create a large icon library efficiently, Jory and Noah explain the importance of establishing rules, constraints, and design considerations early on. They demonstrate how to use Boolean operations in Figma, specifically the Pathfinder tools, to Interact and manipulate different shapes in icons. They emphasize the benefits of using Boolean groups in Figma, which allow for easy editing and updating of icons.

The speakers stress the value of using components in Figma to simplify the creation of icons. By combining components and Boolean groups, designers can create modular icons that are easily reusable and editable. They explain how this approach saves time in managing and updating icon libraries, especially when implementing variations and new styles.

Using Boolean Operations for Icon Design

Jory and Noah dive deeper into the process of using Boolean operations in icon design. They discuss the use of Pathfinder tools, such as Union, Subtract, Intersect, and Exclude, to create and modify shapes in icons. They demonstrate how to Apply these operations to create intricate icons with multiple shapes and elements. They emphasize the flexibility and efficiency of using Boolean operations in icon design.

The speakers also introduce a fun interactive activity where the audience participates in spotting inconsistencies in icons. This activity highlights the importance of Attention to Detail and maintaining consistency in icon design.

Implementing Components and Reusability

Jory and Noah discuss how they combined components and Boolean groups in Figma to maximize reusability and efficiency in icon design. They explain how grouping elements as components allows for easy swapping and editing of parts within icons. By cascading changes through instances of components, designers can quickly update and modify icons without duplicating efforts.

They introduce the concept of "font awesome reusable tidbits and shapes" (FARTS), which refers to the system they developed for managing and organizing icons. Using file thumbnails, color coding, and flags, they can easily track progress, updates, and changes across their icon library. The speakers emphasize the importance of having a system in place to manage and organize icon design at Scale.

Managing and Organizing Icon Libraries

Continuing on the topic of managing and organizing icon libraries, Jory and Noah discuss the challenges faced when dealing with a large number of icons. They explain how they use file thumbnails, color coding, and flags within Figma to track the status of different icons and categories. This system allows them to stay organized and easily identify icons that need updating or modification.

They also highlight the benefits of using a shared library in Figma to ensure everyone in the team is working with the latest assets. By publishing their icon library as a shared component library, they can easily make updates and changes that are reflected across all their design files.

Using Icons in Figma

In the final section of their talk, Jory and Noah showcase the integration of Font Awesome icons and Figma. They explain how Font Awesome utilizes ligatures, similar to typography ligatures, to represent icons using font characters. The speakers demonstrate how users can easily access and use Font Awesome icons within Figma using the installed Font Awesome 5 font library.

They also introduce an official Font Awesome icon component, which leverages ligatures and Figma's component variant properties. This component allows users to quickly swap out icons, adjust styles, and scale icons within their Figma designs. The speakers showcase the simplicity and power of using icon components in Figma.

Conclusion

In conclusion, Jory and Noah highlight the importance of saving time and creating efficient workflows in icon design. They encourage designers to embrace constraints, leverage Boolean operations and components, and implement effective systems for managing and organizing icon libraries. They emphasize the power of using Figma for icon design and how it can simplify the creation and usage of icons. With the tips and techniques shared, designers can enhance their icon design process and create impactful visual experiences.

Most people like

Find AI tools in Toolify

Join TOOLIFY to find the ai tools

Get started

Sign Up
App rating
4.9
AI Tools
20k+
Trusted Users
5000+
No complicated
No difficulty
Free forever
Browse More Content