Figma vs. Sketch vs. Axure – przegląd zadaniowy

W niedawnej infografice Toptal: „Najlepsze narzędzia UX” przeanalizowaliśmy szeroką gamę cyfrowych narzędzi do projektowania dostępnych na rynku, z których większość jest w stanie pomóc w codziennych zadaniach indywidualnego projektanta UX.

Trzy z prezentowanych narzędzi, Sketch, Figma i Axure, wygenerowały lojalnych fanów, ponieważ wyróżniają się w konkretnych zadaniach w ramach przepływu pracy projektowania UX.

Jednak wydajność tych narzędzi różni się w zależności od zadania projektowego . Zamiast wymieniać wszystkie ich funkcje w tabeli porównawczej, określimy ich skuteczność za pomocą przeglądu opartego na zadaniach.

Oto krótki przegląd konkurentów:

• Szkic autorstwa Bohemian Coding z siedzibą w Hadze w Holandii. Sketch to aplikacja tylko dla komputerów Mac.
• Figma by Figma z siedzibą w San Francisco w Kalifornii. Figma działa na dowolnym systemie operacyjnym za pośrednictwem przeglądarki.
• Axure firmy Axure Software Solutions z siedzibą w San Diego w Kalifornii. Axure ma wersję Windows i Mac.

Każde narzędzie ocenimy na podstawie tego, jak dobrze wykonuje codzienne zadania projektowe po wyjęciu z pudełka — bez wtyczek, dodatków i aplikacji innych firm. Zadania obejmują:

1. Robienie pomysłów koncepcyjnych
2. Tworzenie materiałów o niskiej wierności
3. Tworzenie materiałów o wysokiej wierności
4. Tworzenie interaktywnych prototypów
5. Tworzenie systemu projektowania
6. Dostarczanie do rozwoju

Uwaga: gdy narzędzia mają prawie identyczne funkcje potrzebne do wykonania zadania, wygrana zostanie narzędzie, które jest łatwiejsze w użyciu i zapewnia szybszą realizację. Jeśli ta determinacja wydaje się zbyt bliska, wsparcie strony trzeciej jest rozstrzygającym remisem.

Zadanie: Wymyślanie koncepcji

Ideation to proces twórczy służący do generowania nowych pomysłów, zwykle wykonywany przez interdyscyplinarne grupy składające się z projektantów, programistów, właścicieli produktów i kierowników projektów.

Celem jest stworzenie nowych pomysłów do wykorzystania w produkcie po rozważeniu podstawowych wymagań i wszelkich prac, które są już w trakcie budowy. Na przykład zespół może przejść sesję tworzenia koncepcji, aby utworzyć zestaw funkcji MVP dla nowej aplikacji lub funkcji nowej generacji w istniejącej aplikacji.

Wielu projektantów tworzy koncepcje na tablicy lub papierze. Jednak ideacja odbywa się również cyfrowo, zwłaszcza w rozproszonych biurach. Generowanie koncepcji jest sportem zespołowym i obejmuje osoby niebędące projektantami, takie jak właściciele/menedżerowie produktu i programiści front-end. Do tego zadania najlepiej nadają się narzędzia ułatwiające współpracę i łatwe w użyciu.

Zwycięzca: Figma

Zarówno Sketch, jak i Axure oferują usługi udostępniania w chmurze, ale nie ma możliwości udostępniania ekranów w czasie rzeczywistym współpracownikom.

Pliki udostępnione w Figma można łączyć w czasie rzeczywistym i wyświetlany jest oznaczony kursorem każdego uczestnika. Kliknięcie reprezentatywnych awatarów na pasku narzędzi przełącza widoki na perspektywę tej osoby, ułatwiając szybkie udostępnianie pomysłów. Dodatkowo Figma nie wymaga posiadania kopii przez osoby nie będące projektantami; otwierają łącze do pliku i rozpoczynają pracę.

Inne narzędzia do współpracy na białej tablicy mogą być lepiej dopasowane do tworzenia koncepcji niż Figma, takie jak Mural i Realtimeboard, ale w przypadku narzędzia do projektowania Figma jest lepsza niż Sketch i Axure o milę.

