Figma blir enda bedre for utviklere: Kobler kode til design

Code Connect, forbedret Dev Mode, AI, ny editor, og PowerPoint-killer er bare noen av de mange nyhetene på fra Figma Config 2024.

Med Figma Code Connect kan du koble designsystemet ditt i Figma til faktiske React-komponenter. 📸: Kurt Lekanger
Med Figma Code Connect kan du koble designsystemet ditt i Figma til faktiske React-komponenter. 📸: Kurt Lekanger Vis mer

Figma arrangerte denne uken sin store Figma Config 2024-konferanse i San Francisco, en konferanse som skulle vise seg å bli et skikkelig lanseringsbonanza.

Du kan se hele den litt over én time lange lanserings-keynoten nederst i artikkelen, men kort oppsummert så gikk mange av nyhetene ut på å bringe designere og utviklere enda tettere sammen.

Noen av nyhetene:

  • Redesignet brukergrensesnitt (UI3)
  • Figma AI. Generative AI-verktøy for å komme raskere igang med design og prototyping.
  • Figma Slides. Et web-basert presentasjonsverktøy à la PowerPoint, integrert med Figmas designverktøy.
  • Forbedringer til Dev Mode – inkludert et nytt Dev View og nye Code Connect, som vi skal kommer mer inn på.
  • Ferdige UI-kit for iOS, Google Material Design 3 og Figmas eget.
Slik ser det nye brukergrensesnittet i Figma ut. Du må sette deg på venteliste for å få tilgang. 📸: Figma
Slik ser det nye brukergrensesnittet i Figma ut. Du må sette deg på venteliste for å få tilgang. 📸: Figma Vis mer

Koble sammen designsystemet ditt med faktisk kode

Mens Figma i starten kanskje var mest for designere, er det i ferd med å bli vel så mye et utviklerverktøy.

Figma har i det siste jobbet mye med å gjøre det enklere for utviklere og designere å samarbeide. På fjorårets Config-konferanse lanserte de Dev Mode, en egen visning beregnet på utviklere, mens de på årets konferanse annonserte en masse oppdateringer og ny funksjonalitet til Dev Mode.

En av de mest spennende nyhetene er Code Connect som er klar i en betaversjon.

Med Code Connect forsøker Figma å gjøre det lettere for utviklere å bruke designsystemer slik designerne har tenkt, ved å koble designsystemet/UI-komponentene til faktisk produksjonskode i stedet for at du bare får opp autogenerert CSS.

I eksempelet under har vi for eksempel klikket på en UI-komponent fra det nye Figma-UI-kitet som også ble lansert, valgt Dev Mode, og så får vi opp React-koden til høyre. Med lenke rett til kildekoden på GitHub.

image: Figma blir enda bedre for utviklere: Kobler kode til design

Code Connect-verktøyet kommer med et eget CLI, og ifølge beskrivelsen i git-repoet støttes både React, React Native, Storybook, SwiftUI og Jetpack Compose.

Se hvordan det fungerer i denne videoen:

"Ready for Dev"-visning

En annen nyhet er et nytt "Ready for Dev View" som skal gjøre det enklere for utviklere å finne frem i alt designerne har laget.

Når du velger Ready for Dev-visningen, vil du få opp en liste med alle design i en gitt fil som designerne har markert som klare for å tas i bruk av utviklerne. Du kan også se hvilke design som nylig har blitt oppdatert.

Dev Mode har også fått et "Focus View", som gjør at du kan fokusere på kun ett spesifikt design og unngå distraksjoner.

Denne videoen viser hvordan utviklere og designere bedre skal kunne samarbeide ved hjelp av disse nye funksjonene:

Figma AI

Figma lanserte også – ikke uventet – en masse ny funksjonalitet basert på generativ AI.

Selskapet er tydelige på at dette er basert på tredjeparts AI-modeller, og ikke er trent på kunders private Figma-filer eller kundedata. Selskapet skriver også i et blogginnlegg at alle kundedata krypteres, og at de ikke gir tredjeparts AI-modeller tilgang til å bruke data som kunder laster opp eller skaper på Figma-plattformen til å trene AI-ene.

AI-funksjonene er for øyeblikket i beta, og vil bli rullet ut gradvis. Hvis du vil bli med i betaprogrammet kan du sette deg på venteliste ved å klikke spørsmålstegnet nederst til høyre i Figma og velge "Join UI3 + AI waitlist":

image: Figma blir enda bedre for utviklere: Kobler kode til design

Når man får tilgang – og eventuelt en med administratorrettigheter har aktivert AI-funksjonaliteten i Team-innstillingsmenyen – vil det dukke opp AI-verktøy ulike steder i Figma.

Du vil blant annet kunne be Figmas AI om å lage et utkast til et design eller en prototyp. AI-en vil også kunne hjelpe deg med å finne raskere frem i alle designfilene dine eller skrive tekst.

En annen AI-funksjon lar deg laste opp et bilde, og så kan AI-en automatisk finne et design andre på teamet ditt har laget som ligner på dette bildet.

Her kan du se hele lanserings-keynoten: