Adobe XD kontra szkic – Showdown 2020

Dwóch zawodników wagi ciężkiej nadal walczy o pierwsze miejsce w najpopularniejszym narzędziu do projektowania: Adobe XD vs Sketch. Które narzędzie będzie nimi wszystkimi rządzić? Odpowiedź nie jest prosta. Ponieważ obaj poczynili niezwykły postęp w ostatnich latach, kompleksowe porównanie narzędzi do projektowania pod kątem funkcji, wydajności i łatwości użytkowania jest już spóźnione.

Sketch był już na lata przed debiutem XD: dokładnie sześć. Miał szeroką, oddaną rzeszę fanów, był pełen funkcji i miał rozbudowany ekosystem wtyczek. Ale Sketch miał piętę achillesową – działała tylko na komputerach Mac.

W 2016 r. Adobe podkręcił temperaturę i rzucił się do walki. Nie tylko dopasowali Sketch z podobnymi funkcjami w XD, ale także udostępnili go w systemie Windows. Ponieważ około 78% komputerów stacjonarnych na świecie działa w systemie Windows, był to odważny, konkurencyjny ruch.

Adobe XD wypełnił również znaczną lukę w składzie pakietu Creative Suite. Program Fireworks otrzymał złoty uścisk dłoni, a funkcje oferowane przez XD nie były dostępne w innych aplikacjach, takich jak Illustrator czy Photoshop. XD jest nie tylko tym samym lekkim, opartym na wektorach narzędziem do projektowania, co Sketch, ale także lepiej integruje się z resztą ekosystemu Adobe Creative Suite.

Jednak wśród projektantów opinie wciąż różnią się co do tego, które narzędzie jest lepsze. Bitwa ostatnio przerodziła się w wojnę totalną, ponieważ funkcje są szybko dodawane do obu narzędzi, często nadrabiając zaległości i często naśladując się nawzajem.

Zanurzmy się i porównajmy następujące funkcje Adobe XD i Sketch:

• Interfejs użytkownika
• Praca z symbolami/elementami głównymi
• Panele aktywów i komponentów
• Skalowanie warstw i komponentów
• Powielanie i dystrybucja elementów
• Responsywne narzędzia projektowe
• Wtyczki
• Prototypowanie
• Praca drużynowa
• Przekazanie programisty
• Kontrola wersji i biblioteki współdzielone
• Tryb ciemny

Interfejs użytkownika

Mimo że Sketch i Adobe XD mają podobny interfejs, interfejs użytkownika Sketch ma przewagę nad XD . Czuje się bardziej jak solidne, profesjonalne narzędzie do projektowania, podczas gdy XD przypomina odchudzoną kombinację programów Illustrator i Photoshop.

Istotną niedogodnością w programie Adobe XD jest to, że domyślnie wyświetla on panel zasobów jako otwarty. Nie tego oczekuje większość projektantów. Większość projektantów, rozpoczynając tworzenie dokumentu projektowego, spodziewa się natychmiastowego wyświetlenia panelu warstw — nie zasobów ani wtyczek .

➠ +1 do Sketch za intuicyjny interfejs.

Praca z symbolami/elementami głównymi

„Symbole” biblioteki projektowej wielokrotnego użytku są dostępne zarówno w programie Sketch, jak i Adobe XD (w XD nazywane są „komponentami głównymi”). Kiedy symbol lub główny komponent jest aktualizowany, wszystkie inne wystąpienia tego komponentu w projekcie odzwierciedlają aktualizację.

Jednak w przeciwieństwie do Adobe XD funkcja Smart Layout programu Sketch jest bardziej wydajna podczas pracy z takimi głównymi komponentami. Pozwala na większą elastyczność i szybsze przepływy pracy.

W Sketchu możemy przypisać konkretny układ do komponentu → przeciągnij komponent na kanwę → użyj nadpisań, aby dostosować zawartość, a komponent zmieni rozmiar w oparciu o nową zawartość.

➠ +1 do szkicowania, ponieważ lepiej obsługuje symbole.

Panele aktywów i komponentów

Sketch i Adobe XD mają podobne panele zasobów/komponentów z pewnymi różnicami.

