{"id":61914,"date":"2022-03-07T11:55:01","date_gmt":"2022-03-07T10:55:01","guid":{"rendered":"https:\/\/rawfish.com\/?p=61914"},"modified":"2022-05-23T16:02:43","modified_gmt":"2022-05-23T14:02:43","slug":"figma-vs-sketch","status":"publish","type":"post","link":"https:\/\/rawfish.com\/it\/rawfish-adventures\/figma-vs-sketch\/","title":{"rendered":"Figma Vs Sketch: tra flessibilit\u00e0 e solidit\u00e0"},"content":{"rendered":"

[vc_row][vc_column width=”1\/1″][vc_column_text text_lead=”yes” uncode_shortcode_id=”897970″]<\/p>\n

Per alcuni anni dalla sua uscita, Sketch ha rappresentato il non plus ultra come strumento per lo sviluppo di interfacce digitali, creando dei nuovi standard qualitativi nell\u2019esperienza stessa della progettazione che ancora oggi sono considerati il meglio disponibile nel campo dello sviluppo di interfacce utente. Nonostante rappresenti ancora un software tra i pi\u00f9 avanzati per lo user interface design, non \u00e8 pi\u00f9 per\u00f2 l\u2019unico punto di riferimento per i digital designer. In particolare, il suo maggior concorrente, Figma, si sta imponendo come programma preferito dai designer. Sebbene sia di fatto un \u201cfiglio illegittimo\u201d di Sketch, da cui riprende il layout e copia molte delle features fondamentali, \u00e8 riuscito a ritagliarsi uno spazio notevole grazie ad alcune caratteristiche portanti che lo rendono pi\u00f9 pratico da utilizzare rispetto a Sketch. Vediamone di seguito alcune, e come i due programmi differiscono tra di loro.<\/span><\/h2>\n

[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/1″][vc_custom_heading uncode_shortcode_id=”125465″]Figma, una derivazione di Sketch?[\/vc_custom_heading][vc_column_text text_lead=”yes” uncode_shortcode_id=”125239″]La somiglianza tra l’interfaccia Figma e Sketch \u00e8 immediatamente evidente, e non \u00e8 casuale: il modello creato da Sketch rappresenta ancora lo stato dell\u2019arte da molti punti di vista, quindi i suoi concorrenti non hanno avuto bisogno di creare un sistema totalmente nuovo, ma solo aggiungere la propria sensibilit\u00e0 laddove necessario e migliorare gli aspetti che ritenevano privi di profondit\u00e0 o funzionalit\u00e0. Anche se Figma \u00e8 un’app basata su browser e non richiede alcuna installazione, la sua interfaccia ricorda evidentemente quella di Sketch, tanto che \u00e8 facile importare i file da quest\u2019ultimo in Figma e lavorare con una curva d’apprendimento minima, infatti se si conosce uno dei due sistemi, utilizzare l\u2019altro \u00e8 quasi automatico.<\/span><\/p>\n

In sostanza, l’app Figma \u00e8 una versione di Sketch basata su browser che ne ottimizza molti aspetti. Sono incredibilmente simili: sia Figma che Sketch hanno la canvas al centro, il pannello Propriet\u00e0 a destra (chiamato Inspector su Sketch), il blocco con i livelli a sinistra, gli strumenti in alto e persino le stesse shortcuts da tastiera. Una delle poche differenze risiede nella terminologia: su Figma, le tavole da disegno sono chiamate frames, e i simboli di Sketch sono chiamati componenti.<\/span>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/1″][vc_single_image media=”61916″ media_width_percent=”100″ uncode_shortcode_id=”285577″][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/1″][vc_custom_heading uncode_shortcode_id=”111297″]Il confronto: solidit\u00e0 contro flessibilit\u00e0.[\/vc_custom_heading][vc_column_text text_lead=”yes” uncode_shortcode_id=”140995″]Per cominciare, analizziamo le due caratteristiche vincenti di Figma, che per molti designer rappresentano il motivo principale per migrare da Sketch. Mentre quest\u2019ultimo \u00e8 un\u2019app nata per Mac, Figma \u00e8 una web app, di conseguenza non dipende dal sistema operativo per essere usato. Considerando i costi medi di un Mac, e come questi siano s\u00ec diffusi, ma non rappresentino la maggioranza dei device in uso, questo rappresenta un malus incredibile per la diffusione di Sketch. Al contrario Figma \u00e8 non solo trasversale a qualsiasi sistema operativo, ma in pi\u00f9 permette il lavoro in collaborazione sullo stesso file (secondo lo stesso principio di Google Docs per esempio) che \u00e8 molto pi\u00f9 funzionale rispetto alla stessa funzione di Sketch, laddove quest\u2019ultimo ha problemi anche scaricando i plug-in adatti, in quanto non compatibile con gli altri sistemi operativi se non attraverso un percorso abbastanza laborioso. Da questo punto di vista, Figma vince a mani basse il confronto, ed \u00e8 il motivo per cui ha guadagnato tanta popolarit\u00e0 dal momento della sua uscita. Un malus che purtroppo deriva da essere un\u2019app web based, \u00e8 per\u00f2 la necessit\u00e0 per Figma di lavorare sempre online, cosa che pu\u00f2 risultare a volte complicata in condizioni di rete non ottimali.<\/span><\/p>\n

Differente \u00e8 il discorso per quanto riguarda la disponibilit\u00e0 di plugins. In questo caso, la maggior anzianit\u00e0 di Sketch rappresenta il punto vincente, sebbene anche Figma stia correndo ai ripari. Sketch pu\u00f2 infatti vantare migliaia di plugin e funzionalit\u00e0 create da third parties (primo tra tutti Zeplin) che coprono praticamente qualsiasi aspetto del design che si possa immaginare, il che rende il programma in grado agevolare il lavoro del designer, offrendo soluzioni adatte alle sue necessit\u00e0. Come abbiamo detto, Figma si sta adattando per ovviare al gap, ispirandosi sempre alle linee guida di Sketch, ma nonostante l\u2019ottimo lavoro e la creazione continua di nuovi plugin e funzionalit\u00e0, sta ancora scontando il fatto d\u2019essere arrivato pi\u00f9 tardi sul mercato rispetto all\u2019illustre predecessore.<\/span><\/p>\n

Il prezzo delle due app \u00e8 un altro punto da analizzare. Figma certamente vince se si parla dell\u2019entry level, in quanto offre una versione limitata gratuita, utilissima per chi volesse cominciare ad acquistare dimestichezza con il programma. Sketch offre un piano annuale da 99$ che include il diritto di utilizzare tutti i plugin e gli update senza limiti, oltre a poter salvare nel cloud i propri progetti. Al termine della licenza, sar\u00e0 ancora possibile utilizzare il programma, ma gli update pi\u00f9 recenti verranno erogati solo quando si pagher\u00e0 di nuovo la rata. Per Figma, invece, si paga a seconda del numero di designers che lo utilizzano, con prezzi che variano dai 12 ai 45$ al mese. Soprattutto per gruppi di lavoro molto numerosi, questo rappresenta un costo molto oneroso a cui non tutte le aziende potrebbero o vorrebbero fare fronte.<\/span><\/p>\n

Altro punto a favore di Figma, si possono creare stili indipendenti a seconda del Testo, Colore, Tratto ed Effetti. Questi stili possono essere applicati a qualsiasi livello, come si preferisce. Pu\u00f2 essere applicato uno stile di testo e uno stile di colore, solo un’ombra o tutto insieme.<\/span><\/p>\n

In Sketch non \u00e8 possibile. Si hanno solo due tipi di stile utilizzabile: Testo e Stili di livello. Ogni propriet\u00e0 diventa parte di quello stile. In Figma, tutti i cambiamenti possono essere operati con pochi e semplici comandi, mentre in Sketch \u00e8 necessario un processo meno immediato e diviso su varie funzioni (ad esempio per cambiare colore \u00e8 necessario <\/span>combinare stili, simboli nidificati e altro ancora). L’approccio di Figma \u00e8 molto pi\u00f9 intuitivo e veloce.<\/span><\/p>\n

Le funzionalit\u00e0 di prototipazione integrate in entrambi i kit di strumenti di progettazione consentono di vedere come gli utenti interagiranno con il prodotto software. In poche ore \u00e8 possibile rendere cliccabile e interattivo il design statico in un unico spazio di lavoro. Figma ha implementato la prototipazione prima del suo concorrente, ottenendo un indubbio vantaggio su Sketch, sebbene anche quest\u2019ultimo sia corso ai ripari colmando in parte il gap tra i due programmi, migliorando la piattaforma con una funzione di prototipazione integrata nel 2018. In passato, i designers potevano utilizzare il plug-in di InVision per creare prototipi su Sketch.<\/span><\/p>\n

Un ultimo notevole vantaggio di Figma rispetto a Sketch \u00e8 che consente ai designer di aggiungere transizioni e animazioni avanzate al design. I prototipi realizzati attraverso Figma permettono di ottenere una visione pi\u00f9 chiara e vivida di come funzioner\u00e0 il loro prodotto.<\/span>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/1″][vc_single_image media=”61918″ media_width_percent=”100″ uncode_shortcode_id=”634870″][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/1″][vc_custom_heading uncode_shortcode_id=”140145″]L’opinione del nostro team.[\/vc_custom_heading][vc_column_text text_lead=”yes” uncode_shortcode_id=”102947″]Anche il nostro team di UI\/UX ha voluto dare la sua opinione riguardo al confronto tra i due programmi. Si nota ancora una certa propensione verso Figma, ritenuto pi\u00f9 versatile rispetto alla controparte. Sketch viene apprezzato soprattutto perch\u00e9 l<\/span>a gestione dei simboli di Sketch ci risulta ancora la pi\u00f9 comoda e immediata in quanto il software crea automaticamente una pagina adibita agli \u201casset madre\u201d favorendo la produzione di un file ordinato e un aggiornamento veloce delle componenti. Come contro, viene fatto notare che Sketch non permette la navigazione tra file differenti tramite tab bens\u00ec in finestre differenti e questo \u00e8 sicuramente un minus.<\/span><\/p>\n