Zadanie: tworzenie materiałów o niskiej wierności

Wyniki Lo-fidelity są zwykle tworzone jako makiety lub szkice cyfrowe, które mogą być rozpowszechniane i przeglądane przez innych projektantów i właścicieli produktów. W zależności od procesu UX mogą być również przeglądane przez programistów i innych interesariuszy.

Modele szkieletowe mają pokazywać podstawową strukturę aplikacji, aby można było zdefiniować model interakcji przed spędzeniem czasu na tworzeniu makiet hi-fidelity.

Tworzenie makiety lo-fidelity można wykonać za pomocą narzędzi specjalnie dedykowanych do tego zadania, w tym Balsamiq Mockups, Moqups i FluidUI. Jednak Sketch, Axure i Figma mogą wykonać to samo zadanie, zwłaszcza gdy użytkownicy tworzą biblioteki komponentów szkieletowych.

Ponieważ szkielety zwykle służą jako początkowy układ interfejsu użytkownika aplikacji lub strony, są to monochromatyczne, surowe cięcia, które często się zmieniają. Pomaga to kontrolować oczekiwania interesariuszy.

W przypadku modeli szkieletowych łatwość użycia, szybkość dostawy i modyfikacja są niezbędne, ponieważ umożliwiają projektantom wydajne tworzenie wariantów projektów.

Zwycięzca: Axure

Axure wygrywa tutaj, ponieważ ma gotowe komponenty do tworzenia szkieletów natychmiast po zainstalowaniu oprogramowania. Sketch i Figma mają narzędzia , które pozwalają tworzyć szkielety, ale musisz albo narysować komponent szkieletowy, albo pobrać plik, który je zawiera. W obu przypadkach muszą być zintegrowane z biblioteką symboli (Sketch) lub komponentów (Figma), aby można je było przeciągać i upuszczać jak komponenty Axure.

Axure ma wiele bibliotek innych firm do tworzenia materiałów dostarczanych o niskiej wierności, a Sketch ma wiele darmowych i płatnych plików, które można pobrać, podczas gdy publiczne zasoby Figma są wciąż raczkujące.

Po utworzeniu przez projektanta bibliotek komponentów modelu krawędziowego te trzy narzędzia są do siebie dopasowane. Zwróć uwagę, że komponenty Axure posiadają parametryczne i regulowane właściwości, ale w przypadku statycznych modeli szkieletowych wszystkie trzy narzędzia działają dobrze, gdy biblioteki są dostępne.

Zadanie: tworzenie materiałów o wysokiej wierności

Wyniki wysokiej jakości powstają na podstawie informacji zwrotnych i wniosków zebranych z modeli o niskiej wierności. Są to makiety, które pokazują kolor, szczegóły wizualne i proponowane ostateczne projekty aplikacji.

Wysoka wierność oznacza również makiety ekranów, które są gotowe do prezentacji i pokazywane klientom, kadrze kierowniczej i innym zainteresowanym stronom niebędącym projektantami. Narzędzia projektowe, które doskonale sprawdzają się w tym zadaniu, mają wszystkie funkcje niezbędne do dodania połysku potrzebnego do stworzenia reprezentacji końcowych produktów dostarczanych klientowi.

Obejmuje to kontrolę nad wypełnieniami i obrysami obiektów, dodawanie efektów, takich jak cienie i wypełnienia gradientowe, oraz eksportowanie grafiki do łatwego do strawienia formatu (png, pdf, jpg).

Zwycięzca: Figma

Sketch i Figma mają prawie identyczne zestawy narzędzi, które mogą tworzyć makiety o wysokiej wierności, ale model interakcji Figma jest bardziej dopracowany, a narzędzie jest łatwiejsze w użyciu od samego początku. Oba narzędzia mają łatwy dostęp do zaawansowanych poleceń edycyjnych i logicznych, takich jak Połącz, Przecięcie, Suma i Odejmij. Chociaż obsługa wtyczek Sketch pozwala stronom trzecim na tworzenie dodatkowych funkcji, narzędzia te nie są dostępne natychmiast po instalacji.

