Adobe XD vs Sketch – Showdown 2020

Doi concurenți la categoria grea continuă să se lupte pentru a ocupa primul loc pentru cel mai favorit instrument de design: Adobe XD vs Sketch. Ce instrument le va guverna pe toate? Răspunsul nu este simplu. Deoarece ambele au făcut progrese extraordinare în ultimii ani, o comparație cuprinzătoare a instrumentelor de proiectare cu privire la caracteristici, performanță și ușurință în utilizare este întârziată.

Sketch-ul avea deja ani înaintea debutului lui XD: șase, mai exact. Avea o bază largă de fani dedicati, era încărcat cu funcții și avea un ecosistem extins de pluginuri. Dar Sketch avea călcâiul lui Ahile — a funcționat doar pe Mac-uri.

În 2016, Adobe a mărit căldura și a sărit în luptă. Nu numai că au potrivit Sketch cu caracteristici similare în XD, ci l-au făcut disponibil pe Windows. Deoarece aproximativ 78% dintre computerele desktop din lume rulează pe Windows, aceasta a fost o mișcare îndrăzneață și competitivă.

Adobe XD a umplut, de asemenea, o gaură substanțială în gama Creative Suite. Fireworks a primit strângerea de mână de aur, iar funcțiile oferite de XD nu erau disponibile în alte aplicații precum Illustrator sau Photoshop. Nu numai că XD este același instrument de design ușor, bazat pe vectori, ca și Sketch, dar se integrează și mai bine cu restul ecosistemului Adobe Creative Suite.

Cu toate acestea, printre designeri, opiniile încă variază cu privire la instrumentul care este mai bun. Bătălia s-a transformat recent într-un război total, deoarece funcțiile sunt adăugate rapid la ambele instrumente, deseori jucându-se să se recupereze și imitându-se frecvent reciproc.

Să analizăm și să comparăm următoarele caracteristici în Adobe XD vs Sketch:

• Interfața cu utilizatorul
• Lucrul cu simboluri/componente principale
• Panouri de active și componente
• Scalare straturi și componente
• Duplicarea și distribuirea elementelor
• Instrumente de design responsive
• Pluginuri
• Prototiparea
• Colaborarea în echipă
• Dezvoltator Handoff
• Controlul versiunilor și biblioteci partajate
• Modul întunecat

Interfața cu utilizatorul

Chiar dacă Sketch și Adobe XD au o interfață similară, interfața de utilizare a lui Sketch are avantaj față de XD . Se simte mai mult ca un instrument de design robust și profesional, în timp ce XD se simte ca o combinație redusă de Illustrator și Photoshop.

Un inconvenient semnificativ în Adobe XD este că afișează în mod implicit panoul de active deschis. Nu este ceea ce se așteaptă majoritatea designerilor. Când încep un document de proiectare, majoritatea designerilor se așteaptă să vadă imediat panoul de straturi , nu active sau pluginuri .

➠ +1 la Sketch pentru interfața sa intuitivă.

Lucrul cu simboluri/componente principale

„Simbolurile” bibliotecii de design reutilizabile sunt disponibile atât în ​​Sketch, cât și în Adobe XD (se numesc „componente principale” în XD). Când un simbol sau o componentă principală este actualizată, toate celelalte instanțe ale acelei componente din proiect reflectă actualizarea.

Spre deosebire de Adobe XD, însă, caracteristica Smart Layout a Sketch este mai puternică atunci când lucrați cu astfel de componente principale. Permite mai multă flexibilitate și fluxuri de lucru mai rapide.

În Sketch, putem atribui un anumit aspect unei componente → trageți componenta pe pânză → folosiți suprascrieri pentru a personaliza conținutul, iar componenta se va redimensiona în funcție de noul său conținut.

➠ +1 la Sketch pentru că face mai bine simbolurile.

Panouri de active și componente

Sketch și Adobe XD partajează panouri de active/componente similare, cu unele diferențe.

