6 key reasons for using UIcons with Figma
Creating wireframes and prototypes is fun and convenient with Figma. But nobody likes having to exit Figma to search for icons on another platform. This new academic year, learn how to use Flaticon UIcons to design better interfaces.
Whether a high-fidelity or medium-fidelity design or a prototype with visual features of the customer’s brand, icons have a key role. If you use Figma to create drafts of websites and apps, you know how important it is to have the right tools available.
The Flaticon UIcons library is the solution. The UIcon icons comply with the Pixel Perfect quality standard, meaning that all their lines and shapes adapt to 1-pixel increases and fit perfectly within the grid. This way, you can ensure that your UI design has the maximum quality and can be viewed correctly.
Below, we’ll share 6 key reasons to start using the UIcons library with Figma. Get it here in the Figma community and see for yourself.
1. UIcons are optimized for UI designs
When using icons in a UI design, it’s important to consider the file size, the quality and the right color. UIcons were designed with one goal: to make the job of a UI designer as quick, effective and creative as possible.
All the icons in the Figma collection are vector files, optimized as web fonts, Pixel Perfect, and SVG format.
2. They help in the transition from low-fidelity wireframe to the prototype
Each UIcon has several styles, and the simplest is ideal for medium-fidelity wireframes. Then, as the project progresses in detail and functionality, the UIcons can be adapted to the final style. Brand colors can be added easily without having to exit Figma.
3. It’s easier to maintain a visual style
Maintaining a consistent visual design is easier when you have all the options at your fingertips. Select one of the styles and choose the icons within that collection. They will all have the same visual characteristics, facilitating your designs. When you have finalized the definitive style of an icon or group, create global components for the style library. A global component maintains the visual style of your icon each time you add it to the design; they are the basic components of a design system.
4. You’ll find the icons you need without exiting Figma
You won’t need to search for icons on the Internet, as Flaticon’s collection of UIcons in your Figma account has everything you need. With over 3,000 icons in the collection, you’ll soon find what you’re looking for. Keep the collection on a page of your project to access them easily.
5. It’s easy to create style libraries in line with your projects
If you’re anything like us, you use Figma for most of your UI design projects. Not all projects are the same; therefore, they won’t all use the same styles and icons. From the Flaticon UIcons community file, you’ll be able to copy the icons you need and create your own style library with them.
6. You’ll make life easier for programmers
Each UIcon from the community file comes with the corresponding CSS ID. All the programmer has to do in the final design is add the CSS prefixes in the stylesheet. When they receive your designs in Figma, the prefixes of each icon will appear in the name and inspection panel. You won’t have to add any further descriptions or instructions.
Start using Flaticon UIcons in your Figma account
Are you interested in trying out Flaticon UIcons in your Figma project? Great! Here are the steps to follow. You’ll be designing better and more productively in just a few minutes.
- Make a copy of our collection of icons from the Figma community.
- Choose a style and start collecting the icons you need.
- Create an icon library in a frame or page within your project.
- Use them however you want, in components or groups.
Once you’ve tried UIcons in Figma, share your experience on social media, or leave a comment in the community file. Your opinion is important to us, and we want to continue to improve to help you in your design jobs.