Pandify - porady jak projektować strony internetowe, darmowe materiały, liczne inspiracje web design.

Figma vs Adobe XD. Który program wybrać?

Artykuł pojawił się 13.08.2018, autorem jest Agressiva i wpadł do kategorii Design

Figma to program, który całkowicie odmienił moją pracę nad designem. Adobe XD to jego konkurencja. Czym różnią się te programy i który z nich jest bardziej user-friendly? Oto moje wnioski.

Z Figmy aktywnie korzystam już dwa lata, dzięki niej projektowanie do weba stało się o wiele szybsze, sprawniejsze, mniej upierdliwe. Wcześniej przez 10 lat pracowałam na Adobe Photoshop, który nie tylko potrafił paść w trakcie pracy i popsuć dzień, ale także generował bardzo ciężkie pliki, rastrową grafikę, a kolaboracja z innymi osobami sprowadzała się do używania pośrednich programów do udostępniania materiałów. I co najważniejsze projektowanie do RWD było mało wygodne. Teraz Adobe PS jest tylko narzędziem, które służy u mnie do edycji zdjęć, manipulacji oraz wyciągania rzeczy ze starych materiałów – jednym słowem kurzy się.

Przeskok na narzędzie bardziej mobilne jakim jest Figma sprawiło, że praca stała się o wiele przyjemniejsza. Z Figmy możemy korzystać na dowolnym urządzeniu poprzez desktopową appkę oraz wersję przeglądarkową, wszystkie projekty są zawsze dostępne w chmurze i można je swobodne udostępniać, i współtworzyć podczas pracy w zespole. O tym zresztą pisałam w pierwszym tekście na temat Figmy, w którym opisałam model działania.

Figma jest jedną z odpowiedzi na Sketcha, z którego niestety ze względu na system operacyjny nie mogę korzystać i nie mogę przez to porównać tych dwóch programów ze sobą. Ale podejrzewam, że nie mam czego żałować. Spotkałam osoby, które pracowały na Sketchu i zmieniły go na rzecz Figmy. Bardzo sobie tą zmianę chwalą.

 

Adobe XD

Adobe XD jest narzędziem bardzo podobnym do Figmy, Sketcha, Lunacy Editor, InVision Studio etc. Każdy z tych programów ma swoich fanów i każdy z nich ma swoje mocne strony. Ja z Adobe XD skorzystałam ostatnio ze względu na jeden z layoutów, który dostępny jest u mnie na Creative Market. Odtworzyłam go aby użytkownicy Adobe XD również mogli z niego skorzystać.

Pierwsze starcie nie było ciężkie. Generalnie panel jest tutaj podobny do tego, z którego korzystam. Ale już tworzenie pierwszego artboarda sprawiło lekkie rozczarowanie.
Czy ja narzekałam w Figmie na tworzenie pomocniczego Grida? Cofam tamte słowa. W Adobe XD nie ma możliwości ustawienia centralnego grida. Jak ustawimy sobie szerokość pojedynczej kolumny i ich ilość oraz gutter ustawienie grida na środku możemy określić podając wartość marginów z lewej i prawej strony. Czy to ma sens? Najmniejsza zmiana marginów w takiej sytuacji wpływa na wartość podstawowych ustawień grida. W Figmie podajemy szerokość kolumny, gutter i wybieramy ustawienie Center. Dzięki czemu grid od razu lokalizuje się w centralnej części projektu. Wg mnie rozsądniej. W dodatku, w Figmie można ustawić grid poziomy, czego w Adobe XD nie spotkamy.

Edycja tekstu

Kolejną ścianą, na którą wpadłam podczas tworzenia projektu w Adobe XD jest zarządzanie fontami. W Figmie faktycznie brakuje wygody pod tym kątem (brak podglądu fonta, brak wyboru rodzaju – mamy gołą listę i należy znać nazwę fonta jeżeli chcemy użyć czegoś konkretnego, w dodatku korzystając z Adobe Typekit – program Adobe CC musi być włączony aby Figma mogła swobodnie korzystać z syncowanych fontów – jest do czego się przyczepić). Myślałam, że Adobe XD nieco lepiej sobie w tym temacie radzi – szczególnie, że Adobe w innych programach ma całkiem fajnie zarządzanie fontami rozwiązane. I znów rozczarowanie. Ktoś o czymś zapomniał. Edycja tekstu jest jeszcze gorsza niż w Firmie. Tutaj poza brakiem podglądu, etc nie mamy również podstawowych artybutów jak zmiana tekstu na pisany wielkimi literami! Wow. Masa userów na bieżąco apeluje na oficjalnym supporcie o wprowadzenie tego. Chcąc napisać coś w designie wielkimi literami musimy włączyć caps lock. Panel do edycji tekstu wygląda tak jak na załączonym obrazku.

