| Funkcja | Adobe Xd | Sketch | InVision Studio | Figma |
|---|---|---|---|---|
| Platforma | Mac, Windows, Android, IOS | Mac | Mac, Windows | Mac, Windows |
| Możliwość Kolaboracji | Tak, kolaboracja w czasie rzeczywistym, widzimy, co robi druga osoba z zespołu | Tak, kolaboracja w czasie rzeczywistym, widzimy, co robi druga osoba z zespołu | Tak, możliwa praca jednoczesna na jednym pliku | Tak, kolaboracja w czasie rzeczywistym, widzimy, co robi druga osoba z zespołu |
| Kontrola wersji | Automatyczny zapis historii zmian | Automatyczny zapis historii zmian | Nie | Automatyczny zapis historii zmian |
| Prototypowanie | Tak, możliwość tworzenia zaawansowanych animacji | Tak, podstawowe animacje, do zaawansowanych potrzebne dodatkowe wtyczki | Tak, możliwość tworzenia zaawansowanych i najbardziej kastomizowanych animacji | Tak, możliwość tworzenia przejść automatycznych. Mniejsze możliwości niż Adobe xd |
| Timeline animation | Nie | Nie | Tak | Nie |
| Komponenty | Tak | Tak | Tak | Tak |
| Biblioteka wtyczek | Tak | Tak | Tak | Tak |
| Kompatybilność | Adobe Photoshop, Sketch | - | Sketch | Sketch |
| Możliwość komentowania designu | Tak | Tak | Tak | Tak |
| Możliwość pobierania assetów png/svg | Tak | Tak | Tak | Tak |
| Inspect mode - dla deweloperów | Tak | Tak | Tak | Tak |
Figma
Figma jest narzędziem typu All-in-one można dzięki niej zaprojektować stronę/aplikację jak i stworzyć prototyp. Posiada spore grono użytkowników, co jest szczególnie pomocne gdy szukamy wsparcia bądź gotowych UI KIT-ów, komponentów czy elementów designu. Posiada niezbędne funkcje do projektowania oraz opcje smart animacji do tworzenia płynnych przejść pomiędzy ekranami. Największą zaletą Figmy jest jej rozbudowany moduł zarządzania i używania komponentów. Na uwagę zasługuje również dopracowany tryb kooperacji. W czasie rzeczywistym widzimy jakie zmiany dokonuje osoba, z którą współdzielimy projekt.
Plusy
- Możliwość pracy bez instalacji oprogramowania (wersja webowa aplikacji),
- Działa na platformie Mac i Windows,
- Możliwość kolaboracji, czyli wspólnej pracy wielu designerów nad jednym projektem,
- Posiada pakiet darmowy,
- Posiada opcję smart animate pozwalającej na tworzenie animacji i przejść pomiędzy projektowanymi ekranami,
- Posiada bibliotekę wtyczek, umożliwia deweloperom tworzenie własnych,
- Możliwość dzielenia projektu na strony.
Minusy
- Brak funkcji repeat grid,
- Brak możliwości animacji pomiędzy wariantami bez zmiany frame’a.
InVision studio
InVision studio to program głównie do prototypowania. To właśnie opcje animacji i interakcji są w nim najbardziej zaawansowane i dopracowane. Najlepiej działa połączenie designu wykonanego w Sketchu i interakcji wykonanych w inVision.
Plusy:
- Biblioteka pluginów,
- Zaawansowane możliwości tworzenia animacji: timeline dla poszczególnych elementów,
- Zaawansowany podgląd, czyli możliwość sprawdzenia jak wygląda design na konkretnym modelu telefonu, tabletu (projekt przedstawiony jest jako mockup urządzenia).
Minusy:
- Posiada tylko podstawowe funkcje do tworzenia i edycji grafik oraz tekstu,
- Brak funkcji pozwalającej usprawnić proces tworzenia layoutów,
- Brak kontroli nad wersją pliku.
Sketch
Sketch, podobnie jak Figma, umożliwia zarówno tworzenie layoutów stron/aplikacji, jak i interakcji pomiędzy nimi, czyli prototypów. Największym problemem Sketcha jest jego dostępność, mianowicie tylko użytkownicy Maców mogą zainstalować i korzystać z tego programu.
Plusy:
- Duża biblioteka pluginów (płatnych i darmowych),
- Posiada możliwość pracy na symbolach (komponentach),
- Szybkość działania i kompresja plików,
- Nadawanie wersji plików,
- Prosty w obsłudze,
- Działanie na chmurze - możliwość współdzielenia bibliotek.
Minusy:
- Dostępność jedynie na produkty Apple,
- Dostępna jedynie płatna wersja,
- Zaawansowane animacje prototypów możliwe tylko dzięki instalacji dodatkowych wtyczek,
- Płatne wtyczki – Sketch wielu funkcji nie posiada w oryginale, ale można znaleźć do nich dodatkowe, płatne wtyczki.
Adobe Xd
Program typu All-in-one równie mocno wspiera rozwój funkcji do projektowania layoutów jak i do interakcji (prototypowania). Z łatwością otwiera pliki ze Sketcha jak i Adobe Photoshop. Jest kompatybilny z pozostałymi produktami rodziny Adobe. Posiada też zaawansowane funkcje projektowania takie jak: repeat grid, stack, padding, component stats.
Plusy:
- Otwiera wszystkie najpopularniejsze formaty – Sketch, Photoshop,
- Świetnie współpracuje z pozostałymi programami Adobe,
- Posiada funkcje repeat grid, która pozwala na powielanie elementów oraz ustalenie odpowiednich przestrzeni pomiędzy nimi,
- Posiada możliwość ustalenia paddingów do poszczególnych elementów
- Posiada możliwość dodania stanów do komponentów, np. hover, on click,
- Pracuje w chmurze - możliwość współdzielenia plików i jednoczesnej pracy na plikach,
- Transform 3d i Animacje 3d,
- Posiada bibliotekę wtyczek,
- Możemy określić kilka flow prototypów bez konieczności tworzenia oddzielnych plików dla poszczególnych flow.
Minusy:
- Brak możliwości dzielenia projektu na strony - przy dużych projektach może zaistnieć konieczność tworzenia oddzielnych projektów,
- Długi czas ładowania się podglądu projektu przy dużych projektach.
Dlaczego w Milo używamy Adobe Xd?
Podstawą w wyborze narzędzia jest jego przeznaczenie. W Milo projektujemy produkty cyfrowe od A do Z, a więc potrzebujemy narzędzia do projektowania zarówno aplikacji webowych jak i mobilnych, a także do prototypowania (interakcji pomiędzy ekranami lub w wyniku działania na danym ekranie np. efekt hover, drag czy cilck). Dlatego wybieramy narzędzie, które:
- Umożliwia nam zarówno projektowanie jak i prototypowanie.
- Jest kompatybilne z programami graficznymi. Czasami musimy przygotować bardziej złożoną ikonę w Adobe Illustrator albo dokonać edycji zdjęcia w Photoshop. Możliwość bezproblemowego poruszania się pomiędzy programami jest dla nas ważna.
- Możemy korzystać z niego zarówno w środowisku Windows jak i Mac.
- Zawiera częste aktualizacje wprowadzające nowe funkcje ułatwiające i przyspieszające pracę nad projektem.
- Umożliwia kooperację oraz zapisywanie historii zmian. Nie sprawia problemów z przywróceniem poprzedniego wyglądu na wypadek konieczności powrotu do wcześniejszej wersji designu.
- Umożliwia wygenerowania podglądu interaktywnego prototypu dla klienta (z panelem do komentowania) oraz podglądu dla developerów (z możliwością sprawdzenia stylów dla każdego elementu oraz pobrania assetów).
Nasz wybór padł na Adobe Xd. W swojej pracy korzystamy z innych produktów Adobe, a intuicyjność interface'u, kompatybilność i stabilność są dla nas kluczowe. Adobe Xd poza rozwojem funkcji do projektowania, stale rozwija funkcje do prototypowania.
Dlatego w jednym miejscu, za pomocą jednego programu możemy stworzyć Lo-Fi Wireframes, Hi-Fi Wireframes, a także w pełni działające prototypy. Korzystanie z jednego programu podczas budowy całego produktu zapobiega błędom.
Każdy eksport plików do innego programu w celu stworzenia prototypu wymaga po pierwsze aktualizacji po dokonaniu zmian w designie, a po drugie sprawdzenia, czy aby na pewno plik w innym programie otworzył się prawidłowo. Taki system pracy powoduje wydłużenie czasu realizacji projektu. My stawiamy na jakość naszej pracy przy jak najlepszej optymalizacji procesu projektowego.
Bardzo ważną kwestią dla nas, UX/UI designerów jest komunikacja zarówno z klientem jak i deweloperem. Adobe Xd umożliwia tworzenie interaktywnego podglądu prototypu z możliwością komentowania (przypinając w odpowiednie miejsca znaczniki). Dzięki temu mamy 100% pewności, że wprowadzimy poprawki zgodne z uwagami klienta. Komunikacja z developerem jest kluczem do sukcesu w implementacji produktu cyfrowego. Wiemy, jak ważne jest to, by deweloper miał wszystkie informacje oraz assety designu, który wdraża. Adobe Xd umożliwia sprawdzenie stylów każdego elementu oraz pobranie wszystkich assetów wykorzystanych w projekcie.
Program Adobe Xd jest przyjazny dla klienta, który ocenia projekt dewelopera, który wdraża projekt, ale przede wszystkim dla nas, UX/UI designerów, którzy na co dzień z niego korzystamy. Nie bez znaczenia jest również ogromne grono użytkowników tego programu. Dzięki temu mamy dostęp do ogromnej liczby zasobów: pluginów, bibliotek, UI kitów, gotowych elementów designu, co również wpływa na lepszą efektywność naszej pracy.
