Når man arbejder professionelt med appdesign i Figma, er god struktur og navngivning en afgørende del af en effektiv designproces. Det handler ikke kun om at skabe flotte knapper og visuelle elementer, men også om at designe et system, som udviklere og andre designere let kan navigere i. God navngivning sparer tid, minimerer misforståelser og gør dit design langt mere skalerbart.
I dette blogindlæg gennemgår vi, hvordan man navngiver sine komponenter i Figma med fokus på funktion – ikke blot farvekoder og generiske betegnelser. Det gælder både knapper, farver, tekststile og ikoner.
Du kan læse mere om navngivning i appdesign herunder.
Hvorfor navngivning i Figma betyder noget
Når du først begynder at opbygge et større designbibliotek, bliver det hurtigt uoverskueligt, hvis dine komponenter og stilarter hedder “Button 1”, “#ffffff”, eller “Text Style 3”. Hvis du derimod navngiver dine elementer ud fra deres funktion, giver det et langt bedre overblik og gør samarbejdet mellem design og udvikling lettere.
Eksempel:
I stedet for #ffffff → brug --color-bg-primary
I stedet for Button Copy → brug Button/Primary/Default
Det skaber en semantisk struktur, der gør det muligt at genbruge og dokumentere designet langt mere effektivt – især i teams.
Navngivning af knapper: Primær, sekundær og tertiær
En af de mest almindelige UI-komponenter i appdesign er knapper. Når du designer knapper i Figma, bør du altid navngive dem efter deres rolle og tilstand.
Eksempel på navngivning:
Button/Primary/DefaultButton/Primary/HoverButton/Secondary/DisabledButton/Tertiary/IconOnly
Ved at opbygge dine navne hierarkisk og logisk, bliver det nemt at finde den rigtige komponent – og udvikleren ved præcis, hvilken funktion knappen har i brugeroplevelsen.
Navngivning af farver: Semantiske tokens frem for hexkoder
Undgå at kalde dine farver noget som Blue, Green, eller værre: #1D4ED8. Brug i stedet semantiske navne baseret på funktion:
Eksempler:
--color-bg-primary(til baggrundsfarver)--color-text-default--color-border-light--color-button-secondary-hover
Bruger du Figma’s Styles-funktion, kan du navngive dine farver og gøre dem til globale tokens, som opdateres ét sted, hvis farven skal ændres i hele projektet. Det er ekstremt værdifuldt i både navngivning i appdesign og udvikling.
Navngivning af tekststile: Hvad formidler teksten?
I stedet for at kalde dine tekststilarter Heading 1, Heading 2 og Body, så navngiv dem efter deres funktionelle formål:
Eksempler:
Text/Title/MainText/Paragraph/BodyText/Caption/SmallText/CTA/Button
Dette gør det lettere at forstå, hvor og hvordan stilen skal bruges – både for dig selv og for teamet. Det styrker samtidig den visuelle konsistens i hele dit appdesign.
Ikoner og andre komponenter
Selv simple komponenter som ikoner bør navngives funktionelt:
Eksempler:
Icon/Search/LineIcon/User/OutlineIcon/Close/Filled
Det gør det nemt at genbruge komponenter og opbygge en struktureret og skalerbar designfil.
Sådan får du struktur fra start
Et godt tip er at oprette en klar navngivningskonvention fra starten af dit projekt.
Eksempel:
Button/Primary/HoverCard/Product/WithImageForm/Input/Error
Når du konsekvent bruger en navngivningsstruktur som denne, vil dit Figma-projekt blive lettere at vedligeholde – både nu og når projektet vokser.
Konklusion
Et velfungerende appdesign handler ikke kun om æstetik, men også om systematik. Navngivning i Figma er en vigtig del af at skabe overskuelige, skalerbare og samarbejdsvenlige designfiler. Ved at navngive dine komponenter, farver og tekststilarter efter funktion frem for visuelle koder eller tilfældige betegnelser, sikrer du en klarere kommunikation mellem design og udvikling.
Det gør hele forskellen – især når projekter vokser, teams udvides og designs skal udvikles over tid.
Har du brug for hjælp til at strukturere dine designfiler i Figma? Så tag fat i os – vi arbejder dagligt med Figma, både til appdesign, webdesign og større designbiblioteker.
