Axure vs Figma - jakie są różnice?

Projektowanie makiet i prototypów, to codzienność UX/UI Designerów. Projektanci mają do swojej dyspozycji szereg aplikacji, które wspomagają ich pracę. Narzędzia dają im m.in. dostęp do szerokiej gamy cyfrowych zasobów (szablonów, motywów, kształtów), dzięki którym mogą tworzyć projekty dopasowane do potrzeb klientów. Axure i Figma to narzędzia, które są dobrze znane projektantom. Celem artykułu jest przedstawienie różnic, jakie występują pomiędzy tymi dwoma narzędziami.

Spis treści:

1. Co to jest Figma? 
2. Co to jest Axure?
3. Możliwości Figma i jej przeznaczenie
4. Axure - jego możliwości i zasoby
5. Różnice w tworzeniu makiet i nowych koncepcji
6. Tworzenie materiałów high-fidelity i interaktywnych prototypów
7. Migracje projektów z Figmy do Axure
8. Figma czy Axure - co wybrać?
9. Streszczenie
10. Podsumowanie

Co to jest Figma?

Figma to narzędzie, które służy do projektowania i prototypowania interfejsu użytkownika. Aplikacja powstała w 2016 roku, lecz od tego czasu przeszła szereg aktualizacji i została wyposażona w nowe funkcjonalności. Działanie Figmy opiera się na chmurze, co zapewnia użytkownikom wygodny dostęp do projektów, który można uzyskać z niemal każdego urządzenia. Co ważne, aplikacja umożliwia jednoczesną pracę wielu członków zespołu, w czasie rzeczywistym. Dzięki temu mogą oni osiągać dobre rezultaty z pracy zespołowej, gdyż posiadają opcję bieżącej edycji projektów, śledzenia zmian oraz dodawania notatek. Mogą również regularnie przeglądać pliki przesyłane przez innych członków zespołu oraz udostępniać innym użytkownikom łącza do projektów. Narzędzie umożliwia także łatwy eksport elementów, również do web developerów.

Figma to jedno z tych narzędzi, które w raportach czy zestawieniach poświęconych zagadnieniom takim jak UX Design czy UI, często zajmuje wysokie miejsca, znajdując się w TOP 10.

Co to jest Axure?

Axure to jedno z najstarszych narzędzi służących do tworzenia prototypów aplikacji webowych i stacjonarnych. Program jest obecny na rynku już od 2002 roku, stąd też przez wiele lat był czołową aplikacją używaną do prototypowania,  zarówno w Polsce, jak i w innych krajach. Wielu użytkowników docenia ten program zwłaszcza za to, że nie wymaga umiejętności programistycznych, gdyż umożliwia projektowanie bez kodu. Warto jednak zaznaczyć, że program pojawił się w czasach, gdy nie miał jeszcze konkurentów, takich jak np. Figma, która weszła na rynek kilkanaście lat później. Dzisiaj wielu specjalistów od UX uważa Axure za aplikację, którą można wykorzystać do stworzenia nawet najbardziej zaawansowanych makiet.

Możliwości Figma i jej przeznaczenie

Figma to stosunkowo łatwe w obsłudze narzędzie dla projektantów. Intuicyjność obsługi programu wynika m.in. z czytelnego interfejsu użytkownika, którego działanie opiera się na zasadzie „przeciągnij i upuść”.

Przygotowywanie projektów w Figmie odbywa się z wykorzystaniem grafik wektorowych oraz narzędzi, takich jak np. Pen tool, który służy do rysowania krzywych Béziera. Innym wykorzystywanym w programie narzędziem jest Arc design, dzięki któremu można łatwiej projektować np. wykresy kołowe. Projektanci mogą korzystać także z funkcji auto layout, która umożliwia łatwą zmianę elementów w bloczku, liście itp.

Figma to program, który daje projektantom szerokie możliwości m.in. za sprawą licznych wtyczek, które usprawniają pracę i pozwalają tworzyć zaawansowane prototypy. UX/UI Designerzy mają m.in. opcję tworzenia User flow design, przy czym mogą skorzystać z wtyczki „Arrow Auto”. To funkcjonalność schematu blokowego, dzięki której można łatwo naszkicować połączenia pomiędzy dwoma obiektami bądź też ukryć lub uwidocznić przepływy na tzw. żądanie.

