Figmentation

About this plugin

🪄 Figmentation – where Figma meets Autodocumentation

Tired of manual documentation?

Figmentation automates the process of extracting design tokens directly from your Figma components — including colors, typography, spacing, borders, and effects.

With just one click, Figmentation creates a clean, organized annotation frame beside your component — making handoff easier for developers and keeping your design system crystal clear.

Built by a designer who needed this — and figured others might too.

💡 What it does:

Extracts bound design tokens from your components

Supports multiple naming conventions (camelCase, kebab-case, etc.)

Automatically detects and documents:

Backgrounds, text colors, border colors

Font sizes, families, weights, line heights, letter spacing

Padding, gap, corner radius, stroke weight

Shadows and blurs

Generates readable and structured annotation layers

Keeps token names consistent with your system — or generates smart fallback names

🔧 Use cases:

Design system maintenance

Dev handoff

Figma token organization

Fast, scalable documentation for UI libraries

✨ Made for:

Product designers

Design system leads

Developers using Figma tokens

Anyone who hates repetitive documentation

🎯 Figmentation – where Figma meets Autodocumentation.

Crafted with care by someone who gets it.