Figma Friday #8: Image Tracer Plugin

Introduction

• Feature Overview: Similar to Illustrator's trace feature for vectorizing raster images.
• Benefit: Converts raster images (like flat silhouettes/illustrations) to vector graphics.
• Use Cases: Great for media like t-shirts, print, etc.
• Plugin Creator: Dave Williams
  • Check his other plugins (Simulator, Lorem Ipsum).

Steps to Use Image Tracer Plugin

1. Install the Plugin

   • Navigate to Figma Community and find the Image Tracer plugin.
   • Install the plugin via provided link.

2. Find an Image for Tracing

   • Example: Search for a 'thumbs up' illustration on Google.
   • Use images that you have rights to.

3. Import the Image into Figma

   • Copy the desired image.
   • Paste it into Figma.
   • Note: Raster graphics are pixelated when zoomed.

4. Launch Image Tracer Plugin

   • Select the raster image and launch the plugin.
   • The plugin scans the image and creates vector lines.

Adjusting Plugin Settings

• Threshold: Quality setting of the vector output.
  • Example: Set threshold to 150 for better vector lines and shapes.
• Additional Settings:
  • Smoothing, curvature adjustments.
  • Option to fade the original raster image for better preview.

Creating and Exporting the Vector Graphic

1. Trace and Adjust

   • After adjusting settings, trace the image.
   • Compare raster and vector outputs.
   • Vector graphics maintain high quality regardless of scaling.

2. Exporting Vector Image

   • Select the vector illustration in Figma.
   • Options to export as SVG or PDF.
   • SVG/PDF maintains high resolution when scaled.

Conclusion

• Final Advice: Feel free to comment for questions or future topics.
• Sign-off: Thanks for watching; see you in the next video.