An intelligent Figma plugin that automatically generates design annotations for components and layers. It extracts styles (tokens), variables, and properties, then "unfolds" them into clean, themed tags with smart, orthogonal connectors.
- ⚡ Automatic Extraction: Instantly captures Colors (Variables & Styles), Typography, Component States, Effects (Shadows), Border Radius, and Layout Padding.
- 🔗 Smart Connectors: Draws professional, orthogonal L-shaped connectors with rounded corners that stay organized.
- 🧹 Clean Layout: Automatically places annotations at the edges of the frame using zone-based logic to prevent overlap.
- 👯 Deduplication: Smartly detects identical components and links them to a single annotation tag to reduce clutter.
- 🎨 Dynamic Theming: Supports Dark, Light, and Blueprint themes with real-time updating of existing annotations.
- 🧩 Component Grouping: Heuristically groups related child nodes (like a text label inside a button) into a single unified annotation.
- Frontend: React + Vite (for a responsive UI).
- Plugin Logic: TypeScript (fully modularized for maintainability).
- Build Tool: Esbuild (for fast main thread bundling).
- Styling: Vanilla CSS.
Desktop.2026.02.14.-.21.21.27.10.mp4
- Node.js (v16 or higher)
- Figma Desktop App
-
Clone the Repository
git clone https://github.com/mohamedshemees/TokenzUnfold.git cd TokenzUnfold -
Install Dependencies
npm install
-
Build the Project
npm run build
- Open Figma and navigate to Plugins -> Development -> Import plugin from manifest....
- Select the
manifest.jsonfile in the project root. - The plugin is now ready to use under your "Development" plugins!
- Select Designs: Select one or more frames, components, or layers you want to annotate.
- Open Plugin: Launch "TokenzUnfold" from the plugins menu.
- Configure Options: Toggle which properties you want to extract (Colors, Typography, etc.).
- Pick a Theme: Choose between Dark, Light, or Blueprint styles.
- Annotate: Click Annotate Selection. The plugin will calculate the best placement and draw the connectors automatically.
We love contributions! Here’s how you can help:
- Fork the repository.
- Create a new branch (
git checkout -b feature/amazing-feature). - Commit your changes (
git commit -m 'Add some amazing feature'). - Push to the branch (
git push origin feature/amazing-feature). - Open a Pull Request.
The plugin logic is located in src/main/ and is split into specialized modules:
traversal.ts: Logic for scanning Figma nodes.annotations.ts: Tag creation and data management.connectors.ts: Geometric logic for drawing lines.layout.ts: Sorting and collision avoidance.
Found a bug or have a feature request? Let us know!
- Go to the Issues tab.
- Search if a similar issue already exists.
- If not, click New Issue.
- Include a clear description, steps to reproduce, and screenshots if applicable.
Handcrafted with ❤️ to make design handoff a breeze.