Figma for Edu workshop: Making vector icons in Figma
Summary
Vector graphics mastery in Figma is a differentiator skill that AI can't replicate—controlling fine details and creating distinctive icon systems is what sets professional designers apart from stock visual users. Learn pen tool techniques and Bézier curve manipulation to build scalable, polished UI components that work across development workflows.
Key Takeaways
- Use the pen tool (shortcut P) with node-based point clicking to create vector shapes, then manipulate Bézier handles by holding Command/Control to toggle between curved and sharp angles—this precision control is what AI-generated visuals lack.
- Study existing icon libraries (Material Design, SF Symbols, Apple's SF Pro) to learn design patterns, but eventually build proprietary icon sets that visually communicate your app's language and create affordances for user navigation.
- Vector graphics in Figma scale infinitely across mediums because they're math-based (X and Y coordinates)—every point has editable properties visible in the right panel, making responsive UI design possible without quality loss.
- Delete extraneous points in vector paths using Shift+Delete instead of Delete alone—this removes the point without losing surrounding geometry, enabling cleaner icon refinement during the polish phase.
- Treat design files as reusable context for AI development workflows—export vector graphics from Figma Design and use them as prompts for AI agents and development assistants to maintain design intent through implementation.
Related topics
Transcript Excerpt
Welcome to the Figma for EDU monthly workshop. My name is Miggi. I'm a designer advocate for education here at Figma, and today we're gonna be talking about making vector icons in Figma. We're gonna begin by answering the question, what are vectors? Vectors are infinitely large, infinitely small… Not infinitely small. I guess that would be impossible, but they are math-based graphics that use points and curves to articulate and visualize that math, so then that way it can scale across mediums. So when you're thinking about user interface design, we're looking at this design here in Figma. If I increase the scale of my design By increasing the scale of my design I'm increasing, the visuals here, figma is inherently vector, the lines that you see, the text that you see. This way the interfac…