12 plugin di Sketch gratuiti essenziali
Mentre Sketch 44 esce dalla versione beta, diamo un'occhiata a una delle migliori funzionalità di Sketch: l'enorme selezione di plugin open source.
La community di Sketch è estremamente disponibile e puoi trovare tantissimi plugin che miglioreranno radicalmente il tuo flusso di lavoro. In questo post tratterò i 12 migliori plug-in di Sketch che ogni designer dovrebbe avere.
1. Misura dello schizzo
Misura dello schizzo aiuta i designer a organizzare e delineare il loro lavoro per sviluppatori, project manager e altri membri del team.
Ma è anche incredibilmente utile ai lupi solitari che progettano e codificano tutti i loro progetti. Con il plug-in Misura è possibile delineare elementi che mostrano dimensioni specifiche larghezza / altezza per ottenere le misure corrette a colpo d'occhio.
Questo include tutti gli elementi della pagina come pulsanti, testo, icone e anche parti principali della tavola da disegno.
Con Sketch Measure puoi addirittura esportare le pagine in HTML / CSS con gli stili di pagina intatti. Certo che ci sono Strumenti Adobe questo può fare anche questo. Ma avere tutte queste funzionalità direttamente in Sketch rende il tuo lavoro molto più semplice.
2. InVision Craft
Qualche tempo fa il team di InVision ha annunciato un nuovo plug-in mestiere . Ma questo è più simile a una suite di plugin in cui ottieni tonnellate di funzionalità e scorciatoie extra.
Un esempio è il Plug-in dati che consente ai designer di estrarre testo / dati direttamente dalle API pubbliche sul Web. In questo modo puoi popolare automaticamente la tua app con contenuti e immagini reali al volo.
Gli sviluppatori di InVision aggiornano costantemente le funzionalità di Craft con nuovi plugin per renderlo ancora più prezioso per i progettisti. E ho detto che è totalmente gratuito?
Fino ad ora, Craft ha 6 funzionalità principali del plugin, che meritano di essere aggiunte al tuo flusso di lavoro di progettazione.
- A mano libera - collaborazione in tempo reale in Sketch
- Prototipo - prototipazione dinamica ad alta fedeltà
- Sync - sincronizzazione istantanea tra prototipi InVision e Sketch
- Dati - estrae dati reali dal web nel tuo mockup di Sketch
- Biblioteca - Progettare risorse nel cloud condivisibili con l'intero team
- Duplicare - clonazione UI fulmineo
Dai un'occhiata al Homepage del mestiere e vedi cosa ne pensi. Una volta provato, non vorrai più tornare indietro.
3. Casella degli strumenti Schizzo
Ogni utente di Sketch dovrebbe conoscere il Sketch Toolbox . È un plugin manager squisito che semplifica l'installazione / personalizzazione dei plugin.
Con questo Toolbox puoi sfogliare centinaia di plug-in di Sketch e scegliere quelli che vuoi installare. Fai semplicemente clic su ciò che desideri e verrà scaricato automaticamente sul tuo computer, pronto per l'uso.
E la Sketch Toolbox aggiorna automaticamente i plug-in per farli funzionare senza intoppi.
Tecnicamente questo è ancora in beta e riceve sempre nuovi aggiornamenti su GitHub . Ma penso che sia abbastanza solido da poter essere utilizzato in un flusso di lavoro di produzione. In realtà, direi che un buon flusso di lavoro di Sketch non sarebbe completo senza questo incredibile gestore di plugin.
4. Esporta risorse
Uno dei compiti più dettagliati di un designer è l'allocazione delle risorse e la condivisione con gli sviluppatori. Tutte le icone, i grafici, i pattern di sfondo, tutti questi elementi devono essere esportati (di solito a mano).
Il Esporta plug-in di asset rende questo processo un gioco da ragazzi. Basta notare che questa presa è stata creata appositamente per le app mobili in cui i progettisti devono esportare risorse di interfaccia Android / iOS. Ciò include le risorse di retina per le dimensioni dello schermo @ 2x e @ 3x.
Non ho visto nessuna funzionalità correlata al web design retina, ma puoi controllare il Esportatore di sketch anche plugin. È attualmente in versione beta ed è pensato per essere una versione migliorata dell'originale.
5. Generatore di contenuti
Il plug-in Craft che ho menzionato in precedenza offre la generazione di contenuti. Ma potresti volere qualcosa di un po 'più semplice di questo Content Generator di Timur Carpeev.
Con questo installato puoi compilare automaticamente più elementi di Sketch contemporaneamente con dati correlati come:
- Avatar utente
- Nome e cognome
- Testo di paragrafo fittizio
- Stringhe personalizzate (geos, prezzi, numeri di CC card, ecc.)
Tutto il contenuto viene estratto da database open source come Unsplash e Uinames quindi puoi usarlo su più progetti, commerciali o meno.
6. Looper
Photoshop ha il proprio pannello Azioni in cui è possibile automatizzare azioni ripetute. Sketch non ha un pannello come questo ma ha il Plugin Looper che è completamente gratuito e super facile da imparare.
Questo è molto utile per creare pattern ripetuti che occupano l'intera pagina. I progettisti grafici possono trovare più utilità per questo plugin rispetto ai web designer, ma possono risparmiare un sacco di tempo per il ciclo attraverso attività di ridimensionamento / duplicazione ripetitive.
Dai un'occhiata al Homepage di Looper per vedere cosa può fare. Potrebbe non essere utile a tutti, ma per coloro che possono usarlo ti troverai risparmiando un sacco di tempo.
7. Disegna Iconfont
I web designer amano caratteri dell'icona . Le icone grandi rendono la progettazione dell'interfaccia utente molto più semplice ei file dei font sono generalmente più piccoli delle immagini.
Il Disegna il plugin Iconfont è una suite di gestione completa per l'archiviazione, l'ordinamento e il trasferimento dei caratteri dell'icona direttamente in Sketch. Per impostazione predefinita, il plug-in è vuoto, quindi è necessario scaricare localmente i font dell'icona per utilizzarli.
Ma questo ti garantisce l'accesso completo per lavorare con qualsiasi carattere di icona che trovi online. C'è in realtà a pacchetto di caratteri creato appositamente per questo plugin se stai cercando di riempire rapidamente la tua cartella iconfont. E puoi sempre setacciare il web per più tempo.
Consiglio vivamente di prendere una copia di questo plugin. I font di icone sono qui per rimanere e sono inestimabili per i siti Web moderni.
8. Inventario di stile
Ogni volta che si avvia un nuovo file di Sketch, è necessario ricreare gli stili da zero oppure è necessario copiare / incollare stili dai modelli precedenti.
Con il Plugin Stile Inventario puoi bypassare tutto questo lavoro extra. Bastano pochi clic per importare tutti gli stili precedenti direttamente nel nuovo documento di Sketch per un facile accesso.
Questi stili includono colori, stili di testo e simboli, insieme agli stili di livello per determinati elementi.
Questo plugin è raramente aggiornato, ma lo consiglio per la fusione di mockup simili. Potresti anche provare il Plug-in Tavolozze schizzo per il salvataggio e l'importazione di combinazioni di colori.
9. Pixel Perfecter
Ogni designer digitale si vanta di prototipi di pixel perfetti. Questo compito non è difficile ma richiede che ogni elemento di design sia perfettamente allineato alla griglia senza sovrapposizioni o imperfezioni.
Se vuoi controllare il tuo lavoro prima di esportarlo, puoi eseguirlo Pixel Perfecter . Questo piccolo plug-in controlla tutte le risorse del file per vedere se eventuali pixel superano le tradizionali posizioni coordinate X / Y creando pixel imperfetti.
Nota che questo non correggerà automaticamente questi valori dei pixel di offset. Troverà solo il / i livello / i che causano problemi e li evidenzierà in modo che tu possa entrare e correggerli da solo. Tuttavia, consente di risparmiare un sacco di tempo controllando manualmente ogni livello.
10. Pulsante dinamico
Il plugin di pulsante dinamico originale è stato in qualche modo abbandonato nel 2015, ma il più recente Pulsante dinamico il plugin è ancora migliore e compatibile con Sketch 3.5+.
Aggiunge automaticamente stili di riempimento e di pulsante su qualsiasi livello di testo creato, e il riempimento è dinamico in modo che si aggiorni indipendentemente dalle dimensioni del testo. Ciò è estremamente utile per i progettisti dell'interfaccia utente che apportano costantemente modifiche ai loro prototipi.
Questo può essere utilizzato anche per le app mobili in cui i pulsanti generalmente seguono una dimensione / rapporto fisso. Non è il plug-in Sketch più affascinante, ma fa bene il suo compito.
11. Compo
Se si desidera un generatore di pulsanti con alcune funzionalità extra, quindi Plugin Compo vale la pena provare
Il creatore di Compo ha avuto l'idea dopo aver usato il plugin Dynamic Button per un po ', alla fine volendo qualcosa di un po' più veloce. Compo genera automaticamente le dimensioni e le dimensioni del testo corrette in base alle specifiche esatte. Un clic e hai un componente Sketch funzionante che viene dimensionato e posizionato automaticamente correttamente.
Normalmente quando si crea un pulsante e si cambia il testo, questo avrà effetto solo sul livello del testo. Quindi il pulsante sottostante sarebbe troppo piccolo. Compo ridimensiona automaticamente il pulsante e il testo come se fossero un elemento.
Puoi trovare tonnellate di demo sul Repository GitHub insieme ad alcune guide per l'utente per iniziare.
12. CSSketch
Ultimo ma certamente non meno importante è il CSSketch collegare. Questo è molto utile per le combo designer + sviluppatore che vogliono l'accesso diretto al codice CSS per tutti gli stili che creano.
Ogni pagina che disegni può essere eseguita attraverso questo plugin per esportare un foglio di stile completo con tutte le risorse contabilizzate. Ma dal momento che questo è automatizzato non puoi aspettarti un codice di qualità A ++.
Continuo a preferire il codice CSS a mano, ma questo plugin offre almeno un punto di partenza per progettisti o sviluppatori non tecnici che desiderano risparmiare un po 'di tempo.
