Tillgänglighet, Figma Make och Adaptiv UI/UX-design!

Hanna Olsson,

Bild skapad av ChatGPT liquid glass och Figma Make logoAI genererad bild med prompterna: Figma Make logo i liquid glass stil

2026 första blogginlägg är här!

Nytt år och jag listar tre UX-ämnen👇🏼 från 2025 som jag tar med mig till 2026!

Tillgänglighet - designa för alla

Att designa ur ett tillgänglighetsperspektiv är inte ett bara krav eller nice-to-have, utan faktiskt en självklarhet 2026.

Redan i UX-research stadiet bör man ställa frågan, hur skapar vi empatiska och inkluderande användarupplevelser för alla?

Detta behöver även tas hänsyn till när projekt ska scope:as och estimeras. Hur bygger/designar/utvecklar vi utefter ett tillgänglighets-tankesätt.

Vibe Designing - designa med AI

2025 presenterade Figma överraskande många nya AI produkter till sin katalog, bland dessa Figma Make.

Figma Make är ett AI-drivet designverktyg där man med prompter och frames, bilder eller designsystem snabbt kan skapa interaktiva prototyper.

Så när betan gick live var jag tvungen att testa:

  1. Kopiera prototyp / frame:en / bild
  2. Klistra in i Figma Make
  3. Skriv en prompt "Make this prototype interactive" t.ex.

Och vips! Så har du en enkel prototyp att dem:a för stakeholders eller utvecklare på bara några minuter! Notera dock att detta på inget sätt är en färdig produkt, men en bra början till en.

Tips för Vibe designing i Figma Make

Ska man använda sig av Vibe design "på riktigt" för ett större projekt, kommer här mina tips på vad man bör göra innan man ens börjar prompta:

  • Tänk på namngivningen

Att döpa lager, frames och komponenter korrekt i designsystemet är A&O för då kan du referera till namnen när du promptar.

  • Använd ditt komponentbilbliotek

Hämta in ditt komponentbibliotek direkt in i Figma Make. Då får du t.ex. med alla states på dina knapp-komponenter och AI:n behöver inte hitta på egna/nya (samt du slipper slösa på tokens/credits)

  • Sammanställ guidelines (en PRD)

Ju mer kontext du ger AI:n, desto bättre. En PRD (Product Requirements Document) ska speca hela appen/funktionen och de detaljer som finns att ta hänsyn till.

Skärmbild från Figma makeUnder Guidelines-mappen i Figma Make kan man definiera vilka guidelines som ska följas. Här är det perfekt att redogöra detaljer kring tillgänglighet, att appen ska följa WCAGS-riktlinjer t.ex.

Adaptive UI/UX Design - designa efter användaren

Adaptive eller Multisystem UX/UI design fick kanske mest fokus i år tack varje Apples stora iOS och macOS uppdatering Liquid glass.

Det mest synliga och uppenbara i uppdateringen var såklart den nya glasliknande gränssnittsdesignen.

Liquid glass ikon designExempel på Liquid Glass-gränsnittet

Tittar man närmare på hur UI:t hur den beter sig, kan man snabbt se att den anpassar sig efter kontraster, bakgrunder, ljuststyrka osv. Med andra ord så anpassar sig användargränssnittet mer efter användaren.

Det handlar helt enkelt om att skapa en upplevelse och ett gränssnitt som möter användarna där de är, när de behöver det. Det här kommer vi se betydligt mer av 2026!