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.

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.

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”