Pentru active, XD are un meniu drop-down care oferă designerilor opțiunea de a vedea numai anumite categorii, în afară de „Toate”. Designerii pot, de asemenea, comuta între o „Vizualizare grilă” și o „Vizualizare listă”. Aceste opțiuni fac panoul de active din XD mult mai ușor de utilizat. De asemenea, un meniu derulant pentru a vizualiza anumite categorii oferă mai multă flexibilitate pentru adăugarea mai multor categorii în viitor.

Schița este mai puțin flexibilă. Afișează elementele proiectului sub un control segmentat cu trei butoane (pentru simboluri, stiluri de text și stiluri de culoare). Cu Sketch, componentele pot fi căutate, dar nu între categorii. XD caută mai bine căutând prin toate componentele din toate activele.

➠ +1 pentru Adobe XD pentru că gestionează mai bine activele.

Utilizarea componentelor principale din alte biblioteci

Cu Sketch, designerii pot adăuga simboluri principale pe planurile de artă dintr-o multitudine de biblioteci conectate - locale sau partajate online - rapid și ușor. În Adobe XD, „activele legate” pot fi plasate în modele din „norul XD”—componente, culori și stiluri de caractere — dar din cauza acestui flux de lucru incomode, Adobe XD este mult mai puțin flexibil.

➠ +1 la Sketch pentru o UX mai bună atunci când lucrați cu componente principale.

Editarea stilurilor de culoare

Odată adăugat în biblioteca de materiale, Adobe XD le permite designerilor să editeze stilurile de culoare și să urmărească schimbarea culorii în timp real pe planurile de desen. În Sketch, există o soluție pentru a edita culorile la nivel global, dar nu este la fel de intuitivă ca Adobe XD.

➠ +1 la Adobe XD pentru o editare mai bună a stilurilor de culoare.

Configurarea unui sistem de proiectare

Sketch are o modalitate excelentă de a organiza componentele atunci când construiesc sisteme de proiectare (pictograme, butoane, stiluri de culoare, stiluri de text etc.). Folosind o bară oblică „/” la crearea și denumirea acestor active, acestea sunt grupate în panoul de componente și aranjate ierarhic în meniul de inserare. Este o metodă excelentă de organizare a componentelor într-un mod logic și are sens pentru designerii care lucrează cu sute de elemente de design.

Adobe XD nu oferă această flexibilitate.

➠ +1 la Schiță pentru gestionarea ușoară a activelor de proiectare.

Scalare straturi și componente

Scalarea obiectelor care conțin mai multe componente nu este gestionată bine de Adobe XD. În general, Sketch gestionează acest lucru mult mai bine. Păstrează bine distanța proporțională dintre elemente atunci când scalați un simbol, de exemplu.

În plus, Sketch are o caracteristică utilă Scale Layers ( Comandă+K ) în care un grup de elemente poate fi scalat utilizând procente sau numere în timp ce se specifică de la ce origine să se scaleze. Schița redimensionează straturile selectate, în timp ce atributele de stil, cum ar fi grosimea chenarului, dimensiunea umbrei și raza, vor fi scalate corespunzător.

O altă caracteristică utilă în Sketch este capacitatea de a redimensiona elementele din inspector după numere sau procente. Aceasta este ușor diferită de comanda Scala Straturi de mai sus. Adăugând următoarele litere la procente sau numere — c/m, t, b, r — Schița va scala elementul selectat din acea origine. De exemplu, „ 50%c ” va scala elementul selectat la 50% din centru.

• c/m: scară din centru
• t: scară de sus
• b: scară de jos
• r: scară din dreapta

Notă : opțiunea „scale de la stânga” nu este afișată deoarece este comportamentul implicit în Sketch.

Vedeți cum funcționează scalarea stratului în Sketch→

➠ +1 la Schiță pentru mai multă versatilitate și precizie la scalarea elementelor.

Duplicarea și distribuirea elementelor

