Adobe XD vs Sketch – Resa dei conti 2020

Due contendenti dei pesi massimi continuano a darsi battaglia per conquistare il primo posto per lo strumento di progettazione più favorito: Adobe XD vs Sketch. Quale strumento li dominerà tutti? La risposta non è semplice. Poiché entrambi hanno compiuto progressi straordinari negli ultimi anni, è necessario un confronto completo degli strumenti di progettazione su funzionalità, prestazioni e facilità d'uso.

Sketch era già avanti di anni prima del debutto di XD: sei, per l'esattezza. Aveva un'ampia base di fan dedicati, era carico di funzionalità e aveva un vasto ecosistema di plugin. Ma Sketch aveva un tallone d'Achille: funzionava solo su Mac.

Nel 2016, Adobe ha alzato il fuoco ed è saltata nella mischia. Non solo hanno abbinato Sketch con funzionalità simili in XD, lo hanno reso disponibile su Windows. Poiché circa il 78% dei computer desktop del mondo gira su Windows, questa è stata una mossa audace e competitiva.

Adobe XD ha anche riempito un buco sostanziale nella formazione di Creative Suite. Fireworks ha ricevuto la stretta di mano d'oro e le funzionalità offerte da XD non erano disponibili in altre applicazioni come Illustrator o Photoshop. Non solo XD è lo stesso strumento di progettazione leggero e vettoriale di Sketch, ma si integra anche meglio con il resto dell'ecosistema Adobe Creative Suite.

Tuttavia, tra i designer, le opinioni variano ancora su quale strumento sia il migliore. La battaglia è recentemente diventata una guerra totale poiché le funzionalità vengono rapidamente aggiunte a entrambi gli strumenti, spesso giocando a recuperare e imitando spesso l'un l'altro.

Immergiamoci e confrontiamo le seguenti funzionalità in Adobe XD e Sketch:

• Interfaccia utente
• Lavorare con simboli/componenti principali
• Riquadri Risorse e Componenti
• Ridimensionamento di livelli e componenti
• Duplicazione e distribuzione di elementi
• Strumenti di progettazione reattivi
• Plugin
• Prototipazione
• Collaborazione di squadra
• Consegna dello sviluppatore
• Controllo della versione e librerie condivise
• Modalità scura

Interfaccia utente

Anche se Sketch e Adobe XD condividono un'interfaccia simile, l'interfaccia utente di Sketch ha un vantaggio rispetto a XD . Sembra più uno strumento di progettazione robusto e professionale, mentre XD sembra una combinazione snella di Illustrator e Photoshop.

Un inconveniente significativo in Adobe XD è che mostra il pannello delle risorse aperto per impostazione predefinita. Questo non è ciò che la maggior parte dei designer si aspetta. Quando si avvia un documento di progettazione, la maggior parte dei designer si aspetta di vedere immediatamente il pannello dei livelli , non le risorse o i plug- in.

➠ +1 su Sketch per la sua interfaccia intuitiva.

Lavorare con simboli/componenti principali

I "simboli" della libreria di design riutilizzabili sono disponibili sia in Sketch che in Adobe XD (sono chiamati "componenti principali" in XD). Quando un simbolo o un componente principale viene aggiornato, tutte le altre istanze di quel componente nel progetto riflettono l'aggiornamento.

A differenza di Adobe XD, tuttavia, la funzione Smart Layout di Sketch è più potente quando si lavora con tali componenti principali. Consente una maggiore flessibilità e flussi di lavoro più rapidi.

In Sketch, possiamo assegnare un layout particolare a un componente → trascinare il componente sulla tela → utilizzare le sostituzioni per personalizzare il contenuto e il componente si ridimensionerà in base al suo nuovo contenuto.

➠ +1 su Sketch perché fa meglio i simboli.

Riquadri Risorse e Componenti

Sketch e Adobe XD condividono pannelli di risorse/componenti simili con alcune differenze.

