Figma, Sketch, Adobe XD – porównanie narzędzi do projektowania interfejsu użytkownika

Jeszcze kilka lat temu, rozpoczynając pracę wdrażania strony Web Developerzy otrzymywali projekt poszczególnych widoków witryny przygotowane w Adobe Photoshop wraz z objaśnieniem Web Designera. Było to najlepsze rozwiązanie, ponieważ w przypadku zmian od klienta nawet ekstremalna poprawa makiet była szybsza niż wprowadzanie ich w napisanym wcześniej kodzie. Od niedawna projektowanie nowoczesnych interfejsów użytkownika odbywa się za pomocą równie nowoczesnych narzędzi, jakimi są Figma, Sketch oraz Adobe XD.

Figma, AdobeXD, Sketch

Pozwalają one tworzyć makiety, które są w pełni responsywne oraz dodatkowo samodzielnie generują kod CSS. Ich ogromną zaletą jest interaktywność projektowanych za ich pomocą widoków – po naciśnięciu w przycisku lub nawigację odbywa się konkretna akcja, którą uniemożliwiała praca z Photoshopem. Narzędzia te są wyposażone w gotowe szablony i wtyczki, które ułatwiają projektowanie oraz umożliwiają eksport i import zdjęć oraz grafik wektorowych. Przede wszystkim oprogramowania te mają znacznie mniejszy rozmiar (ze względu na zawarcie w nim najczęściej wykorzystywanych funkcjonalności), co nie prowadzi do tak dużych obciążeń, jak w przypadku Photoshopa, który posiada olbrzymie, choć zwykle niewykorzystywane możliwości. W tym artykule porównamy narzędzia Figma z pozostałymi dwoma narzędziami oraz poznamy ich wady i zalety.

Sketch

Sketch ujrzał światło dzienne - jako pierwsze tego typu narzędzie - już w 2010 r. i wywołał fale radości w świecie Web Designerów i Developerów. Jako najstarszy posiada sporą społeczność oraz mnóstwo rozszerzeń i dodatków zarówno dla początkujących, jak i doświadczonych użytkowników, dlatego też zyskał niewielką przewagę nad późniejszymi produktami innych firm. Do jego zalet należą:

- układy responsywne;
- udostępnianie makiet za pomocą Sketch Cloud;
- tworzenie widoków na podstawie wcześniej przygotowanych szablonów;
- mnóstwo dodatków i możliwość korzystania z bibliotek zasobów postaci symboli, tekstów, obrazów, stylów.

Podstawową wadą tego narzędzia jest możliwość jego instalacji wyłącznie na systemach macOS.

sketch

Adobe XD

Adobe XD to z kolei najmłodsze narzędzie, które wyszło ze stajni Adobe w 2017 r. Ponieważ należy do całej rodziny produktów Adobe doskonale z nimi współpracuje, a zatem np. po edycji zdjęcia otwartego w Photoshop bezpośrednio z XD przeprowadzone w nim zmiany zostaną automatyczne wprowadzone do projektu makiety we wszystkich widokach, które to zdjęcie zawierają. Do jego zalet należą:

- historia zawierająca poprzednie wersje projektu;
- tworzenie i powielanie szablonów, stylów i komponentów;
- możliwość podłączenia do narzędzia aplikacji, która umożliwia oglądanie projektu na urządzeniach rzeczywistych;
- wspomaganie przez Creative Cloud;
- pisanie komentarzy do klientów i współpracowników.

Narzędzie to umożliwia pracę w systemie Windows i macOS, jednak nie znajduje zastosowania w systemach Linux.

Adobe Xd artykuły na temat wykorzystania programu

Figma

Figma została wydana w 2016 roku i jej cechą charakterystyczną jest fakt, że działa w oparciu o przeglądarkę internetową. Posiada bardzo uproszczony interfejs użytkownika, a jednocześnie mnóstwo funkcjonalności. Dodatkowo automatycznie aktualizuje i zapisuje wersje, dlatego generując link do projektu zarówno współpracownicy, jak i klienci mogą oglądać widoki w czasie rzeczywistym. Do jej zalet należą:

- działanie w oparciu o chmurę;
- umożliwianie pracy wielu współpracowników oraz przydzielenie im odpowiednich uprawnień w zależności od rodzaju użytkownika;
- możliwość tworzenia animacji;
- zapewnia responsywność projektu i budowanie łatwo powielanych szablonów, stylów i komponentów;
- umożliwianie tworzenia własnych wtyczek do całej biblioteki wtyczek już istniejących

Figma jest doskonałym rozwiązaniem dla użytkowników macOS, Windows i Linux.

Figma program do projektowania UI i UX

Wszystkie narzędzia do projektowania interfejsów użytkownika znacznie przyspieszają i ułatwiają pracę Web Designerom i Web Developerom. Ich niepodważalną zaletą jest możliwość dodawania interakcji na każdym etapie prac oraz ich testowanie, co z kolei wspomaga projektowanie UX, a zatem osiąganie jak najlepszych wyników końcowych strony internetowej lub aplikacji mobilnej.

Tomasz Kozon

Autor Tomasz Kozon

Zajmuję się projektowaniem aplikacji i serwisów internetowych. Posiadam wiedzę i doświadczenie z zakresu: programowania, Marketing Automation, kampanii w Social Media, SEO, SEM, kampanii mailingowych i copywrittingu. Obecnie kieruję własną spółką (software house/agencja marketingowa) i organizacją non-profit. Rozwijam start-upy, programuję i zarządzam projektami zintegrowanych kampanii marketingu w wielu kanałach on-line.

Więcej wpisów od Tomasz Kozon