Ho trovato uno script che fa esattamente questo (genera CSS e HTML per i livelli e offre un'opzione per esportarli in valori%) e dimezza il lavoro per il web-dev per Photoshop. Ora sono curioso di sapere se qualcuno si è imbattuto / a in un plug-in o può indicarmi una funzione nativa come quella per l'app Sketch. L'assenza di questo sta rendendo la mia transizione a Sketch davvero dolorosa. O essendo nuovo in Sketch, mi manca qualcosa di ideologicamente diverso nel modo in cui Sketch funziona con CSS e HTML.
Esiste una funzione o un plug-in "genera CSS / HTML" nell'app Sketch
Risposte:
Questa potrebbe non essere proprio la risposta che stai cercando, ma trovo che sia meglio consegnare agli ingegneri stili mediocri e generati automaticamente.
Markup selettivo
Sono sicuro che hai scoperto il grabber CSS del menu di scelta rapida di Sketch. Puoi selezionare quanti oggetti vuoi e otterrai il CSS negli appunti più velocemente di quanto tu possa incollarlo.
Naturalmente non ci sono selettori, in realtà sono solo note CSS. Ogni blocco è richiamato da un commento precedente usando il nome del layer, in questo modo:
/* Rectangle 1: */
background: #C7C1B5;
/* Rectangle 1 Copy: */
background: #F5E618;
/* Rectangle 1 Copy 2: */
background: #FFFFFF;Annotazione file
Sketch Measure è un plug-in che genera vari livelli di annotazione in base alle specifiche. C'è un video dimostrativo qui . L'idea di base è di annotare i numeri importanti e lasciare che lo sviluppatore scriva il proprio codice.
Oltre l'annotazione
Puoi anche provare strumenti come questi, da soli o in combinazione:
- Zeplin crea una versione autonoma e condivisibile del tuo disegno Sketch per l'ispezione del tuo sviluppatore, estraendo le specifiche su richiesta.
- Marvel è uno strumento di prototipazione che importa file di Sketch. Nulla comunica come un prototipo interattivo!
Generatore HTML sperimentale
Non l'ho mai usato ed è chiaramente nelle prime fasi di sviluppo, ma il plug-in Blade sembra promettente.
Blade è un plugin di Sketch 3 per la generazione automatica di HTML. Genera tag <div> per gruppo, tag <p> per testo, ecc.
1
Ho migliorato il Readme di Blade con una panoramica / guida sull'architettura per consentire agli altri di avere maggiori possibilità di lavorarci su per migliorarlo ulteriormente ... github.com/kristianmandrup/blade
Abbiamo rilasciato Protoship UIPad che fa esattamente questo. È un generatore di codice per Sketch che converte i progetti di Sketch in componenti HTML, CSS, SASS e React. Utilizza BEM per CSS e utilizza margini, padding, float e flexbox invece del posizionamento assoluto. protoship.io/tools/uipad.html .
—
Jasim,
"Siamo usciti" è fuorviante - Protoship è stata una lista d'attesa per un anno, e lo è ancora.
—
Chris Moschini,
Vedere i seguenti collegamenti http://blog.mengto.com/the-best-hidden-features-in-sketch/
Segui il blog di Meng To per rimanere aggiornato con interessanti tutorial, suggerimenti e persino trucchi di Sketch. http://blog.mengto.com/ https://designcode.io/
Ciao Kiodour, potresti per favore spiegare un po 'di più cosa troveremo dietro il link che fornisci e perché risponde alla domanda? In questo modo, la tua risposta ha ancora valore nel caso in cui il collegamento venga interrotto in un secondo momento. La marcatura dei link è la ragione principale per cui a noi non piacciono le risposte di soli link qui. Grazie per il tuo impegno e continua a contribuire!
—
AndrewH,