W przypadku zasobów XD ma menu rozwijane, które daje projektantom opcję wyświetlania tylko określonych kategorii, oprócz „Wszystkich”. Projektanci mogą również przełączać się między „widokiem siatki” a „widokiem listy”. Te opcje sprawiają, że panel zasobów w XD jest znacznie bardziej przyjazny dla użytkownika. Ponadto lista rozwijana do wyświetlania określonych kategorii zapewnia większą elastyczność w dodawaniu większej liczby kategorii w przyszłości.

Szkic jest mniej elastyczny. Wyświetla zasoby projektu pod trzyprzyciskową kontrolką podzieloną na segmenty (dla symboli, stylów tekstu i stylów kolorów). W programie Sketch komponenty można przeszukiwać, ale nie w różnych kategoriach. XD wyszukuje lepiej, przeszukując wszystkie komponenty we wszystkich zasobach.

➠ +1 do Adobe XD, ponieważ lepiej zarządza zasobami.

Korzystanie z komponentów głównych z innych bibliotek

Za pomocą programu Sketch projektanci mogą szybko i łatwo dodawać główne symbole do obszarów roboczych z wielu połączonych bibliotek — lokalnych lub udostępnianych online. W Adobe XD „połączone zasoby” można umieszczać w projektach z „chmury XD” — komponentów, kolorów i stylów znaków — ale z powodu tego niewygodnego przepływu pracy Adobe XD jest znacznie mniej elastyczny.

➠ +1 do szkicu dla lepszego UX podczas pracy z głównymi komponentami.

Edycja stylów kolorów

Po dodaniu do biblioteki zasobów program Adobe XD umożliwia projektantom edytowanie stylów kolorów i obserwowanie zmian kolorów w czasie rzeczywistym w obszarach roboczych. W programie Sketch istnieje obejście umożliwiające globalną edycję kolorów, ale nie jest ono tak intuicyjne jak Adobe XD.

➠ +1 do Adobe XD dla lepszej edycji stylów kolorów.

Konfigurowanie systemu projektowania

Sketch ma świetny sposób na organizowanie komponentów podczas budowania systemów projektowych (ikony, przyciski, style kolorów, style tekstu itp.). Używając ukośnika „/” podczas tworzenia i nazywania tych zasobów, są one pogrupowane w panelu komponentów i ułożone hierarchicznie w menu wstawiania. Jest to doskonała metoda organizowania komponentów w logiczny sposób i ma sens dla projektantów pracujących z setkami elementów projektu.

Adobe XD nie oferuje takiej elastyczności.

➠ +1 do szkicu dla łatwego zarządzania zasobami projektowymi.

Skalowanie warstw i komponentów

Skalowanie obiektów zawierających wiele komponentów nie jest dobrze obsługiwane przez Adobe XD. Ogólnie Sketch radzi sobie z tym znacznie lepiej. Zachowuje ładnie proporcjonalne odstępy między elementami, na przykład podczas skalowania symbolu.

Ponadto Sketch posiada użyteczną funkcję Skaluj warstwy ( Command+K ), w której grupa elementów może być skalowana za pomocą wartości procentowych lub liczbowych podczas określania, od którego początku skalować. Szkic zmienia rozmiar wybranych warstw, podczas gdy atrybuty stylu, takie jak grubość obramowania, rozmiar cienia i promień, zostaną odpowiednio przeskalowane.

Inną przydatną funkcją programu Sketch jest możliwość zmiany rozmiaru elementów w inspektorze według liczb lub wartości procentowych. Różni się to nieco od powyższego polecenia Skaluj warstwy . Dodając następujące litery do wartości procentowych lub liczb — c/m, t, b, r — Szkic przeskaluje wybrany element od tego początku. Na przykład „ 50%c ” wyskaluje wybrany element o 50% od środka.

• c/m: skala od środka
• t: skala od góry
• b: skala od dołu
• r: skala od prawej

Uwaga : Opcja „przeskaluj od lewej” nie jest wyświetlana, ponieważ jest to domyślne zachowanie w programie Sketch.

Zobacz, jak działa skalowanie warstw w Szkicu→

➠ +1 do szkicu dla większej wszechstronności i precyzji podczas skalowania elementów.

Powielanie i dystrybucja elementów

