Back to Playbook

Figma Plugins

A list of recommended Figma plugins for improving workflow and automating tedious tasks.

Why it matters

Plugins extend Figma's functionality, allowing you to work faster and more accurately. They can automate repetitive tasks, check for accessibility issues, and populate your designs with realistic data.

Essential Plugins

Stark

The ultimate accessibility suite. Check contrast, simulate color blindness, and more.

Contrast

Quickly check contrast ratios of your selection against WCAG guidelines.

Unsplash

Insert beautiful, high-quality images into your designs with a single click.

Iconify

Access thousands of icons from popular sets like Material Design, FontAwesome, and Phosphor.

Content Reel

Populate your designs with realistic text, images, and icons to test layouts with real data.

Lorem Ipsum

Generate placeholder text for your designs. Customize length and format easily.

Blush

Create and customize illustrations in your designs. Mix and match components.

Similayer

Select layers based on specific properties like fill, stroke, size, or name.

Renamed

Batch rename layers and frames to keep your file organized and clean.

Autoflow

Automatically draw flow arrows between frames to create user flows and diagrams.

Figmotion

Create advanced animations directly in Figma without switching to After Effects.

A11y Checker

Check color contrast compliance with WCAG standards for your entire frame.

Map Maker

Create customized maps quickly. Supports Google Maps and Mapbox styles.

Chart

Generate charts with random or real data. Supports line, area, pie, and bar charts.

Remove BG

Remove the background of images automatically with a single click.

Better Font Picker

Preview fonts as you browse them, instead of just seeing the font names.

Find and Replace

Search for text across your file and replace it, just like in a text editor.

LottieFiles

Access thousands of free Lottie animations and preview them in your designs.

Feather Icons

Simple, beautiful open source icons. Fully customizable stroke width and color.

Measure

Automate redlines for design handoff. Add measurements for size and spacing.

Mockuuups Studio

Instant device mockups generator. Place your frames into realistic scenes.

Typescale

Quickly generate a modular scale for your typography system.

Material Design Icons

Instant access to the entire Material Design icon library.

Image Palette

Extracts a color palette of 5 colors from selected images.

SmoothShadow

Create smooth, layered shadows for a more natural look.

Blobs

Generate unique organic blob shapes for backgrounds and illustrations.

Curve Text

Create curved text in various shapes.

Vectary 3D

Integrate photorealistic 3D objects into designs.

IconScout

Access millions of icons, illustrations, and animations.

Freepik Icons

Access a massive library of high-quality icons, vectors, and photos.

Wireframe Designer

AI-powered wireframing tool.

Noisy Gradients

Make textured gradient backgrounds.

Codia AI

Convert images to editable designs and generate code.

Supa Gradient

Create customizable gradients easily.

Streamline

Library of icons, illustrations, and emojis.

Vectorize

Convert PNGs into scalable SVGs.

Warp It

Bend and distort shapes and text with a mesh-based warp tool.

Phosphor Icons

A flexible icon family for interfaces, diagrams, and presentations.

Brandfetch

Pull in brand assets like logos and colors.

UI Faces

Aggregate avatars from various sources for your mockups.

Get Waves

Generate unique SVG wave patterns for backgrounds and sections.

Figma to Code

Convert layouts to responsive HTML, Tailwind, Flutter, or SwiftUI code.

Plugin Checklist

  1. Performance

    Don't install too many plugins. Only keep the ones you use regularly to avoid clutter.

  2. Updates

    Keep your plugins updated to ensure compatibility with the latest Figma features.

  3. Security

    Be mindful of permissions. Only install plugins from trusted developers.

Previous: Overview Next: Further Reading