Gids voor variabelen in Figma

Variabelen in Figma Design slaan herbruikbare waarden op die kunnen worden toegepast op verschillende ontwerpeigenschappen en prototyping-acties. Ze helpen tijd en moeite te besparen bij het bouwen van ontwerpen, het beheren van ontwerpsystemen en het creëren van complexe prototype-stromen.

Je kunt bijvoorbeeld:

• Ontwerptokens maken voor meer efficiëntie bij het beheren van ontwerpsystemen
• Een frame tussen verschillende apparaatformaten schakelen en ervoor zorgen dat de spatiëring onmiddellijk wordt bijgewerkt volgens een gedefinieerd ruimtelijk systeem
• Een voorbeeld bekijken van hoe tekst in verschillende talen wordt weergegeven door te wisselen tussen kopieën op een frame
• Een volledig functioneel winkelwagenontwerp maken dat het totaalbedrag van de bestelling berekent op basis van de artikelen die aan de winkelwagen zijn toegevoegd
• Een prototype bouwen van een interactieve quiz die conditionele logica gebruikt om te laten zien of een gebruiker een vraag correct of incorrect beantwoordt.

Er zijn drie hoofdmanieren om variabelen in Figma te gebruiken:

1. Ontwerpen en ontwerpsystemen ↓
2. Geavanceerde prototyping ↓
3. Figma API's ↓

Variabelen voor ontwerpen en ontwerpsystemen

Gebruik variabelen en Modi om ontwerptokens te implementeren voor je ontwerpsysteem, en schakel ontwerpen tussen verschillende contexten, zoals licht/donker thema’s. Met variabelen kun je efficiënter ontwerpen en een krachtiger ontwerpsysteem opbouwen.

• Figma-tutorial: Inleiding tot variabelen

  Deze instructievideo behandelt de basis van variabelen, hoe je ze kunt gebruiken om ontwerptokens weer te geven en hoe je kleur- en getalvariabelen kunt gebruiken om rekening te houden met verschillende modi en thema's.
• Figma-tutorial: variabelen voor typografie

  In deze videotutorial leer je hoe je variabelen kunt gebruiken voor lettertype-eigenschappen, hoe je variabelen kunt integreren in een bestaand typesysteem en hoe je ze kunt gebruiken om een responsief ontwerp te ondersteunen.
• Artikel: Overzicht van variabelen, collecties en modi →

  Begin je reis met variabelen hier! Leer over de verschillende soorten variabelen en wat variabelencollecties en modi zijn.

• Artikel: Variabelen aanmaken en beheren →

  Ontdek hoe je variabelen en collecties kunt maken, naar andere variabeledefinities kunt verwijzen en bepalen welke variabelen je kunt gebruiken in ontwerpen.

• Artikel: Variabelen toepassen op ontwerpen →

  Leer hoe je bestaande variabelen toepast op ontwerpeigenschappen.

• Artikel: Modi voor variabelen →

  Ontdek hoe je meerdere definities voor een variabele kunt maken, die elk aan een modus zijn gekoppeld. Leer ook hoe je ze kunt gebruiken om snel de contexten van ontwerpen te wisselen.

• Artikel: Het verschil tussen variabelen en stijlen →

  Nu Figma zijn functieset uitbreidt met variabelen, vraag je je misschien af: wat is het verschil tussen variabelen en stijlen? Wanneer moet ik de ene boven de andere kiezen?

• Artikel: Variabelen in Dev Mode →

  Lees verder over het benaderen van variabelen in Dev Mode tijdens het inspecteren van ontwerpen, inclusief het verkrijgen van details over variabelen en voorgestelde variabelen, en het bekijken van lokale collecties met behulp van de variabelentabel.

• Community-bestand: Testomgeving voor variabelen →

  Wil je praktijkervaring opdoen met variabelen? Pak een kopie van het testbestand voor variabelen om te oefenen terwijl je leert.

Variabelen voor geavanceerde prototyping

