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 UKE.

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 skal denne automatisk bli aktivert, hvis ikke kan det manuelt aktiveres i Assets-tabben pĂ„ venstre side. Her vil du ogsĂ„ kunne se om det er kommet noen oppdatering i designsystemet, og velge Ă„ ta det inn i filen din. Det anbefales Ă„ alltid ha siste versjon av Punkt aktivert.

Velg Assets → Biblioteksikonet
I modalen ser du alle tilgjengelige biblioteker.

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

PÄ venstre side av skjermen ser du nÄ alle Assets tilgjengelig fra designsystemet. Drag and drop for Ä ta dem inn i designet ditt.

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. Enkelte tokens som avstander og border radius mÄ legges til manuelt.

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 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, gĂ„ til Preferences → Nudge amount.
  • Last ned Stark. Dette er en Figma-plugin som hjelper deg Ă„ sjekke kontraster og enkle UU krav raskt (fortsatt usikker? Ta kontakt med designsystem-teamet)
  • 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.

Trenger du Figma-tilgang?

Er du ansatt i Origo og trenger tilgang til Figma? Ta kontakt med Eivind i Slack-kanalen #figma-tips-og-triks. Skriv at du trenger tilgang og send han e-post adressen din, sÄ hjelper han deg videre.

NĂ„r du blir lagt til vil du ha tilgang til alle Origos prosjekter og mulighet til Ă„ opprette dine egne. Det er kun Team Designsystem som har lov til Ă„ endre Punkt-filene og publisere oppdatert versjon av designsystemet.