Opracowane przez firmę Adobe narzędzie Adobe XD służy tworzeniu interaktywnych prototypów aplikacji mobilnych oraz stron internetowych. Szczególnie przydatne jest dla projektantów interfejsów oraz grafików.

Adobe XD umożliwia projektantom przekształcanie grafiki wektorowej, tekstu, obrazów, mikrointerakcji i animacji w interaktywne prototypy, zachowujących się jak działające oprogramowanie. Przy tworzeniu aplikacji, a dokładniej tworząc interfejsy użytkownika, pomaga także Flutter – zestaw oprogramowania typu open source, wydany przez Google.

Robert Felker, artysta korzystający z Flutter

Początki

Tim Sneath, Product Manager oprogramowania Flutter, napisał:

Celem Fluttera jest dostarczenie bogatego płótna do kreatywnej ekspresji. Dzięki pełnej kontroli nad każdym pikselem renderowanym na ekranie chcemy uwolnić potencjał programistów i projektantów do tworzenia pięknych wrażeń, nieograniczonych sztucznymi granicami technicznymi.

Jednym z najbardziej oczekiwanych ogłoszeń na grudniowym wydarzeniu Flutter Interact była współpraca Google i Adobe XD. To wtedy zaprezentowano prototyp wtyczki dla Adobe XD. Przede wszystkim jej zadaniem jest eksport kodu Flutter bezpośrednio ze swojego narzędzia. Ich współpraca miała przynieść wiele korzyści dla programistów Flutter.

Ideą wtyczki jest: „Zwiększ produktywność i skróć czas spędzany z kodem front-end”.

Dzisiaj możemy używać już zapowiadanej w grudniu wtyczki. Wtyczka XD to Flutter jest już dostępna dla szerszych testów publicznych. Współpraca Adobe XD i Flutter daje możliwość eksportowania projektów do Flutter. Dodatkowo zmniejsza opóźnienie między kreatywnymi pomysłami a rozwojem produktu.

Eksportowanie z Adobe XD do Flutter

Jak działa eksportowanie kodu Flutter z Adobe XD?

1. Na samym początku zainstaluj wtyczkę eksportera Flutter.
2. Następnie w programie Adobe XD w menu wybierz Wtyczki -> Odkryj wtyczki i wyszukaj Flutter.
3. Po zainstalowaniu możesz wyświetlić panel interfejsu użytkownika, wybierając Wtyczki -> Flutter -> Panel interfejsu użytkownika.
4. Dodaj pakiet adobe_xd do projektu Flutter, dołączając go do pubspec.yaml manifestu aplikacji.
5. Aby wyeksportować pojedynczy element, wybierz widżet, który chcesz wyeksportować do Flutter i wybierz przycisk Kopiuj, zaznaczony z panelu interfejsu użytkownika.

Dzięki przeładowaniu Fluttera, zmiany w programie Adobe XD są natychmiast odzwierciedlane. Dodatkowo, wtyczka jest nowością i nie wszystkie elementy, które może zrobić Adobe XD, są obsługiwane przez wtyczkę Flutter. Jednak gdy nowe funkcje staną się dostępne, automatycznie dostaniemy aktualizację wtyczki.

Źródła:

• https://medium.com/flutter/announcing-adobe-xd-support-for-flutter-4b3dd55ff40e
• https://github.com/thize/xd-to-flutter
• https://github.com/AdobeXD/xd-to-flutter-plugin
• https://9to5google.com/2020/05/13/adobe-xd-create-flutter-apps/
• https://sup.news/you-can-now-use-adobe-xd-to-create-flutter-apps-and-ui/