Anima. Zaprojektuj witrynę, a aplikacja zamieni ci ją w kod React Javascript

Udostępnij:

O autorze

Jakub Krawczyński

@jak.kra

Często słowa brzmią lepiej w naszej głowie zanim je wypowiemy. Tę analogię można odnieść do projektowania aplikacji internetowych, gdy świetnie wyglądają jako projekty od specjalistów UI, ale stworzenie dobrze dopasowanego do nich kodu może nie być już takie proste. Właśnie ukazała się najnowsza wersja narzędzia Anima, która pozwala przekształcić projekty w funkcjonalny kod.

Platforma Anima pozwala przekształcać projekty w aplikacjach Figma, Sketch i Adobe XD w kod HTML. Najnowsza jej wersja, Anima 4.0 idzie krok dalej - wprowadza integrację kodu React Javascript.

Tym samym projekty stworzone przy użyciu Animy pozwalają teraz na przekształcenie graficznych elementów interfejsu w kod React, który jest często w projektach używany. Na razie integracja Anima-React obejmuje jedynie projekty z Figmy.

Wystarczy stworzyć przykładowe ekrany interfejsu, przeciągnąć i upuścić je z Photoshopa albo PowerPointa a Anima zamieni je w kod ReactJS, rozbijając poszczególne elementy na zbitki logicznych, powtarzających się danych. Właśnie takich, które potem można powielać, modyfikować, aby uzyskać pożądany przez twórców aplikacji rezultat.

function App() { return <Search searchesTitle="Trending searchs" buttonTitle={["Indie", "Techno", "Ortez", "Electro"]} }

Animie przyświeca idea, aby projektanci UI aplikacji i programiści mogli ze sobą ściślej współpracować, mogąc łatwiej wypracowywać rozwiązania. Ten założony w 2016 roku startup chce zacierać granice między grafikiem a programistą. Firma uważa, że w ten sposób może przyczynić się do większego upowszechnienia się przyjaznych w obsłudze narzędzi tworzenia aplikacji.

Z narzędzia Anima skorzystało do tej pory ponad 300 tys. projektantów UI i deweloperów z takich firm, jak Google, Amazon czy Starbucks. Dostęp do pełnej funkcjonalności Animy (w tym eksportu kodu React i HTML) wymaga opłaty 31 dolarów za miesiąc. Firma oferuje także plan bezpłatny, ale nie posiada on pełnej funkcjonalności.