GPT-4를 사용하여 Figma 디자인에서 QA 테스트 케이스까지 Google Sheets로 생성
이것은Engineering, AI Summarization분야의자동화 워크플로우로, 14개의 노드를 포함합니다.주로 Code, HttpRequest, GoogleSheets, ManualTrigger, Agent 등의 노드를 사용하며. GPT-4o-mini를 사용하여 Figma 디자인에서 QA 테스트 케이스를 Google Sheets로 생성
- •대상 API의 인증 정보가 필요할 수 있음
- •Google Sheets API 인증 정보
- •OpenAI API Key
사용된 노드 (14)
{
"id": "gILrUPCbGHiFohxP",
"meta": {
"instanceId": "8443f10082278c46aa5cf3acf8ff0f70061a2c58bce76efac814b16290845177",
"templateCredsSetupCompleted": true
},
"name": "Generate QA Test Cases from Figma Designs to Google Sheets using GPT-4",
"tags": [],
"nodes": [
{
"id": "dc0b7549-a744-4aa6-9d81-6570eae6acdb",
"name": "워크플로우 개요",
"type": "n8n-nodes-base.stickyNote",
"position": [
-1616,
-320
],
"parameters": {
"color": 4,
"width": 400,
"height": 540,
"content": "## 🎨 Figma to Test Cases Generator\n\nThis workflow automates QA test case generation from Figma designs using AI.\n\n**What it does:**\n- Fetches Figma file data via API\n- Analyzes UI elements and design structure\n- Generates 5-10 comprehensive test cases using OpenAI\n- Exports test cases to Google Sheets\n\n**Use Case:**\n- QA teams needing automated test case generation\n- Product teams documenting user flows\n- Design handoff with test coverage\n\n**Requirements:**\n- Figma Personal Access Token\n- OpenAI API key (gpt-4o-mini)\n- Google Sheets OAuth2 connection\n\n**Time Saved:** ~2-3 hours per design review"
},
"typeVersion": 1
},
{
"id": "ef9db14b-34a0-497f-82c4-e0eb0d0fc498",
"name": "설정 가이드",
"type": "n8n-nodes-base.stickyNote",
"position": [
-1200,
-560
],
"parameters": {
"color": 2,
"width": 360,
"height": 500,
"content": "## ⚙️ Setup Instructions\n\n**Step 1: Get Figma Token**\n- Go to Figma → Settings → Personal Access Tokens\n- Create new token with read access\n- Save in n8n Credentials (Header Auth)\n- Header name: `X-Figma-Token`\n\n**Step 2: Configure OpenAI**\n- Add OpenAI API key in Credentials\n- Model: gpt-4o-mini (cost-effective)\n- Est. cost: $0.02-0.05 per run\n\n**Step 3: Connect Google Sheets**\n- Create sheet with columns: `title`, `steps`\n- Authorize Google Sheets OAuth2\n- Share sheet with service account\n\n**Step 4: Input Figma File ID**\n- Get file ID from Figma URL\n- Format: `figma.com/file/{FILE_ID}/...`\n- Pass as input to workflow"
},
"typeVersion": 1
},
{
"id": "39541f14-cfd3-4c11-89b9-8e6aedc363fc",
"name": "Figma API 노트",
"type": "n8n-nodes-base.stickyNote",
"position": [
-816,
-480
],
"parameters": {
"color": 2,
"width": 300,
"height": 428,
"content": "## 📌 Figma API Configuration\n\n**What it fetches:**\n- Complete file structure\n- Canvas and frame data\n- Component properties\n- Text and layer info\n\n**API Parameters:**\n- `depth=1`: Single level traversal\n- `geometry=paths`: Include vector data\n\n**Important:**\n- Replace file ID with dynamic input\n- Use: `={{$json.figmaFileId}}`\n- Timeout: 30s for large files\n- Rate limit: 500 requests/min"
},
"typeVersion": 1
},
{
"id": "b24caffc-87cf-458e-aecb-bf00ca9309be",
"name": "AI 처리 상세",
"type": "n8n-nodes-base.stickyNote",
"position": [
-464,
-448
],
"parameters": {
"color": 2,
"width": 280,
"height": 368,
"content": "## 🤖 AI Test Generation\n\n**Analysis Includes:**\n- UI elements and interactions\n- User flow identification\n- Edge case scenarios\n- Accessibility checks (WCAG 2.1)\n- Responsive design validation\n\n**Output Format:**\nStructured JSON with test cases\n\n**Temperature:** 0.7 for creative variety\n\n**Token Usage:** ~2000-4000 per run"
},
"typeVersion": 1
},
{
"id": "be300909-97ca-4d0c-b7f5-077cddc16f8f",
"name": "코드 로직 상세",
"type": "n8n-nodes-base.stickyNote",
"position": [
-144,
96
],
"parameters": {
"color": 2,
"width": 280,
"height": 260,
"content": "## 📊 Data Extraction\n\n**Processes AI output:**\n- Extracts test_cases array\n- Maps to Google Sheets format\n- Handles multiple test cases\n\n**Output fields:**\n- title: Test case name\n- steps: Step-by-step instructions\n\n**Error handling:**\nReturns empty array if parsing fails"
},
"typeVersion": 1
},
{
"id": "8aee5f1a-9b28-4951-a8c1-3438119266e9",
"name": "Sheets 설정",
"type": "n8n-nodes-base.stickyNote",
"position": [
80,
-560
],
"parameters": {
"color": 2,
"width": 300,
"height": 476,
"content": "## 📝 Google Sheets Export\n\n**Configuration:**\n- Operation: Append (adds new rows)\n- Auto-map columns enabled\n- Columns: `title`, `steps`\n\n**Sheet Structure:**\n```\n| title | steps |\n|--------------------|-----------------------|\n| Test login flow | Step 1: Click... |\n| Validate form | Step 1: Enter... |\n```\n\n**Before sharing:**\n- Remove document ID\n- Use dynamic sheet reference\n- Clear cached result data"
},
"typeVersion": 1
},
{
"id": "f2dee891-a0a2-4426-9f3e-b818a11b1e40",
"name": "수동 시작",
"type": "n8n-nodes-base.manualTrigger",
"position": [
-960,
-48
],
"parameters": {},
"typeVersion": 1
},
{
"id": "a5cb1f68-d567-46f3-8aea-b462cede73c9",
"name": "Figma 디자인 데이터 가져오기",
"type": "n8n-nodes-base.httpRequest",
"position": [
-736,
-48
],
"parameters": {
"url": "=https://api.figma.com/v1/files/{{ $json.figmaFileId }}",
"options": {
"timeout": 30000,
"response": {
"response": {
"neverError": true,
"responseFormat": "json"
}
}
},
"sendQuery": true,
"authentication": "genericCredentialType",
"genericAuthType": "httpHeaderAuth",
"queryParameters": {
"parameters": [
{
"name": "depth",
"value": "1"
},
{
"name": "geometry",
"value": "paths"
}
]
}
},
"credentials": {
"httpHeaderAuth": {
"id": "VzF0MtEE87bk9mIH",
"name": "Figma token"
}
},
"typeVersion": 4.2
},
{
"id": "96587a6a-4e70-4c6d-a9a8-a1da7e87e7a4",
"name": "OpenAI GPT-4o-mini",
"type": "@n8n/n8n-nodes-langchain.lmChatOpenAi",
"position": [
-512,
192
],
"parameters": {
"model": {
"__rl": true,
"mode": "list",
"value": "gpt-4o-mini",
"cachedResultName": "gpt-4o-mini"
},
"options": {
"maxTokens": 4000,
"temperature": 0.7
}
},
"credentials": {
"openAiApi": {
"id": "5Kzt6hGSZ1JHZqWN",
"name": "OpenAi account 2"
}
},
"typeVersion": 1.2
},
{
"id": "1b3d7d55-f24f-4d95-a098-7128696e7e87",
"name": "테스트 케이스 파싱 및 포맷팅",
"type": "n8n-nodes-base.code",
"position": [
-48,
-48
],
"parameters": {
"jsCode": "// Extract test cases from AI agent output\nconst aiOutput = $json.output;\n\n// Safely extract test cases array\nconst testCases = aiOutput?.test_cases || [];\n\n// Validate and map to Google Sheets format\nif (!Array.isArray(testCases) || testCases.length === 0) {\n console.log('No test cases generated');\n return [];\n}\n\n// Transform to structured output\nreturn testCases.map(tc => ({\n json: {\n title: tc.title || 'Untitled Test Case',\n steps: tc.steps || 'No steps provided'\n }\n}));"
},
"typeVersion": 2
},
{
"id": "1efaa8c3-a934-4702-9783-7da965178a27",
"name": "Google Sheets로 내보내기",
"type": "n8n-nodes-base.googleSheets",
"position": [
176,
-48
],
"parameters": {
"columns": {
"value": {},
"schema": [
{
"id": "title",
"type": "string",
"display": true,
"removed": false,
"required": false,
"displayName": "title",
"defaultMatch": false,
"canBeUsedToMatch": true
},
{
"id": "steps",
"type": "string",
"display": true,
"removed": false,
"required": false,
"displayName": "steps",
"defaultMatch": false,
"canBeUsedToMatch": true
}
],
"mappingMode": "autoMapInputData",
"matchingColumns": []
},
"options": {},
"operation": "append",
"sheetName": {
"__rl": true,
"mode": "list",
"value": "Test Cases"
},
"documentId": {
"__rl": true,
"mode": "id",
"value": "={{ $('Configure Figma File ID').item.json.googleSheetId }}"
}
},
"credentials": {
"googleSheetsOAuth2Api": {
"id": "kpPEOLCGn963qpoh",
"name": "automations@techdome.ai"
}
},
"typeVersion": 4.7
},
{
"id": "f3e20439-3b50-414a-a67f-2dd3d0324365",
"name": "JSON 출력 스키마",
"type": "@n8n/n8n-nodes-langchain.outputParserStructured",
"position": [
-256,
192
],
"parameters": {
"jsonSchemaExample": "{\n \"test_cases\": [\n {\n \"title\": \"Test case title\",\n \"steps\": \"Step 1: Action\\nStep 2: Verification\\nStep 3: Expected result\"\n }\n ]\n}"
},
"typeVersion": 1.3
},
{
"id": "52e4bce6-4656-4658-833a-1d461fb743e5",
"name": "대화 메모리",
"type": "@n8n/n8n-nodes-langchain.memoryBufferWindow",
"position": [
-384,
192
],
"parameters": {
"sessionKey": "=\"figma_test_generation_\" & $('Configure Figma File ID').item.json.figmaFileId",
"sessionIdType": "customKey"
},
"typeVersion": 1.3
},
{
"id": "0a245b2b-7d42-4dc4-9393-f07af71321f6",
"name": "AI 테스트 케이스 생성기",
"type": "@n8n/n8n-nodes-langchain.agent",
"position": [
-464,
-48
],
"parameters": {
"text": "=Here is the Figma design data:\n\n{{ JSON.stringify($json, null, 2) }}\n\n**Generate 5-10 comprehensive test cases covering:**\n\n1. **UI Elements & Interactions**\n - Button states and actions\n - Form field validations\n - Navigation flows\n\n2. **User Flows**\n - Primary user journeys\n - Alternative paths\n - Error scenarios\n\n3. **Edge Cases**\n - Empty states\n - Maximum character limits\n - Invalid inputs\n\n4. **Accessibility**\n - Keyboard navigation\n - Screen reader compatibility\n - Color contrast (WCAG 2.1 AA)\n\n5. **Responsive Design**\n - Mobile viewport behavior\n - Tablet adjustments\n - Desktop optimization\n\n**Return ONLY valid JSON in this exact structure:**\n\n```json\n{\n \"test_cases\": [\n {\n \"title\": \"Descriptive test case title\",\n \"steps\": \"Step 1: Detailed action\\nStep 2: Expected behavior\\nStep 3: Verification criteria\"\n }\n ]\n}\n```\n\n**Important:** Ensure each test case has clear, actionable steps.",
"options": {
"systemMessage": "You are an expert QA engineer and UX analyst specializing in test case generation.\n\n**Your expertise includes:**\n- Analyzing Figma design files and extracting testable elements\n- Creating comprehensive test scenarios for web and mobile applications\n- Identifying edge cases and accessibility requirements\n- Following industry-standard QA practices (ISTQB, Agile QA)\n\n**Your task:**\nReceive Figma file data as JSON and generate detailed, actionable test cases that cover:\n- Functional requirements\n- User experience flows\n- Accessibility compliance (WCAG 2.1)\n- Cross-browser/device compatibility\n- Edge cases and error handling\n\n**Output requirements:**\n- Return ONLY valid JSON matching the provided schema\n- Each test case must have a clear title and numbered steps\n- Steps should be specific, measurable, and executable\n- Include expected results in each step\n- Prioritize critical user paths first"
},
"promptType": "define",
"hasOutputParser": true
},
"typeVersion": 2.1
}
],
"active": false,
"pinData": {},
"settings": {
"executionOrder": "v1"
},
"versionId": "00a00b80-93a1-44c8-be7b-3cd1f78686fb",
"connections": {
"f2dee891-a0a2-4426-9f3e-b818a11b1e40": {
"main": [
[
{
"node": "a5cb1f68-d567-46f3-8aea-b462cede73c9",
"type": "main",
"index": 0
}
]
]
},
"f3e20439-3b50-414a-a67f-2dd3d0324365": {
"ai_outputParser": [
[
{
"node": "0a245b2b-7d42-4dc4-9393-f07af71321f6",
"type": "ai_outputParser",
"index": 0
}
]
]
},
"96587a6a-4e70-4c6d-a9a8-a1da7e87e7a4": {
"ai_languageModel": [
[
{
"node": "0a245b2b-7d42-4dc4-9393-f07af71321f6",
"type": "ai_languageModel",
"index": 0
}
]
]
},
"52e4bce6-4656-4658-833a-1d461fb743e5": {
"ai_memory": [
[
{
"node": "0a245b2b-7d42-4dc4-9393-f07af71321f6",
"type": "ai_memory",
"index": 0
}
]
]
},
"0a245b2b-7d42-4dc4-9393-f07af71321f6": {
"main": [
[
{
"node": "1b3d7d55-f24f-4d95-a098-7128696e7e87",
"type": "main",
"index": 0
}
]
]
},
"a5cb1f68-d567-46f3-8aea-b462cede73c9": {
"main": [
[
{
"node": "0a245b2b-7d42-4dc4-9393-f07af71321f6",
"type": "main",
"index": 0
}
]
]
},
"1b3d7d55-f24f-4d95-a098-7128696e7e87": {
"main": [
[
{
"node": "1efaa8c3-a934-4702-9783-7da965178a27",
"type": "main",
"index": 0
}
]
]
}
}
}이 워크플로우를 어떻게 사용하나요?
위의 JSON 구성 코드를 복사하여 n8n 인스턴스에서 새 워크플로우를 생성하고 "JSON에서 가져오기"를 선택한 후, 구성을 붙여넣고 필요에 따라 인증 설정을 수정하세요.
이 워크플로우는 어떤 시나리오에 적합한가요?
중급 - 엔지니어링, AI 요약
유료인가요?
이 워크플로우는 완전히 무료이며 직접 가져와 사용할 수 있습니다. 다만, 워크플로우에서 사용하는 타사 서비스(예: OpenAI API)는 사용자 직접 비용을 지불해야 할 수 있습니다.
관련 워크플로우 추천
Rahul Joshi
@rahul08Rahul Joshi is a seasoned technology leader specializing in the n8n automation tool and AI-driven workflow automation. With deep expertise in building open-source workflow automation and self-hosted automation platforms, he helps organizations eliminate manual processes through intelligent n8n ai agent automation solutions.
이 워크플로우 공유