Siatka powtarzania w programie Adobe XD to przydatna funkcja, która zamienia grupę elementów w siatkę, która powtarza te obiekty. Większość projektantów prawdopodobnie próbowała go kilka razy podczas eksploracji XD, ale ile razy będą go używać projektanci? I niestety, Repeat Grid nie przyciąga do warstw, co jest poważnym niedociągnięciem.

Z drugiej strony w Sketch, możemy przytrzymać klawisz Option i przeciągnąć warstwę, aby ją zduplikować (przytrzymaj klawisz Shift , aby ją ograniczyć). Następnie Command + D powtarza element tyle razy, ile potrzeba, z tymi samymi dokładnymi odstępami między duplikatami.

Co więcej, Sketch przyspiesza tok prac projektowych dzięki Smart Distribute . Daje projektantom większą kontrolę nad tworzeniem siatek, dostosowywaniem odstępów i zmienianiem kolejności warstw. Oprócz wielu przydatnych drobiazgów, które robi Smart Distribute , ma magiczny przycisk „Uporządkuj” w inspektorze.

Po umieszczeniu kilku obiektów losowo na obszarze roboczym, możemy kliknąć przycisk Uporządkuj , a on w magiczny sposób rozłoży je równomiernie na siatce. Możemy wprowadzić dodatkowe zmiany w odstępach, przeciągając pojawiające się uchwyty (po najechaniu na grupę) lub wprowadzając wartości ręczne, aby uzyskać absolutną precyzję.

Kilka wtyczek Sketch zostało stworzonych, aby pomóc projektantom w siatkach, prowadnicach i dystrybucji oprócz Smart Distribute . Oto trzy:

Rozłóż warstwy • SketchDistributor • Równomiernie rozmieszczone prowadnice

➠ +1 do szkicu do lepszego powielania i dystrybucji elementów.

Responsywne narzędzia projektowe

Zarówno Adobe XD, jak i Sketch mają podobne funkcje automatycznej responsywności. Obie umożliwiają ręczną kontrolę stałej szerokości i wysokości elementu podczas przypinania elementu do określonego początku obwiedni. Adobe XD ma również sprytne narzędzie „responsywnej zmiany rozmiaru”, które automatycznie określa zmianę rozmiaru elementów i grup — ale nie jest idealne.

Sketch posiada inteligentne, responsywne narzędzie o nazwie Smart Layout . Projektanci mogą tworzyć responsywne komponenty, a za każdym razem, gdy ich zawartość jest dostosowywana, komponenty uwzględniają zmiany, zapewniając większą elastyczność i szybsze przepływy pracy.

Dzięki inteligentnemu układowi projektanci mogą łatwo tworzyć przyciski, których rozmiar automatycznie zmienia się, zachowując jednakowe marginesy i dopełnienie — bez względu na długość etykiet tekstowych. Inteligentny układ działa również z grupami.

Adobe XD niedawno wdrożył funkcję „responsywnej zmiany rozmiaru”, ale nadal pozostaje w tyle za Sketchem.

➠ +1 do szkicu dla szybkich i łatwych responsywnych funkcji projektowania.

Wtyczki

Wśród nadmiaru cyfrowych narzędzi do projektowania Sketch ma jeden z najsolidniejszych ekosystemów wtyczek. Posiadanie tysięcy wtyczek jest jedną z najbardziej atrakcyjnych funkcji Sketch, a programiści nieustannie tworzą pomocne wtyczki, które rozszerzają funkcjonalność Sketch.

W porównaniu z tym kolekcja wtyczek Adobe XD blednie. Nawet jeśli ten sam programista utworzy wersję XD wtyczki Sketch, XD jest zbyt świeży, aby wtyczka mogła być powszechnie stosowana. Co więcej, wiele nowych wtyczek XD nie dodaje wystarczającej wartości projektantom, aby mogli je wykorzystać.

➠ +1 do Sketch za rozbudowany ekosystem wtyczek.

Prototypowanie

Dzięki funkcji Auto-animate program Adobe XD podniósł stawkę w zakresie tworzenia prototypów. Korzystając z „inteligentnej” funkcji automatycznej animacji, projektanci mogą tworzyć świetnie wyglądające przejścia w prototypach, aby wizualizować ruch treści na ekranach. XD może również dodawać dźwięki do prototypów za pomocą nowej „akcji”, która odtwarza efekty dźwiękowe i inne pliki audio w odpowiedzi na wyzwalacze.

