Mockups vs Figma

En mockup er en statisk representasjon av et produkt, ofte brukt i produktdesign og utvikling for å vise hvordan det endelige produktet kan se ut og brukes.

Den inkluderer designelementer som typografi, logoer, bilder, fargepaletter og navigasjonsvisualer som er en del av den endelige brukeropplevelsen.

Mockups brukes for å presentere og evaluere designkonsepter, UI og UX, slik at det kan gis tilbakemelding og iterasjon før produktet er fullt utviklet.

Figma er et ledende skybasert grafisk design- og prototypeverktøy som brukes av millioner av designere og utviklere verden over for å designe, prototype og samarbeide om digitale produkter. Til forskjell fra tradisjonelle designverktøy som Adobe XD eller Sketch kjører Figma direkte i nettleseren, noe som eliminerer behovet for installasjon og muliggjør sanntidssamarbeid.

Siden lanseringen i 2016 har Figma revolusjonert designbransjen med sin samarbeidsorienterte tilnærming. I 2022 forsøkte Adobe å kjøpe Figma for 20 milliarder dollar, men avtalen ble avbrutt i 2023 på grunn av regulatoriske bekymringer – et vitnesbyrd om Figmas markedsdominans.

Figmas mest karakteristiske egenskap er sanntidssamarbeid som minner om Google Docs for design:

• Multiplayer-redigering: Flere designere kan jobbe på samme fil samtidig
• Live-markører: Se andre brukeres markører i sanntid med fargemarkering
• Kommentarer: Legg igjen kommentarer direkte på designelementer for feedback
• Observasjonsmodus: Stakeholders kan følge en designers visning i sanntid
• Versjonshistorikk: Fullstendig oversikt over alle endringer med mulighet for tilbakerulling

Denne samarbeidsfunksjonaliteten har gjort Figma til det foretrukne verktøyet for distribuerte team, spesielt etter pandemien da fjernarbeid ble normen.

Design

• Vektorbasert design: Kraftige vektorverktøy for presis design
• Auto Layout: Responsiv layout som tilpasser seg innholdet automatisk
• Komponenter: Gjenbrukbare designelementer med varianter og properties
• Designtokens: Variabler for farger, typografi og spacing
• Plugins: Stort økosystem med over 1 500 plugins for utvidet funksjonalitet

Prototyping

• Interaktive prototyper: Lag klikkbare prototyper direkte i Figma
• Animasjoner: Smart Animate for sømløse overganger
• Enhetsforhåndsvisning: Test prototyper på mobil og nettbrett i sanntid
• Brukerflyt: Definer navigasjon og interaksjonsmønstre
• Deling: Del prototyper med en lenke – ingen installasjon nødvendig

Dev Mode

• CSS-kode: Automatisk generering av CSS fra design
• Design-til-kode: Inspiser design med eksakte mål og verdier
• Komponent-dokumentasjon: Koble designkomponenter til kodebiblioteker
• Endringssporing: Se hva som er endret mellom versjoner

Figma er det ledende verktøyet for å bygge og vedlikeholde designsystemer:

Hva er et designsystem? Et designsystem er en samling gjenbrukbare komponenter, retningslinjer og designtokens som sikrer konsistens på tvers av produkter og team.

Figma-funksjoner for designsystemer:

Store selskaper som Uber, Spotify og Airbnb bruker Figma for sine designsystemer, og mange har publisert dem som åpne ressurser for fellesskapet.

I agile arbeidsprosesser integreres Figma i utviklingssyklusen:

Design Sprint

Under design sprints brukes Figma for rask prototyping og brukertesting. Teamet kan iterere på design i sanntid basert på feedback.

Scrum-integrering

• Sprint Planning: Design forberedes i forkant av sprinter
• Backlog: Design-backlog-elementer kobles til utviklingsoppgaver
• Sprint Review: Prototyper demonstreres for stakeholders
• Retrospektiv: Designprosessen evalueres og forbedres

Developer Handoff

Figma forenkler overlevering fra design til utvikling med:

• Automatisk CSS/Swift/Android kode
• Inspiserbare designfiler
• Eksport av assets i riktig format og oppløsning
• Kommentarer og annotasjoner for utviklere

FigJam

FigJams er Figmas digitale whiteboard for samarbeid:

• Brainstorming og idéutvikling
• Brukerreisekart og flytdiagrammer
• Retrospektiver og workshops
• Stemmegivning og prioritering

Plugins og widgets

Over 1 500 plugins utvider Figmas funksjonalitet:

• Content Reel: Fyller design med realistisk innhold
• Iconify: Tilgang til tusenvis av ikoner
• Stark: Tilgjengelighetskontroller
• Unsplash: Gratis stockfoto direkte i Figma

Community

Figma Community gir tilgang til:

• Gratis designfiler og maler
• UI-kits og komponentbiblioteker
• Designutfordringer og inspirasjoner
• Læringsressurser og tutorials

Figma har en dominerende posisjon i designmarkedet:

• Brukt av over 4 millioner designere globalt
• Markedsandel på 78% blant UI/UX-designverktøy i 2024
• Over 300 000 plugins installeres daglig
• 83% av Fortune 500-selskaper bruker Figma
• Gjennomsnittlig 3.5 timer daglig bruker profesjonelle designere i Figma
• Community inneholder over 500 000 delte designfiler

Er Figma gratis?

Figma tilbyr en gratis plan (Starter) med opptil 3 prosjekter og ubegrenset antall filer. Profesjonelle planer starter fra ca. $15 per bruker per måned og gir tilgang til avanserte funksjoner som biblioteker og branching.

Kan utviklere bruke Figma?

Ja, Figma har en dedikert Dev Mode som lar utviklere inspisere design, få CSS-kode og eksportere assets. Mange utviklere bruker Figma daglig for å forstå designkrav.

Trenger man installasjon for å bruke Figma?

Nei, Figma kjører direkte i nettleseren. Det finnes også en desktop-app for de som foretrekker det, men nettleserversjonen har full funksjonalitet.

Hva er forskjellen mellom Figma og FigJam?

Figma er for detaljert UI/UX-design og prototyping, mens FigJam er et digitalt whiteboard for samarbeid, brainstorming og workshops. Begge er integrert i Figma-plattformen.

Kan Figma brukes for annet enn UI-design?

Ja, Figma brukes også for presentasjoner, illustrasjoner, sosiale medier-grafikk, trykkdesign og til og med spilldesign. Fleksibiliteten i verktøyet gjør det egnet for mange designdisipliner.

• Design Thinking - Designtilnærming der Figma er et sentralt verktøy
• Design Sprint - Rask prototyping med Figma
• Feedback - Tilbakemelding på design direkte i Figma
• Stakeholder - Interessenter som reviewerer design
• Agile - Arbeidsmetodikk der Figma integreres i prosessen
• Developer - Utviklere som bruker Figma Dev Mode