UI/UX Development Basics with Figma 04: Building an Icon Set

Icons are more than just decorative elements; they're visual cues that help users navigate and understand an interface intuitively. Consistency in icon design ensures a cohesive and harmonious user experience.

UI/UX Development Basics with Figma 04: Building an Icon Set

Today, we're diving into the art of icon design. Icons are the small details that make a big impact in UI/UX.

The Power of Icons in UI/UX Icons are more than just decorative elements; they're visual cues that help users navigate and understand an interface intuitively. Consistency in icon design ensures a cohesive and harmonious user experience.

"What Makes a Good Icon" - UI/UX Perspectives

Before you dive into creating your icon set, let's talk about what makes an icon effective in UI/UX design:

  1. Clarity and Recognizability: A good icon conveys its meaning clearly and quickly. It should be instantly recognizable and unambiguous. Think about universally understood symbols like a magnifying glass for search or a house for home.
  2. Simplicity: Icons should be simple enough to be understood at a glance. Overly complex icons can confuse users, especially when viewed at smaller sizes. The best icons are those that distill an idea into its most basic visual elements.
  3. Consistency: This is key in icon design. All icons in a set should have a consistent style, line weight, and level of detail. This consistency ensures that the icons not only look cohesive but also function cohesively within your design.
  4. Versatility: Icons should be versatile in size and application. They need to be legible and effective at various sizes and in different contexts, from small mobile screens to large desktop displays.
  5. Alignment with Design Language: Icons should align with the overall design language and aesthetic of the product. Whether your style is flat, skeuomorphic, or something else, your icons should feel like they belong within that design ecosystem.
  6. Appropriate Use of Colors and Contrast: While some icons are purely monochromatic, others might use color. If using color, ensure it has sufficient contrast and complements the overall color scheme of your UI. Also, consider how the icons look in different color modes, like light and dark mode.

Remember, icons are more than just pretty graphics; they're functional elements that play a crucial role in navigation and user interaction. Keep these principles in mind as you craft your icon set.

Today’s Mission: Create Your Own Icon Set in Figma We’ll be focusing on creating a set of icons that look and feel part of the same family.

Vector Graphics: A Definition

In the world of digital design, vector graphics play a crucial role. Unlike raster images, which are made up of pixels, vector graphics are composed of paths defined by mathematical formulas. These paths consist of points, lines, curves, and shapes that are based on geometric formulas.

Key Characteristics of Vector Graphics:

  1. Scalability: One of the most significant advantages of vector graphics is their scalability. You can enlarge or reduce a vector graphic to any size without losing quality. This is because the paths recalibrate their proportions based on mathematical equations, ensuring the image remains crisp and clear regardless of size.
  2. Editability: Vector graphics are highly editable. Each element (like a line, shape, or curve) can be individually manipulated. This allows for precise adjustments and modifications, making vector graphics a favorite among designers for creating logos, icons, and complex illustrations.
  3. File Size: Generally, vector files are smaller than raster images. This is because they contain less data (mathematical formulas) compared to raster images, which need to store information about each pixel.
  4. Ideal Uses: Vector graphics are ideal for designs that require crisp lines and shapes that might need to be resized frequently, such as logos, icons, typography, and user interface elements.
  5. Tools and Formats: Common vector file formats include SVG (Scalable Vector Graphics), AI (Adobe Illustrator), and EPS (Encapsulated PostScript). Tools like Adobe Illustrator and Figma use vector graphics for design flexibility.

In essence, vector graphics provide a versatile and efficient way to create clean, scalable, and editable designs, making them an essential tool in any designer’s toolkit.

Step 1: Getting Started with Vector Tools

Open Figma and create a new file. We're about to get creative with vectors!

Familiarize yourself with the vector tools – the 'Pen' tool for custom shapes, the 'Shape' tools for basic forms.

These are the vector tools in Figma. The Pen tool is the most challenging! Try it out!

Step 2: Sketching Your Icons

Decide on a theme for your icon set. It could be related to food, technology, travel, etc.

Start sketching out basic shapes that represent your theme. Keep simplicity in mind. You should use paper and pencil for this. Come up with as many ideas as you can. Don't attempt to perfect each sketch. Once you have the general idea move on.

Select three to five of your best icons and create them in Figma.

These are all vector icons and can be stretched to any size without degradation.

UI/UX Tip: Remember, icons should be easily recognizable and convey a clear message.

Step 3: Consistency is Key

Ensure your icons have a consistent style – this includes similar line weights, geometric forms, and a unified color palette.

You can use Figma's alignment tools, which appear at the top of the properties palette when you have more than one design element selected to align your elements correctly.

Step 4: Using Alignment and Distribution Tools

Use Figma’s alignment and distribution tools to ensure your icons are evenly spaced and aligned. This adds to the professional look of your set.

Think about the size of your icons. They should be scalable and look good at various sizes.

Note how the guidelines ensure consistency between the icons, making them feel like a cohesive set.

You can use Guidelines to measure alignment between the icons. Turn on the rulers with Shift-R and then drag out of the top ruler downward to create a Guide.

Step 5: Refining Your Design

Once you have the basic shapes down, refine your designs. Add details carefully – too much can clutter an icon, too little can make it unclear. Experiment with different styles – filled, outlined, or a combination.

You should also clean up your layers palette and group individual graphic elements that belong together. (You can group using Command/Control-G on your keyboard.). Try to create an object hierarchy that would make sense to another designer working on your file.

Notice the hierarchy of objects in the Hotel Icon. The bed object is embedded in the Hotel Icon object.

Step 6: Share Your Creations

Proud of your icon set? Share it on our ​SkillSprints Slack channel​. We can’t wait to see your creativity in action!

Encountered a Challenge? If you have any questions or need a bit of guidance, our Slack community is here to help.

Your Takeaway Today, you’ve learned the subtleties of icon design – a skill that adds polish and professionalism to any UI/UX project.

Final Thought Amazing progress! Icons might seem small, but they play a big role in user experience. Tomorrow, we'll explore prototyping – an exciting step where your designs come to life!