Sketch ma kilka podstawowych przetarć między ekranami w celu prototypowania, ale nie oferuje takiej samej płynności z mikrointerakcjami. Nie jest pewne, kiedy Sketch może je dodać. Wydaje się, że koncentrujemy się bardziej na włączeniu innych cennych funkcji, takich jak Asystenci do programu Sketch.

Twórcy Sketch najprawdopodobniej uważają, że istnieje wiele innych narzędzi do tworzenia prototypów z bardzo szczegółowymi mikrointerakcjami, takich jak ProtoPie. Jest potężny i może z łatwością importować projekty z programów Sketch, Figma i Adobe XD.

Zarówno Sketch, jak i Adobe XD idą łeb w łeb, jeśli chodzi o udostępnianie aplikacji do podglądu prototypów na urządzeniach mobilnych: Sketch Mirror i Adobe XD . Aplikacje przenoszą prototyp zaprojektowany na komputerze stacjonarnym na ekran telefonu komórkowego za pomocą kabla USB lub Wi-Fi.

➠ +1 do Adobe XD dla automatycznie animowanych przejść w celu wizualizacji prototypów.

Praca drużynowa

Oba narzędzia oferują współpracę zespołową. Sketch oferuje Sketch for Teams , w którym projektanci korzystający ze współdzielonej przestrzeni roboczej w chmurze mogą dzielić się pomysłami, być na bieżąco z bibliotekami współdzielonymi w chmurze , sprawdzać postępy w innych projektach zespołowych i zostawiać opinie na temat projektów — wszystko w jednym miejscu.

Ponadto zaproszeni interesariusze i współpracownicy, którzy nie mają dostępu do aplikacji Sketch, mogą wyświetlać, sprawdzać i komentować projekty w przeglądarce. Handoff programisty jest również zintegrowany z programem Sketch za pomocą Sketch for Teams .

W chwili pisania tego tekstu wersja premium Adobe XD umożliwia zespołom współedycję plików XD z innymi projektantami (online i offline) za pośrednictwem Creative Cloud, udostępnianie plików do przeglądu i łatwe przekazywanie specyfikacji programistom. Wszystkie te funkcje są obecnie w wersji beta .

➠ +1 do szkicu dla prostej współpracy zespołowej.

Przekazanie programisty

Przekazywanie projektów programistom jest kluczowym krokiem, a Adobe XD i Sketch radzą sobie z tym równie dobrze. Udostępniając projekty za pośrednictwem platform internetowych, projektanci mogą generować specyfikacje i współpracować z programistami, aby pomóc im przekształcić projekty w witryny internetowe i aplikacje.

➠ +1 do Adobe XD i +1 do szkicu do przekazania programistom.

Kontrola wersji i biblioteki współdzielone

Kontrolowanie wersji plików projektu jest niezbędne podczas pracy z innymi projektantami nad tym samym projektem. Ułatwia również współpracę zespołową i bardziej wydajną informację zwrotną na temat projektowania. Sketch niedawno zintegrował te funkcje z Sketch for Teams . Dzięki Sketch Cloud projektanci mogą udostępniać pliki projektowe i biblioteki , które ułatwiają pracę z systemami projektowymi w zespołach rozproszonych.

Adobe XD ma również system wersjonowania plików w chmurze z Adobe Creative Cloud. Chociaż witryna Creative Cloud przechowuje wersje plików XD, powrót do poprzednich wersji nie jest możliwy. Aby przywrócić poprzednią wersję, projektanci muszą otworzyć plik w programie Adobe XD za pośrednictwem witryny Creative Cloud, a następnie skopiować i wkleić zawartość do bieżącego dokumentu. Wersje plików są również automatycznie usuwane po 30 dniach, chyba że zostaną nazwane lub dodane do zakładek. Innymi słowy, nie jest to proces płynny.

Podobnie jak Sketch, XD ułatwia zespołom korzystanie z zasobów udostępnionych za pomocą Bibliotek Creative Cloud. Projektanci mogą wprowadzać do XD kolory, style postaci i grafikę z tych bibliotek.

➠ +1 do Sketch dla łatwego wersjonowania plików i udostępnionych bibliotek w chmurze.