Program oferuje także możliwość efektywnego zarządzania komponentami. Oprócz rozwiązań, które są na stałe wbudowane w program, istnieją także dodatkowe opcje, takie jak np. wtyczka „Master”. Dzięki niej można m.in. szybko zamienić takie same obiekty w komponent lub kopiować poszczególne komponenty do innych plików Figmy. Kolejną z przydatnych funkcji programu jest także Content Reel za sprawą którego do projektów trafia prawdziwy content, a nie lorem-ipsum. To tylko niektóre z rozszerzeń, podnoszących jakość pracy projektantów w Figmie.

A co jeszcze oferuje użytkownikom to narzędzie?

• Możliwość podglądu makiety zarówno w wersji desktop, jak i mobile – program daje użytkownikom opcję wygenerowania makiet zarówno dla wersji desktopowych, jak i dla urządzeń mobilnych. Dzięki temu projektant może sprawdzić poprawność przygotowanych prototypów także w tym środowisku. 
• Imponująca kolekcja szablonów – to znaczne ułatwienie, zwłaszcza dla początkujących projektantów, którzy mogą skorzystać z gotowych wzorów. Wzory te są tworzone przez społeczność użytkowników programu, w ramach Figma Community. Każdy użytkownik może udostępnić tam swoje pliki, szablony, czy np. ikony, które następnie mogą zostać wykorzystane przez innych.
• Zaawansowane narzędzia do projektowania – w Figmie projektanci mogą znaleźć szeroką gamę przydatnych narzędzi, takich jak np. Pen tool czy Instant arc designs. 

Axure - jego możliwości i zasoby

Axure oferuje użytkownikom szereg funkcjonalności, w zakresie tworzenia projektów i prototypów. Główne możliwości, które program daje UX Designerom to m.in.:

• Tworzenie prostych makiet – tworzenie prostych makiet inaczej bywa nazywane projektowaniem „low-fidelity” (materiały o niskim odzwierciedleniu szczegółów). W Axure użytkownicy mogą tworzyć proste wizualizacje (ekrany), które odzwierciedlają koncepcję danego projektu (np. podstawową hierarchię informacji na stronie oraz układ głównych elementów). 
• Tworzenie zaawansowanych makiet – program bardzo dobrze sprawdza się do projektowania „high-fidelity”, czyli do tworzenia bardzo szczegółowych projektów. W Axure można projektować niezwykle rozbudowane makiety i zarządzać interakcjami, podstronami oraz innymi elementami, które są ważne na etapie tworzenia makiet. Gotowe makiety można wyeksportować i zapisać w postaci szablonów, a następnie rozpocząć ich testowanie. 
• Tworzenie diagramów – Axure daje użytkownikom możliwość przygotowania diagramów, które są przydatne np. w momencie tworzenia User Journey czy przepływów użytkowników. 

A jak wygląda kwestia zasobów?

Axure posiada obszerne zasoby, które znajdują się we wbudowanej w program bibliotece widżetów. Użytkownicy mogą znaleźć w niej szereg przydatnych funkcjonalności. Do najczęściej wykorzystywanych elementów należą jednak przyciski, nagłówki, figury geometryczne (koła, prostokąty), bloczki tekstów, panele dynamiczne czy linie. W bibliotece znajduje się również pakiet zasobów, które przydają się do opisu stworzonych makiet. Są to m.in. specjalne markery, zbiór ikon czy sticky notes. Axure daje użytkownikom również możliwość importowania własnych elementów graficznych. Podobnie, jak w Figmie, projektanci mają do swojej dyspozycji również gotowe szablony i narzędzia UX designera, które mogą wykorzystać do tworzenia makiet.

Różnice w tworzeniu makiet i nowych koncepcji

Tworzenie nowych koncepcji to proces generowania pomysłów, w którym najczęściej biorą udział interdyscyplinarne grupy specjalistów, składające się nie tylko z  projektantów, ale także programistów czy np. kierowników projektów. Celem wymyślania koncepcji jest stworzenie nowych idei, które można wdrożyć do projektu. Dla przykładu, sesja tworzenia koncepcji może zostać przeprowadzona m.in. w celu utworzenia zestawu funkcji MVP (Minimum Viable Product), dla powstającej dopiero aplikacji. Wymyślanie koncepcji może odbywać się online, a zważywszy na to, że jest to zadanie zespołowe, warto skorzystać w tym celu z narzędzi, które ułatwiają współpracę.