Per le risorse, XD ha un menu a discesa che offre ai designer la possibilità di vedere solo categorie specifiche, a parte "Tutto". I progettisti possono anche alternare tra una "Vista griglia" e una "Vista elenco". Queste opzioni rendono il pannello delle risorse in XD molto più intuitivo. Inoltre, un menu a discesa per visualizzare categorie specifiche offre maggiore flessibilità per l'aggiunta di più categorie in futuro.

Lo schizzo è meno flessibile. Visualizza le risorse del progetto sotto un controllo segmentato a tre pulsanti (per simboli, stili di testo e stili di colore). Con Sketch, i componenti sono ricercabili ma non tra le categorie. XD effettua ricerche migliori effettuando ricerche in tutti i componenti in tutte le risorse.

➠ +1 su Adobe XD perché gestisce meglio le risorse.

Utilizzo di componenti master da altre librerie

Con Sketch, i designer possono aggiungere simboli principali alle tavole da disegno da una moltitudine di librerie collegate, locali o condivise online, in modo rapido e semplice. In Adobe XD, le "risorse collegate" possono essere inserite nei progetti dal "cloud XD" (componenti, colori e stili di carattere), ma a causa di questo flusso di lavoro imbarazzante, Adobe XD è molto meno flessibile.

➠ +1 su Sketch per una migliore UX quando si lavora con i componenti principali.

Modifica degli stili di colore

Una volta aggiunto alla libreria di risorse, Adobe XD consente ai designer di modificare gli stili di colore e di osservare il cambiamento del colore in tempo reale su tutte le tavole da disegno. In Sketch, esiste una soluzione alternativa per modificare i colori a livello globale, ma non è intuitivo come Adobe XD.

➠ +1 su Adobe XD per una migliore modifica degli stili colore.

Impostazione di un sistema di progettazione

Sketch offre un ottimo modo per organizzare i componenti durante la creazione di sistemi di progettazione (icone, pulsanti, stili di colore, stili di testo, ecc.). Usando una barra '/' durante la creazione e la denominazione di queste risorse, vengono raggruppate nel pannello dei componenti e disposte gerarchicamente nel menu Inserisci. È un metodo eccellente per organizzare i componenti in modo logico e ha senso per i designer che lavorano con centinaia di elementi di design.

Adobe XD non offre questa flessibilità.

➠ +1 su Sketch per una facile gestione delle risorse di progettazione.

Ridimensionamento di livelli e componenti

Il ridimensionamento degli oggetti che contengono più componenti non è gestito bene da Adobe XD. In generale, Sketch lo gestisce molto meglio. Conserva bene la spaziatura proporzionata tra gli elementi quando si ridimensiona un simbolo, ad esempio.

Inoltre, Sketch ha un'utile funzione Scala livelli ( Comando+K ) in cui un gruppo di elementi può essere ridimensionato utilizzando percentuali o numeri mentre specifica da quale origine scalare. Schizzo ridimensiona i livelli selezionati, mentre gli attributi di stile come lo spessore del bordo, la dimensione dell'ombra e il raggio verranno ridimensionati in modo appropriato.

Un'altra utile funzionalità di Sketch è la possibilità di ridimensionare gli elementi nell'ispettore in base a numeri o percentuali. Questo è leggermente diverso dal comando Scala livelli sopra. Aggiungendo le seguenti lettere a percentuali o numeri : c/m, t, b, r —Sketch ridimensionerà l'elemento selezionato da quell'origine. Ad esempio, " 50%c " ridimensionerà l'elemento selezionato del 50% dal centro.

• c/m: scala dal centro
• t: scala dall'alto
• b: scala dal basso
• r: scala da destra

Nota : l'opzione "scala da sinistra" non viene mostrata perché è il comportamento predefinito in Sketch.

Guarda come funziona il ridimensionamento dei livelli in Sketch→

➠ +1 su Sketch per maggiore versatilità e precisione durante il ridimensionamento degli elementi.