Grila de repetare din Adobe XD este o caracteristică utilă care transformă un grup de elemente într-o grilă care repetă acele obiecte. Majoritatea designerilor l-au încercat probabil de câteva ori când au explorat XD, dar de câte ori îl vor folosi designerii? Și, din păcate, Repeat Grid nu se fixează în straturi, un neajuns semnificativ.

Cu Sketch, pe de altă parte, putem ține apăsată tasta Opțiune și trage un strat pentru a-l duplica (ține și tasta Shift pentru a-l constrânge). După aceea, Command+D repetă elementul de câte ori se dorește, cu aceeași distanță exactă între duplicate.

În plus, Sketch accelerează fluxurile de lucru de proiectare cu Smart Distribute . Le oferă designerilor mai mult control asupra creării grilelor, ajustării spațiilor și reordonării straturilor. În afară de multele lucruri utile pe care Smart Distribute le face, are un buton magic „Tidy” în inspector.

După ce am plasat la întâmplare mai multe obiecte pe o planșă, putem face clic pe butonul Tidy și le va distribui în mod magic în mod uniform pe o grilă. Putem face ajustări suplimentare la spațiere trăgând mânerele care apar (când trecem cu mouse-ul peste grup) sau introducând valori manuale pentru o precizie absolută.

Au fost create mai multe plugin-uri Sketch pentru a ajuta designerii cu grile, ghiduri și distribuție, în plus față de Smart Distribute . Iată trei:

Distribuire straturi • SketchDistributor • Ghiduri distribuite uniform

➠ +1 la Schiță pentru a duplica și distribui mai bine elementele.

Instrumente de design responsive

Atât Adobe XD, cât și Sketch au caracteristici similare de răspuns automat. Ambele permit controlul manual al lățimii și înălțimii fixe ale unui element în timp ce fixează elementul la o anumită origine a casetei de delimitare. Adobe XD are, de asemenea, un instrument inteligent de „redimensionare receptivă” care determină automat redimensionarea elementelor și a grupurilor, dar nu este perfect.

Sketch are un instrument inteligent de răspuns numit Smart Layout . Designerii pot construi componente receptive și, ori de câte ori conținutul lor este ajustat, componentele se adaptează la schimbare, permițând mai multă flexibilitate și fluxuri de lucru mai rapide.

Cu Smart Layout , designerii pot crea cu ușurință butoane care se redimensionează automat, menținând în același timp marginile și umplutura consistente, indiferent cât de lungi devin etichetele de text. Smart Layout funcționează și cu grupuri.

Adobe XD a implementat recent o funcție de „redimensionare receptivă”, dar încă rămâne în urma lui Sketch.

➠ +1 la Sketch pentru funcții de design rapid și ușor de răspuns.

Pluginuri

Printre o supraabundență de instrumente de design digital, Sketch are unul dintre cele mai robuste ecosisteme de pluginuri. A avea mii de pluginuri este una dintre cele mai atractive caracteristici ale Sketch, iar dezvoltatorii creează continuu plugin-uri utile care extind funcționalitatea Sketch.

Colecția de plugin-uri de la Adobe XD păliște în comparație. Chiar dacă același dezvoltator creează o versiune XD a unui plugin Sketch, XD este prea recent pentru ca pluginul să fie adoptat pe scară largă. În plus, multe noi plugin-uri XD nu adaugă suficientă valoare pentru ca designerii să le accepte.

➠ +1 la Sketch pentru ecosistemul său extins de pluginuri.

Prototiparea

Cu Auto-animate , Adobe XD a ridicat avantajul pentru prototipuri. Folosind funcția de animare automată „inteligentă”, designerii pot crea tranziții grozave în prototipuri pentru a vizualiza mișcarea conținutului pe ecrane. XD poate adăuga, de asemenea, sunete la prototipuri cu o nouă „acțiune” care redă efecte sonore și alte fișiere audio ca răspuns la declanșatoare.

