devnews.pl

Main Menu

  • Informacje
    • Systemy i przeglądarki
    • Gadżety
  • Narzędzia
  • Frontend
  • Backend
  • QA
  • Języki programowania

logo

devnews.pl

  • Informacje
    • Systemy i przeglądarki
    • Gadżety
  • Narzędzia
  • Frontend
  • Backend
  • QA
  • Języki programowania
FrontendNarzędzia
Home›Frontend›Wsparcie dla Fluttera w Adobe XD

Wsparcie dla Fluttera w Adobe XD

By Bernadeta Zapała
25 maja 2020
187
0
Share:

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.

Grafika Flutter

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.

Wtyczka XD to Flutter

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/
TagsAdobeAdobe XDDesignFlutterGoogleProjektowanie

Share:

  • Narzędzia

    Android Studio 4.2 w kolejnej wersji Canary

  • V8 wersja 8.4
    Informacje

    V8 wersja 8.4 beta został właśnie wydany

  • Patch Tuesday
    Systemy i przeglądarki

    Październikowy Patch Tuesday – cyberbezpieczeństwo

  • 25 lutego 2021

    ReacType 5.0 – zmiany we wprowadzaniu komponentów

  • 23 lutego 2021

    Dapr v.1.0 gotowy do fazy produkcji

  • 22 lutego 2021

    ReScript 9.0 z zewnętrzną konfiguracją stdlib

  • 22 lutego 2021

    One UI 3.1 z ciekawymi nowościami dla urządzeń Samsunga

  • 22 lutego 2021

    Windows Terminal Preview 1.6 z nową sekcją ustawień

  • 15 lutego 2021

    Visual Studio Code 1.53 z ulepszeniami debugowania

  • 8 lutego 2021

    Edge 89 beta, Edge Dev 90 i nowości na kanale Canary

  • 2 lutego 2021

    Firefox 85 i Firefox Nightly – nowe wersje przeglądarki Mozilli

  • 29 stycznia 2021

    Billboard.js 2.2.0 z nowymi funkcjami wykresów

  • 26 stycznia 2021

    Kendo UI R1 2021 – nowości dla bibliotek

  • 21 stycznia 2021

    Narzędzie Vno – połączenie Vue i Deno

  • 19 stycznia 2021

    GitHub Enterprise Server 3.0 RC – kandydat do wydania

  • 15 stycznia 2021

    TypeScript 4.2 Beta z ulepszeniami typów krotek

  • 13 stycznia 2021

    Styczniowy Patch Tuesday z luką 0-day

  • 11 stycznia 2021

    Safari Technology Preview 118 dostępne dla programistów

  • 8 stycznia 2021

    Microsoft Launcher na Androida z usprawnionym dotykiem

  • 7 stycznia 2021

    WebStorm 2020.3.1 dostępny dla urządzeń z Apple Silicon

  • 22 grudnia 2020

    ReScript 8.4 z przypiętymi zależnościami

  • 14 grudnia 2020

    Edge 88 beta i przeglądarka na kanale Canary dostępne!

  • 9 grudnia 2020

    Chrome 88 Beta z nowościami w WebXR

  • 9 grudnia 2020

    Snowpack 3.0 RC z eksperymentalnymi funkcjami

  • 4 grudnia 2020

    Android Studio Arctic Fox – nowe wydanie narzędzia Google

  • 4 grudnia 2020

    The Hack Summit 2020 – konferencja IT Security

  • 2 grudnia 2020

    PowerToys 0.27 z poprawkami błędów

  • 2 grudnia 2020

    Aleph.js alfa z funkcją importowania map

  • 27 listopada 2020

    Cypress 6.0 zwiększa zakres możliwości obsługi sieci

  • 26 listopada 2020

    Firefox 83 przyspiesza i wprowadza tryb HTTPS-Only

  • 25 listopada 2020

    Electron 11.0 z obsługą Apple Silicon

  • 25 listopada 2020

    Prettier 2.2 z obsługą najnowszego TypeScript 4.1

  • 24 listopada 2020

    Tailwind CSS 2.0 z narzędziami kontroli tekstu

 

 

Jesteśmy pasjonatami najnowszych technologii w świecie programowania. Zbieramy dla Was informacje i porady z całego świata, które sprawią, że Twoja praca stanie się jeszcze bardziej efektywna.

Obserwuj nas codziennie, aby być na bieżąco oraz śmiało udostępniaj nasze posty.

Zespół DevNews

Kategorie

  • Backend
  • Bez kategorii
  • Frontend
  • Gadżety
  • Informacje
  • Języki programowania
  • Narzędzia
  • QA
  • Systemy i przeglądarki

OBSERWUJ NAS

KONTAKT

Chcesz się z nami skontaktować?

Napisz do nas wiadomość: kontakt@devnews.pl

www.devnews.pl | DEVNEWS 2020 | Newsy i ciekawostki ze świata IT