Material3 theme generator
Pick one color. Get a complete theme with light/dark modes, 36 UI components, and ready-to-use code.
Plugin Preview
About this plugin
Material3 theme generatorPick one brand color — get your entire design system generated automatically.Using Google's Material Design 3 color science (HCT color space), the plugin creates all primary, secondary, tertiary, surface, and background colors for both light and dark modes. No manual color picking needed.How it works1. Pick your brand color from any object on canvas, extract from an image, or type a hex code.2. Choose a color harmony — Balanced, Smooth, or Vibrant.3. Preview the full light/dark palette side by side, then hit Apply.4. Figma variables are created instantly with light/dark mode support.5. Generate 36 themed UI components and 4 example pages to see your theme in action.What you get• Complete color system — 50+ tokens generated from a single color• Light & dark modes — native Figma variable modes, switchable in one click• 3 harmony styles — Balanced (complementary), Smooth (analogous), Vibrant (triadic)• Advanced mode — set separate primary colors for light and dark themes independently• 36 UI components — Button, Input, Card, Dialog, Table, Tabs, Accordion, Toast, and more• 4 example pages — Login, Dashboard, Settings, Mail app layouts• Code export — CSS variables, Tailwind config, or shadcn/ui in Hex, HSL, or OKLCH• Image color extraction — pick colors directly from images in your design• Color library — save and organize your favorite colors across sessionsComponent categories• Essentials (10) — Button, Input, Textarea, Label, Checkbox, Radio, Toggle, Select, Slider, Input OTP• Display (9) — Badge, Avatar, Card, Table, Separator, Skeleton, Progress, Spinner, Kbd• Overlays (9) — Dialog, Alert Dialog, Alert, Toast, Tooltip, Popover, Hover Card, Drawer, Sheet• Navigation (8) — Tabs, Accordion, Breadcrumb, Dropdown Menu, Menubar, Navigation Menu, Pagination, Toggle GroupQuestions or feedback? [email protected]
Plugin Details
| Version | 4 |
|---|---|
| Created | January 8, 2025 |
| Last Updated | February 24, 2026 |
| Category | Software development |
| Creator | 임규산 |
| Stats | 44 installs, 3 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:dist/ui.html
- main:dist/code.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- none
More Like This
Discover other plugins in the Software development category.
Figma to Code (HTML, Tailwind, Flutter, SwiftUI)
Code Conversion Made Easy: Figma to Web & Apps
Builder.io - Figma to Code & AI Apps (React, Vue, Tailwind, etc)
Export designs to clean, responsive code or turn Figma screens into AI apps and prototypes.
SkewDat
Skew any layer or group with all layers preserved to edit.