W Figmie istnieje możliwość łączenia plików w czasie rzeczywistym. Dodatkowo każdy użytkownik ma przypisany awatar widoczny na pasku narzędziowym, dzięki któremu można łatwo przełączyć widok na perspektywę danej osoby, co ułatwia szybkie udostępnianie pomysłów. Co istotne, użytkownicy korzystający z Figmy nie muszą posiadać kopii danego projektu, aby rozpocząć nad nim pracę. Wystarczy, że będą mieli dostęp w trybie view, a nie view prototype only.

A jak wygląda tworzenie koncepcji w Axure? Program oferuje  usługi udostępniania plików w chmurze, co jest sporym ułatwieniem pracy, jednak nie ma możliwości udostępniania ekranów współpracownikom w czasie rzeczywistym. Axure można jednak połączyć z aplikacją taką, jak np. MS Teams, co znacznie podnosi jakość współpracy i komunikacji pomiędzy osobami pracującymi przy danym projekcie. Opisując kwestię pracy zespołowej, w zakresie tworzenia nowych koncepcji należy wspomnieć również o tym, że zarówno Figma, jak i Axure nie narzucają ograniczeń związanych z liczbą osób przeglądających dany projekt. 

Tworzenie makiet to proces, w którym liczy się m.in. intuicyjność obsługi danego narzędzia. Axure i Figma różnią się pod tym kątem. Pierwszy z programów posiada bardzo rozbudowany interfejs i dużą liczbę zakładek zawierających szereg funkcjonalności, co może być utrudnieniem zwłaszcza dla początkujących projektantów. Interfejs Figmy jest z kolei mniej rozbudowany, a po kliknięciu w dany obiekt, użytkownikowi wyświetlają się jego parametry z podziałem na sekcje, co może ułatwiać korzystanie z platformy.

Różnice w tworzeniu makiet dotyczą m.in. projektowania w technice RWD (Responsive Web Design), czyli tworzeniu projektów, które są dostosowane do urządzeń mobilnych. W Axure działa specjalna funkcja o nazwie Adaptive Views, która wspiera ten rodzaj projektowania. Dzięki niej można sprawnie dostosować widoki dla urządzeń o różnych parametrach. Tutaj warto jednak zwrócić uwagę na tzw. breakpointy, czyli wartości graficzne, które określają, w jaki sposób dany element ma wyświetlać się np. na tablecie. W Axure użytkownicy mają dostęp do breakpointów wszystkich elementów na różnych stronach i mogą je modyfikować według konkretnych potrzeb.

A jak wygląda tworzenie makiet dla różnych widoków w Figmie?

Program daje użytkownikom możliwość projektowania różnych widoków. Można to zrobić odpowiednio przygotowując elementy autolayoutu. Innym rozwiązaniem jest wykorzystanie wtyczki o nazwie Breakpoints.

Tworzenie materiałów high-fidelity i interaktywnych prototypów

Po stworzeniu makiety przychodzi czas na przygotowanie interaktywnego prototypu, który można zaprezentować klientowi np. w przeglądarce czy na urządzeniu mobilnym. Niektóre z rozwiązań w tym zakresie bazują głównie na przejściach ekranów, lecz są też opcje, które pozwalają na tworzenie bardziej złożonych animacji poszczególnych elementów. Bardzo szczegółowe interaktywne prototypy to tzw. projekty high fidelity (materiały o dużym odzwierciedleniu szczegółów), które dokładnie odwzorowują planowane działanie produktu.

AXURE

Axure to jedna z tych aplikacji, która daje możliwość tworzenia solidnych modeli interakcji dla poszczególnych prototypów. Program zawiera aż 6 typów interakcji, takich jak:

1. Wydarzenia.
2. Linki tekstowe.
3. Akcje.
4. Animacje.
5. Efekty dla stylów.
6. Przypadki. 

