file-23
>

Sketch2React – Så började det

26 feb 2019

Sketch2React ligger högt upp i listan för 35 New Design Tools in 2019 och vi har haffat Fredrik och Juan för att prata om arbetet med Sketch2React, en lösning som fyller hålet mellan ux och frontend.

 

Vad är Sketch2React?

Sketch2React är både en produkt och ett fint samarbete mellan två medarbetare på Bouvet, Juan och Fredrik. Produkten suddar ut gränsen mellan design och frontend-utveckling.

– Vi jobbar med konversations-utveckling. Nej, det låter bättre på engelska. Conversational Product Design, skrattar Fredrik.

Hur kom ni på idéen med Sketch2React och hur började er resa? 

– För mig började det med ett samtal, berättar Juan. Vi hade börjat jobba ihop i ett projekt på Länsförsäkringar där vi skulle ta fram ett verktyg för att rådgivare skulle kunna hålla mer effektiva kundmöten. Som vanligt skissade och ritade jag upp flöden och design i Sketch, skickade det vidare till Fredrik via Zeplin (en app för specifikation och asset-export), varifrån han kollade på vad det jag designat och gjorde om allt igen, i kod. Så jobbar i princip alla med design och utveckling idag.

– Ett litet frö började gro i våra nyfikna hjärnor, fortsätter Juan. Tänk om man kunde göra mer, direkt i Sketch, och få ut riktig kod! Jag berättade för Fredrik att Sketchs filformat hade öppnats upp av Bohemian Coding (utvecklarna av Sketch) för något år sedan. Jag visade också en artikel där Airbnb Design berättade om sin plugin som gjorde tvärtom, de kunde skicka tillbaka saker till Sketch, från kod.

Fredrik började undersöka saken, nyfiken som han är.

– Jag hittade, eller om det var Juan som skickade, en artikel som handlade om ett par anställda på ett företag som hade gjort en PoC (Proof of Concept), läst Sketch-filer och genererat kod. De överförde inte utseende och stil från Sketch utan mappade bara en viss symbol mot en viss komponent i React, berättar Fredrik.

Nu började idéen att ta form och Fredrik testade att läsa innehållet i Sketch-filer för att sedan kunna generera färdiga komponenter i React. På vägen började Fredrik istället att använda "Reactstrap", en bootstrap-version för React.

– Tadaa. Responsiv kod automagiskt. Typ. Men fortfarande följde ingen "styling" med från Sketch, inte förrän jag fixade även det. Därefter fortsatte utvecklingen med export av html och till slut gick vi över till app till MacOS, byggd i Electron (där andra appar som till exempel Slack är byggda). Det gav nya möjligheter, till exempel "hot reload", paketering av kompletta projekt och bättre hantering av bilder. Och plötsligt blev projektet ballt.

file-24

Hur mycket tid lägger ni på detta?  

– Bra fråga, säger Juan. Jag har alltid hållt på med sidoprojekt på min fritid, främst musikskapande, men det har alltid varit väldigt ofokuserat. För två, tre år sedan blev jag inspirerad av ett par profilstarka individer inom design- och utvecklarvärlden, Pablo Stanley från InVision Studio och Meng To från Design+Code. De delade med sig av så mycket, gjorde tutorials, släppte verktyg gratis och inspirerade människor. Framför allt blev jag inspirerad att lära mig mer om kod. 

Inspirationen gav Juan lust att sprida sin kunskap vidare på samma sätt som Pablo och Meng gör.

– Allt går att lära sig, det handlar inte om vad, utan hur.

Juan började gå upp tidigare på morgonen, innan familjen vaknat, för att köra på. Det gick segt i början. Ett projekt tog över ett år.

– Jag gav mig tusan på att avsluta och släppa en första version. Jag gjorde det och fick väldigt bra respons. Därefter började jag skriva artiklar på "Medium" som mer var som skrivna tutorials. Jag insåg att det något mer behövdes, så jag började skapa videomaterial. Framför allt skrev jag, och gjorde videomaterial, om sådant som jag själv kämpade med att lära mig. Jag tänkte att jag skulle sprida mina lärdomar vidare. 

Hur mycket tid Juan lägger på att lära sig nya saker, och sprida sina lärdomar vidare, vet han inte, men gissar på tio timmar i veckan, helger, morgnar och kvällar.

– Viktigast för mig är att mitt jobb och min familj inte blir lidande så jag sätter mig bara när jag är klar med allt annat. Jobb, vardagssysslor, barnens fritidsaktiviteter, hänga med min fru... Ja, det är viktigare. Både jag och Fredrik har familj, så vi får en naturlig distans till vår hobby. Ett sätt att komma framåt är att automatisera allt som går att automatisera när det gäller sidoprojekt. Livet blir så mycket enklare då.

För Fredrik gäller ungefär samma sak.

– Skulle väl gissa på runt åtta timmar i veckan, morgnar, kvällar och helger. Jag sitter ju i samma sits som Juan med familj och jobb, vardagssysslor och annat. Allt sånt går först. Det är nog den främsta anledningen till att vi hållit på i över ett år. Vi är 100 procent autonoma, vi litar på varandra, stressar aldrig, pressar aldrig varandra och vi har kul. Tips till alla som vill utveckla härliga grejer, sluta pressa varandra. Stress suger.

Fredrik tillägger att det inte finns någon smart affärsplan bakom projektet. Det killarna gav sig ut för att utforska var att skapa en riktig export från Sketch till React, ett mål som nu är nått, ett år senare. Under tiden har det också hänt mycket annat; Juan och Fredrik har utvecklat sin lösning helt på synpunkter från användare, testare och egna idéer. De har hela tiden ställt sig frågan: ”Är det här vettigt för någon annan?”

