Figma Skills er markdown-baserede instruktioner, der styrer hvordan AI Design Agenten opfører sig i din specifikke kontekst. Tænk på dem som genanvendelige tilpassede prompts — du skriver dem én gang, og de indkoder dit teams konventioner, komponentregler og kvalitetsstandarder, så agenten følger dem automatisk hver gang.

Alle kan skrive en skill. Ingen kode krævet. Ingen plugin-udvikling. Ingen API integration. Bare markdown tekst, der beskriver hvad agenten skal gøre og hvordan den skal gøre det. Skills er forskellen mellem en agent, der genererer generisk UI og en agent, der genererer DIT teams UI.

Nøgleindsigt

Skills forvandler Design Agenten fra en generisk AI til DIT teams AI. Uden skills bruger agenten standardkonventioner og gætter på dine præferencer. Med skills følger den automatisk dit afstandssystem, komponentnavngivningsregler, tilgængelighedskrav og brandretningslinjer. 30 minutter med at skrive 3-4 skills sparer timer med rettelser over uger med agentbrug.

Hvad Udgør en Figma Skill?

Skill Element Hvad Den Gør Eksempel
Navn (med /)Hvordan du aktiverer den/create-settings-page
FormålHvad skillen gør (én sætning)"Generer en indstillingsside, der følger vores teamkonventioner"
TrinOrdnede instruktioner agenten følger"1. Brug Section Header for hver gruppe..."
KonventionerRegler agenten skal følge"Brug altid 8px grid, brug aldrig absolut positionering"
KomponenterHvilke publicerede komponenter der skal bruges"Brug Toggle/Switch til boolean indstillinger"
VariablerHvilke design tokens der skal anvendes"Brug color-surface-primary til baggrunde"
UndgåHvad agenten skal undgå"Brug aldrig mere end 3 overskriftsniveauer per side"

Figma lancerede med 9 eksempel-skills, der dækker: opbygning af komponentbiblioteker, generering af nye designs fra briefs, produktion af tilgængelighedsspecifikationer, koordinering af multi-agent workflows og synkronisering af design tokens med kode. Udforsk dem på figma.com/community/skills. Den grundlæggende skill, /use-figma, giver agenten en fælles forståelse af hvordan Figma fungerer strukturelt. Teams tilpasser derfra.

At Skrive Din Første Skill (Med Eksempel)

Start med din mest gentagne designopgave. Hvis du laver formlayouts ugentligt, så skriv en /form-layout skill. Her er et komplet, virkelighedsnært eksempel:

/form-layout Formål: Generer formlayouts, der matcher vores designsystem-konventioner. Trin: 1. Opret en ramme med 24px vandret padding og 32px lodret padding 2. Tilføj en sidetitel ved hjælp af vores Heading/H1 komponent 3. Gruppér relaterede formfelter i sektioner ved hjælp af Section/Header komponent 4. Tilføj formfelter ved hjælp af vores komponentbibliotek (se regler nedenfor) 5. Tilføj handlingsknapper i bunden ved hjælp af vores Button komponenter 6. Anvend auto layout på alle containere Komponentregler: - Enkelt-linje tekstinput: brug Input/Text - Multi-linje tekst: brug Input/Textarea - Vælg fra muligheder: brug Select/Dropdown - Ja/nej toggle: brug Toggle/Switch (brug aldrig checkbox til enkelt boolean) - Flere valg: brug Checkbox/Group - Datoválg: brug DatePicker/Default Afstandsregler: - 16px mellem formfelter inden for en sektion - 32px mellem sektioner - 24px vandret padding - Labels altid OVER inputs, aldrig ved siden af (brug Body/Small stil) - Inkludér hjælpetekst under inputs når valideringsregler eksisterer Knappegler: - Primær handling højrejusteret i bunden - Sekundær handling (Annullér/Nulstil) til venstre for primær med 16px mellemrum - Knapper i vandret auto layout container - Klæbrig bundbjælke på mobil Valideringstilstande: - Fejl: rød kant (#EF4444) + fejlbesked nedenfor i Body/Small/Error - Succes: grønt flueben inline efter gyldigt input - Vis altid fejltekst — aldrig kun ændre kantfarve alene Undgå: - Brug aldrig pladsholdertekst som den eneste label - Stak aldrig mere end 8 felter uden et sektionsbrud - Brug aldrig en dropdown til færre end 4 muligheder (brug radioknapper) - Sæt aldrig påkrævet/valgfri indikatorer på hvert felt (markér minoriteten)

Denne skill fortæller agenten præcis hvordan dit team bygger formularer. Uden den bruger agenten Figmas standardkonventioner. Med den følger hver formular agenten genererer dine specifikke standarder — konsistent på tværs af teammedlemmer, konsistent på tværs af projekter.

📬 Får du værdi ud af dette?

Én handlingsrettet AI-indsigt per uge. Plus en gratis prompt-pakke når du tilmelder dig.

Tilmeld dig gratis →

Hvordan Skills Sammenligner med Andre AI Tilpassede Instruktioner

Skills er konceptuelt lig med tilpassede instruktionssystemer i andre AI-værktøjer:

Værktøj Tilpassede Instruktioner Oprettet Af Delt?
Figma SkillsMarkdown filer, der guider Design AgentenManuelt af teamJa (Fællesskabsbibliotek)
ChatGPT Tilpassede InstruktionerTekst, der former alle ChatGPT svarManuelt af brugerNej (kun personlig)
Claude Code CLAUDE.mdProjekt-niveau instruktioner til kodningsagentManuelt af teamJa (via repo)
Hermes Agent SkillsAuto-genererede genanvendelige opgavemønstreAutomatisk fra brugJa (skill bibliotek)

Den vigtigste forskel: Hermes Agent skaber skills automatisk fra gennemførte opgaver — lærer mens du arbejder. Figma kræver manuel skill-oprettelse — du lærer den eksplicit. Hermes' tilgang skalerer med brug; Figmas tilgang giver dig mere kontrol, men kræver forudgående investering. Begge producerer bedre AI-output end at bruge værktøjerne uden tilpassede instruktioner.

Det underliggende princip er det samme på tværs af alle disse systemer: AI præsterer bedre med eksplicit kontekst om dine præferencer, konventioner og standarder. Uanset om du skriver en Figma Skill, ChatGPT Tilpassede Instruktioner, eller en Claude CLAUDE.md fil, så producerer ICCSSE frameworket bedre instruktioner. Den gratis Prompt Optimizer anvender denne struktur automatisk — indsæt dit skill-udkast, få en klarere version tilbage.

4 Essentielle Skills Hvert Designteam Har Brug For

1. /form-layout — Standardiserer formdesign på tværs af teamet. (Eksempel ovenfor.)

2. /page-layout — Definerer dine sidestruktur-konventioner: header placering, sidebar bredde, indhold max-bredde, footer struktur, navigationsmønstre, responsive breakpoints.

3. /component-variant — Fortæller agenten hvordan man skaber nye komponentvarianter, der matcher dit eksisterende system: navngivningskonventioner, tilstandsdefinitioner (standard, hover, aktiv, deaktiveret, fejl), størrelsesskala (sm, md, lg), og dokumentationskrav.

4. /accessibility-check — Definerer dine tilgængelighedsstandarder: WCAG niveau (AA vs AAA), minimum berøringsmålstørrelser, kontrastforhold, overskriftshierarkiregler, påkrævede ARIA labels, og skærmlæser-annotationsformat. Se vores guide til tilgængelighedsspecifikationer for detaljer.

📬 Vil du have mere som dette?

Én handlingsrettet AI-indsigt per uge. Plus en gratis prompt-pakke når du tilmelder dig.

Tilmeld dig gratis →

Ofte Stillede Spørgsmål

Hvor mange skills skal jeg oprette?

Start med 3-4, der dækker dine mest almindelige designopgaver: en formular-skill, en sidelayout-skill, en komponentvariant-skill, og en tilgængelighedstjek-skill. Disse dækker 80% af det daglige designarbejde. Tilføj flere skills, når du identificerer gentagne mønstre, som agenten håndterer inkonsistent.

Kan skills kalde andre skills?

Ja — skills kan referere til andre skills og skabe kædede workflows. En /new-feature skill kunne aktivere /form-layout til input-sektioner, derefter /accessibility-check til compliance-gennemgang. Dette muliggør komplekse multi-trin workflows fra en enkelt aktivering.

Forbruger skills kreditter?

Selve skillen (markdown instruktionerne) forbruger ikke kreditter. Agenthandlingerne, som skillen udløser (generering af designs, redigering af komponenter) forbruger kreditter med normal hastighed. En velskrevet skill kan faktisk spare kreditter ved at producere bedre output ved første forsøg — færre iterationer betyder færre kreditforbrugende regenereringer.

Kan jeg dele skills med Figma fællesskabet?

Ja — Figmas fællesskabs-skillsbibliotek lader dig publicere og gennemse skills. Dette betyder, at du kan bruge skills skrevet af andre designteams til almindelige mønstre (dashboard layouts, onboarding flows, indstillingssider) uden at skrive dem fra bunden.

Hvor gemmes skills?

Skills er tilknyttet din Figma organisation eller personlige konto. Team-niveau skills er tilgængelige for alle teammedlemmer; personlige skills er kun tilgængelige for dig. Gem dine vigtigste skills på team-niveau, så alle designere drager fordel af de samme konventioner.

Oplysning: Nogle links i denne artikel er affiliate-links. Vi anbefaler kun værktøjer, vi personligt har testet og bruger regelmæssigt. Se vores fulde oplysningspolitik.