Duplicazione e distribuzione di elementi

Ripeti griglia in Adobe XD è una funzione utile che trasforma un gruppo di elementi in una griglia che ripete quegli oggetti. La maggior parte dei designer probabilmente l'ha provato alcune volte durante l'esplorazione di XD, ma quante volte lo useranno i designer? E sfortunatamente, Ripeti griglia non si aggancia ai livelli, una carenza significativa.

Con Sketch, invece, possiamo tenere premuto il tasto Opzione e trascinare un livello per duplicarlo (tenere premuto anche il tasto Maiusc per vincolarlo). Successivamente, Command+D ripete l'elemento tutte le volte che lo desideri con la stessa esatta spaziatura tra i duplicati.

Inoltre, Sketch velocizza i flussi di lavoro di progettazione con Smart Distribute . Offre ai progettisti un maggiore controllo sulla creazione di griglie, sulla regolazione della spaziatura e sul riordino dei livelli. Oltre alle tante piccole cose utili che Smart Distribute fa, ha un pulsante magico "Riordina" nell'ispettore.

Dopo aver posizionato diversi oggetti in modo casuale su una tavola da disegno, possiamo fare clic sul pulsante Ordina e li distribuirà magicamente in modo uniforme su una griglia. Possiamo apportare ulteriori modifiche alla spaziatura trascinando le maniglie che appaiono (passando con il mouse sopra il gruppo) o inserendo valori manuali per una precisione assoluta.

Sono stati creati diversi plug-in di Sketch per aiutare i progettisti con griglie, guide e distribuzione oltre a Smart Distribute . Eccone tre:

Distribuisci livelli • SketchDistributor • Guide distribuite uniformemente

➠ +1 su Sketch per duplicare e distribuire meglio gli elementi.

Strumenti di progettazione reattivi

Sia Adobe XD che Sketch hanno funzionalità di risposta automatica simili. Entrambi consentono il controllo manuale della larghezza e dell'altezza fisse di un elemento mentre fissano l'elemento a un'origine particolare del riquadro di delimitazione. Adobe XD ha anche un intelligente strumento di "ridimensionamento reattivo" che determina automaticamente il ridimensionamento di elementi e gruppi, ma non è perfetto.

Sketch ha uno strumento reattivo intelligente chiamato Smart Layout . I progettisti possono creare componenti reattivi e, ogni volta che il loro contenuto viene modificato, i componenti si adattano alla modifica, consentendo maggiore flessibilità e flussi di lavoro più rapidi.

Con Smart Layout , i progettisti possono creare facilmente pulsanti che si ridimensionano automaticamente mantenendo margini e spazi interni coerenti, indipendentemente dalla lunghezza delle etichette di testo. Smart Layout funziona anche con i gruppi.

Adobe XD ha recentemente implementato una funzione di "ridimensionamento reattivo", ma è ancora in ritardo rispetto a Sketch.

➠ +1 su Sketch per funzionalità di progettazione reattive rapide e facili.

Plugin

Tra una sovrabbondanza di strumenti di progettazione digitale, Sketch ha uno degli ecosistemi di plug-in più robusti. Avere migliaia di plug-in è una delle caratteristiche più interessanti di Sketch e gli sviluppatori creano continuamente plug-in utili che estendono le funzionalità di Sketch.

La raccolta di plugin di Adobe XD impallidisce al confronto. Anche se lo stesso sviluppatore crea una versione XD di un plug-in di Sketch, XD è troppo recente perché il plug-in possa essere ampiamente adottato. Inoltre, molti nuovi plug-in XD non aggiungono abbastanza valore ai designer per accettarli.

➠ +1 su Sketch per il suo vasto ecosistema di plugin.

Prototipazione

