Styles

Farger, tekst-stiler og grids. Grunnleggende byggeklosser for alt vi lager. Derfor er det helt nødvendig å være samkjørt med resten av teamet, og seg selv. Spesielt tekst-stiler har en tendens til å flyte ut, og plutselig sitter du med en nettside full av tekst i 18px - 22px som helst skulle vært én og samme størrelse. Nettopp her kommer stiler, eller styles, inn i bildet. Ved å definere overordnede farger, tekst-stiler eller til og med grids får du i hele dokumentet tilgang til de samme stilene og kan sørge for at alt henger sammen. Trenger du plutselig å gjøre en endring er det bare å oppdatere en av stilene, så gjøres samme endring overalt hvor du har brukt stilen tidligere.

Copy/Paste properties

Objekter i Figma kan ha mye forskjellige egenskaper. Alt fra fill og strokes til effekter og blend modes. Av og til ønsker man å kopiere disse egenskapene over til andre elementer, uten å manuelt måtte legge til alt én etter én. Da er “Copy properties” hendig. Den finnes enkelt i høyreklikkmenyen under “Copy/Paste as”, eller så kan du bruke den hendige tastekombinasjonen CMD+Option+C (og da logisk nok CMD+Option+V for å lime inn egenskapene i det nye elementet).

Komponentvarianter

En komponent i Figma er et linket objekt som overfører alle endringene sine til barna (eller kopiene) sine. Dette er veldig kjekt å ha når du skal ha mye av samme element, f.eks. knapper o.l. Da trenger du bare gjøre endringer ett sted for å oppdatere hele designet ditt, noe som sikrer helheten og du slipper unna masse rare varianter av samme knapp. Likevel trenger man ofte litt ulike versjoner av samme type element. En knapp er ikke alltid en knapp. Skal to knapper stå sammen ønsker du kanskje å fremheve den ene? Kanskje trenger du av og til et ikon for bedre forklare hva knappen gjør? Eller så har du kanskje forskjellige bakgrunner som gjør at knappene også må bytte farge? Ved å opprette varianter av komponenten ditt kan du enkelt lage ulike versjoner av samme element og gi disse egne egenskaper som bestemmer hvordan det skal se ut. Fordelen her, kontra det å lage flere ulike frittstående komponenter, er at du får full oversikt over alle variantene og enkelt kan bytte mellom de ulike gjennom et eget sidepanel, skreddersydd for komponenten du har opprettet. Her er det mulig å dykke dypt, så bare å sette i gang!

CMD+Y (Outline view)

Kommer du fra Adobe programmene er det godt mulig du er kjent med denne funksjonen allerede. Muligheten til å se omrissene av alle objektene dine, uavhengig om de er skjult, gjemt bak noe annet eller uten strek eller farge er gull verdt, særlig når du prøver å få tak i den ene knappen som ligger litt keitete til…

Auto layout

Auto layout er kanskje den funksjonen i Figma jeg bruker mest. Hurtigtasten Shift+A er så mye brukt at fingrene mine er klar til å lage nye auto layouts så fort jeg passivt sitter ved tastaturet mitt. I all hovedsak handler det om å organisere og plassere ting i forhold til hverandre med samme mellomrom og justering. Knapper, tekstblokker, lister, menyer, skjemaer, nesten alt i digitale løsninger plasseres med bestemte avstander i forhold til hverandre. Organiseres disse med auto layout er det en lek å bytte på rekkefølger, endre avstander og sørge for at alle avstander er pixel perfect. I tillegg er måten auto layout fungerer direkte oversettelig til CSS’ flexbox, noe som gjør at ikke bare jobben din blir lettere, men også utviklernes. Snakk om to fluer i en smekk!

Adobe, nå som dere har kjøpt opp Figma, kan dere ikke være så snille å gjøre auto layout til en standard funksjon i alle programmene deres? Pliiis?

RALF (Remove Auto Layout Faster)

Ble du litt ivrig i bruken av Auto layout, gikk litt langt i oppsettet av noe som nå må struktureres på en heeelt annen måte, eller bare fått en fil jeg har jobbet i? Da kan det ofte være kompliserte og merkelige auto layout-oppsett som er vanskelig å jobbe med. En enkel måte å bryte opp oppsettet på er å gjentatte ganger bruke CMD+Shift+G for å avgruppere elementene. Baksiden med denne metoden er at alle elementene fort hopper rundt omkring og du må bygge alt opp igjen helt fra bunnen av. Alternativt kan du bruke Option+Shift+A for å fjerne auto layouten, men dette må gjøres i hvert enkelt element som bruker auto layout. Ikke helt optimalt… Bruk heller pluginen Remove Auto Layout Faster (også kjent som RALF)! Med RALF får du enkelt dekonstruert auto layouts til vanlige frames, uten miste det eksisterende oppsettet, med ett enkelt klikk. Kan virkelig anbefales de av dere som ikke er helt bestevenn med auto layout.

Craft-skisser

UX handler ikke bare om hvordan ting fungerer for de som bruker en tjeneste. Det er også viktig å sørge for at informasjonen som skal gis er enkel å sette sammen på baksiden for de som skal prøve å gi informasjon. Majoriteten av alle nettsidene vi lager bygger vi med Craft CMS for å sørge for at alt som ligger på nettsiden skal være enkelt å holde oppdatert. For å hjelpe kundene våre med å gjøre terskelen for innholdsendring lav passer vi ekstra godt på at oppsettet de møter på baksiden skal gi mening. Ved å sette opp skisser på begge sider av byggeklossene vi skal bruke på en nettside kan vi enkelt diskutere løsninger med kunden for å lage det beste produktet. Enkle elementer har vi allerede satt opp med auto layout i Figma som vi kan dra og flytte på ulike felter og valg sammen med kunden, så vi effektivt kommer frem til hvordan vi vil ha det. I tillegg slipper vi uventede overraskelser når vi utviklerne leverer sitt førsteutkast. Et supert hjelpemiddel i enhver nettsideprosess!