Sketch are câteva ștergere de bază între ecrane pentru prototipare, dar nu oferă aceeași fluiditate cu microinteracțiunile. Nu este sigur când Sketch le poate adăuga. Se pare că se concentrează mai mult pe încorporarea altor funcții valoroase, cum ar fi Asistentii în Sketch.

Creatorii Sketch cred cel mai probabil că există multe alte instrumente pentru a crea prototipuri cu microinteracțiuni foarte detaliate, cum ar fi ProtoPie. Este puternic și poate importa cu ușurință modele din Sketch, Figma și Adobe XD.

Atât Sketch, cât și Adobe XD sunt perfect atunci când vine vorba de furnizarea de aplicații pentru previzualizarea prototipurilor pe mobil: Sketch Mirror și Adobe XD . Aplicațiile atrag prototipul proiectat pe un desktop pe ecranul mobil printr-un cablu USB sau wifi.

➠ +1 la Adobe XD pentru tranziții auto-animate pentru a vizualiza prototipuri.

Colaborarea în echipă

Ambele instrumente oferă colaborare în echipă. Sketch are Sketch pentru echipe , unde designerii care folosesc un spațiu de lucru în cloud partajat pot să împărtășească idei, să rămână sincronizați cu bibliotecile cloud partajate , să verifice progresul altor proiecte de echipă și să lase feedback cu privire la proiecte, totul într-un singur loc.

În plus, părțile interesate și colaboratorii invitați care nu au acces la aplicația Sketch pot vizualiza, inspecta și comenta modelele în browser. Handoff-ul dezvoltatorului este, de asemenea, integrat în Sketch folosind Sketch for Teams .

În momentul scrierii acestui articol, versiunea premium a Adobe XD permite echipelor să coediteze fișiere XD cu alți designeri (online și offline) prin Creative Cloud, să partajeze fișiere pentru revizuire și să predea cu ușurință specificațiile pentru dezvoltatori. Toate aceste funcții sunt în prezent în versiune beta .

➠ +1 la Sketch pentru o colaborare simplă în echipă.

Dezvoltator Handoff

Predarea designurilor către dezvoltatori este un pas crucial și atât Adobe XD, cât și Sketch se descurcă la fel de bine. Prin partajarea proiectelor prin platforme online, designerii pot genera specificații și pot colabora cu dezvoltatorii pentru a-i ajuta să transforme design-urile în site-uri web și aplicații.

➠ +1 la Adobe XD și +1 la Sketch pentru transferul dezvoltatorului.

Controlul versiunilor și biblioteci partajate

Controlul versiunilor fișierelor de design este esențial atunci când lucrați cu alți designeri pe același proiect. De asemenea, facilitează colaborarea în echipă și feedback-ul de proiectare mai eficient. Sketch a integrat recent aceste funcții în Sketch for Teams . Cu Sketch Cloud , designerii pot partaja fișiere de design și biblioteci care facilitează lucrul cu sistemele de proiectare în echipe distribuite.

Adobe XD are, de asemenea, un sistem de versiuni de fișiere în cloud cu Adobe Creative Cloud. În timp ce site-ul web Creative Cloud păstrează versiuni ale fișierelor XD, nu este posibilă revenirea la versiunile anterioare. Pentru a reveni la o versiune anterioară, designerii trebuie să deschidă fișierul în Adobe XD prin intermediul site-ului web Creative Cloud și apoi să copieze și să lipească conținutul în documentul curent. Versiunile fișierelor sunt, de asemenea, șterse automat după 30 de zile, cu excepția cazului în care sunt denumite sau marcate. Cu alte cuvinte, nu este un proces fără întreruperi.

La fel ca Sketch, XD facilitează, de asemenea, echipelor să folosească activele partajate folosind Creative Cloud Libraries. Designerii pot aduce culori, stiluri de caractere și elemente grafice în XD din aceste biblioteci.

➠ +1 la Sketch pentru versiunea ușoară a fișierelor și biblioteci partajate în cloud.

