Designsystem i Figma som era utvecklare kan bygga efter
Up Strategy Lab är en byrå för designsystem i Figma, för design- och produktansvariga på B2B SaaS-företag. Vi bygger om och dokumenterar filen ni redan har, så att era designers kan förvalta den, utvecklarna slutar gissa och varje release slutar glida ifrån designen.
De flesta Figma-filer är en belastning förklädd till leverans
Produkten växer, deadlines vinner och filen fylls av frikopplade instanser och tre nästan likadana primärknappar. Utvecklarna slutar lita på specarna och bygger ur minnet, så varje release glider lite längre ifrån designen.
Ingen bestämde sig för att ha tre primärknappar. Det är så det går till.
Fatta varje beslut en gång och återanvänd det överallt
Teamet slutar älta avstånd och färg i varje sprint, eftersom varje val görs en gång och får ett namn.
Designtokens
Färg, typografi, avstånd, hörnradie och elevation som namngivna värden, så att en ändring på ett ställe når varje skärm.
Komponentbibliotek
Komponenter med varianter och egenskaper byggda på dessa tokens, redo för designers att dra in och för utvecklare att matcha.
Dokumentation
Skrivna riktlinjer för hur varje del är tänkt att användas, samlade där teamet redan jobbar.
Styrning
En tydlig väg för att föreslå, granska och släppa ändringar, så att filen fortfarande är ren sex månader efter lansering.
primary-600 i Figma, primary-600 i koden
Era utvecklare slår upp ett värde i stället för att fråga en designer. Vi döper tokens i Figma så att de stämmer med det tokensystem ni redan levererar.
Tailwind
Tokens i Figma följer nycklarna i ert Tailwind-tema, så en spec läses som den klass era utvecklare ska skriva.
CSS custom properties
Varje variabel i Figma motsvarar en namngiven custom property, så att en färgändring i designen har ett självklart hem i koden.
Style Dictionary
Tokens är strukturerade för en ren export till Style Dictionary, så att webb- och native-byggen utgår från samma källa.
En plattform byggd på nytt medan bolaget fortsatte framåt
En ombyggnad behöver inte stoppa allt annat. Viking Analytics fick sin plattform MultiViz 2.0 ombyggd parallellt med en ny webbplats och ett nytt partnerprogram, i ett och samma uppdrag på nio månader.
Viking AnalyticsSkrivet för den som kliver in när vi har lämnat
Utbildning och dokumentation ingår i varje överlämning, så att teamet kan bygga vidare på systemet på egen hand.
- När varje komponent ska användas, vilken variant som passar vilket fall och vad som bör undvikas.
- Ett enda namnschema för komponenter, varianter, tokens och lager, anpassat efter namnen i er kod.
- Hur en ny komponent föreslås, granskas och läggs till utan att något befintligt går sönder.
- En daterad logg över varje tokenändring och skälet till den, så att utvecklarna ser exakt vad som har ändrats.
We have worked with Up Strategy Lab for several years now. From handling our rebrand from AiraPower to Freepower to taking care of all our web design and development work as well as our app design, their support and advice have been key to helping us stay consistent as the company has grown.
Citatet är på engelska.
Jake SlatnickVD, Freepower
Fler uppdrag
Från en rörig Figma-fil till en som era utvecklare bygger efter
Var hittar jag Figma-experter för B2B SaaS?
Up Strategy Lab är ett team med Figma-experter för B2B SaaS och tekniska produktbolag. Studion grundades 2018 i Göteborg och har kunder i Europa, USA och Asien. Designarbetet leds av medgrundaren Noel Braganza och Lead Digital Product Designer Yunan Xing. Ett exempel är den ombyggda MultiViz 2.0-plattformen för Viking Analytics.
Hur gör jag om en rörig Figma-fil till ett system som utvecklarna kan bygga från?
Börja med en genomgång av den befintliga filen för att se vilka komponenter som är värda att behålla. Definiera sedan designtokens som matchar koden, bygg om komponenterna på dessa tokens och dokumentera resultatet. Up Strategy Lab migrerar i etapper så att designarbete som redan är i produktion kan fortsätta, och anpassar tokens efter Tailwind, CSS custom properties eller Style Dictionary.
Kan ni ta över och strukturera om en befintlig Figma-fil?
Ja. Att strukturera om en befintlig Figma-fil är ofta mer komplext än att börja från noll, så vi inleder med en genomgång, identifierar vad som är värt att bevara och migrerar komponenterna till en ny, strukturerad arkitektur. Migreringen planeras kring designarbete som redan är i produktion, och era designers fortsätter jobba medan systemet byggs om under dem.
Vad är skillnaden mellan ett designsystem och ett komponentbibliotek?
Ett komponentbibliotek är en samling återanvändbara UI-element som knappar, inmatningsfält och tabeller. Ett designsystem är allt ovanpå det: designtokens, riktlinjer, dokumentation och styrning som håller komponentbiblioteket konsekvent och förvaltningsbart över tid. De flesta förfallande Figma-filer har något slags komponentbibliotek men saknar systemet runt det.
Dokumenterar ni Figma-systemet så att vårt team kan förvalta det?
Ja. Varje Figma-system som Up Strategy Lab levererar är dokumenterat, och överlämningen innehåller alltid utbildning för era designers och utvecklare. Målet är ett system som teamet kan förvalta och bygga vidare på själva. Vill ni att vi är kvar finns löpande förvaltning som månadsavtal, dimensionerat efter vad ni behöver.
Vad ingår egentligen i den levererade dokumentationen?
Den levererade dokumentationen består av fyra delar: användningsdokumentation för varje komponent; namngivningskonventioner för komponenter, varianter, tokens och lager; riktlinjer för hur nya komponenter föreslås och läggs till; och en ändringslogg för tokens som registrerar varje tokenändring med datum och skäl. Den är skriven för de designers och utvecklare som äger Figma-systemet efter överlämningen.
Hur kopplas Figma-systemet till utvecklingen?
Vi anpassar designtokens i Figma efter ert tokensystem i koden där det går, oavsett om ni använder Tailwind, CSS custom properties eller Style Dictionary. Gemensamma tokennamn sluter glappet mellan design och kod, gör överlämningen mycket snabbare och låter utvecklarna spåra varje värde i Figma direkt till variabeln de använder i kodbasen.
Hur arbetar ni med ett internt produktteam?
Det finns två sätt att arbeta med Up Strategy Lab. En senior designer kan ingå i ert team på halvtid eller heltid, eller så driver vi ett fast projekt med överenskommen omfattning, oftast tre till sex månader. Båda formerna fungerar sida vid sida med era egna designers och utvecklare, och varje projekt anpassas efter era behov, så ta med er budget till samtalet.
Ta med filen. Vi berättar vad som krävs.
Gå igenom er Figma-fil med oss i ett samtal, så berättar vi vad som ska behållas, vad som ska byggas om och vad som ska åtgärdas först. Vi svarar inom en arbetsdag.