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

Dersom du ønsker Editor-tilgang kan du sende en forespørsel via Figma eller ta kontakt med Eivind Lund på Slack. Alle editors må godkjennes av en admin i Figma.

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.

Hvem er admin og kan kontaktes for editor-tilgang?

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.

Vil du lære mer om auto-layout? Les mer om det her.

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.

 

Hvordan kan jeg bidra inn i designsystemet?

Vi vil veldig gjerne ha innspill fra deg og teamet ditt. Om du har satt opp en fin komponent som er brukertestet og fungerer godt og som ikke finnes i designsystemet fra før, vil vi gjerne implementere den. Før du huker tak i oss, tenk over:

  • Ligger det noe i komponentbiblioteket i Figma/her på nettsiden som ligner?
  • Vet du om andre team som har samme behov?

Hvis du har laget et forslag til en forbedring eller en ny komponent – kan du starte med å diskutere løsningen i UX-forum eller sende oss en melding på Slack i #origo-punkt (hvis det føles litt voldsomt så er vi også tilgjengelige på DM, send en melding til hvem som helst av oss på teamet). Vi ser også på muligheten for å legge opp til branching av Figma-filen. Vi sier ifra med en gang vi har en god prosess for å få til dette!

Les mer om hvordan du kan bidra inn til Punkt her.