Framer-designer (2026): Vad rollen innebär, vad du ska kräva och vad det kostar
En Framer-designer formger och bygger webbplatsen i samma verktyg, direkt på canvasen och utan kod. För de flesta företagssajter är det den kompetensen du behöver. Här går vi igenom vad rollen omfattar, hur arbetssättet skiljer sig från att börja i Figma, hur du granskar en portfolio, vilka frågor du ska ställa och vad du ska kräva när sajten lämnas över.
Vad gör en Framer-designer?
En Framer-designer formger webbplatsen och bygger den färdig i samma verktyg. Det som i andra arbetsflöden är två steg, först en skiss och sedan en utvecklare som översätter den till kod, blir här ett. Designern arbetar direkt på Framers canvas med riktiga layoutregler, och det som syns där är det som publiceras.
Rollen är nära släkt med den tekniska. Var gränsen går och när du behöver någon som skriver kod har vi beskrivit i guiden om vad en Framer-utvecklare gör. Den här sidan handlar om designsidan: vad du ska förvänta dig, hur du bedömer kvaliteten och vad du ska kräva.
Det här ingår i rollen
Layout med stacks
Stacks är Framers motsvarighet till flexbox. Element läggs i rader eller kolumner med fasta avstånd och anpassar sig när innehållet ändras. En designer som bygger med stacks får en sajt där en längre rubrik eller en extra punkt i en lista inte förstör layouten. En designer som placerar element fritt med absoluta positioner får en sajt som ser rätt ut precis så länge ingen rör texten.
Responsiva brytpunkter
Varje sida har brytpunkter, oftast för dator, surfplatta och mobil. Framer rekommenderar själva att man börjar i den största brytpunkten och sedan justerar de mindre. Det viktiga är att mobilversionen är genomtänkt och inte bara ihoptryckt: menyn fungerar, knapparna går att träffa med tummen och texterna är läsbara utan zoom.
Komponenter och varianter
Återkommande delar som knappar, kort, menyer och sidfot byggs som komponenter. Ändrar du komponenten ändras den överallt. Varianter används för olika lägen, till exempel en meny som är öppen eller stängd, eller ett kort som reagerar när man för muspekaren över det. Framer har dessutom variabler för sådant som avstånd och riktning, vilket gör att varianter kan sparas till riktiga interaktionslägen i stället för att användas som lapp för varje skärmstorlek.
Interaktioner och effekter
Animationer vid scroll, övergångar mellan varianter, effekter när ett element dyker upp och sidövergångar görs på canvasen. En bra designer använder dem sparsamt och med ett syfte, och ser till att de inte gör sajten långsam eller rörig. Vår genomgång av animationer och interaktioner i Framer visar vad som går att göra utan kod.
Stilsystem för typografi och färg
Färgstilar och textstilar är grunden i ett välbyggt Framer-projekt. Textstilar kan ha egna värden per brytpunkt, så att en rubrik automatiskt blir mindre i mobilen. När alla rubriker och brödtexter använder stilar kan en färg eller ett typsnitt bytas på ett ställe. Läs mer om responsiv typografi i Framer.
CMS-mallar
Blogg, case, nyheter och lediga tjänster läggs i CMS-samlingar. Designern bygger mallsidan som varje post visas i och de listor som visar posterna på andra sidor. Svårigheten är att mallen ska tåla verkligt innehåll: korta och långa rubriker, bilder i olika format och fält som ibland är tomma.
Formulär och grundläggande SEO
Kontaktformulär, anmälningar och enkla förfrågningar byggs med Framers inbyggda formulär. Till designerns ansvar hör också det som syns i sökresultaten: sidtitel och beskrivning per sida, en tydlig rubrikstruktur med en H1 per sida, alt-texter på bilder och en delningsbild. Mer avancerad teknisk SEO är ofta utvecklarens område, men grunden ska designern ha koll på. Vår SEO-checklista för Framer går igenom punkterna.
Direkt i Framer eller Figma först?
Det finns inget rätt svar, men för de flesta webbprojekt är det effektivare att designa direkt i Framer. Du ser brytpunkter, riktiga textlängder och interaktioner redan i skissfasen, och det försvinner ett steg där design ska översättas till något annat.
Figma först kan passa när designen ska godkännas i flera led, när samma formspråk ska användas i appar, trycksaker och presentationer, eller när ett designsystem redan finns där. Framer har ett officiellt plugin för att kopiera lager från Figma och klistra in dem på canvasen. Det sparar tid, men importerade lager behöver nästan alltid byggas om med stacks, stilar och brytpunkter för att bli en hållbar sajt. Räkna med det i tidsplanen. Skillnaderna mellan verktygen beskriver vi i Framer vs Figma.
Fråga designern hur hen brukar arbeta och varför. Ett bra svar utgår från ditt projekt, inte från vana.
När räcker det med en designer?
En Framer-designer räcker när sajtens uppgift är att presentera, övertyga och ta emot förfrågningar. Det gäller de flesta företagssajter, produktsidor, kampanjsidor, portfolios och sajter med blogg eller case i CMS:et.
Du behöver sannolikt komplettera med utvecklarkompetens om sajten ska hämta data från ett annat system, skicka formulärdata vidare till ett CRM, ha funktioner som en kalkylator eller avancerad filtrering, eller om ni ska flytta hundratals sidor från en annan plattform. Många designers har grundläggande kodkunskap eller ett nätverk för sådant, så fråga hur de löser det i stället för att anta.
Så granskar du en portfolio
Portfoliobilder visar hur en sajt ser ut i bästa läge på en stor skärm. Det säger lite om hur den fungerar. Be om länkar till livesajter och gör de här kontrollerna:
- Öppna sajten i mobilen. Scrolla igenom hela startsidan och några undersidor. Leta efter text som går utanför kanten, knappar som är för små och menyer som är svåra att använda.
- Känn på hastigheten. Laddar sidan snabbt även på mobilnätet, eller dröjer det innan något syns? Tunga animationer vid sidladdning är en vanlig orsak.
- Titta på innehållet i CMS-delen. Öppna några blogginlägg eller case. Håller layouten när rubrikerna är olika långa?
- Be att få se ett projekt i editorn. En skärmdelning räcker. Titta på om lagren har namn, om återkommande delar är komponenter och om texterna använder textstilar.
Den sista kontrollen är den viktigaste. Två sajter kan se likadana ut för besökaren och vara helt olika att underhålla. I ett välbyggt projekt kan du ändra en rubrikstorlek på ett ställe. I ett dåligt byggt projekt behöver du gå igenom varje sida och varje brytpunkt för hand.
Frågor att ställa
Svaren behöver inte vara exakta, men de ska visa att personen har byggt för riktiga redaktörer och riktigt innehåll.
| Fråga | Ett bra svar innehåller |
|---|---|
| Hur sätter du upp typografin i ett nytt projekt? | Textstilar för varje rubriknivå och brödtext, med egna värden per brytpunkt |
| Hur gör du för att mobilversionen ska bli bra? | Egen genomgång av varje sida i mobilbrytpunkten, stacks som anpassar sig och test på en riktig telefon |
| När använder du varianter och när variabler? | Varianter för lägen som öppen, stängd eller hover, variabler och brytpunkter för layoutskillnader |
| Hur bygger du en CMS-mall som håller? | Test med långa och korta texter, tomma fält och bilder i olika format |
| Hur ser du till att animationerna inte gör sajten långsam? | Få effekter vid sidladdning, animationer som startar när elementet syns och kontroll i mobilen |
| Vad gör du med SEO på varje sida? | Titel och beskrivning per sida och CMS-post, en H1, alt-texter och delningsbild |
| Hur lär du oss att uppdatera sajten själva? | En genomgång av redigering av text, bild och CMS, gärna inspelad eller dokumenterad |
Varningssignaler
Var uppmärksam om designern bara visar bilder och inte vill dela länkar till livesajter. Samma sak gäller om mobilversionerna i portfolion är tydligt sämre än datorversionerna, eller om hen inte kan förklara hur en redaktör ska ändra innehållet.
Andra signaler är att allt ska lösas med animationer, att textstilar och färgstilar saknas i projekten, att designern föreslår kod för sådant Framer klarar inbyggt och att projektet ska ligga i designerns eget konto utan plan för överflytt.
Framer har en egen katalog med granskade experter på framer.com, och en plats där kan vara ett bra tecken. Det ersätter ändå inte din egen kontroll av livesajter och editor, eftersom katalogen inte säger något om hur väl just ditt projekt passar personen.
Vad kostar en Framer-designer?
En Framer-designer prissätts på samma nivåer som annat Framer-arbete på svenska marknaden. Designuppdrag säljs oftare till fast pris än utvecklingsarbete, eftersom omfånget är lättare att beskriva i förväg.
| Upplägg | Frilansare | Byrå |
|---|---|---|
| Timpris | 1 000–1 500 kr | 1 400–2 200 kr |
| Landningssida | 25 000–60 000 kr | 60 000–120 000 kr |
| Företagssajt, 5–8 sidor | 60 000–120 000 kr | 150 000–300 000 kr |
| Större sajt | 120 000–250 000 kr | från 300 000 kr |
| Löpande avtal per månad | 5 000–15 000 kr | 20 000–60 000 kr |
Det som driver priset är antal unika sidmallar, hur mycket av texten och bilderna som redan finns, antal CMS-samlingar och hur avancerade interaktionerna ska vara. Framers eget abonnemang tillkommer och betalas direkt till Framer, se vad Framer kostar. Hur du jämför offerter och vad som brukar ingå går vi igenom i vad det kostar att anlita en Framer-expert.
Vad du ska kräva vid överlämningen
En sajt som ser bra ut vid lansering men inte går att underhålla blir dyr på sikt. Se till att det här ingår i leveransen:
- Ägarskap. Projektet ligger i ett Framer-konto som ditt företag äger, och ni har full åtkomst.
- Stilar. Färgstilar och textstilar är uppsatta och används genomgående, så att en ändring slår igenom överallt.
- Komponenter. Knappar, kort, menyer, sidfot och andra återkommande delar är komponenter, inte kopior.
- Namngivning. Sidor, lager, komponenter och CMS-fält har namn som någon annan förstår.
- Redaktörsutbildning. De som ska uppdatera sajten har fått en genomgång av hur text, bilder och CMS-poster redigeras och publiceras.
- Kort dokumentation. En lista över vilka komponenter som finns, vad varianterna är till för och vad man bör undvika att röra.
Sammanfattning
En Framer-designer bygger hela sajten på canvasen: layout, brytpunkter, komponenter, animationer, stilsystem, CMS-mallar och formulär. För de flesta företagssajter är det allt som behövs. Granska livesajterna i mobilen, be att få se editorn och ställ frågorna ovan, så ser du snabbt om personen bygger för att det ska hålla. Ska sajten kopplas ihop med andra system eller få egna funktioner, läs om när du behöver en Framer-utvecklare. Står du i början av ett helt nytt projekt, börja med så går det till att skaffa en Framer-hemsida.