Contenuto
- 01. Copia e incolla guide
- 02. Sketch Cleaner
- 03. Anima
- 04. React Sketch.app
- 05. Git Sketch Plugin
- 06. ImageOptim
- 07. Specchio magico
- 08. Esporta di più
- 11. Marketch
- 12. Cerchi segmentati
- 13. Sketch Runner
- 14. Carattere icona
- 15. Trova e sostituisci
I plugin di Sketch aiutano a rendere Sketch ancora migliore. Sketch è lo strumento di web design dell'interfaccia utente preferito da molti e parte di ciò che rende così buono è la comunità di persone che lavorano per estenderne le funzionalità e le caratteristiche creando plug-in personalizzati.
La gestione dei plug-in di Sketch è ora più semplice che mai. I plugin si aggiornano automaticamente e quelli obsoleti sono disabilitati. A rendere l'ecosistema di plug-in ancora più utile è Sketch Cloud, un servizio di condivisione di file a cui chiunque può iscriversi, dove è possibile visualizzare, scaricare e commentare i documenti di Sketch che sono stati condivisi pubblicamente o privatamente direttamente da Sketch.
Quindi diamo un'occhiata ai migliori plugin di Sketch in circolazione, quelli che potrebbero cambiare drasticamente il modo in cui progettate le interfacce utente. Una volta individuato quello che desideri, leggi come installare i plug-in di Sketch. Se ami i tuoi strumenti web, non perdere i nostri strumenti di web design preferiti, la creazione di siti web e le raccolte di archiviazione cloud. E ricorda, la tua scelta del provider di web hosting è fondamentale per il successo del tuo sito (la nostra guida ti aiuterà).
01. Copia e incolla guide
- Scaricalo qui
- Prezzo: Gratuito
- Sommario: Copia, incolla o rimuovi le guide dalle tue tavole da disegno
Ogni designer ha un rapporto di amore / odio con le guide. A volte sono assolutamente essenziali e il resto del tempo ti ostacolano. Se utilizzi le guide invece dell'opzione di layout di Sketch, cambiarle per più tavole da disegno può essere un incubo, ma con questo plug-in è facile copiare, incollare e rimuovere le guide da tutte le tue tavole da disegno.
02. Sketch Cleaner
- Scaricalo qui
- Prezzo: $2
- Sommario: Ottieni i tuoi file di progettazione puliti come un fischio
Qualsiasi progetto di Sketch che abbia subito alcune iterazioni è destinato a raccogliere un po 'di spazzatura lungo il percorso, come livelli nascosti, posizioni dei bordi incoerenti e stili di livello inutilizzati.
Anche se non è la fine del mondo avere un file Sketch disordinato, potrebbe influire sul passaggio di consegne e renderà la vita più facile a chiunque debba dargli un senso lungo la linea. Piuttosto che passare tutto a mano, usa Sketch Cleaner per affrontare automaticamente tutti i problemi comuni.
03. Anima
- Scaricalo qui
- Prezzo: Libero verso l'alto
- Sommario: Crea prototipi reattivi e ad alta fedeltà
Precedentemente disponibile come plug-in gratuiti separati - Auto Layout e Launchpad - Anima è ora un plug-in all-in-one progettato per aiutarti a creare layout reattivi con pin, stack e padding e prototipi ad alta fedeltà che si adattano a tutti gli schermi. Esiste ancora una versione gratuita che supporta un progetto; per progetti illimitati, il prezzo parte da $ 25 al mese.
04. React Sketch.app
- Scaricalo qui
- Prezzo: Gratuito
- Sommario: Renderizza i componenti React allo schizzo
La gestione delle risorse di progettazione in Sketch può essere difficile. Questo pratico plug-in Sketch fornisce un modo più semplice e affidabile per gestire le tue risorse. Implementa i tuoi progetti nel codice come componenti React, quindi usa questo plugin per renderli in sketch. Inoltre, semplifica il recupero e l'implementazione di dati reali nei file di Sketch.
React Sketch.app è stato sviluppato da Airbnb per essere utilizzato con il suo sistema di progettazione, con l'obiettivo di contribuire a colmare il divario tra designer e sviluppatori.
05. Git Sketch Plugin
- Scaricalo qui
- Prezzo: Gratuito
- Sommario: Un client Git integrato in Sketch
Questo plugin mira a portare il controllo della versione in Sketch. Funziona esportando un'immagine per ogni parte del progetto, quindi generando differenze piuttosto diffuse in modo che sia chiaro quali modifiche sono state apportate. Documentando ogni fase del processo di progettazione, tutti i membri del team possono vedere come è progredito il progetto.
Git Sketch Plugin è stato creato da Mathieu Dutour, che da allora è passato alla creazione di un sistema di controllo delle versioni a pagamento più completo chiamato Kactus.
06. ImageOptim
- Scaricalo qui
- Prezzo: Gratuito
- Sommario: Ottimizzazione dell'immagine in Sketch
Sebbene Sketch offra la propria soluzione per l'ottimizzazione dei file SVG, non esiste una gamma di opzioni per la compressione di immagini JPG e PNG. Poiché ImageOptim offre un servizio solido da diversi anni, è logico che porti questa funzionalità a Sketch.
Qualsiasi designer che si preoccupa dei tempi di caricamento e dell'ottimizzazione delle immagini (che dovrebbero essere tutti i designer) dovrebbe aggiungere ImageOptim alla propria cassetta degli attrezzi. Tieni presente che oltre al plug-in, avrai bisogno dell'app di base ImageOptim (gratuita) installata sul tuo sistema macOS e devi comunque contrassegnare i livelli come esportabili in Sketch (vai a "Esporta e ottimizza tutte le risorse" per iniziare).
07. Specchio magico
- Scaricalo qui
- Prezzo: Da $ 4 / mese
- Sommario: Strumento di trasformazione della prospettiva dell'immagine
Se stai cercando di realizzare prototipi di prodotti impressionanti ma devi continuare a saltare in Photoshop per affrontare le cose complicate, Magic Mirror potrebbe salvarti la vita. È uno strumento di trasformazione della prospettiva dell'immagine, che ti consente di creare modelli di prospettiva e altri effetti distorti senza mai lasciare Sketch.
08. Esporta di più
- Scaricalo qui
- Prezzo: Gratuito
- Sommario: Genera automaticamente immagini segnaposto
L'aggiunta di immagini segnaposto a un progetto è una parte necessaria della prototipazione, ma trovare le immagini effettive può essere una seccatura. Quindi, piuttosto che perdere tempo, lascia tutto a Day Player. Ciò ti consente di aggiungere immagini segnaposto personalizzate a qualsiasi documento Sketch, da una serie di diversi servizi di immagine segnaposto, quindi la decisione più importante che dovrai prendere sarà se desideri utilizzare Bill Murray, Nicolas Cage o gattini.
11. Marketch
- Scaricalo qui
- Prezzo: Gratuito
- Sommario: Genera una pagina html in grado di misurare e ottenere stili CSS
Se desideri recuperare gli stili CSS dai tuoi progetti Sketch, un plug-in come Marketch è assolutamente essenziale. Ti consente di esportare le tue tavole da disegno di Sketch come file zip pieno di documenti HTML che puoi quindi estrarre per estrarre un sacco di CSS dolci, pronti per l'uso.
12. Cerchi segmentati
- Scaricalo qui
- Prezzo: Gratuito
- Sommario: Crea una grafica circolare precisa
Ecco un modo rapido per creare cerchi segmentati per grafici e diagrammi. Questo plugin può produrre vari stili di diagramma circolare, inclusi cerchi tratteggiati e con segni di graduazione, e gli spessori sono controllati tramite un semplice elenco di valori separati da virgole.
13. Sketch Runner
- Scaricalo qui
- Prezzo: Gratuito
- Sommario: Spotlight per la ricerca
Sketch è molto amato per il suo flusso di lavoro minimalista da tastiera. Detto questo, ci sono sempre due o tre scorciatoie da tastiera che sembri sempre dimenticare o confondere con un'altra app di design come Photoshop - e non dimentichiamo quegli strumenti e funzionalità meno comuni che non hanno una scorciatoia da tastiera e sono nascosti in profondità nel Menu di schizzo.
Sketch Runner risolve questi problemi e lo fa in un modo che gli utenti di macOS conoscono bene: Sketch Runner è il macOS Spotlight, ma per Sketch.
14. Carattere icona
- Scaricalo qui
- Prezzo: Gratuito
- Sommario: Gestisci i caratteri delle icone
I caratteri delle icone sono un modo molto efficiente di utilizzare le icone nei tuoi progetti web senza dover esportare e ottimizzare una tonnellata di risorse di immagini. In genere facciamo riferimento ai caratteri dell'icona nel file testa> sezione delle pagine web HTML, come facciamo con CSS e JavaScript. Tuttavia, utilizzarli in Sketch è un po 'più complicato. Per fortuna, Icon Font lo rende facile.
Dopo aver scaricato e installato Sketch IconFont, scarica i file di font SVG o scarica questo pacchetto di font, che include i file di font per FontAwesome, Material Design Icons, Ion Icons e Simple Line Icons. Quando hai finito, vai a Plugin> Carattere icona> Installa un pacchetto di caratteri, seleziona i caratteri scaricati dalla finestra di dialogo Apri file, quindi vai a Plugin> Carattere icona> Inserisci griglia> [carattere dell'icona desiderato] per inserire un'icona.
Anche se intendi progettare un set di icone personalizzato per il tuo design, avere icone già pronte a tua disposizione può aiutarti con la prototipazione rapida nelle prime fasi della progettazione, aggiungendo un po 'più di chiarezza / fedeltà ai tuoi modelli a bassa fedeltà .
15. Trova e sostituisci
- Scaricalo qui
- Prezzo: Gratuito
- Sommario: Trova e sostituisci il testo nei livelli selezionati
Gli editor di testo non sono l'unico posto che devi trovare e sostituire: è utile anche in Sketch. Questo plugin ha molte opzioni avanzate e ti consente di cercare istanze di parole o frasi particolari nel testo nei livelli selezionati (e tutto ciò che è contenuto all'interno), quindi sostituirlo facilmente.
Pagina successiva: plug-in di Sketch più rapidi
