Figma-överlämning som utvecklare kan bygga från

Det korta svaret

Det här är arbetssättet bakom vår tjänst för designsystem och UI-kit, och det fungerar lika bra för en enskild produktdesign som för ett helt system.

Komponenter före vyer

En utvecklare bygger komponenter och sätter sedan ihop sidor av dem. Är Figma-filen organiserad tvärtom, som fyrtio vyer ritade från grunden var och en, måste utvecklaren baklängesräkna vilka knappar som är samma knapp och vilka skillnader som är avsiktliga. Varje oklarhet blir en fråga eller, värre, en gissning. Börja filen med en komponentsida: knappar, fält, kort, navigation, tabeller, dialoger, var och en med varianter definierade som Figma-varianter och egenskaper. Rita sedan vyerna med enbart de komponenterna.

• Namnge komponenter som koden kommer att namnge dem: Button, Input, Card, inte Rectangle 14.
• Exponera varianter som egenskaper: storlek, tillstånd, ikon på eller av. Utvecklaren läser dem som props.
• Lös inte upp något i vyerna. Behöver en vy något komponenten inte klarar, ändra komponenten.
• Ha en källa: en delad biblioteksfil som produktfilerna länkar till, så att en ändring slår igenom.

Tillstånd: tomt, laddar, fel

Vyer i en Figma-fil visas nästan alltid fulla med trevlig data. Riktiga produkter tillbringar stor del av sitt liv tomma, laddande eller med ett problem att rapportera. När de tillstånden inte är designade designar utvecklaren dem klockan elva på kvällen, och resultatet är en tom vit yta eller en röd textsträng. Varje lista behöver ett tomt tillstånd som säger användaren vad hen ska göra härnäst. Varje hämtning behöver ett laddningstillstånd. Varje formulär behöver ett feltillstånd per fält och ett för hela inskickningen.

Tokens för avstånd, typsnitt och färg

En design med hexkoder och pixelvärden utspridda över vyerna ger kod med samma spridning. Figmas variabler låter dig definiera färg, avstånd, radie och typografi en gång, namnge dem efter syfte och använda dem överallt. Utvecklaren implementerar sedan samma namn som CSS-variabler eller ett temaobjekt, och design och kod delar ordförråd. Namnge efter roll, inte värde: text-primary, surface-raised, space-4, inte grey-700 eller 16px. En namngiven token kan byta värde; ett värde kan inte byta betydelse.

Håll skalan liten. En avståndsskala med sex eller åtta steg och en typskala med fem eller sex storlekar täcker nästan alla gränssnitt. Varje extra steg är ett beslut utvecklaren måste fatta på varje vy.

Anteckningar om interaktion

En bild visar hur en vy ser ut; den visar inte vad som händer. Anteckna bredvid ramen, i en konsekvent stil, det utvecklaren annars kommer att fråga om. Vad en knapp gör och vart den leder. Vilka fält som är obligatoriska och vad valideringsmeddelandet säger. Hur lång en rubrik får vara och hur den kapas. Vad som händer på mobilen när tabellen inte får plats. Om en animation är ett krav eller något som vore trevligt. Figmas prototyplänkar hjälper för navigationsflöden, men vanliga textanteckningar är fortfarande det pålitligaste sättet att förmedla regler.

Ett överlämningsmöte

Ingen fil är komplett, så planera för luckorna. Innan utvecklingen börjar, boka en timme där utvecklaren, inte designern, styr: hen öppnar filen, går igenom varje flöde och ställer varje fråga som dyker upp. Designern svarar och skriver in svaret i filen på plats. De flesta projekt hittar ett dussin saknade tillstånd och en handfull omöjliga interaktioner under den timmen, alla billigare att rätta i Figma än i kod. Upprepa en kortare version i slutet av varje byggfas för att jämföra den byggda produkten med designen.

När ni inte behöver något av det här: en ensidig marknadssajt med en mall och en utvecklare som också är designer kan hoppa över ceremonin och bygga från en skiss. Disciplinen i överlämningen lönar sig när det finns mer än en vytyp, mer än en person, eller en produkt som kommer att fortsätta ändras. Ska ni snart lämna över en design till en utvecklare, eller ta emot en, boka ett samtal så granskar vi filen mot luckorna ovan; våra fasta priser för design och designsystem finns på prissidan.

Vanliga frågor