Figma Skills zijn markdown-gebaseerde instructies die bepalen hoe de AI Design Agent zich gedraagt in jouw specifieke context. Beschouw ze als herbruikbare aangepaste prompts — je schrijft ze één keer, en ze coderen de conventies van je team, componentregels en kwaliteitsstandaarden zodat de agent ze automatisch volgt elke keer.

Iedereen kan een skill schrijven. Geen code vereist. Geen plugin-ontwikkeling. Geen API-integratie. Gewoon markdown-tekst die beschrijft wat de agent moet doen en hoe het dit moet doen. Skills maken het verschil tussen een agent die generieke UI genereert en een agent die de UI van JOUW team genereert.

Belangrijkste Punt

Skills veranderen de Design Agent van een generieke AI naar de AI van JOUW team. Zonder skills gebruikt de agent standaardconventies en raadt je voorkeuren. Met skills volgt het automatisch je spatiëringssysteem, componentnaamregels, toegankelijkheidseisen en merkrichtlijnen. 30 minuten besteden aan het schrijven van 3-4 skills bespaart uren aan correcties over weken van agentgebruik.

Waaruit Bestaat een Figma Skill?

Skill Element Wat Het Doet Voorbeeld
Naam (met /)Hoe je het aanroept/create-settings-page
DoelWat de skill doet (één zin)"Genereer een instellingenpagina volgens onze teamconventies"
StappenGeordende instructies die de agent volgt"1. Gebruik Section Header voor elke groep..."
ConventiesRegels die de agent moet volgen"Gebruik altijd 8px raster, nooit absolute positionering"
ComponentenWelke gepubliceerde componenten te gebruiken"Gebruik Toggle/Switch voor boolean instellingen"
VariabelenWelke design tokens toe te passen"Gebruik color-surface-primary voor achtergronden"
Niet DoenWat de agent moet vermijden"Nooit meer dan 3 kopniveaus per pagina gebruiken"

Figma lanceerde met 9 voorbeeldskills die het volgende behandelen: bouwen van componentbibliotheken, genereren van nieuwe ontwerpen uit briefings, produceren van toegankelijkheidsspecs, coördineren van multi-agent workflows en synchroniseren van design tokens met code. Verken ze op figma.com/community/skills. De fundamentele skill, /use-figma, geeft de agent een gedeeld begrip van hoe Figma structureel werkt. Teams passen vanaf daar aan.

Je Eerste Skill Schrijven (Met Voorbeeld)

Begin met je meest herhaalde ontwerptaak. Als je wekelijks formulierlay-outs maakt, schrijf dan een /form-layout skill. Hier is een compleet, praktijkvoorbeeld:

/form-layout Doel: Genereer formulierlay-outs die overeenkomen met onze ontwerpssysteemconventies. Stappen: 1. Maak een frame met 24px horizontale padding en 32px verticale padding 2. Voeg een paginatitel toe met ons Heading/H1 component 3. Groepeer gerelateerde formuliervelden in secties met Section/Header component 4. Voeg formuliervelden toe met onze componentbibliotheek (zie regels hieronder) 5. Voeg actieknoppen onderaan toe met onze Button componenten 6. Pas auto layout toe op alle containers Componentregels: - Eenregelige tekstinvoer: gebruik Input/Text - Meerregelige tekst: gebruik Input/Textarea - Kiezen uit opties: gebruik Select/Dropdown - Ja/nee schakelaar: gebruik Toggle/Switch (nooit checkbox voor enkele boolean) - Meerdere keuzes: gebruik Checkbox/Group - Datumselectie: gebruik DatePicker/Default Spatiëringsregels: - 16px tussen formuliervelden binnen een sectie - 32px tussen secties - 24px horizontale padding - Labels altijd BOVEN invoervelden, nooit ernaast (gebruik Body/Small stijl) - Hulptekst onder invoervelden toevoegen wanneer validatieregels bestaan Knopregels: - Primaire actie rechts uitgelijnd onderaan - Secundaire actie (Annuleren/Reset) links van primaire met 16px tussenruimte - Knoppen in horizontale auto layout container - Plakkerige onderste balk op mobiel Validatiestatus: - Fout: rode rand (#EF4444) + foutmelding eronder in Body/Small/Error - Succes: groen vinkje inline na geldige invoer - Toon altijd fouttekst — verander nooit alleen de randkleur Niet doen: - Nooit placeholder tekst gebruiken als enige label - Nooit meer dan 8 velden stapelen zonder sectie-onderbreking - Nooit een dropdown gebruiken voor minder dan 4 opties (gebruik radio buttons) - Nooit vereist/optioneel indicatoren op elk veld zetten (markeer de minderheid)

Deze skill vertelt de agent precies hoe jouw team formulieren bouwt. Zonder deze gebruikt de agent Figma's standaardconventies. Ermee volgt elk formulier dat de agent genereert jouw specifieke standaarden — consistent tussen teamleden, consistent tussen projecten.

📬 Haal je hier waarde uit?

Één bruikbaar AI-inzicht per week. Plus een gratis promptpakket wanneer je je inschrijft.

Gratis inschrijven →

Hoe Skills Zich Verhouden Tot Andere AI Aangepaste Instructies

Skills zijn conceptueel vergelijkbaar met aangepaste instructiesystemen in andere AI-tools:

Tool Aangepaste Instructies Gemaakt Door Gedeeld?
Figma SkillsMarkdown bestanden die de Design Agent begeleidenHandmatig door teamJa (Community bibliotheek)
ChatGPT Custom InstructionsTekst die alle ChatGPT reacties vormgeeftHandmatig door gebruikerNee (alleen persoonlijk)
Claude Code CLAUDE.mdProjectniveau instructies voor codeeragentHandmatig door teamJa (via repo)
Hermes Agent SkillsAutomatisch gegenereerde herbruikbare taakpatronenAutomatisch uit gebruikJa (skill bibliotheek)

Het belangrijkste onderscheid: Hermes Agent creëert skills automatisch uit voltooide taken — leren terwijl je werkt. Figma vereist handmatige skill-creatie — je leert het expliciet. Hermes' benadering schaalt met gebruik; Figma's benadering geeft je meer controle maar vereist voorafgaande investering. Beide produceren betere AI-output dan de tools gebruiken zonder aangepaste instructies.

Het onderliggende principe is hetzelfde voor al deze systemen: AI presteert beter met expliciete context over je voorkeuren, conventies en standaarden. Of je nu een Figma Skill schrijft, ChatGPT Custom Instructions, of een Claude CLAUDE.md bestand, het ICCSSE framework produceert betere instructies. De gratis Prompt Optimizer past deze structuur automatisch toe — plak je skill-concept, krijg een duidelijkere versie terug.

4 Essentiële Skills Die Elk Ontwerpteam Nodig Heeft

1. /form-layout — Standaardiseert formulierontwerp binnen het team. (Voorbeeld hierboven.)

2. /page-layout — Definieert je paginastructuurconventies: header plaatsing, zijbalkbreedte, content max-breedte, footer structuur, navigatiepatronen, responsieve breekpunten.

3. /component-variant — Vertelt de agent hoe nieuwe componentvarianten te maken die overeenkomen met je bestaande systeem: naamconventies, statusdefinities (standaard, hover, actief, uitgeschakeld, fout), grootteschaal (sm, md, lg), en documentatievereisten.

4. /accessibility-check — Definieert je toegankelijkheidsnormen: WCAG niveau (AA vs AAA), minimale aanraakdoelgroottes, contrastratios, kopstructuurregels, vereiste ARIA labels, en schermlezer annotatie-indeling. Zie onze toegankelijkheidsspecs gids voor details.

📬 Wil je meer zoals dit?

Één bruikbaar AI-inzicht per week. Plus een gratis promptpakket wanneer je je inschrijft.

Gratis inschrijven →

Veelgestelde Vragen

Hoeveel skills moet ik maken?

Begin met 3-4 die je meest voorkomende ontwerptaken dekken: een formulier skill, een paginalay-out skill, een componentvariant skill, en een toegankelijkheidscontrole skill. Deze dekken 80% van het dagelijkse ontwerpwerk. Voeg meer skills toe wanneer je herhaalde patronen identificeert die de agent inconsistent behandelt.

Kunnen skills andere skills aanroepen?

Ja — skills kunnen naar andere skills verwijzen, waardoor gekoppelde workflows ontstaan. Een /new-feature skill zou /form-layout kunnen aanroepen voor invoersecties, dan /accessibility-check voor nalevingscontrole. Dit maakt complexe meerstaps workflows mogelijk vanuit één aanroep.

Verbruiken skills credits?

De skill zelf (de markdown instructies) verbruikt geen credits. De agentacties die de skill activeert (ontwerpen genereren, componenten bewerken) verbruiken credits tegen het normale tarief. Een goed geschreven skill kan daadwerkelijk credits besparen door betere output te produceren bij de eerste poging — minder iteraties betekent minder credit-verbruikende regeneraties.

Kan ik skills delen met de Figma community?

Ja — Figma's community skills bibliotheek laat je skills publiceren en doorzoeken. Dit betekent dat je skills kunt gebruiken die door andere ontwerpteams zijn geschreven voor veelvoorkomende patronen (dashboard lay-outs, onboarding flows, instellingenpagina's) zonder ze vanaf nul te schrijven.

Waar worden skills opgeslagen?

Skills zijn gekoppeld aan je Figma organisatie of persoonlijke account. Teamniveau skills zijn toegankelijk voor alle teamleden; persoonlijke skills zijn alleen toegankelijk voor jou. Bewaar je belangrijkste skills op teamniveau zodat alle ontwerpers profiteren van dezelfde conventies.

Openbaarmaking: Sommige links in dit artikel zijn affiliate links. We bevelen alleen tools aan die we persoonlijk hebben getest en regelmatig gebruiken. Zie ons volledige openbaarmakingsbeleid.