8
n8n 한국어amn8n.com

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
워크플로우 미리보기
노드 연결 관계를 시각적으로 표시하며, 확대/축소 및 이동을 지원합니다
워크플로우 내보내기
다음 JSON 구성을 복사하여 n8n에 가져오면 이 워크플로우를 사용할 수 있습니다
{
  "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)는 사용자 직접 비용을 지불해야 할 수 있습니다.

워크플로우 정보
난이도
중급
노드 수14
카테고리2
노드 유형9
난이도 설명

일정 경험을 가진 사용자를 위한 6-15개 노드의 중간 복잡도 워크플로우

저자
Rahul Joshi

Rahul Joshi

@rahul08

Rahul 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.

외부 링크
n8n.io에서 보기

이 워크플로우 공유

카테고리

카테고리: 34