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.