A plugin for Figma that brings DiceBear avatars into your designs. It generates avatars into your designs and turns a Figma frame of components and color styles into a DiceBear avatar style, and back.
- Generate. Fill the selected layers with avatars, or insert a batch of new ones. Pick a style from the DiceBear collection or from a definition file you uploaded. Seeds come from a random draw, the layer names, a list, or a numbered prefix, and every option of the style is a control in the panel. Filled layers keep their shape and get an image fill, inserted avatars are vector frames. Each avatar remembers its style, seed and options, so the relaunch buttons on a layer can draw new seeds or swap the style later.
- Inspect. Select a generated avatar and get what a developer needs to render the same one: the seed, the changed
options, the API URL in the format of your choice, and the JavaScript for
@dicebear/core, each with a copy button. Select a frame or group and every avatar inside it is listed. - Export. Turns the frame into a single JSON style definition for DiceBear 11.x, animations included.
- Import. Rebuilds a definition file inside an empty Figma file, with one component per variant, the palettes as color styles, a generated file thumbnail, a "Start here" guide next to the avatar frame, and a License page with the credits of the definition.
The plugin is published on the Figma Community: DiceBear Studio.
The style collection and its previews come from api.dicebear.com, which is the only host the plugin talks to.
Definitions you opened stay cached in Figma's plugin storage, so they render offline.
The DiceBear Studio page in the DiceBear docs is the overview: it covers the Generate and Inspect tabs and points to the two guides for the Style tab.
The first guide covers how to set up the frame, name your components and color groups, and run the export: Create an avatar style with Figma.
The other direction has its own guide, from picking a definition file to exporting the style you made of it: Edit an avatar style with Figma.
See CONTRIBUTING.md for local development, build scripts, and how to load the plugin in Figma from source.
MIT.
Advertisement: Many thanks to our sponsors who provide us with free or discounted products.
