Hopp til innhold

Høydepunkter fra august 2022

Øyvind Nordbø og William Killerud

2022.09.01

Her er høydepunktene fra Jøkul i august.

  • Figma-biblioteket er bygget opp fra bunnen av med rykende ferske Figma-features
  • Select har fått et oppdatert design basert på farger, uten ikoner
  • Animasjonsverdier (easingkurver og varigheter) er dokumentert i Figma
  • Fokusringen rundt lenker for tastaturbrukere har blitt litt mer luftig

Og en drøss med mindre forbedringer og feilrettinger.

Ellers jobber Jøkul-teamet med å lande nytt design for kompakte varianter av komponenter i kode. Et førsteutkast er allerede ute i Figma-verden, så det er muligheter for å bli med på designfinpussen om du vil.

Nytt Figma-bibliotek

Etter flere år med utvikling av Jøkul i design og kode har mye endret seg. Figma-biblioteket har gått gjennom mange iterasjoner. Over tid har kvaliteten og kontinuiteten fra komponent til komponent forvitret, og biblioteket har ikke holdt tritt med koden.

Det var rett og slett på tide å "rydde i Figma-boden".

Hvorfor denne endringen?

Vi begynte å vurdere en gjenoppbygning av biblioteket i februar, og i sommer slapp Figma en flunka ny versjon av Auto-Layout og Component Properties. Siden arbeidet med å rydde opp i gammalt rot og slurv allerede var i gang, var det naturlig å gjøre dette nå med de nye Figma-featuresene. Vi fikk muligheten til å speile komponentenes adferd i kode enda mer presist, gjøre det enklere og raskere (for alle) å endre på, oppdatere og utvide designsystemet, samtidig som vi rigger oss for langsiktig vekst.

Hva er nytt?

På overflaten er det ikke veldig mye som egentlig er nytt. De aller fleste komponentene heter det samme som før, og skal stort sett se like ut som før. Under panseret er derimot alt nytt.

Komponentene følger nå spacingskalaen (med noen få særskilte unntak), og komponetene er nå konsekvente i bruk av stilsettene og design tokens på tvers av states. Siden dette ikke har vært tilfellet frem til nå, kan komponenter man har blitt vant til å se på over tid oppleves annerledes i formen, siden de har blitt oppdatert til å følge form og adferd slik de gjør i koden.

Det nye bibliotekets struktur

De forskjellige delene av biblioteket er delt opp i egne filer som snakker med hverandre for å unngå rot og misforståelser om hva som er hva. Samtidig unngår vi massivt tunge filer som laster tregt. På denne måten gjør vi det også enkelt for oss selv å utvide designsystemet med flere verktøy og funksjoner. I tillegg kan man nå velge selv hvilke deler av designsystemet man vil ha påskrudd, i stedet for å få absolutt alt lastet inn hele tiden.

Filene er delt opp i:

  • Assets (Statiske ressurser som ikoner, o.l.)
  • Components (Det dere til nå har kjent som komponenter)
  • Core (Kjernefunksjoner som design tokens og stilsett, farger, skygger, m.m.)
  • Patterns (Sammensatte komponenter som brukes ofte i samme form, også kjent som "Mønstre").

Rendyrking av Compact og egne varianter for mobil

Originalideen til "Compact" var at de skulle brukes i informasjonstette løsninger (fagsystemer, interne løsninger, etc.).

Siden vi manglet noe som het "Mobil" i biblioteket har Compact endt opp med å bli en slags krykke for mobilskisser der man har følt at det har vært for trangt til "vanlige" komponenter. Typografiskalaen for Compact har vært litt hummer og kanari. Nå bruker den konsekvent den samme skalaen over hele linja (Desktop). Compact har heller ikke vært konsekvent tilgjengelig for alle komponenter, og de har ikke kunnet blitt brukt av de som trenger de, slik de var tiltenkt. Nå kan man det.

Alle komponenter har nå en egen dedikert mobilstørrelse som reflekterer hva som finnes i kode, og som bruker mobilens typografiskala.

De nye prinsippene vi presenterte for Compact før sommeren er som følger:

  • Compact er laget og optimalisert for desktop-løsninger.
  • Compact skal ha minst mulig padding. Målet er funksjonell plassbesparelse.
  • Hovedregelen for Compact padding er halvparten av desktop.
  • Tekst i Compact følger desktop-typografiskala. Komponentene er tiltenkt for løsninger hvor brukerne sitter på enheter med litt avstand, lenge, over tid. Da må de være lesbare.
  • Compact komponenter i Figma tilbys som en "Size"-variant på lik linje som desktop og mobil.

