Back to Plugins
Magic Style Guide - Design System

Magic Style Guide - Design System

Generate stunning style guides from local styles and variables - instantly!

Plugin Preview

Magic Style Guide - Design System preview

About this plugin

✨ Magic Style Guide ✨

Create beautiful, clear, professional style guides - in just one click.


Magic Style Guide reads all your color variables (across multiple collections, including linked variables) and text styles to instantly generate an elegant, organized, and ready-to-share style guide.

Perfect for onboarding, documentation, and developer handoff - without any manual work.


---


🔮 Features:


- One-click magic: Instantly document all text styles and color variables.

- Smart descriptions: Auto-generate usage notes based on your style names.

- Linked variables support: Handles both direct and linked variables across collections.

- Multi-collection ready: Organizes styles beautifully even when they span several collections.

- Beautiful output: Clean, professional, and fully structured style guides.


---


Why you'll love it:

Save hours of boring documentation.

Keep your design systems clear, consistent, and ready for scale.

Focus on design - Magic Style Guide takes care of the rest. 🎩✨

Plugin Details

Version3
CreatedApril 22, 2025
Last UpdatedMay 1, 2025
Categorydesign-tools-other
CreatorEmile
Stats23 installs, 3 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • https://fonts.googleapis.com
    • https://fonts.gstatic.com
    • https://i.postimg.cc