The making of a product icon | Figma Blog (opens in new tab)
Figma product icons are the result of extensive exploration rather than a single inspired sketch. Designer Tim Van Damme combines consistent visual rules with product-specific research, then develops dozens or hundreds of variations before refining the final symbol. The process balances recognizability, scalability, and a distinct identity across Figma’s expanding product suite. ## Building a Consistent Icon System - Figma previously had no formal icon-design system, so Tim created unofficial guidelines to ensure the icons worked as a cohesive family. - Core principles include: - One-pixel-wide strokes - One-pixel-thick cutouts - Rounded caps - Balanced compositions that use the available space - Three standard sizes for different surfaces - Icons must work everywhere from toolbars to large marketing displays and billboards. - Designs are rejected when lines blur or visual elements become indistinguishable at smaller sizes. ## Finding the Product’s Core Idea - Each icon must follow Figma’s broader visual language while representing the identity of its specific product. - Tim collaborates with design and product teams to list concepts, themes, and associations connected to the product. - For Figma Community, ideas such as shared learning, connection, and knowledge exchange inspired experiments with people, trees, and books. - For Figma Buzz, themes including magic, creation, and AI image generation led to explorations involving glass orbs, stars, and bees. ## Exploring Through Extensive Iteration - Tim uses Figma’s variable-width strokes and simultaneous vector-layer editing to speed up experimentation. - He develops large families of related symbols, gradually adjusting shapes, proportions, movement, and composition. - Creative exploration can transform one idea into another—for example, trees into faces, faces into mandalas, or abstract shapes into interlocking forms. - For Figma Make, he explored motion and transformation through wheels, butterflies, compasses, and fidget spinners. - For Figma Buzz, he created hundreds of bee variations, changing wings, antennas, and line treatments before narrowing the options. The practical lesson is that effective product icons emerge from a structured but highly exploratory process: establish shared rules, identify the product’s essential meaning, and iterate freely until the symbol is both distinctive and immediately legible.