Bruk av compact styres av hvor mye luft en komponent behøver uavhengig av skjermstørrelse, og skal bare brukes i interne systemer og løsninger med høy informasjonstetthet. For eksempel; styr unna compact hvis du trenger å støtte touch-skjermer.

Components Properties

Noen steder bruker vi Component Properties i stedet for Variants i Figma (Ny funksjon, fra sommeren). Det er i hovedsak en måte å tilgjenggeliggjøre innstillinger for å skjule/vise deler av en komponent, knytte mange tekstelementer til samme tekstverdi så det er lettere å endre flere steder samtidig, eller for å tilgjengeliggjøre muligheten for Slot Components (se nedenfor).

Slot components

Noen steder vil dere se at en komponent har en rosa boks hvor det står <Erstatt meg>. Dette er komponenter med fleksibelt innhold, også kjent som "Slot Components".

Siden vi har både mønstre og komponenter som potensielt kan (eller skal) holde andre komponenter, har vi løst dette ved å la brukerne selv legge inn de komponentene de ønsker å bruke der hvor en slot er tilgjengelig. Du kan enten bruke andre ferdigbygde Jøkul komponenter, eller sette sammen dine egne komponenter og bruke de i en slot.

Et eksempel på dette er TaskCard; hvor innholdet vil variere utifra case og behov, men det er noen fellesnevnere som bakgrunnsfarge, padding og skygge. Da tilbyr vi en grunnkomponent som designere kan bygge innhold på toppen av.

Et annet eksempel er tabeller; som også har fått "slots" slik at man kan sette sammen celler med interaktivt innhold utover tekst. Dette gjør at alle teamene våre kan ta i bruk flere deler av designsystemet, og dra nytte av den kollektive intelligensen vi samler på tvers av teamene.

FAQ

Si ifra om noe ikke funker

Biblioteket har blitt noen uker gammelt, men siden det er bygget på nytt fra bunnen av kan det hende noen ting ikke fungerer helt som det skal.

Det er viktig at du sier ifra enten direkte til Øyvind Nordbø, eller i kanalen Support Designsystem på Teams, hvis du finner feil.

Oppdatert Select-design

Select fikk et oppdatert design i august. Pila i komponenten var årsaken til en bug, som gjorde at vi ønsket å fjerne den. Tidligere hadde også checkmark skapt problemer. Derfor ville vi heller bruke Fremtind-farger for å vise tilstanden i komponenten.

Du kan teste det nye designet på Select-siden under Komponenter.

Animasjonsverdier

De ulike easingkurvene og varighetene vi bruker i animasjoner i Jøkul er blitt dokumentert i Figma. Du finner dem i Core-fila på siden Design Tokens, under overskriften Animasjon.

Diverse bugfikser og forbedringer

Figma

  • Fikset TaskCard sin auto-layout så innholdskomponenter wrapper både i bredden og høyden.
  • Table/Table Cell har fått en egen slot component.
  • Checkbox sin Check er nå en frittstående koponent du kan bruke i slots og liknende.

GitHub

  • Ryddet opp installasjons- og bruksveiledninger i READMEs (#2979).
  • Gjør tabelloverskrifter u-sticky som utgangspunkt (#2990).
  • Endre metode for å finne ut om relatedTarget er utenfor datovelgeren (#2998, #3012, #3024).
  • La til date-fns som avhengighet i DatePicker (#3003).
  • Forbedret opplevelsen ved sletting av innhold i inputfelt med maske (#3007).
  • Oppdater intern state i ExpandButton ved endring av prop (#3009).
  • Tilbakestiller søketekst ved valg i Select (#3013, #3017).
  • La til loading="lazy" og decoding="async" på bilder (#3014).
  • Endret fokusring rundt lenker til outline med litt avstand (#3015, #3018).
  • Kortet ned animasjonstiden i hovedmenyen (#3021).
  • Dokumenter hvordan få listevisning av tabell på egendefinert skjermbredde (#3030).
  • Fiks navigasjon med piltaster forbi skjulte elementer i søkbar Select (#3034).

Takk

Takk til alle bidragsytere, både på GitHub og i Figma!

  • JoMs
  • daa1
  • kennidenni
  • paulinfrancis
  • hegebjo
  • Sven Håkon
  • Joachim

En stor takk også til alle som er med på designsystemforum!