Un discorso pi\u00f9 articolato viene fatto per quanto riguarda Figma. Tra i plus che i nostri designers apprezzano, troviamo,\u00a0 Il passaggio tra progetti differenti favorito dalla navigazione a tab, il <\/span>Selezionare un gruppo di oggetti che permette di visualizzarne la palette colori, la Gestione dell’allineamento degli elementi in gruppo anche senza artboard, la Funzione “send to back” e “bring to front” degli elementi, il Figjam (pi\u00f9 funzioni, un unico software), l\u2019Anteprima prototipo al volo, la Prototipazione pi\u00f9 potente e completa, il Sistema Variant pi\u00f9 potente per la gestione del design system.<\/span><\/p>\n

Non piacciono invece alcuni aspetti. S<\/span>arebbe comodo implementare la stessa gestione delle componenti di sketch, per non doverle disporre attivamente su un\u2019altra pagina<\/span>, utilizzare componenti di una libreria per velocizzare il processo di design di un progetto, processo che non faciliter\u00e0 necessariamente anche la produzione del prototipo, in quanto i componenti della libreria non possono essere collegati a quelli del file di lavoro. Infine, il sistema d\u2019Import di file Sketch non \u00e8 ottimizzato.<\/span><\/p>\n

In generale, vediamo come Figma abbia i numeri per imporsi, anche se Sketch non si lascer\u00e0 scalzare facilmente dalla sua posizione di dominio. Converr\u00e0 tenere d\u2019occhio anche altri programmi come adobe XD che stanno apportando migliorie continue, e potrebbero rappresentare alternative di un certo livello ai due programmi descritti nell\u2019articolo. Per quanto visto, comunque, la gara al momento \u00e8 principalmente tra la flessibilit\u00e0 di Figma e la solidit\u00e0 d Sketch.<\/span><\/p>\n

