Avatars for Figma

The same engine the web component uses, as a Figma plugin. Type a seed and get the exact avatar the site renders, as native Figma layers you can open, recolor, and pull apart.

Pattern
Detail75
Shape
Output

Install

The plugin is on the Figma Community. Open the listing and run it in any file. It works in the browser and in the desktop app, with no manual step.

Using the panel

The panel has two halves. On the left is a grid of seed cards, one avatar each. On the right are the controls and the action buttons. Edit a seed and its card updates on the spot.

SeedsOne seed per line. Each seed is a unique avatar, and the same seed always renders the same one. With no selection, the seed lines set how many avatars go in.
PatternMesh is the signature soft gradient. Dither is a crisp ordered dither of the same palette, with no blur.
DetailHow many colors and shapes each avatar gets. A low value is one clean mark. A high value is the full palette and detail.
ShapeCircle, Rounded, or Square. Rounded adds a radius slider, so you set the corner as a percent.
OutputLayers gives native, editable Figma vector layers. Image gives a flat PNG. Both come from one seed, so they match.

Insert and Fill selection

The two action buttons decide where the avatars land. The selection decides how many.

Insert

Insert makes new avatars on the page. With a selection, the count follows it. Select six frames and Insert makes six avatars, one per layer, each seeded from that layer's own name. With no selection, the seed lines set the count instead. One avatar goes in on its own. Several go in as a tidy row.

Fill selection

Fill selection paints the avatars into the shapes you already have, rather than into new ones. So a page of placeholders named after real people fills itself in one click, whatever shape those placeholders are.

A named layer is always its own seed, so the same frame name gives the same avatar in every file. Only an unnamed layer borrows a typed seed.

Layers, not a picture

With Layers output, an avatar arrives as real Figma vector layers, not a flat image. A mesh is about a dozen layers. A dither is three, still crisp and easy to recolor. The vector output and the image output come from one engine on one seed, so they always match.

Give it your own palette and the seed still decides the layout, so every avatar stays unique and stays on brand.

No network

The plugin never fetches or uploads. Every avatar is generated from its seed on the spot, which is the whole point of the library. The manifest declares no network access, so Figma blocks it either way.

Display P3 is absent on purpose. The engine can paint it, but the Figma plugin API has no wide-gamut paint, so the option is left out rather than quietly dropped back to sRGB.

Source and updates

The plugin is open source, in the same repository as the package. Read the code, file an issue, or build it yourself from the packages/figma-plugin folder. Free to use under the MIT license.

By Outpace Studios

Brands, interfaces, and motion for
venture-backed companies

WebsiteX / Twitter