Kode med design - Sådan byggede vi et værktøj til at eksportere reaktive prototyper fra sketch

Hvert år, lige før ferien, dedikerer vi en uges tid på Tictail til at gøre noget, der ikke er en del af vores normale arbejde. Vi kalder dette Demo-ugen, og det er en fantastisk mulighed for at udforske nye ideer og samarbejde med mennesker, som du normalt ikke får arbejde med. Dette kan være en ny eksperimentel produktfunktion, en forbedring af en firmaproces, et LED-kort over live-indkøb eller noget andet, der ville forbedre Tictail. Som navnet antyder, skal det dog være noget, der kan dæmpes i slutningen af ​​ugen.

I år besluttede jeg og designer Petter Nilsson at undersøge muligheden for at opbygge et værktøj, der forbinder arbejdsgange mellem design og udvikling. Mere specifikt ønskede vi at opbygge et værktøj, der kan eksportere vores Sketch-design til fuldt interaktive React-applikationer. Ligesom Airbnb's React Sketch.app, men omvendt!

Nu lyder dette muligvis som et kæmpe projekt, der skal afsluttes om kun en uge, men vi besluttede et par begrænsninger af værktøjet for at gøre dette muligt:

  • Designet i Sketch kan kun bestå af foruddefinerede symboler, der kortlægger vores allerede implementerede React UI-komponenter.
  • Den eksporterede kode fungerer kun som en interaktiv prototype til at vise applayoutet og flyder mellem forskellige skærme, svarende til hvad Framer sigter mod at gøre. Koden kan bruges som udgangspunkt for produktionsimplementering, men den indeholder ikke rigtige produktionsdata eller forretningslogik.
  • Det er muligt at eksportere et lydhør layout, men designeren bliver nødt til at gøre det tunge løft for at finde ud af strukturen i rækker og kolonner ved at definere dem som navngivne grupper i Sketch.

Her er hvad vi endte med i slutningen af ​​ugen:

I betragtning af den begrænsede tid lykkedes det os at komme ganske langt langs den vision, vi satte os for at opnå. I dette blogindlæg vil jeg prøve at give en beskrivelse på højt niveau af, hvordan vi byggede dette værktøj.

Læsning af skissefiler

Med Sketchs nye åbne filformat er en Sketch-fil blot en lynlåset mappe med JSON-filer (og eventuelle bitmap-billeder, der er blevet brugt i designet). For at være i stand til let at få adgang til disse oplysninger og for at få automatisk genindlæst set ovenfor oprettede jeg en brugerdefineret Webpack-læsser. Læsseren pakker ud Sketch-filen i hukommelsen og returnerer JSON-filerne i et enkelt objekt:

{
  dokument: {...},
  meta: {...},
  bruger: {...},
  sider: {...},
}

Den mest interessante del her er siderobjektet, der indeholder hver side i skissedokumentet som et lag med lag. Et lag kan være en gruppe, tekstkomponent, symbol, rektangel osv., Hvor hvert lag muligvis har flere underordnede lag.

Loader bruger også Webpack's emitFile API til at gøre noget af bitmap-billederne tilgængelige efter deres stier på udviklingsserveren. Endelig, da de fleste af tekstdataene gemmes som binære plister, pakkes det ud af disse felter for at gøre dem læsbare i klienten. Du kan se loader i sin helhed i denne Gist.

Komponenter og rekvisitter

Nu hvor vi har adgang til Sketch-dataene, kan vi begynde at kortlægge dem til React-komponenter. Heldigvis, da dataene i Sketch er struktureret som et lag af lag, oversættes det rent til træet med React-komponenter, som vi ønsker at oprette. Vi kan blot krydse træet rekursivt og oprette den tilsvarende React-komponent for hvert lag, vi støder på.

Et lag i Sketch er for det meste enten en gruppe (en mappe med underordnede lag) eller et foruddefineret symbol (f.eks. En knap eller markeringsboks). Vi har også speciel håndtering af billed- og tekstlag. Grupperne følger en aftalt navnekonvention, som vi kan analysere for at kortlægge dem til containerkomponenter med mellemrum og justeringsrekvisitter.

For at kunne indstille alle rekvisitterne til brugergrænsefladekomponenter misbruger vi let Sketch's Symbol Overrides-funktion. I eksemplet nedenfor har vi et etiketfelt, der er visuelt repræsenteret i Sketch-dokumentet, men vi har også et antal skjulte felter, der kun bruges i den kortlagte React-komponent.

