Kom i gang
Ikoner i Figma
Med Designsystemet velger du selv hvilken ikonpakke du vil bruke.
Med Designsystemet velger du selv hvilken ikonpakke du vil bruke. Som standard bruker Designsystemet Navs ikonpakke, som er åpen å bruke og bidra til. Du står helt fritt til å velge andre ikonbibliotek som står bedre i stil med den visuelle profilen til din virksomhet/ditt produkt.
Slik kobler du ikonene til ditt Figma-bibliotek
Når du laster ned vår Community-fil, er den koblet til vår interne versjon av Aksel Icons. For å bruke ikonene i egne filer må du koble dem til et bibliotek i din Figma-organisasjon.
Slik bruker du Aksel icons
- Last ned Aksel icons (Figma)
- Publiser ikonpakken som et bibliotek i Figma
- Åpne Manage libraries og velg ikonbiblioteket under Missing libraries
Deretter bruker du Swap library (Figma) for å bytte ikonene i Community-filen
Slik bruker du et annet ikonbibliotek
Hvis du ønsker å bruke et annet ikonbibliotek enn Aksel, må ikonene tilpasses slik at de kan erstatte ikonene i Designsystemet.
Fremgangsmåte:
- Forberedelser
- Gi ikonene dine samme navn som tilsvarende Aksel-ikoner. Du trenger bare å gjøre dette for ikonene som vises i tabellen nedenfor
- Legg til fargestilen
color/neutral/text-defaultpå ikonene
Nedenfor finner du to tabeller med ikonnavn og tilhørende ikoner:
- Meningsbærende ikoner bør erstattes med varianter som ligner mest mulig på Aksel
- Ikke-meningsbærende ikoner brukes som plassholdere (for eksempel i knapper), og kan erstattes fritt
Hvis du bruker versjon 1.8.0 eller eldre av Community-filen, vil du se flere ikoner i Swap library enn det som er listet i tabellene. Disse brukes kun i eksempler og trenger ikke å byttes.
| Name | Ikon |
|---|---|
| InformationSquare | |
| ExclamationmarkTriangle | |
| CheckmarkCircle | |
| XMarkOctagon | |
| ChevronRight | |
| ChevronLeft | |
| ChevronUp | |
| ChevronDown | |
| ChevronUpDown | |
| PadlockLocked | |
| MagnifyingGlass | |
| X-mark | |
| CloudUp | |
| CircleSlash |
| Navn | Ikoner |
|---|---|
| Person | |
| Laptop | |
| Calendar | |
| PrinterSmall | |
| Pencil | |
| RobotSmile | |
| MobileSmall |
-
Bytt bibliotek
- Bruk Swap library i Figma
-
Rydd opp
- Endre ikonnavn tilbake til ønsket navnekonvensjon
-
Kontroller farger
- Sjekk at ikonene har riktige farger etter byttet
- Hvis fargene ikke er bevart, må de oppdateres manuelt. Se oversikt over farger for ikoner (Github)