Automatizált Workflow

Hogyan Működik
a Mana Design System?

4 egyszerű lépésben a Figma designból
production-ready React kódig

4
Egyszerű lépés
~1h
Teljes setup
10x
Gyorsabb
01

Design Figmában

Készítsd el a UI-t design tokenekkel és komponensekkel a megszokott Figma workflow szerint.

  • Használj color, typography, spacing variableket
  • Építs fel komponens library-t
  • Auto layout minden komponensre
1
02

Mana Plugin Sync

A Mana plugin automatikusan felismeri és exportálja a design tokeneket JSON formátumban.

  • Valós idejű szinkronizáció
  • Változás detektálás
  • Verziókövetés
2
03

Kód Generálás

A Mana CLI átveszi a tokent és generálja a React komponenseket TypeScript támogatással.

  • TypeScript típusok
  • Accessibility built-in
  • Responsive by default
3
04

Integráció

Importáld a komponenseket a projektedbe és használd azonnal productionban.

  • NPM package
  • Storybook dokumentáció
  • Jest unit tesztek
4

Gyakori Kérdések

Minden, amit tudnod kell a Mana használatához

A Mana bármilyen Figma fájllal működik, de a legjobb eredményeket design system komponensekkel éred el. Az ideális kiindulási pont, ha a Figmában Variables-t használsz a színekhez, tipográfiához és spacing-hez.

Igen, telepíteni kell a Mana Figma plugint, amely automatikusan szinkronizálja a design tokeneket. A plugin ingyenesen elérhető a Figma Community-ben.

Igen! A Mana teljes TypeScript támogatással rendelkezik. Az összes generált komponens típusos, így a fejlesztői élmény maximális, és a kód biztonságosabb.

Egy új projektben kb. 10-15 perc. Meglévő projektbe integrálni ~30 perc. A legtöbb időt a Figma fájl előkészítése veszi igénybe (variables beállítása).

A Mana Next.js, Vite, Create React App és Remix projektekkel is működik. A generált komponensek framework-agnosztikusak, csak React-et igényelnek.

Igen! A generált komponensek teljes mértékben szerkeszthetők. A Mana clean, readable kódot generál, amit könnyen lehet módosítani és customizálni.