Codefragmenten verschijnen in het Inspect-paneel van Dev Mode wanneer een object op het canvas is geselecteerd. De sectie Code biedt relevante componentgegevens en genereert code op basis van de selectie en taalvoorkeuren die in Inspect zijn ingesteld:

• Wanneer je tekst selecteert, toont de sectie Code een typografisch voorbeeld, gevolgd door informatie over opmaak, typografie en inhoud.
• Bij alle andere selecties wordt een kadermodel weergegeven met gegevens over marge, rand en opvulling, evenals informatie over opmaak en stijl.

Taalvoorkeuren instellen

Je kunt je voorkeurstaal en eenheid voor codefragmenten instellen onder Code-instellingen in het Inspect-paneel. Taal- en eenheidsinstellingen zullen van toepassing zijn op alle gegenereerde codefragmenten voor objecten die je op het canvas hebt geselecteerd.

1. Deselecteer alle objecten op het canvas.
2. Selecteer een optie uit de vervolgkeuzelijst Taal:
   • CSS (Web)
   • SwiftUI of UIKit (iOS)
   • Compose of XML (Android).
3. Selecteer een eenheid in de vervolgkeuzelijst Eenheid. De taalkeuze bepaalt welke eenheden beschikbaar zijn.

Taal- en eenheidsvoorkeuren aanpassen

Zodra je een object hebt geselecteerd, kun je de taal- en eenheidsselectie wijzigen in de sectie Code van het inspectiepaneel.

1. Selecteer rechtsboven in de sectie Code een taal uit de vervolgkeuzelijst.
2. Klik op Instellingen inspecteren en kies een eenheid uit de vervolgkeuzelijst.

Stel de eenheidsschaal in

Met eenheidsschaal kun je eenheidsdimensies instellen ten opzichte van een specifieke grootte. Je kunt bijvoorbeeld een basislettergrootte instellen voor CSS-rems, of een schaalfactor voor het schalen van dimensies naar iOS-punten.

Om de eenheidsschaal aan te passen voor de door jou gekozen taal en eenheid:

1. Selecteer een object op het canvas.
2. Klik in de sectie Code van het Inspect-paneel op [inspectie-instellingen pictogram] Inspect-instellingen naast de taalvervolgkeuzelijst.
3. Selecteer Eenheidsschaal instellen...
4. Afhankelijk van de voorkeur voor de eenheid, voer je de schaal in of selecteer je deze in de modaal Eenheidsschaal.
5. Klik op .

Codefragmenten bekijken

Codefragmenten worden gegenereerd wanneer je een object op het canvas selecteert in Dev Mode. De sectie Code toont relevante informatie afhankelijk van het type object en de gekozen taal.

Hoewel de meeste objecten op het canvas vergelijkbare codefragmenten genereren, verschillen tekstselecties enigszins. De sectie Code toont een typografische weergave in plaats van een kadermodel, gevolgd door codefragmenten met relevante typografische informatie.

Alle variabelen die aan een geselecteerd object zijn toegewezen, verschijnen ook in het codefragment. Met code-syntaxis kun je variabelen in code weergeven met geldige variabelenamen om een naadloze overdrachtservaring te ondersteunen.

Lees verder over codesyntaxis en variabelen in Figma Design ->

Codefragmenten kopiëren

Je kunt een codefragment kopiëren en overbrengen naar een teksteditor. Kopieer als volgt een codefragment:

1. Selecteer het object waarvoor je code wilt genereren.
2. Zoek het codefragment dat je wilt kopiëren onder de sectie Code van het Inspect-paneel.
3. Beweeg de muis over het codefragment en klik op kopiëren in de rechterbovenhoek.

Code Connect

Code Connect is een tool voor ontwerpsystemen en engineeringteams, die zo componentcode binnen Dev Mode kunnen toepassen. Wanneer ontwikkelaars een component met gekoppelde codefragmenten inspecteren, zien ze ontwerpsysteemcode uit hun bibliotheken in plaats van automatisch gegenereerde code.

Code Connect bouwt voort op de Figma API en is volledig aanpasbaar om meerdere ontwerpsystemen, producten en talen te ondersteunen.

Bekijk de Code Connect-hub om te zien hoe je aangepaste codefragmenten kunt synchroniseren met componenten →

Zodra Code Connect is geïmplementeerd, geven je Dev Mode-codefragmenten verbonden aan en tonen ze codefragmenten uit de bibliotheek van je organisatie.