Wszystkie trzy narzędzia mają funkcje, które umożliwiają tworzenie niestandardowych obiektów, ale Axure nieco utrudnia dostęp do poleceń. Wspomniane powyżej zmiany są niedostępne na pasku narzędzi. Dostęp jest uzyskiwany tylko poprzez menu kontekstowe, gdy zaznaczonych jest wiele obiektów.

Dodatkowo, sieci wektorowe Figma sprawiają, że praca z narzędziami liniowymi jest dziecinnie prosta.

Zadanie: Tworzenie interaktywnych prototypów

Prototypy interaktywne mogą być tak surowe jak prototypy papierowe lub tak szczegółowe, jak rozgałęziona wersja istniejącej aplikacji, która została zmieniona w celu odkrywania nowych funkcji. Zazwyczaj interaktywne prototypy umożliwiają użytkownikom nawigację z ekranu na ekran i wykorzystanie funkcji, takich jak menu i listy.

Dla wielu projektantów podstawowy interaktywny pokaz slajdów wystarczy podczas prezentacji swojej pracy. Dotyczy to zwłaszcza aplikacji mobilnych, ponieważ proste przejścia zapewniają wystarczającą interakcję z urządzeniem, aby wyjaśnić projekt.

Model prototypowania Figma jest dobrze zintegrowany i prosty w użyciu, a ponieważ jest to aplikacja działająca w chmurze w czasie rzeczywistym, nie ma potrzeby odświeżania stron HTML po zaktualizowaniu pliku.

Czasami interesariusze chcą, aby połączenia danych na żywo ładowały prototyp z danymi ze świata rzeczywistego w celu przetestowania skalowalności projektu, ale zdecydowana większość projektantów ma teraz niewielkie zapotrzebowanie na złożone prototypy.

Zwycięzca: Figma

Zarówno Sketch, jak i Figma obsługują proste prototypowanie z łączeniem „obiektu do obszaru roboczego” i ograniczonym zestawem przejść. Wtyczki pomagają wzmocnić proste możliwości tworzenia prototypów Sketch, ale Axure jest najpotężniejszy, jeśli chodzi o dostarczanie solidnego modelu interakcji dla prototypów.

Zadanie: Tworzenie systemu projektowania

Systemy projektowania, choć stosunkowo nowe w dziedzinie projektowania UX, istnieją od dziesięcioleci. Obejmują one wspólny język projektowania, składniki, zasoby i wytyczne, które umożliwiają zespołom współpracę i podejmowanie lepszych decyzji. Biblioteka systemu projektowania jest zwykle wdrażana jako witryna internetowa i działa jako pojedyncze źródło informacji o produkcie w całej firmie.

Zwycięzca: Figma

Chociaż biblioteki komponentów można wbudować w dowolny program, żaden z nich nie pozwala projektantom na przestawienie przełącznika i stworzenie odpowiedniej biblioteki komponentów od razu. Axure może wygenerować stronę HTML z niestandardowymi komponentami, ale nie ma możliwości zapytania o pojedynczy komponent, aby znaleźć wartość koloru, rozmiar i inne właściwości.

Budowanie systemu projektowania przy użyciu dowolnego z tych narzędzi jest nadal procesem ręcznym. Istnieją jednak wtyczki do Sketch (takie jak niedawno wydana wtyczka Google Material Design) i co najmniej jedno narzędzie innej firmy w pracach dla Figma.

Figma wygrywa, ponieważ współpraca jest podstawą dobrego systemu projektowania. Pracownicy firmy z kilku dziedzin (projektowanie, programowanie, jakość, zawartość) muszą mieć dostęp do biblioteki systemu projektowania, a wielu będzie dodawać do pliku komponentu projektu, który jest synchronizowany z biblioteką współdzieloną. Figma może być używana przez każdego, nie tylko posiadacza licencji, dzięki czemu dostęp i dodawanie do udostępnionego pliku jest bezbolesne.

Zadanie: Dostarczanie do rozwoju

Gdy projektanci interfejsu użytkownika kończą tworzenie interfejsu, ich obowiązkiem jest przekazanie plików projektowych programistom, aby projekt mógł zostać ukończony. Ale przekazanie to coś więcej niż zwykła wymiana danych, to dla projektantów okazja, by przekazać uzasadnienie swojej pracy, a tym samym pomóc programistom połączyć formę z funkcją.

