Skip to content
me&my Friends - design system generator

me&my Friends - design system generator

by Jakub Nagiet

Build a scalable, fully aliased Design System with Variables, REM metrics, and Effects in seconds.

FreeFigma

Installs

1

Likes

0

Users

5

Views

3

Preview

me&my Friends - design system generator preview

About this plugin

Stop building Design Systems from scratch. me&my Friends - design system generator is an advanced automation tool that creates a complete, enterprise-grade token architecture with a single click.

Whether you are setting up a project for a quick MVP or a large-scale enterprise product, this plugin generates a bulletproof foundation using Figma Variables and Effect Styles, strictly following industry best practices (Primitives → Semantics → Component Variants).

✨ Key Features:

📏 REM-Based Dynamic Scaling: Input your base 1rem value, and the plugin automatically calculates a fully proportional scale for spacing, padding, corner radii, and effect offsets.

🏗 Advanced Token Architecture: Automatically generates and links Primitive colors, System Semantics (Background, Surface, Outline, etc.), and Component Variants.

🌗 4 Built-in Color Modes: Instantly generates Light, Dark, Light Contrast, and Dark Contrast modes with mathematically calculated opacities and hex values.

🪄 Pro Effect Styles: Automatically creates 24 multi-layered smooth Shadows (Top/Bottom, Neutral/Color), precise Layer/Background Blurs, and complex Glassmorphism scales—all strictly bound to your variables.

🧹 Smart Scoping & Clean UI: Internal "engine" variables (like base palettes and metric primitives) are intelligently scoped to be hidden from your properties panel, keeping your workspace perfectly clean.

🧠 Smart Rename: Update a base color name in the plugin, and it dynamically renames all associated semantic tokens across your local variables.

🛠 How it works:

Set your base 1rem value (e.g., 16px).

Define your core system colors (Primary, Secondary, Neutral, Action, etc.).

Click generate and watch Figma populate hundreds of perfectly aliased variables and effect styles in seconds.

Save hours of tedious token mapping, avoid human errors, and start designing immediately with a mathematically perfect, accessible, and highly scalable foundation!

More ui kits plugins

View all