Zarządzanie obrazkami w projekcie

Figma do dziś mnie pod tym kątem zadziwia – umieszczając dowolny obrazek / zdjęcie w projekcie nie musimy się martwić o jego zniekształcenie. Obrazek można umieścić w tle dowolnego elementu w szybki sposób – wystarczy jako wypełnienie wybrać “image” i wskazać obrazek, który chcemy zaimportować. Obrazki działają jak cssowy background cover – skalują się w tle kiedy chcemy zmienić proporcje elementu. Dzięki temu mniej zaawansowany user nie wprowadzi bałaganu.

W Adobe XD działa to jak w Photoshopie. Chcąc obrazek prostokątny zamienić na kwadrat – po prostu go zniekształcimy. Chcąc obrazek ustawić w tle jakiegoś kształtu – musimy użyć maski przycięcia.

Komponenty

Są to obiekty, które danym funkcjonalnym elementom nadają odgórny styl. W Figmie edycja komponentu macierzystego sprawi, że jego klony rozmieszczone w projekcie zmienią się na jego podstawie. W Adobe XD nie bardzo rozumiem jak to działa. Tworząc “Symbol” (tutaj tak to się nazywa) nie widzę aby ten pierwszy Symbol był główny – nie jest w żaden sposób wyróżniony, jego edycja różnie wpływa na zmianę w kopiach. W jednym z elementów zmieniłam obrazek – w kopii, również się zmienił, ale tekstu już nie. Aby zatwierdzić te zmiany musiałam skorzystać z opcji “Update All Symbols”, która to opcja ukryta jest w menu. Wg mnie w tej kwestii brakuje intuicji.

Udostępnienie projektu do wglądu

Udostępnienie prototypu projektu w Figmie wiąże się z ustawieniem publicznego urla dla projektu i skopiowania go. Dwa szybkie kroki. Niezależnie od chwili pracy nad projektem, ten link jest aktualny i zawiera podgląd zmian na żywo. Nie musimy się martwić czy osoba, której pokazujemy projekt zobaczy “dzisiejsze” zmiany mimo, że wczoraj dostała od nas link. W Adobe za każdym razem trzeba aktualizować widoki. Jeżeli o tym zapomnimy – osoba, która ma do pliku wgląd nie zobaczy najświeższej wersji. Cóż, Figma tutaj bardzo mnie rozleniwiła. W wersji darmowej podajemy ogólny link do projektu, w wersji płatnej możemy wskazać indywidualny link do każdej “strony” projektu – przydatne. Jedyną zaletą opcji w udostępniania projektu w Adobe XD jest możliwość włączenia i wyłączenia komentarzy. W Figmie są one włączone na standardzie i nie można z nich zrezygnować. A co jak co – nie każdy projekt wymaga tego modułu.

Podsumowując…

Biorąc pod uwagę moje niewielkie potrzeby przy projektowaniu, różnice jakie zauważyłam między Figmą a Adobe XD są dość wyraźne. Porównując podstawowe możliwości obydwóch programów, w dalszym ciągu Figma jest moim faworytem i każdemu bardzo ją polecam. Adobe XD niestety mnie rozczarował. Miałam nadzieję, że po bardzo długim czasie rozwijania tego softu, Adobe nieco bardziej się wykaże i da userowi coś więcej lub coś innego niż konkurencja. Z Adobe XD na pewno będę korzystać tworząc layouty komercyjne dla szerszej ilości osób. Natomiast Figma wciąż będzie moim numerem jeden podczas realizacji projektów indywidualnych.

A Wy, z jakiego softu do projektów korzystacie? Podzielcie się swoimi doświadczeniami poniżej – w komentarzach.

PS. Jeżeli tak jak ja – lubicie Figmę, podzielcie się swoimi doświadczeniami w social media używając hashtag #whyilovefigma.

Agressiva

Od 10 lat pracuję w branży IT. Początkowo zajmowałam się tylko projektowaniem stron internetowych pod względem graficznym, ale bardzo szybko stałam się web designerem i web developerem w jednym. Poza pracą żyję też kolarstwem, street foodami i rysowaniem.

Bądź na bieżąco!

Jeżeli chcesz otrzymywać informacje o najnowszych wpisach na blogu Pandify.pl zapisz się do naszego newslettera za pomocą poniższego formularza. Obiecujemy nie wysyłać nic więcej.