Met variabelen kun je hoogwaardige prototypes bouwen met minder frames. Gebruik variabelen met andere geavanceerde functies zoals expressies en voorwaarden om je prototypes naar een hoger niveau te tillen.

In prototyping worden variabelen gebruikt om de toestand of eigenschappen van objecten op te slaan. Gebruik prototype-interacties om variabelewaarden te wijzigen, waardoor het uiterlijk, de inhoud of de zichtbaarheid van objecten in een ontwerp kan veranderen—allemaal in enkele eenvoudige frames.

• Videotutorial: Prototyperen met variabelen

  Kijk en leer hoe je variabelen in prototypes kunt gebruiken door een realistisch voorbeeld te volgen. Je zult zien hoe je variabele waarden kunt aanpassen, hoe je eenvoudige expressies kunt opstellen en hoe je meerdere acties en als/dan-logica kunt gebruiken om voorwaardelijke controles uit te voeren.
• Artikel: Variabelen gebruiken in prototypes →

  Leer de basisprincipes van het prototyperen met variabelen in Figma, inclusief hoe je je variabelen configureert, de actie Variabele instellen gebruikt om variabelewaarden te wijzigen, en hoe je variabelen gebruikt met componentvarianten en interactieve componenten.

• Artikel: Expressies gebruiken in prototypes →

  Ontdek hoe je expressies en variabelen in prototypes kunt gebruiken om dynamische tekenreekswaarden te genereren, eenvoudige wiskundige bewerkingen met getalwaarden uit te voeren of zelfs booleaanse expressies te evalueren.

• Artikel: Meerdere acties en voorwaarden →

  Leer hoe je meerdere acties kunt gebruiken om een onbeperkt aantal acties op dezelfde trigger te stapelen, of voorwaardelijke logica kunt gebruiken om te controleren of aan een voorwaarde is voldaan voordat je een actie uitvoert met behulp van als/dan-logica.

• Artikel: Variabele modi in prototypes →

  Ontdek hoe je variabelemodi kunt gebruiken in je prototypes. Je kunt de waarden van specifieke modi instellen op basis van de context, of specifieke moduswaarden gebruiken in je expressies.

• Community-bestand: Geavanceerdetestomgeving voor prototypen →

  Make een kopie van ons testbestand voor geavanceerde prototypen om meer praktijkervaring op te doen met variabelen in prototyping.

Variabelen met API's

Variabelen worden nu ondersteund via de Figma API—voor het bouwen van plug-ins en widgets—en in de REST API. 

• Ontwikkelaarsdocumentatie: Voor de REST API →

  Ondersteuning voor variabelen in de REST API omvat eindpunten voor het opvragen, maken, bijwerken en verwijderen van variabelen.

• Ontwikkelaarsdocumentatie: Voor de plug-in API →

  Ondersteuning voor variabelen in de plug-in API omvat het aanmaken en lezen van variabelen, en het koppelen van variabelen aan componenten. Een plug-in kan bijvoorbeeld worden gemaakt om variabelen te importeren of te exporteren of om stijlen naar variabelen te converteren.

• Ontwikkelaarsdocumentatie: Voor de widget-API →

  Widgets kunnen variabelen benaderen via de plug-in API. Widgets kunnen variabelen maken en lezen, maar widget-eigenschappen kunnen niet aan variabelen worden gekoppeld.

• Figma-tutorial: Figma variabelensynchronisatie met GitHub

  Ontdek in deze videotutorial hoe je je variabelen synchroniseert met je codebase. We bespreken hoe je onze Variabelen-GitHub-actie voorbeeldrepo kunt gebruiken om je Figma-variabelen en je codebase te synchroniseren.
• Community-bestand: Ontwerpsystemen synchroniseren met de Variabelen REST API →

  Leer hoe je de Figma Variabelen REST API kunt gebruiken om geautomatiseerde workflows op te zetten om wijzigingen tussen ontwerpbestanden en je codebase te synchroniseren.