Vector Icons in Framer

Key Concepts

Vector editing, icon design, Framer, vector sets, variables, animations, importing icons, stroke animation, fill animation, UI design, component design.

I. Introduction to Framer's Vector Updates

• Framer has released major updates to its vector workflow, aiming to reduce the need to switch to tools like Figma.
• The update includes improvements to importing, designing, and animating vectors directly within Framer.

II. Inserting Icons from Existing Libraries

• Browsing Icon Libraries: Framer now offers a visual browsing experience for icon libraries like Material, improving upon the previous dropdown/search-based system.
  • Example: Using the Material icon library to insert a chevron icon into a feature dropdown.
  • The ability to visually browse icons is a significant improvement over previous methods.
• Icon Properties: Different icon sets (e.g., Phosphor) offer varying properties like width (stroke width) and alpha (fill).
  • Example: Adjusting the stroke width and alpha of a Phosphor icon directly within Framer.
• Plugin vs. Direct Insertion: Inserting icons via plugins provides the actual vector for full editing control, while direct insertion might offer limited control.
  • Example: Inserting an arrow icon from the Phosphor plugin allows for complete vector manipulation.

III. Animating Icons

• Simple Hover Animations: Demonstrates creating a basic hover animation by shifting an icon within its container.
  • Example: Animating an arrow icon within a button to slide on hover.
  • The icon container uses overflow: hidden to crop the icon during the animation.

IV. Custom Icons and Vector Sets

• Importing Icons: Icons designed in other software (e.g., Figma, Illustrator) can be imported into Framer as SVG files.
  • Example: Pasting two icons exported from Figma into Framer, which automatically creates a vector set.
• Vector Editing Tools: Framer provides basic vector editing tools, including pathfinder operations (join, exclude, intersect, subtract, unite) and a pen tool.
  • The pen tool offers suggestions and snapping to grid markers for precise drawing.
• Variables for Icon Styling: Demonstrates creating and applying variables for icon colors, allowing for centralized style management.
  • Example: Creating a "fill" variable and applying it to multiple icons.

V. Designing Icons from Scratch

• Grid System: Using a grid system with guides to ensure visual balance and consistency in icon design.
  • Example: Setting up 4-pixel guides on a 24x24 canvas to aid in icon creation.
• Icon Creation Process: Step-by-step guide to creating two new icons: a raindrop and a lodging (hotel) icon.
  • Raindrop: Creating a triangle, rounding the bottom corners, and applying the fill variable.
  • Lodging: Using the pen tool to create a house shape, adding a doorway using a rectangle and the "exclude" operation.

VI. Animating Custom Icons

• Creating Stroke Versions: Duplicating existing icons and converting them to stroke-based versions for animation purposes.
  • The original icons use fill, while the duplicates use stroke with the same color variable.
• Stroke Animation: Applying a stroke animation effect to the stroke-based icons.
  • Custom easing and timing are used to create a smooth animation.
• Combining Fill and Stroke: Stacking the fill and stroke versions of the icons on top of each other and animating them sequentially.
  • The stroke animation occurs first, followed by a fade-in animation for the fill icon.
• Icon Stroke Alignment: Addressing the issue of stroke alignment (center vs. inside) and its impact on the icon's appearance.
  • Changing the stroke alignment to "inside" ensures that the stroke doesn't overlap with other elements.

VII. Conclusion

• Framer's vector workflow has significantly improved, offering a viable alternative to external tools for many design tasks.
• While it lacks some advanced features found in dedicated vector editors, it provides enough functionality for most designers' needs.
• The ability to import, design, and animate vectors directly within Framer streamlines the design process.