Tryb ciemny

Wygląda świetnie i sprawia, że ​​projekty się wyróżniają

Wielu projektantów woli pracować w słabo oświetlonych pomieszczeniach, aby oglądać swoje dzieła na ekranie bez odbić i odblasków. Interfejs trybu ciemnego dobrze pasuje do tego środowiska. Zapewnia doskonały kontrast dla prawie wszystkich kolorów i sprawia, że ​​treść wizualna jest bardziej wyrazista.

Tryb ciemny nie tylko świetnie wygląda, ale także minimalizuje „cyfrowe zmęczenie oczu”. Spójrzmy prawdzie w oczy, projektanci przez większość dnia wpatrują się w ekrany. Cyfrowe zmęczenie oczu to częsta przypadłość dotykająca miliony ludzi. Spowodowane przez wszystko, od nadmiernego korzystania z komputera po regularną ekspozycję na jasne światło, może powodować bóle głowy, ból szyi, niewyraźne widzenie i pieczenie/pieczenie oczu.

Kolory akcentów i podświetleń

Sketch obsługuje tryb ciemny od wersji Sketch 52 (październik 2018). Obsługuje również globalne preferencje kolorów akcentu i podświetlenia systemu macOS Mojave. Wybrane opcje podświetlone w panelu Warstwy, Inspektorze i w innych miejscach aplikacji będą zgodne z preferencjami systemowymi.

Tryb ciemny nie jest dostępny w Adobe XD, nawet w systemie macOS.

➠ +1 do szkicu w trybie ciemnym.

Zwycięzcą Adobe XD vs Sketch Showdown jest… Sketch

Sketch wygrywa walkę o dominację w narzędziach do projektowania dzięki znaczącej przewadze nad Adobe XD.

W niektórych sytuacjach wybór jest oczywisty: aplikacja Sketch nie jest dostępna dla systemu Windows. Istotną zaletą dla subskrybentów Adobe Creative Cloud jest również to, że „plan startowy” XD jest bezpłatny – choć ma znaczne ograniczenia.

Wszechstronność programu Sketch powinna skłonić projektantów korzystających z systemu macOS do wyboru Sketch zamiast XD. Jego interfejs, wtyczki, funkcje współpracy, responsywne narzędzia do projektowania, symbole wielokrotnego użytku, udostępnione biblioteki i inne przydatne funkcje przewyższają te z Adobe XD.

Warto zauważyć, że przeniesienie plików projektu z XD do Sketch nie jest możliwe . Przejście ze Sketch (i Photoshop lub Illustrator) do XD jest łatwiejsze, ponieważ XD może otwierać pliki Sketch. Podczas korzystania z wtyczek obsługujących tylko szkice, takich jak Abstract lub InVision Craft, mogą pojawić się pewne problemy, ale można tego uniknąć, trochę sprzątając.

Niektórzy projektanci uwielbiają Adobe XD za funkcję automatycznej animacji. To atrakcyjna funkcja, która sprawia, że ​​prototypy wyglądają świetnie. Jednak projektanci muszą pamiętać, że to tylko jeden fantazyjny atrybut. Biorąc pod uwagę zalety Sketch vs XD, kompromisy nie są tego warte. Dostępnych jest wiele wyrafinowanych narzędzi do prototypowania, które bezproblemowo współpracują z programem Sketch.

Bitwa jeszcze się nie skończyła. W nadchodzących latach powinna nastąpić intensywna, totalna wojna między Adobe XD a Sketchem. Ostatecznie to projektanci odniosą korzyści, ponieważ do obu narzędzi projektowych zostanie dodanych więcej możliwości. Ułatwi im to codzienną pracę, a to jest coś, na co warto czekać.

Pozwól nam wiedzieć co myślisz! Zostaw swoje przemyślenia, komentarze i opinie poniżej.

• • •

Dalsza lektura na blogu Toptal Design:

• Precyzyjne projektowanie — recenzja Adobe XD
• Odkrywanie projektowania multimodalnego — samouczek Adobe XD
• Forma i funkcja — przewodnik po najlepszych narzędziach szkieletowych
• Opanuj swoje rzemiosło dzięki tym najlepszym narzędziom UX
• Najlepsze portfolio projektantów UX – inspirujące studia przypadków i przykłady