Program sprawdza się również w zakresie kopiowania interakcji, które są przypisane do poszczególnych elementów. Użytkownicy mogą sprawnie kopiować określone wartości interakcji, a następnie nanosić je na tworzone przez siebie projekty. Pisząc o Axure, w kontekście interaktywnych prototypów należy wspomnieć również o kwestii eksportowania projektowanych w programie makiet do HTML. Aplikacja daje użytkownikom taką funkcję.

A jak wygląda aspekt tworzenia schematów blokowych? Istnieje możliwość automatycznego wygenerowania flow diagram, co odbywa się na podstawie zaprojektowanych wcześniej widoków, poszczególnych interakcji oraz tego, jakie zachodzą pomiędzy nimi zależności.

FIGMA

Teraz przyjrzyjmy się, jakie możliwości w zakresie tworzenia interaktywnych prototypów, daje użytkownikom Figma. W zakres możliwych do wykorzystania interakcji wchodzą:

1. Linkowania do jednego z elementów lub do ekranu.
2. Efekty przejścia pomiędzy ekranami.
3. Ustawienia punktów rozpoczęcia oraz zakończenia.

Aplikacja daje użytkownikom także możliwość skorzystania z dodatkowej wtyczki o nazwie Smart Animate, dzięki której można zyskać dostęp do większej liczby animacji.
A jak wygląda aspekt kopiowania interakcji z poszczególnych komponentów lub całych widoków? Aby to zrobić, wystarczy włączyć pracę w trybie tworzenia prototypu. Wtedy będzie można skopiować zarówno wartość formatowania elementów, jak i przypisane do nich interakcje. Spora część działań przy projektowaniu interaktywnych prototypów w Figmie, jest przeprowadzana z pomocą dodatkowych wtyczek. Jest tak również w przypadku eksportu kodu HTML dla makiety. Aby to zrobić, należy zainstalować plugin Anima for Figma. Jedną z kwestii jest również tworzenie schematów blokowych. Aplikacja pozwala określać workflow między poszczególnymi elementami, na zasadzie określania ich kolejności, tj. np. kliknięcie kursorem na konkretny element i przejście do kolejnego widoku (początek – interakcja).

Migracje projektów z Figmy do Axure

Z racji na duży wybór narzędzi UX designera, wielu projektantów decyduje się na korzystanie z różnych rozwiązań, co nierzadko ma charakter hybrydowy. Aby korzystać z wielu aplikacji, zazwyczaj konieczne jest przeprowadzenie migracji projektów. Migracje projektów mogą odbywać się pomiędzy różnymi kompatybilnymi aplikacjami, jednak skupmy się na przeprowadzeniu migracji projektów z Figmy do Axure. Jak to zrobić? Trzeba zacząć od pobrania w Figmie specjalnej wtyczki o nazwie From Figma to Axure. Dzięki niej będzie można przenieść projekty rozpoczęte w programie do aplikacji Axure, a następnie wykorzystać jej możliwości i stworzyć interaktywne prototypy.

A jak wykorzystać możliwości Axure, pracując w Figmie? W tym przypadku można skorzystać z płatnej wtyczki o nazwie Axure. Jej instalacja pozwoli użytkownikom Figmy zyskać dostęp do części funkcji, które są dostępne dla projektantów pracujących w programie Axure.

Figma czy Axure - co wybrać?

Nie ma jednoznacznej odpowiedzi na to pytanie. Dobór narzędzi zawsze zależy od kontekstu, umiejętności i przyzwyczajeń danego UX Designera, a niekiedy również od budżetu. Oczywiście wiele zależy również od specyfiki danego projektu. Zarówno jeden, jak i drugi program posiada szereg zalet i wad, które mogą pomóc projektantom w dokonaniu wyboru zgodnego z ich preferencjami.

Podsumowanie 

Axure i Figma to jedne z najpopularniejszych narzędzi, z których korzystają projektanci UX/UI. Zarówno jedna, jak i druga aplikacja posiada funkcjonalności, które sprawdzają się przy różnego rodzaju projektach. Przed wyborem aplikacji zawsze należy wziąć pod uwagę m.in. kwestię obszerności zasobów oferowanych przez dany program oraz to, czy tworzona makieta ma być projektowana z wysokim odzwierciedleniem szczegółów (high fidelity), czy z niskim (low fidelity). Dużą rolę będzie pełnić tutaj także doświadczenie posiadane przez danego UX/UI designera.