Con Auto-animate , Adobe XD ha alzato la posta in gioco per la prototipazione. Utilizzando la funzione di animazione automatica "intelligente", i designer possono creare transizioni di bell'aspetto nei prototipi per visualizzare il movimento dei contenuti sugli schermi. XD può anche aggiungere suoni ai prototipi con una nuova "azione" che riproduce effetti sonori e altri file audio in risposta ai trigger.

Sketch ha alcune operazioni di pulizia di base tra gli schermi per la prototipazione, ma non offre la stessa fluidità con le microinterazioni. Non è certo quando Sketch possa aggiungerli. L'obiettivo, a quanto pare, è più sull'incorporazione di altre preziose funzionalità, come gli assistenti in Sketch.

I creatori di Sketch molto probabilmente ritengono che ci siano molti altri strumenti per creare prototipi con microinterazioni altamente dettagliate, come ProtoPie. È potente e può importare facilmente progetti da Sketch, Figma e Adobe XD.

Sia Sketch che Adobe XD sono testa a testa quando si tratta di fornire app per visualizzare in anteprima i prototipi su dispositivi mobili: Sketch Mirror e Adobe XD . Le app portano il prototipo progettato su un desktop allo schermo mobile tramite un cavo USB o wifi.

➠ +1 su Adobe XD per transizioni animate automaticamente per visualizzare i prototipi.

Collaborazione di squadra

Entrambi gli strumenti offrono collaborazione in team. Sketch include Sketch for Teams in cui i designer che utilizzano un'area di lavoro cloud condivisa possono condividere idee, rimanere sincronizzati con le librerie cloud condivise , controllare lo stato di avanzamento di altri progetti del team e lasciare feedback sui progetti, tutto in un unico posto.

Inoltre, le parti interessate e i collaboratori invitati che non hanno accesso all'app Sketch possono visualizzare, esaminare e commentare i progetti nel browser. Il trasferimento degli sviluppatori è anche integrato in Sketch utilizzando Sketch for Teams .

Al momento della stesura di questo documento, la versione premium di Adobe XD consente ai team di modificare insieme i file XD con altri designer (online e offline) tramite Creative Cloud, condividere file per la revisione e distribuire facilmente le specifiche agli sviluppatori. Tutte queste funzionalità sono attualmente in versione beta .

➠ +1 su Sketch per una semplice collaborazione in team.

Consegna dello sviluppatore

La consegna dei progetti agli sviluppatori è un passaggio cruciale e sia Adobe XD che Sketch lo gestiscono ugualmente bene. Condividendo i progetti tramite piattaforme online, i designer possono generare specifiche e collaborare con gli sviluppatori per aiutarli a trasformare i progetti in siti Web e app.

➠ +1 su Adobe XD e +1 su Sketch per il trasferimento degli sviluppatori.

Controllo della versione e librerie condivise

Il controllo delle versioni dei file di progettazione è essenziale quando si lavora con altri designer sullo stesso progetto. Facilita inoltre la collaborazione del team e il feedback sulla progettazione in modo più efficiente. Sketch ha recentemente integrato queste funzionalità in Sketch for Teams . Con Sketch Cloud , i progettisti possono condividere file di progettazione e librerie che semplificano il lavoro con i sistemi di progettazione su team distribuiti.

Adobe XD ha anche un sistema di controllo delle versioni dei file cloud con Adobe Creative Cloud. Sebbene il sito Web di Creative Cloud conservi le versioni dei file XD, non è possibile ripristinare le versioni precedenti. Per ripristinare una versione precedente, i progettisti devono aprire il file in Adobe XD tramite il sito Web di Creative Cloud, quindi copiare e incollare il contenuto nel documento corrente. Anche le versioni dei file vengono eliminate automaticamente dopo 30 giorni, a meno che non siano nominate o aggiunte ai preferiti. In altre parole, non è un processo continuo.

Come Sketch, anche XD consente ai team di utilizzare facilmente le risorse condivise utilizzando Creative Cloud Libraries. I designer possono portare colori, stili di carattere e grafica in XD da queste librerie.

➠ +1 su Sketch per un facile controllo delle versioni dei file e librerie condivise nel cloud.

