Testfall ska inte vara en kreativ skrivövning som du gör om varje gång en designer flyttar en knapp 8 pixlar åt vänster. Men det är precis vad som händer: någon tar screenshots från Figma, någon annan skriver luddiga kontroller och “QA-dokumentet” blir ett halvfärdigt kalkylark som ingen litar på.
QA-ledare känner av det först när det är tajt om tid. En produktchef som försöker leverera enligt plan känner det också. Det gör även byråteamet som jonglerar tre kunder samtidigt. Den här Figma QA-automationen gör om en Figma-fil till strukturerade testfall i Google Sheets så att täckningen håller sig konsekvent mellan releaser.
Du får se hur arbetsflödet hämtar designdata, ber AI att generera testtäckning (inklusive tillgänglighets- och UX-kontroller) och sedan exporterar allt till ett ark som teamet faktiskt kan använda.
Så fungerar den här automationslösningen
Hela n8n-arbetsflödet, från trigger till slutresultat:
n8n Workflow Template: Från figma till google sheets, qa-testfall klara
flowchart LR
subgraph sg0["Manual Start Flow"]
direction LR
n0@{ icon: "mdi:play-circle", form: "rounded", label: "Manual Start", pos: "b", h: 48 }
n1["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/httprequest.dark.svg' width='40' height='40' /></div><br/>Fetch Figma Design Data"]
n2@{ icon: "mdi:brain", form: "rounded", label: "OpenAI GPT-4o-mini", pos: "b", h: 48 }
n3["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/code.svg' width='40' height='40' /></div><br/>Parse and Format Test Cases"]
n4@{ icon: "mdi:database", form: "rounded", label: "Export to Google Sheets", pos: "b", h: 48 }
n5@{ icon: "mdi:robot", form: "rounded", label: "JSON Output Schema", pos: "b", h: 48 }
n6@{ icon: "mdi:memory", form: "rounded", label: "Conversation Memory", pos: "b", h: 48 }
n7@{ icon: "mdi:robot", form: "rounded", label: "AI Test Case Generator", pos: "b", h: 48 }
n0 --> n1
n5 -.-> n7
n2 -.-> n7
n6 -.-> n7
n7 --> n3
n1 --> n7
n3 --> n4
end
%% Styling
classDef trigger fill:#e8f5e9,stroke:#388e3c,stroke-width:2px
classDef ai fill:#e3f2fd,stroke:#1976d2,stroke-width:2px
classDef aiModel fill:#e8eaf6,stroke:#3f51b5,stroke-width:2px
classDef decision fill:#fff8e1,stroke:#f9a825,stroke-width:2px
classDef database fill:#fce4ec,stroke:#c2185b,stroke-width:2px
classDef api fill:#fff3e0,stroke:#e65100,stroke-width:2px
classDef code fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px
classDef disabled stroke-dasharray: 5 5,opacity: 0.5
class n0 trigger
class n5,n7 ai
class n2 aiModel
class n6 ai
class n4 database
class n1 api
class n3 code
classDef customIcon fill:none,stroke:none
class n1,n3 customIcon
Problemet: att skapa QA-testfall är repetitivt (och ändå inkonsekvent)
När testfall byggs från grunden i varje release tappar du inte bara tid. Du tappar täckning. En person kommer ihåg att testa tangentbordsnavigering, en annan missar felstatusar, och plötsligt “godkänns” samma skärm i QA men skapar problem för riktiga användare dagen efter. Det värsta är den mentala belastningen: läsa Figma-filen, översätta UI till steg, gissa edge cases och sedan skriva om allt igen när designen ändras. Det är lätt att lägga cirka 2–3 timmar per designfil och ändå sluta med en checklista som är för tunn för att vara användbar.
Det blir snabbt mycket. Här är var det faller isär i det dagliga arbetet.
- Testfall skrivs i olika stilar, vilket gör granskningar långsamma och överlämningar röriga.
- Luckor i täckningen upptäcks sent eftersom ingen hinner tänka igenom flöden och tillstånd samtidigt som man copy-pastar UI-detaljer.
- Kalkylark blir “levande dokument” som tyst dör, eftersom uppdateringar känns som rutinjobb utan värde.
- Designvalidering blir screenshot-pingis mellan Slack, e-post och dokument.
Lösningen: gör om en Figma-fil till QA-klara rader i Google Sheets
Det här n8n-arbetsflödet börjar med en enkel input: ditt Figma file ID. Därefter hämtar det hela designens JSON från Figma API, inklusive ramar, lager, komponenter och struktur som människor annars skannar visuellt. Sedan skickas den strukturerade designdatan till en AI-agent via chattmodellen GPT-4o-mini, med en instruktion att skapa tydliga, detaljerade testfall som täcker UI-beteende, användarflöden och vanliga tillgänglighetskontroller. När AI:n har svarat parsar arbetsflödet resultatet till ett strukturerat schema och skriver varje testfall som en rad i Google Sheets. Om något går fel (stora filer, API-strul, auth-problem) fångar inbyggd felhantering upp felet så att du inte får tysta, delvisa resultat.
Arbetsflödet startar via en manuell körning eller webhook, hämtar designdata via en HTTP Request till Figma. AI:n genererar ungefär 5–10 testfall per fil och slutresultatet hamnar i Google Sheets där du kan granska, tilldela och följa upp med er befintliga process.
Det här får du: automation vs. resultat
| Vad arbetsflödet automatiserar | Resultat du får |
|---|---|
|
|
Exempel: så här ser det ut
Säg att teamet granskar 3 Figma-filer varje vecka (nya feature-skärmar, en inställningsuppdatering och en justering i checkout). Manuellt: om ni lägger cirka 2 timmar per fil på att skriva och formatera testfall blir det runt 6 timmar per vecka, och då är det innan någon ens har tilldelat ansvar. Med det här arbetsflödet klistrar du in file ID, låter flödet köra och får 5–10 strukturerade testfall insatta i Google Sheets med cirka 10 minuters aktivt arbete. Väntetiden är mest AI-bearbetning och API-anrop. QA-tiden går tillbaka till testning, inte till att skriva.
Det här behöver du
- n8n-instans (prova n8n Cloud gratis)
- Alternativ för egen hosting om du föredrar det (Hostinger fungerar bra)
- Figma för designfilen och API-åtkomst.
- Google Sheets för att lagra och följa upp testfall.
- OpenAI API-nyckel (hämta den i OpenAI API-dashboarden).
Kunskapsnivå: Medel. Du kopplar in behörigheter och klistrar in ett Figma file ID, och du bör vara bekväm med att mappa några fält till ditt ark.
Vill du inte sätta upp detta själv? Prata med en automationsexpert (gratis 15-minuters konsultation).
Så fungerar det
Du anger ett Figma file ID. Arbetsflödet triggas manuellt eller via webhook, och file ID skickas in som huvudinput så att du kan köra det per design.
Figma-designdata hämtas och förbereds. En HTTP Request hämtar design-JSON (ramar, komponenter och hierarki). Därefter formar “set/edit fields” och merge-logik det råa svaret till något AI:n kan resonera kring utan brus.
AI:n genererar strukturerade testfall. AI-agenten använder OpenAI:s chattmodell (GPT-4o-mini) för att identifiera UI-element, förväntat beteende, användarflöden och tillgänglighetskontroller, och returnerar sedan 5–10 fall i en förutsägbar struktur som du kan exportera.
Resultatet hamnar i Google Sheets och aviseringar kan triggas. Varje testfall blir en rad, redo för granskning och tilldelning. Om något misslyckas kan arbetsflödet avisera dig via Slack eller Gmail så att du inte upptäcker saknade fall i efterhand.
Du kan enkelt justera output-kolumnerna så att de matchar er befintliga QA-mall (ansvarig, prioritet, plattform, status) utifrån era behov. Se hela implementationsguiden nedan för anpassningsalternativ.
Vanliga fallgropar
- Figma-behörigheter kan löpa ut eller kräva specifika rättigheter. Om det skapar fel, kontrollera header-auth (X-Figma-Token) och bekräfta att token fortfarande har åtkomst till filen.
- Om du använder Wait-noder eller extern rendering varierar processtiderna. Öka väntetiden om noder längre ned misslyckas på tomma svar.
- Standardprompter i AI-noder är generiska. Lägg in er tonalitet tidigt, annars kommer du att sitta och redigera output för alltid.
Vanliga frågor
Cirka 30–60 minuter om du redan har dina Figma-, Google- och OpenAI-uppgifter på plats.
Nej. Du kopplar främst konton och klistrar in ditt Figma file ID. Den enda “tekniska” delen är att mappa kolumner i Google Sheets.
Ja. n8n har ett gratis alternativ för egen hosting och en gratis provperiod på n8n Cloud. Cloud-planer börjar på $20/månad för högre volymer. Du behöver också räkna in kostnader för OpenAI API (vanligtvis några cent per körning, beroende på designstorlek och prompt).
Två alternativ: n8n Cloud (hanterat, enklaste setup) eller egen hosting på en VPS. För egen hosting är Hostinger VPS prisvärt och hanterar n8n bra. Egen hosting ger dig obegränsade körningar men kräver grundläggande serverhantering.
Ja, men du vill uppdatera AI Agent-prompten så att den prioriterar mobilmönster (touch targets, orientering, tangentbordstyper, safe areas). Många team lägger också till en kolumn i Google Sheets för “Plattform” och sätter den i steget Edit Fields (Set) så att output direkt går att filtrera. Om du routar triggers via Webhook kan du till och med skicka in “iOS” eller “Android” som input och generera olika fall från samma Figma-fil.
Oftast handlar det om en utgången eller felaktig personlig access token i Figma. Skapa en ny token och uppdatera sedan X-Figma-Token-headern som används av HTTP Request-noden. Om filen ligger i ett teamutrymme, säkerställ att din token har åtkomst till teamet och att filen inte har flyttats eller duplicerats under ett annat ID.
För de flesta team är 5–10 fall per Figma-fil en bra standard, och du kan öka det om du accepterar högre OpenAI-användning.
Ofta, ja, eftersom det här arbetsflödet drar nytta av förgrening, felhantering och att forma stora JSON-svar innan du skickar något till AI-modellen. n8n ger dig också alternativet att köra med egen hosting, vilket gör kostnaderna mer förutsägbara när antalet körningar ökar. Zapier och Make kan absolut fungera, men de blir ofta klumpiga när du hanterar stora payloads som Figma design-JSON. En annan praktisk skillnad är felsökning: n8n:s körhistorik gör det enklare att se vad AI:n fick och vad den returnerade. Om du tvekar, prata med en automationsexpert så får du en rak rekommendation för din setup.
När det här väl rullar blir nya designer QA-klara rader utan kalkylarks-tragglet. Det är ärligt talat skillnaden mellan “vi testade det” och “vi har täckt det”.
Kontakta oss
Hör av dig, så diskuterar vi hur just din verksamhet kan dra nytta av alla fantastiska möjligheter som AI skapar.