Modul întunecat

Arata grozav si face ca designul sa iasa in evidenta

Mulți designeri preferă să lucreze în camere slab iluminate pentru a-și vedea creațiile pe ecran fără reflexii sau strălucire. O interfață de utilizare în mod întunecat se potrivește bine în acel mediu. Oferă un contrast excelent pentru aproape toate culorile și face conținutul vizual mai izbitor.

Modul întunecat nu numai că arată grozav, ci se știe că reduce la minimum „oboseala digitală a ochilor”. Să recunoaștem, designerii se uită la ecrane aproape toată ziua. Oboseala digitală a ochilor este o afecțiune comună care afectează milioane de oameni. Cauzată de orice, de la utilizarea excesivă a computerului până la expunerea regulată la lumină puternică, poate provoca dureri de cap, dureri de gât, vedere încețoșată și ochi arsuri/înțepături.

Culori de accent și evidențiere

Sketch acceptă modul întunecat începând cu Sketch 52 (octombrie 2018). De asemenea, acceptă preferințele globale de culoare Accent și Highlight ale macOS Mojave. Opțiunile selectate care sunt evidențiate în panoul Straturi, Inspector și în altă parte a aplicației se vor potrivi cu preferințele de sistem.

Modul întunecat nu este disponibil în Adobe XD, nici măcar pe macOS.

➠ +1 la Schiță pentru modul întunecat.

Câștigătorul Adobe XD vs Sketch Showdown este... Sketch

Sketch câștigă bătălia pentru supremația instrumentelor de design cu un avans semnificativ față de Adobe XD.

În unele scenarii, alegerea este evidentă: Sketch nu este disponibil pentru Windows. Un avantaj notabil pentru abonații Adobe Creative Cloud este, de asemenea, că „planul de pornire” XD este gratuit, deși vine cu limitări considerabile.

Versatilitatea Sketch ar trebui să oblige designerii de pe macOS să aleagă Sketch în locul XD. Interfața, pluginurile, funcțiile de colaborare, instrumentele de design receptiv, simbolurile reutilizabile, bibliotecile partajate și alte caracteristici utile le depășesc pe cele ale Adobe XD.

Este demn de remarcat faptul că mutarea fișierelor de design din XD în Sketch nu este posibilă . Tranziția de la Sketch (și Photoshop sau Illustrator) la XD este mai ușoară, deoarece XD poate deschide fișiere Sketch. Unele probleme pot apărea atunci când utilizați pluginuri doar pentru schiță, cum ar fi Abstract sau InVision Craft, dar acest lucru poate fi evitat cu puțină curățare.

Unii designeri iubesc Adobe XD pentru funcția de animare automată. Este o caracteristică atractivă care face ca prototipurile să arate grozav. Cu toate acestea, designerii trebuie să țină cont de faptul că este doar un atribut de lux. Având în vedere avantajele Sketch vs XD, compromisurile nu merită. Sunt disponibile multe instrumente sofisticate de prototipare care funcționează perfect cu Sketch.

Bătălia nu s-a încheiat încă. În următorii ani ar trebui să se înregistreze un război intens și total între Adobe XD și Sketch. În cele din urmă, designerii sunt cei care vor beneficia pe măsură ce mai multe capabilități sunt adăugate ambelor instrumente de proiectare. Le va ușura viața de zi cu zi și asta este ceva de așteptat.

Spune-ne ce crezi! Vă rugăm să lăsați mai jos gândurile, comentariile și feedback-ul dvs.

• • •

Citiri suplimentare pe Blogul Toptal Design:

• Proiectați cu precizie – O revizuire Adobe XD
• Explorarea designului multimodal – Un tutorial Adobe XD
• Formă și funcție – Un ghid pentru instrumentele de top Wireframe
• Stăpânește-ți meseria cu aceste instrumente UX de top
• Cele mai bune portofolii de designeri UX – Studii de caz și exemple inspiratoare