Vi understøtter nu Sketch Shared Libraries og MaterialUI CSS

Seneste version & dokumenter

Introduktion af Sketch2React - Reelle kodekomponenter inde i Sketch

Den største forskel mellem dette og andre prototype-værktøjer er, at du ** designer med reel kode **. Det giver dig høj trofaskode lige fra Sketch.

Hvad er dette?

Gå fra .sketchfiles (via vores rammer) for at kode virkelig hurtigt!

Sketch2React er:

  • Framework, kode-app, plugin
  • Komponent HTML5-eksport
  • Komponent Vanilla React + React Export

Faktisk er vi den eneste gratis Sketch-app til kode-rammer, der findes

Hurtigt overblik

  • Design med kodestykker, der er nemme at lære! Det er mere som Markdown
  • Fuldt lydhør
  • Nul plugins, fungerer naturligt i Sketch-appen
  • Visuel måde at lære mere om kode på
  • Behandl lagvisningen i Sketch som en meget enkel kodeditor
  • Brug CSS-plugins
  • Offline-tilstand & genindlæst
  • Byg hele statiske websteder direkte fra indersiden af ​​Sketch
  • Eksporter til HTML-pakke, der inkluderer .html, css og alle relevante filer
  • Eksport til React-kode & komponenter

Softwarekrav

  • Skitse 56–57.1
  • Sketch2React Code-app
  • OSX Mojave

Hvorfor byggede vi dette?

Både Fredrik og jeg er meget nysgerrige af natur, og vi er helt besatte af at forsøge at arbejde smartere og smartere hver dag. Vi tænker “oookey, så Juan designer ting inden i Sketch og derefter sender det over til Fredrik via Zeplin og derefter koder Fredrik det med React”. Pretty standard design + udviklingsprocedure anno 2018 ville du ikke sige? Jep.
Sååååå vent. Hvad hvis vi kunne designe og bygge ting direkte inde i Sketch og allerede indstille ting som søjler, marginer, polstringer, mediekøer osv osv? Og brug Bootstrap i baggrunden, så vi får det berømte gitter og lydhørhed? Plus alle disse søde komponenter. Bom

Et lykketræf

I processen med at opbygge en ægte Sketch to React-arbejdsgang opdagede vi flere fantastiske ”bivirkninger”. Vi ønskede at være i stand til at se vores design + -kode-prototyper på vores telefoner, så vi havde brug for at kunne downloade .html-filer af hvert tegnebræt, der er gengivet via vores React-app. Men vent! Skrifttyperne ser underlige ud. Ja, vi er nødt til at være i stand til at have en slags {externalasset.css} ting til Google-skrifttyper (eller andre). Kontrollere. Woooooow vent et øjeblik. Hvad ellers er en skrifttype, men også et ikon? Ikonskrifter selvfølgelig!
Hold fast. WTF Jeg kan oprette enkle websteder nu lige ud af Sketch? Ja du kan. Her er en vanille-demo, 100% udført inden i Sketch.

En anden sej ting. Det viser sig at opbygge ægte HTML-prototyper inden for Sketch, som du kan lægge på dine egne sikre servere, er perfekt til brugertest. Bare tilslut Hotjar, og du er god til at gå.

Et par gode ressourcer

  • Vejledninger
  • Hvordan det virker
  • Snydeark
  • Udgivelses noter