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.

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.

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.

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.

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.