I midten av April i år annonserte Figma en ny funksjon de kaller Code Connect. Dette verktøyet har som mål å tette gapet mellom design og kode, ved å gi utviklere muligheten til å hente ut kodesnutter direkte fra skisser bygget på designsystemer. Men hvordan funker det, og bør du ta det i bruk?
Hva er Figma Code Connect?
Klikker du på et design i Figma Dev Mode så vil du bli foreslått noe CSS for kunne lage en lik komponent i din kodebase. Dette kan være nyttig når man bygger komponenter fra bunnen av, men dette er sjeldent relevant når du jobber med et designsystem hvor komponentene allerede er kodet. Det er her kommer Code Connect inn.
Med Code Connect kan utviklere få opp tilpassede kodesnutter direkte fra designsystemet, i stedet for generisk CSS. For eksempel kan du se riktig React-komponent med relevante props eller finne den tilsvarende SwiftUI-implementasjonen for en mobilapp. Dette gjør det enklere å:
• Finne riktig komponent fra designsystemet i kodebasen
• Hente ut riktige props for denne komponenten
Code Connect støtter flere utviklingsmiljøer, inkludert React, React Native, Angular, Vue, Web Components, SwiftUI og Jetpack Compose. Dette gjør funksjonen tilgjengelig for det meste av både web- og apputvikling, men utvikler du for eksempel i Flutter må du lage ditt eget tilkoblings-lag.
Hvordan setter man opp Code Connect?
Det er relativt enkelt å komme i gang, men det krever litt oppsett:
2. Installer pakken
npm install @figma/code-connect
2. Koble koden til Figma
Start koblingen med å kjøre
npx figma connect
Dette genererer en fil som matcher komponenten din, for eksempel <komponent>.figma.tsx.
I denne filen definerer du disse koblingene
• Den relevante kode-komponent du vil koble til
• URL til Figma-komponenten
• Mapping mellom props fra Figma til kodekomponenten
• Et eksempel på komponentbruk med disse propsene
For en ekel knapp kan den en ferdig utfyllt fil se slik ut:
import * as figma from '@figma/code-connect'
import { Button } from 'designsystem'
figma.connect(
// Komponenten din
Button,
// Link til figma-noden
'https://...', {
// Mapping mellom figma props og koden
props: {
label: figma.string('Text Content'),
disabled: figma.boolean('Disabled'),
type: figma.enum('Type', {
Primary: 'primary',
Secondary: 'secondary',
}),
},
// Eksempel av komponentbruk, basert på mappingen over
example: ({ disabled, text, type }) => {
return (
<Button disabled={disabled} type={type}>
{text}
</Button>
)
},
})3. Publiser koblingen tilbake til Figma
npx figma connect publish --dir <sti til komponentmappen> --token <auth token>
Code Connect støtter flere oppsett, som én-til-én eller én-til-mange koblinger mellom Figma-komponenter og kodekomponenter, noe som gir stor fleksibilitet i komplekse designsystemer. Etter at denne funksjonen er kjørt vil man kunne se generert kode direkte i Figma sin Dev Mode!
Bør du bruke Code Connect i ditt designsystem?
Ifølge Figma er Code Connect spesielt nyttig for team med et eksisterende designsystem som ønsker å sikre konsekvent og riktig bruk på tvers av design og utvikling.
Min vurdering? Det er en kraftig funksjon, men passer best for store designsystemer med mange komponenter og brukere. For små team eller systemer som bygges fra bunnen av, kan det være unødvendig komplisert å sette opp og vedlikeholde.
For at det skal fungere optimalt så krever også arbeidsflyten til designerne høy presisjon av komponent- og props-bruk fra designerne når de setter opp designet sitt. Samtidig må utviklere vedlikeholde koblingsfilene hver gang props endres. Dette er en ekstra vedlikeholdskost som ikke alltid er ønskelig.
Brukes det riktig så kan det derimot gi verdi i flere former:
- Kjappere kodeimplementasjon av designskisser
- Kjappere opplæring av designsystemet for utviklere
- Sikre riktig bruk av designsystemet
Figma Code Connect er altså en spennende løsning, spesielt for store bedrifter med mange utviklingsteam som ønsker en sømløs bro mellom designsystem og kode. Men for mindre prosjekter eller tidligfase designsystemer kan det nok være mer arbeid enn det er verdt.
Lyst på mer lesestoff om Figma Code Connect? Sjekk ut disse lenkene ⬇️
Relevante lenker anbefalt av forfatteren
Uffda. En feil har oppstått, og vi klarer ikke å hente lenken!
Uffda. En feil har oppstått, og vi klarer ikke å hente lenken!