Z projektu do kodu: narzędzia, kompromisy i skrót

1. Konwertery

Wtyczki, które czytają plik projektu i eksportują HTML, CSS albo kod frameworka. Anima zamienia ramki z Figmy w HTML, React albo Tailwind, a w Figma Community jest kilka wtyczek Figma do HTML.

• Zaleta: szybko, jednym kliknięciem.
• Ograniczenie: wynik odwzorowuje rysunek, a nie twój kod, więc często trzeba go przepisać.

2. Generatory kodu AI

Narzędzia, które czytają projekt, zrzut ekranu albo prompt i piszą komponenty. Figma Make generuje HTML, CSS i JavaScript z ramek. Builder.io zamienia projekty w kod, który korzysta z twoich własnych komponentów, tokenów i design systemu.

• Zaleta: kod pasuje do twojego stacku.
• Ograniczenie: po pierwszym wygenerowaniu projekt i kod i tak się rozjeżdżają.

3. Płótna zrobione z kodu

Najnowsze podejście usuwa konwersję. Samo płótno to HTML i CSS, więc nie ma luki do łatania. Tak działają Paper i Kalka, a Penpot jest blisko, bo opiera swoje układy na CSS Flex i Grid.

• Zaleta: co zaprojektujesz, to wdrożysz, nic się nie gubi.
• Ograniczenie: projektujesz według reguł weba, o to właśnie chodzi, ale trzeba się do tego przyzwyczaić.

Jak wybrać

• Aplikacja z biblioteką komponentów w React lub Vue: generator AI, który zna twoje komponenty.
• Szybka statyczna strona z istniejącego pliku Figmy: konwerter.
• Strony, które często projektujesz i wdrażasz: płótno z kodu, dzięki któremu etap przejścia z projektu do kodu znika.

Kalka to nasze podejście do trzeciej rodziny: interfejs Figmy, prawdziwy HTML pod spodem, open source i lokalnie. Jest w fazie rozwoju.