Fredrik och Juan vill också skicka sin kärlek till Bouvet:

– Utan Bouvets fantastiska inställning till sina medarbetare hade vi aldrig haft en chans. Stor eloge till framför allt Emelie, den bästa chefen man kan tänka sig.

sketch2react

Vilka reaktioner har ni fått?  

– Vi har fått helt fantastiska reaktioner säger Juan. Här är mitt favoritcitat: 

“You're doing something revolutionary in the sense of helping designs reach their implementation and usefulness quickly.” 
Todor från SketchAppSources.com 

– Jag tror att ”hemligheten” är att vi aldrig försökt hålla något hemligt. Så fort vi haft något att visa så har vi gjort det. Först körde vi internt, både på Bouvet och på Länsförsäkringar, sen släppte vi det publikt genom att bjuda in vem som helst till vår alpha-version. Denna öppenhet har varit otroligt utvecklande, speciellt för vårt ramverk. Det gäller att våga visa upp saker tidigt. Det är också ett sätt att gardera sig, är man först med något så gäller det att snabbt som tusan visa upp det, berättar Juan (och ler).

– Min absoluta ”star struck moment” var när självaste Pablo Stanley messade mig i somras, fortsätter Juan. Jag höll på att ramla av stolen. Han hade då precis börjat som product design lead på InVision Studio och undrade om vi kunde tänka oss att utveckla detta även för dem. Ett par veckor senare hörde en annan InVision-människa av sig med exakt samma förfrågan, utan att de hade pratat med varandra. Det blev aldrig något av samarbetet, men det var ändå en skön bekräftelse.

– Nej, vi sa att vi inte hade tid just då, men att vi absolut skulle gå med i deras ”developer program”. Sen har inte mycket mer hänt, instämmer Fredrik.

– Vi verkar ha bra timing. Det finns ett enormt intresse i hela världen, säger Juan.

Hur ser framtiden ut? 

Juan och Fredrik har inga planer på att trappa ner. Planen är att få projektet hållbart, det vill säga att dels hitta mer tid för projektet, dels göra det ekonomiskt hållbart.

– En annan dröm jag har, säger Juan, är att det ska används av skolor, design-skolor eller, ärligt talat, vilka skolor som helst. Som ux-designer har jag, tack vare Sketch2React, lärt mig väldigt mycket om kod.

– Vi vill också fortsätta att utveckla ramverket, lägga till fler kod-komponenter som du kan formge direkt i Sketch och, så klart, hoppas vi på ett rikt community med designers och utvecklare som alla använder vår lösning i sin vardag, fortsätter Juan.

– Plan är också att utveckla nya komponenter, säger Fredrik. Vi vill att man ska kunna bygga egna plugins till React vilket betyder att vi inte behöver bygga alla komponenter själva, men jag vet i dagsläget inte hur det ska gå till utan att göra hela projektet ”open source”.

– Jag vill lära mig mer om React, säger Juan. Tack vare vårt design till kod-komponent-ramverk, kan vem som helst sätta upp grunderna direkt i Sketch, och sen ta det vidare in i kod och bygga fantastiska applikationer. Att få formgivare att närma sig kod är ju bara helt fantastiskt, eller hur? Det skapar empati, mer förståelse.

Kan man säga att ni är kända nu? Visst är man lite cool om man känner er? 

– Absolut, skrattar Juan. Inom vissa kretsar är vi ”kända” nu, men det betyder ärligt talat inte mer än att det är roligt att folk uppskattar det jobb vi lägger ner. Om ingen hade använt vårt verktyg hade vi antagligen slängt det i högen av ”intressanta projekt som ingen bryr sig om” och gått vidare.

– Jag vi är nog lite kändisar, inom en väldigt snäv nisch, säger Fredrik.

file-23

Erbjuder ni utbildning i Sketch2React?  

– Vi har haft ett par interna utbildningar, säger Juan, och varit runt på intressanta företag i Stockholm och visat upp vår bebis, men än så länge finns det inga officiella utbildningar.

Har ni andra projekt på gång? Några hemligheter? 

– Nope, svarar Juan. Jag satsar all min fria tid på Sketch2React, och så länge jag tycker att det är roligt kommer jag fortsätta lägga ner tid på det. Vi har öppnat upp något här som är väldigt svårt att stänga. Jag skulle kunna bygga vidare på S2R hur mycket som helst. Vad sägs om Sketch2Vue.js? Eller varför inte XD2React? Skulle också vilja utforska att bygga till ett publikt api och låta andra utveckla plugins.

Det finns hur många idéer som helst, men prio just nu är att få ut en helt gratis RC1-version (Release Candidate 1) med alla avancerade funktioner tillgängliga helt gratis för alla som signar upp via vår hemsida.

– Jag vet inte hur jag skulle hinna med något mer utan att kunna resa i tiden eller utnyttja arbetskraft från andra dimensioner, skrattar Fredrik. Vår hemlighet är dels att vårt projekt ligger rätt i tiden, dels att Juan älskar att prata.

Vi som gör Sketch2React

  • Juan Fernando Maguid (ux-designer)
    Produktutveckling, form, tutorials, community och support, bland annat.
  • Fredrik Ward (utvecklare)
    Produktutveckling, utveckling, tutorials, dokumentation, bland annat.

Fyra saker som gör Sketch2React unikt

  1. Du lämnar aldrig Sketch.
  2. Vår kod-app är kodfönstret, lite som din webbläsare.
  3. Du kan i realtid sitta och bygga och formge riktiga kodkomponenter direkt i Sketch och hela tiden följa arbetet visuellt i vår kod-app.
  4. HTML-exporten är gratis och kommer alltid vara det.

Mer information

Sketch2React - 35 New Design Tools in 2019

https://sketch2react.io