Acum acceptăm Bibliotecile partajate cu schița și MaterialUI CSS

Ultima versiune și documente

Introducerea Sketch2React - Componentele codului real din Sketch

Cea mai mare diferență între aceasta și alte instrumente de prototipare este că proiectați cu cod real **. Acest lucru vă oferă un cod de fidelitate ridicat chiar din Sketch.

Ce este asta?

Treceți de la .sketchfiles (prin cadrul nostru) la codul cu adevărat rapid!

Sketch2React este:

  • Cadru, aplicație de cod, plugin
  • Export componentă HTML5
  • Componentă Reacție vanilie + Export reacție

De fapt, suntem singura aplicație de schiță gratuită pentru a folosi un cadru de cod care există

Prezentare rapidă

  • Proiectați-vă cu fragmente de cod ușor de învățat! Este mai mult ca Markdown
  • Complet răspuns
  • Pluginele zero, funcționează nativ în aplicația Sketch
  • Mod vizual de a învăța mai multe despre cod
  • Tratați vizualizarea straturilor din Sketch ca un editor de cod foarte simplu
  • Utilizați pluginuri CSS
  • Mod offline și reîncărcare la cald
  • Creați site-uri web statice direct direct din interiorul Sketch
  • Exportați în pachetul HTML care include .html, css și toate fișierele relevante
  • Exportați pentru a reacționa codul și componentele

Cerințe software

  • Schița 56–57.1
  • Sketch2React Code App
  • OSX Mojave

De ce am construit asta?

Atât Fredrik, cât și mine, suntem foarte curioși prin natură și suntem total obsedați de încercarea de a lucra mai inteligent și mai inteligent fiecare în fiecare zi. Noi, unde gândim „oookey so Juan proiectează lucruri în Sketch, apoi îl trimite lui Fredrik prin Zeplin și apoi Fredrik îl codează cu React”. Destul de proiectare standard + procedură de dezvoltare anno 2018 nu vrei să spui? Da.
Sooooo așteaptă. Ce se întâmplă dacă am putea proiecta și construi chestii direct în Sketch, deja setând lucruri precum coloane, margini, căptușeli, mesaje media etc etc? Și folosiți Bootstrap în fundal, astfel încât să obținem faimoasa grilă și receptivitate? În plus, toate aceste componente dulci. Boom

Serendipity

În procesul de construire a unui adevărat flux de lucru Sketch to React, am descoperit câteva „efecte secundare” uimitoare. Am dorit să putem vizualiza prototipurile de design + cod pe telefoanele noastre, așa că am fost nevoiți să putem descărca fișiere .html ale fiecărei tablouri arteriale redate prin aplicația React. Dar asteapta! Fonturile arată ciudat. Da, trebuie să putem avea un fel de chestie {externalasset.css} pentru fonturile Google (sau altele). Verifica. Woooooow așteaptă un minut. Ce altceva este un font, dar și o pictogramă? Fonturi de icoane, desigur!
Stai asa. WTF Pot construi site-uri simple acum direct din Sketch? Da, poti. Iată o demonstrație de vanilie, realizată 100% în Sketch.

Un alt lucru mișto. Se pare că construirea de prototipuri HTML adevărate în Sketch pe care le puteți pune pe propriile servere sigure este perfectă pentru testarea utilizatorului. Doar conectează Hotjar și ești bine să mergi.

Cuplu de resurse bune

  • Tutoriale
  • Cum functioneaza
  • Cearșaf
  • Note de lansare