I midten av April 2024 annonserte Figma et ny Figma Dev Mode feature kalt 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 design bygget på designsystemer!
Klikker du på et design i Figma Dev Mode så vil du I utgangspunktet 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.
Eksempel av Figma sin foreslåtte CSS i dev mode
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 kodebase
• 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 for eksempel ikke for Flutter.
Det er relativt enkelt å komme i gang, men det krever litt oppsett:
npm install @figma/code-connect
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