Istnieją dziesiątki metod przekazywania i jeszcze więcej narzędzi innych firm, które ułatwiają redlining i zapytania o informacje o obiektach z plików Sketch i Figma (zobacz Avocode i Zeplin). Jednak w tym porównaniu patrzymy na oryginalne narzędzie do projektowania, zanim zostanie uzupełnione wtyczkami lub innymi aplikacjami.

Co ciekawe, rozwój systemów projektowania UX łagodzi potrzebę takiej formy przekazywania, ponieważ opublikowane biblioteki komponentów są jedynym źródłem prawdy dla programisty. Mogą wyodrębnić dokładny układ komponentów i informacje projektowe, nie czekając na wynik lub konsultację UX.

Ponadto pozyskiwanie informacji z obiektów w pliku projektu może być pomocne podczas konstruowania systemu projektowania, więc pewien widok CSS jest dobrą rzeczą.

Szkic pozwala wybierać obiekty i używać menu kontekstowego do „Kopiowania atrybutów CSS”, ale nie jest to idealne rozwiązanie. Figma wykonuje dobrą robotę, udostępniając zakładkę „Kod” w panelu właściwości, która generuje wartości CSS, iOS lub Android dla wybranych obiektów (programiści mogą używać tej funkcji w trybie tylko do wyświetlania lub w trybie prototypowym).

Zwycięzca: Axure

Obecnie tylko Axure ma potężne „generatory”, które generują w pełni publikowalne pliki HTML, specyfikacje Worda, a nawet raporty w formacie CSV, które można zaimportować do arkusza kalkulacyjnego. Chociaż wyniki nie są biblioteką projektu, aplikacja zapewnia przydatne materiały dla programistów.

Ogólny zwycięzca narzędzia do projektowania: Figma

W liczbach zwycięzcą tego porównania jest Figma, przede wszystkim ze względu na współpracę i dostępność na wielu platformach. Ponieważ coraz więcej zespołów korzysta z systemów projektowych, które wymagają ściślejszej integracji w zakresie rozwoju i projektowania front-end, funkcja współpracy w czasie rzeczywistym i osadzania na żywo firmy Figma daje jej dużą przewagę. Z drugiej strony Figma to aplikacja internetowa, której używanie w przedsiębiorstwie może być zabronione ze względów bezpieczeństwa.

Axure zajmuje drugie miejsce ze względu na swoją moc po wyjęciu z pudełka z gotowymi komponentami, potężnymi interaktywnymi funkcjami prototypowania i generowaniem dokumentów. W rzadszym przypadku, gdy firma musi uzyskać dostęp do rzeczywistych magazynów danych, aby zobaczyć, jak zachowuje się dana funkcja, Axure jest najlepszą lub jedyną opcją.

Sketch mógł być ostatni, ale gdy użytkownicy skorzystają z wielu wtyczek i zasobów dostępnych dla narzędzia, jest ono niezwykle wydajne i można je dostosować do potrzeb grupy projektowej. Zastrzeżeniem jest to, że wtyczki muszą być aktualizowane po każdej aktualizacji Sketch, a ponieważ jest to aplikacja tylko dla komputerów Mac, firmy korzystające z komputerów z systemem Windows nie mogą z niej korzystać.

Wszystkie trzy narzędzia omówione w tym artykule są potężne same w sobie. Jednak każdy ma ograniczenia. Poszczególni projektanci i zespoły muszą określić swoje potrzeby w zakresie przepływu pracy, rozważyć wady i zalety każdego programu oraz dokonać odpowiedniego wyboru.

Dalsza lektura na blogu Toptal Design:

• Zrzuć MVP, zastosuj minimalne realne prototypy (MVPr)
• Potęga Figmy jako narzędzia projektowego
• Jak utworzyć przewodnik po stylach szkicu, bibliotekę i zestaw interfejsu użytkownika
• Zrozumienie systemów i wzorców projektowych
• Śmierć modelowi szkieletowemu. Prosto do High-Fidelity!