--- title: "Hva er Figma Code Connect, og bør du bruke det?" url: "https://www.bekk.christmas/post/2024/09/figma-code-connect" authors: ["Alfred Lieth Årøe"] published: "2024-12-09" updated: "2024-12-18T09:33:56Z" language: "nb-NO" type: "article" tags: ["Designsystem", "Utvikling", "Design"] keywords: ["Figma", "Code Connect", "Dev Mode", "Designsystem", "Komponenter"] --- # Hva er Figma Code Connect, og bør du bruke det? 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? ## Kort fortalt Figma Code Connect kobler designsystem-komponenter i Figma til faktiske kodekomponenter, slik at utviklere får opp relevante props og riktig implementasjon i stedet for generisk CSS i Dev Mode. Det kan gi raskere implementasjon, enklere opplæring i designsystemet og mer konsekvent bruk, men krever presist oppsett og løpende vedlikehold av koblingene. - **Passer for:** Utviklere og designteam som jobber med designsystemer - **Fint å kunne fra før:** Kjennskap til designsystemer, komponenter og Figma Dev Mode _Generert med KI_ ### **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. ![Eksempel av Figma sin foreslåtte CSS i dev mode](https://cdn.sanity.io/images/ah2n1vfr/bekk-blogg-prod/4b7922e3d61c71d072815c65599055537076bd59-656x427.png) _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 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 `.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: ```tsx 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 ( ) }, }) ``` **3. Publiser koblingen tilbake til Figma** `npx figma connect publish --dir --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! ![Eksempel av hvordan kodesnuttene ser ut når Code Connect er satt opp](https://cdn.sanity.io/images/ah2n1vfr/bekk-blogg-prod/a8558480dcfefe1565dd8af50ba20c8254aba6d8-1608x1072.png) _Eksempel av hvordan kodesnuttene ser ut når Code Connect er satt opp_ ### 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 - [Introduksjon fra Figma](https://www.figma.com/blog/introducing-code-connect/): Figma sin annonsering av Code Connect - [Detaljert Youtube video](https://www.youtube.com/watch?v=5GVNfbltrQg): Detaljert Youtube video over hva Code Connect kan gjøre