10 plug-in gratuiti per gli sviluppatori Web

Schizzo sta ottenendo molta trazione tra i web designer e gli sviluppatori. Questo è probabilmente perché lo è intuitivo, facile da imparare e ha molte caratteristiche che rendono molto più facile la creazione di un prototipo di sito web. Può anche essere perché questa applicazione è estensibile, cioè puoi aggiungere facilmente nuove funzionalità all'applicazione con l'aiuto di plugin.

Ecco 10 plugin che possono aiutarti ad aumentare la tua produttività quando lavori con Sketch. Ci sono diversi, che vanno dai generatori di contenuti, al selettore della tavolozza dei colori, e possono aiutarti a visualizzare le misurazioni dei livelli o aggiungere automaticamente il riempimento a un livello.

1. Buddy CSS

Amico CSS ti consente di aggiungere il CSS al tuo livello nell'area di lavoro Schizzo. Fondamentalmente, puoi applicare larghezza, altezza, opacità, riquadro-ombra, bordo e sfondo al livello usando CSS.

Con questo plugin installato, basta selezionare un layer e poi selezionare Applica a selezionato dal menu del plugin. Una finestra di dialogo ti chiederà di inserire il tuo foglio di stile. Aggiungi il contenuto CSS senza la classe CSS e guarda che il tuo livello prende forma.

2. Tavolozza colori disegno materiale

Se segui la tendenza del Material Design, una cosa importante che noterai è l'uso di colori distintivi. Material Design ha una fantastica tavolozza di colori. Ora puoi portarlo nel tuo spazio di lavoro con Plug-in Tavolozza colori design materiale.

Questo plugin genererà palette di colori in pochi secondi senza dover chiudere lo spazio di lavoro. Scegli Tonalità, Valore o Campione per generare una tavolozza di colori adatta al tuo progetto.

3. Schizza Notebook

A volte abbiamo bisogno di mostrare ciò che facciamo in un commento o tramite la documentazione. Se stai lavorando a progetti con altri designer o al coinvolgimento di un cliente, questo è anche necessario per assicurarti che il risultato sia quello a cui tutti miravano.

Sketch Notebook è un plugin per documentare facilmente la tua progettazione in Sketch. Aggiungerà una barra laterale aggiuntiva al tuo spazio di lavoro, che contiene commenti che aggiungi a qualsiasi elemento del tuo progetto. Puoi riordinare i commenti, riallineare, eliminare e attivare la visibilità dei commenti.

4. Giocatore del giorno

Prima di utilizzare immagini reali in un disegno, utilizziamo spesso immagini segnaposto per accelerare il processo di progettazione. Per Sketch, puoi usare Giocatore del giorno per aggiungere segnaposti personalizzati a qualsiasi livello nell'area di lavoro di Sketch da 6 servizi immagine segnaposto tra cui Placehold.it, LoremPixel e Unsplash. Una volta attivato, puoi impostare la larghezza, l'altezza e altre informazioni dell'immagine.

5. Generatore di contenuti

Abbiamo già un plug-in per inserire le immagini segnaposto, che ne dici di una per i contenuti generali? Generatore di contenuti ti aiuta ad aggiungere dati fittizi come avatar, nomi, dati di geolocalizzazione e altro ancora. Funziona alla grande per i modelli mockup e per ridurre il mal di testa dal cercare di capire come generare dati sul posto.

Per aggiungere i dati fittizi, basta selezionare un livello, quindi selezionare Plugin> Generatore, e scegliere Geo, personaggio o Fotografie.

6. Misura dello schizzo

Misura dello schizzo è uno strumento di misurazione per Sketch. Misura la lunghezza o la dimensione di un livello (o di un layer) nel tuo progetto. Hai anche la spaziatura e il margine di un livello oltre alla distanza tra due strati. Schizzo La misura può anche stampare le proprietà del livello, come colore, bordo e opacità. Tutte le misure possono essere visualizzate tramite scorciatoie da tastiera.

7. Pulsante dinamico

Pulsante dinamico ti aiuta a creare facilmente un pulsante con imbottiture fisse. Regolerà automaticamente il padding in base al valore che fornisci, indipendentemente dalla lunghezza del testo. Con il plugin installato, un testo può essere convertito in una struttura con la scorciatoia Comando + J. La quantità di padding richiesta può quindi essere aggiunta al livello di testo (0: 0: 0: 0) (sotto il gruppo dei pulsanti flessibili).

8. Scala tipografica

Typographic Scale è un plugin per trasformare il livello di testo selezionato in scala tipografica. Per usare questo plugin, basta selezionare il livello di testo (singolo o multiplo) o il livello misto che contiene almeno un livello di testo, quindi selezionare Plugin> Scala tipografica e regolare il valore sulla finestra di dialogo. Il risultato è un insieme di testo in scala che segue le regole della scala tipografica.

9. Modulizzatore

Con MODULIZER puoi controllare i pad per pulsante, modulo o aree del tuo progetto con la scorciatoia da tastiera Maiusc + Comando + M. Puoi combinare tutti i tuoi livelli, raggrupparli e usare la scorciatoia per regolare automaticamente il tuo padding in base al valore di padding di cui hai bisogno . Guarda la demo del video per vedere questo in azione.

10. Lama

Hai mai pensato di convertire il tuo disegno dallo schizzo all'HTML? Se è così, probabilmente dovresti prenderlo Lama, un plug-in di Sketch che genera automaticamente file HTML dal tuo progetto. Converte il gruppo in div, testo in p e così via.

Quando usi Blade, puoi dire al plug-in quale elemento DOM generare aggiungendo un nome speciale al livello, ad esempio [btn] o input [testo], così Blade sa cosa dovrebbe fare. Guarda questa demo video per un look interiore.

Ora Leggi: 12 plugin utili per gli sviluppatori di WordPress