Disse felter indstilles automatisk fra den valgte indstilling i dropdown-feltet. Knappesymbolet, som vi oprettede i Sketch, kommer med et antal forskellige typer og tilstande, så du f.eks. Kan vælge mellem sekundære og primære knapper, og om knappen er deaktiveret eller ej.

Layout

Selvom det ville have været meget let at læse dimensioner og koordinater fra Sketch-dokumentet og absolut placere alt, besluttede vi, at en vigtig funktion for værktøjet var muligheden for at gøre den eksporterede app lydhør.

Vi har ofte løbet ind i situationer, hvor vi har et smukt design til standardstørrelsen af ​​mobil, tablet og desktop, men når du først har ændret størrelsen på vinduet mellem disse breakpoints, kan du muligvis finde forskellige problemer, der ikke var forventet i designet. Dette sker, fordi designeren ikke har værktøjerne til at se designet i alle mulige mellemstørrelser, før det er implementeret af udvikleren.

For at gøre dette muligt besluttede vi, at det er op til designeren at strukturere designet i form af rækker og kolonner, der overholder et standard 12-kolonne gitterlayout. Denne opgave er noget, der normalt overlades til udvikleren, når det er tid til at implementere designet, men med de rigtige værktøjer er det mere fornuftigt at få dette trin fundet ud allerede i designprocessen.

Alt hvad designeren skal gøre er at oprette grupper med navnet Row and Column, som elementerne er placeret inden i. Som med de fleste gitterlayouter, kan en række bestå af flere kolonner, og kolonner kan selv indeholde deres egne indlejrede rækker og fortsætte rekursivt så vidt du ønsker. Når koden løber gennem denne struktur, kan den automatisk registrere de tilsigtede størrelser for kolonnerne, og ved at se på de forskellige skærmstørrelser, som der er et tegnebræt til, kan vi kortlægge disse værdier til deres tilsvarende brudpunkter.

Fordele

Den måde, hvorpå React giver dig mulighed for at udtrykke dit UI på en deklarativ måde, åbner virkelig muligheden for at bygge værktøjer som disse. Når du har implementeret UI-komponenterne, der er dine grundlæggende byggesten til appen, giver det meget mening at bruge et visuelt værktøj til at arbejde med layout i stedet for en kodeditor. Kodeditorer er stadig gode, når de udfører det tunge programmeringsfokuserede arbejde, såsom at implementere din forretningslogik, men jeg synes, at vi som udviklere ikke burde være bange for at begynde at omfavne flere visuelle værktøjer, der kan håndtere noget af det stumme arbejde med programmering for os .

At have en mere tæt integreret arbejdsgang mellem design og udvikling har nogle store fordele:

  • Feedback loop for designere er enormt forkortet, da de ikke behøver at vente på den faktiske implementering eller opbygge prototyper ved hjælp af andre værktøjer til at teste brugeroplevelsen.
  • Designet tid bidrager til produktionskoden, da en hel masse triviel implementeringstid kan spares ved at basere koden på det arbejde, som designeren allerede har lagt i at definere layout og komponenter.
  • Ved at have en til en-kortlægning mellem UI-elementer i designet og de implementerede React-komponenter, kan designeren få en bedre forståelse af, hvor den aktuelle kode kan genbruges, og hvor nye komponenter skal implementeres.
  • Ved at give værktøjer til at definere, hvordan en app skal opføre sig responsivt, giver designeren mulighed for at bidrage til at finde ud af, hvordan komponenter passer ind i gitteret i forskellige størrelser, snarere end at overlade alt dette ansvar til udvikleren.

Bevæger sig fremad

Selvom det værktøj, vi har bygget i løbet af denne uge, gjorde det muligt for os hurtigt at forhåndsvise vores design som en interaktiv prototype, kom vi aldrig til den faktiske eksportfunktionalitet. At bygge værktøjet var bestemt en sjov læringsoplevelse, men slutresultatet endte ikke med at være meget mere end et bevis på koncept.

Da værktøjet er stærkt koblet til vores egne UI-komponenter, er der desværre ikke meget af det, som vi kan dele med resten af ​​verden. Men frygt ikke - der er allerede et væld af interessante open source-værktøjer, der begynder at dukke op inden for dette rum:

Det vil være interessant at følge udviklingen med disse værktøjer, og vi er glade for at se, hvordan vi kan integrere dette i vores design og frontend-udviklingsarbejdsgang.