E voi, cosa ne pensate? Avete una preferenza per uno dei due programmi?<\/span>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/1″][vc_single_image media=”61920″ media_width_percent=”100″ uncode_shortcode_id=”569193″][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/1″][vc_column_text text_lead=”yes” uncode_shortcode_id=”233046″]Immagini da Creative Commons<\/a> e da NordWood Themes<\/a> su Unsplash<\/a>[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

[vc_row][vc_column width=”1\/1″][vc_column_text text_lead=”yes” uncode_shortcode_id=”897970″] Per alcuni anni dalla sua uscita, Sketch ha rappresentato il non plus ultra come strumento per […]<\/p>\n","protected":false},"author":9,"featured_media":61918,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[95],"tags":[],"class_list":["post-61914","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-rawfish-adventures"],"_links":{"self":[{"href":"https:\/\/rawfish.com\/it\/wp-json\/wp\/v2\/posts\/61914","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rawfish.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rawfish.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rawfish.com\/it\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/rawfish.com\/it\/wp-json\/wp\/v2\/comments?post=61914"}],"version-history":[{"count":0,"href":"https:\/\/rawfish.com\/it\/wp-json\/wp\/v2\/posts\/61914\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rawfish.com\/it\/wp-json\/wp\/v2\/media\/61918"}],"wp:attachment":[{"href":"https:\/\/rawfish.com\/it\/wp-json\/wp\/v2\/media?parent=61914"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rawfish.com\/it\/wp-json\/wp\/v2\/categories?post=61914"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rawfish.com\/it\/wp-json\/wp\/v2\/tags?post=61914"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}