For designere

Designsystemet Punkt skal hjelpe deg som designer i Origo Ă„ bygge digitale lĂžsninger som fĂžlger Oslo kommunes visuelle identitet og som er universelt utformet.

Vi bruker Figma som hovedverktÞy og her finner du ogsÄ designsystemet Punkt med retningslinjer, stiler og komponenter som du trenger for Ä lage brukergrensesnitt.

Punkt er bygget med utgangspunkt i Oslo kommunes visuelle identitet som vi anbefaler deg som designer Ă„ bli godt kjent med. Du finner den i Designmanualen som driftes av blant annet BĂ„rd Jemtland i UKE.

Trenger du Figma-tilgang?

Er du ansatt i Origo og trenger tilgang til Figma? Vi har tre ulike nivÄer:

  • Full editor-tilgang: for designere og andre som mĂ„ redigere og endre skisser
  • Dev-mode: for utviklere som vil jobbe direkte ut i fra skissene
  • Viewer-restricted: for utviklere og andre som Ăžnsker Ă„ se skissene

Med editor-tilgang har du mulighet til Ä gi viewer-restricted-tilgang til filene dine. Det er viktig Ä pÄpeke at dersom du har editor-tilgang godtar du at du tar ansvar for hvem du gir tilgang til.

VÊr obs pÄ at du har mulighet til Ä sette andre som editor dersom du har editor-tilgang selv. Vi har satt opp rutiner for tilgangsstyring for Ä ha oversikt over hvem som tar i bruk de ulike plassene vi betaler for.

Du, som editor, har ikke lov til Ä gi andre brukere editor-tilgang eller Dev-mode-bruker. Dersom du har behov for at andre skal kunne redigere eller endre i filene dine mÄ dette gÄ gjennom en av adminene i Figma.

NÄr du blir lagt til vil du ha tilgang til alle Origos prosjekter og mulighet til Ä opprette dine egne. Ditt team skal ha et eget omrÄde i Figma som du skal ha fÄtt tilgang til.

Om Komponentbiblioteket

Alle Punkt-komponenter skal vĂŠre tilgjengelig i kode og i Figma. Komponentene er satt opp i Figma med auto layout og variants, hver komponent kommer med alle states og visningsmuligheter inkludert.

Vi anbefaler deg som bruker Figma til Ä skisse og bli god venn med auto layout. I tillegg til at det vil gi deg en dypere forstÄelse av hvordan komponentene i Punkt er bygget opp, vil det redusere tiden du vil bruke pÄ Ä lage detaljerte skisser. Det blir enklere Ä bruke jo mer du jobber med det.

Kom i gang med Punkt i Figma

Designsystemet i Figma bestĂ„r av et bibliotek “Punkt - Origo Designsystem”. NĂ„r du oppretter en ny fil blir biblioteket automatisk bli aktivert, hvis ikke kan de manuelt aktiveres i Assets-tabben pĂ„ venstre side, under team library. Her vil du ogsĂ„ kunne se om det er noen oppdatering til bibliotekene, og velge Ă„ ta dem inn i filen din. Det anbefales Ă„ alltid ha siste versjon av bibliotekene aktivert.

NĂ„r disse filene er lagt til vil man finne komponenter til bruk under Assets-tabben.

Assets finner du pÄ venstre side i Figma

PÄ samme mÄte fÄr man tilgang til en rekke stiler (design tokens) som skal brukes i stedet for egendefinerte verdier, f.eks pÄ farger, typografi, skygger og grid.

Color tokens i Figma

Tips og triks

Takket vÊre masse flinke folk pÄ internett sÄ finnes det en mengde plugins, tips og triks for Ä gjÞre Figma-hverdagen enklere. Vi har samlet noen av vÄre beste tips nedenfor:

  • Endre “Big Nudge
” innstillingen i Figma fra 10pt til 8pt, da hele spacingskalaen vĂ„r gĂ„r opp i Ă„ttegangeren. ( → Preferences → Nudge amount
)
  • Se hvilke plugins vi bruker i Origo her
  • Har du masse layers kalt “Group 456” og “Group 6042”? Du kan rename alle raskt ved Ă„ markere dem i layers-menyen og trykke cmd+R.
  • Bli bedre med shortcuts! Det gjĂžr at man jobber mye fortere. Se alle Figma sine shortcuts ved Ă„ trykke pĂ„ menyen under “help and account”
Velg Keyboard shortcuts fra toppmenyen.

Â