Modalità scura

Ha un bell'aspetto e fa risaltare i design

Molti designer preferiscono lavorare in stanze poco illuminate per vedere le loro creazioni sullo schermo senza riflessi o abbagliamenti. Un'interfaccia utente in modalità oscura si adatta bene a quell'ambiente. Fornisce un contrasto eccellente per quasi tutti i colori e rende il contenuto visivo più sorprendente.

La modalità oscura non solo ha un bell'aspetto, ma è anche nota per ridurre al minimo "l'affaticamento della vista digitale". Ammettiamolo, i designer fissano gli schermi per la maggior parte della giornata. L'affaticamento visivo digitale è una condizione comune che colpisce milioni di persone. Causato da qualsiasi cosa, dall'uso eccessivo del computer all'esposizione regolare a una luce intensa, può causare mal di testa, dolore al collo, visione offuscata e bruciore/bruciore agli occhi.

Accentua ed evidenzia i colori

Sketch supporta la modalità oscura da Sketch 52 (ottobre 2018). Supporta anche le preferenze di colore Accento e Evidenzia globali di macOS Mojave. Le opzioni selezionate che sono evidenziate nel pannello Livelli, Impostazioni e altrove nell'app corrisponderanno alle preferenze di sistema.

La modalità oscura non è disponibile in Adobe XD, nemmeno su macOS.

➠ +1 su Schizzo per la modalità oscura.

Il vincitore di Adobe XD vs Sketch Showdown è... Sketch

Sketch vince la battaglia per la supremazia degli strumenti di progettazione con un vantaggio significativo su Adobe XD.

In alcuni scenari, la scelta è ovvia: Sketch non è disponibile per Windows. Un notevole vantaggio per gli abbonati Adobe Creative Cloud è anche che il "piano iniziale" di XD è gratuito, anche se presenta notevoli limitazioni.

La versatilità di Sketch dovrebbe costringere i designer su macOS a scegliere Sketch su XD. La sua interfaccia, i plug-in, le funzionalità di collaborazione, gli strumenti di progettazione reattiva, i simboli riutilizzabili, le librerie condivise e altre utili funzionalità superano quelle di Adobe XD.

Vale la pena notare che non è possibile spostare i file di progettazione da XD a Sketch . La transizione da Sketch (e Photoshop o Illustrator) a XD è più semplice perché XD può aprire file di Sketch. Alcuni problemi possono verificarsi quando si utilizzano plug-in solo per Sketch come Abstract o InVision Craft, ma questo può essere evitato con un po' di pulizia.

Alcuni designer adorano Adobe XD per la sua funzione di animazione automatica. È una caratteristica interessante che rende i prototipi fantastici. Tuttavia, i designer devono tenere a mente che è solo un attributo di fantasia. Considerando i vantaggi di Sketch vs XD, i compromessi non valgono la pena. Sono disponibili molti sofisticati strumenti di prototipazione che funzionano perfettamente con Sketch.

La battaglia non è ancora finita. I prossimi anni dovrebbero vedere un'intensa guerra a tutto campo tra Adobe XD e Sketch. Alla fine, sono i progettisti che trarranno vantaggio dall'aggiunta di ulteriori funzionalità a entrambi gli strumenti di progettazione. Renderà la loro vita lavorativa quotidiana molto più semplice, e questo è qualcosa da aspettarsi con impazienza.

Fateci sapere cosa ne pensate! Si prega di lasciare i vostri pensieri, commenti e feedback qui sotto.

• • •

Ulteriori letture sul blog di Toptal Design:

• Progetta con precisione: una recensione di Adobe XD
• Esplorazione del design multimodale: un tutorial di Adobe XD
• Forma e funzione: una guida ai migliori strumenti Wireframe
• Padroneggia il tuo mestiere con questi migliori strumenti UX
• I migliori portfolio di designer UX: casi di studio ed esempi stimolanti