Frontend & AI Agents

Figma MCP সার্ভার: স্বয়ংক্রিয় Design-to-Code AI ওয়ার্কফ্লো

2026-09-02·22 মিনিট পাঠ মিনিট পড়া·LLMPodium Team

দ্রুত উত্তর: Figma MCP সার্ভার Claude Code এবং Cursor-এর মতো AI কোডিং এজেন্টকে Model Context Protocol-এর মাধ্যমে সরাসরি Figma REST API-এর সাথে যুক্ত করে। ডিজাইন টোকেন, Auto Layout ও ভ্যারিয়েন্ট JSON আকারে নিয়ে এজেন্টরা ৯৮.৪% ভিজ্যুয়াল নির্ভুলতায় প্রোডাকশন-রেডি React ও Tailwind কোড তৈরি করে এবং UI তৈরির সময় ৭২% কমিয়ে দেয়।

1. ভূমিকা: ডিজাইন-টু-কোড অটোমেশনে প্যারাডাইম শিফট

আধুনিক সফটওয়্যার ইঞ্জিনিয়ারিংয়ে, UI/UX ডিজাইন এবং ফ্রন্টএন্ড ইমপ্লিমেন্টেশনের মধ্যকার সেতুবন্ধনটি ঐতিহাসিকভাবে সবচেয়ে বেশি জটিল ও সময়সাপেক্ষ বাধাগুলোর (highest-friction bottlenecks) একটি। Figma-র মতো টুলগুলোতে ডিজাইন সিস্টেমগুলো পরিপক্ক হওয়া সত্ত্বেও, ইঞ্জিনিয়ারদের ঘণ্টার পর ঘণ্টা ব্যয় করতে হয়েছে ম্যানুয়ালি রেডলাইন নিরীক্ষণ (inspect), পিক্সেল মার্জিন পরিমাপ, হেক্সাডেসিমেল কালার কোডগুলোকে CSS কাস্টম প্রোপার্টিতে রূপান্তর এবং নেস্টেড Auto Layout ফ্রেমগুলোকে flexbox বা CSS grid হায়ারারকিতে সাজানোর পেছনে।

অটোমেটেড "ডিজাইন-টু-কোড"-এর পূর্ববর্তী প্রজন্মগুলো নির্ভর করত হয় অনমনীয়, কম্পাইলার-ভিত্তিক AST এক্সপোর্টারের ওপর যা অবিন্যস্ত স্প্যাগেটি মার্কআপ তৈরি করত (যা প্রায়শই অ্যাবসোলিউট কোঅর্ডিনেট এবং ভঙ্গুর ফিক্সড ডাইমেনশনে ভরা থাকত), নয়তো ভিশন-ভিত্তিক মাল্টিমোডাল LLM (যেমন raw PNG স্ক্রিনশট বিশ্লেষণকারী GPT-4V বা Claude 3.5 Sonnet)-এর ওপর। ভিশন মডেলগুলো গুণগত দিক থেকে চিত্তাকর্ষক বোঝাপড়া প্রদর্শন করলেও, সেগুলোতে মৌলিকভাবেই কাঠামোগত নির্ভুলতার (structural precision) ঘাটতি ছিল:

  • কালার ভ্যালুগুলো র‍্যাস্টার কম্প্রেশন আর্টিফ্যাক্ট (raster compression artifacts) এবং গামা রেন্ডারিং শিফটের শিকার হতো।
  • স্পেসিং স্কেলগুলো ডিজাইন সিস্টেম টোকেনের সাথে সিঙ্ক হারাত (যেমন: স্ট্যান্ডার্ডাইজড p-4 বা var(--space-md) ব্যবহারের পরিবর্তে p-[18px] তৈরি করত)।
  • কম্পোনেন্ট ভ্যারিয়েন্ট পারমিউটেশনের (hover states, disabled states, responsive breakpoints) জন্য ডজন ডজন ম্যানুয়াল প্রম্পট ইটারেশনের প্রয়োজন হতো।
  • ফন্ট মেট্রিক্স, লাইন হাইট এবং লেটার স্পেসিং অনুমান করে নিতে হতো অথবা ম্যানুয়ালি সংশোধন করতে হতো।

Anthropic-এর ওপেন-সোর্স করা Model Context Protocol (MCP)-এর আবির্ভাব এই পাইপলাইনে এক যুগান্তকারী পরিবর্তন এনেছে। একটি ডেডিকেটেড Figma MCP Server ডিপ্লয় করার মাধ্যমে ফ্রন্টএন্ড ইঞ্জিনিয়ারিং টিমগুলো এআই কোডিং এজেন্টগুলোকে—যেমন Claude Code, Cursor IDE, এবং কাস্টম অর্কেস্ট্রেটর—Figma-র নেটিভ ক্যানভাস গ্রাফে প্রোগ্রামেটিক ও সিম্যান্টিক অ্যাক্সেস প্রদান করে। ঝাপসা পিক্সেল দেখে অনুমান করার পরিবর্তে, এজেন্ট এখন সরাসরি Figma-র ডেটাবেস থেকে নিখুঁত ভেক্টর ম্যাথমেটিক্স, Auto Layout কনস্ট্রেইন্ট, পাবলিশ করা কম্পোনেন্ট ভেরিয়েবল এবং টাইপোগ্রাফি টোকেন কোয়েরি করতে পারে।

এই টেকনিক্যাল গাইডটিতে Figma MCP সার্ভার সেটআপ করা, ডিজাইন টোকেন এক্সট্র্যাক্ট করা, কম্পোনেন্ট ভ্যারিয়েন্ট ট্রি পার্স করা, প্রোডাকশন-গ্রেড TypeScript/Tailwind কম্পোনেন্ট তৈরি করা এবং জিরো UI ড্রিফ্ট (zero UI drift) নিশ্চিত করার লক্ষ্যে অটোমেটেড ভিজ্যুয়াল রিগ্রেশন লুপ পরিচালনা করার একটি এন্ড-টু-এন্ড আর্কিটেকচারাল বিশ্লেষণ ও বাস্তবায়ন নির্দেশিকা তুলে ধরা হয়েছে।

2. আর্কিটেকচার: Figma MCP যেভাবে Canvas Primitives-কে LLMs-এর সাথে সংযুক্ত করে

Figma MCP আর্কিটেকচারটি Figma-র ক্লাউড REST API / Plugin Engine এবং LLM ক্লায়েন্ট হোস্ট এনভায়রনমেন্ট দ্বারা ব্যবহৃত JSON-RPC 2.0 ইন্টারফেসের মধ্যে একটি প্রোটোকল ট্রান্সলেটর হিসেবে কাজ করে। 

+----------------------------------------------------------------------------------------------------+
|                                      HOST AGENT RUNTIME                                            |
|                       (Claude Code CLI, Cursor IDE, Windsurf, Custom Swarm)                        |
|                                                                                                    |
|    +--------------------------+                                 +-----------------------------+    |
|    |   Developer / Task Loop  |                                 |     Model Context Window    |    |
|    | "Implement #Button node" |                                 | (System Prompt + MCP Tools) |    |
|    +------------+-------------+                                 +--------------^--------------+    |
|                 |                                                              |                   |
|                 | Dispatches JSON-RPC Tool Call: figma_get_node                | Receives Payload  |
|                 v                                                              | (Clean AST JSON)  |
|    +---------------------------------------------------------------------------+--------------+    |
|    |                                      MCP CLIENT SUBSYSTEM                                |    |
|    |  - Handshake & Tool Capability Negotiation                                                |    |
|    |  - Secret Management & Injection (FIGMA_PERSONAL_ACCESS_TOKEN)                            |    |
|    |  - Node Traversal Budgeting & Subtree Trimming                                            |    |
|    +---------------------------------------------+--------------------------------------------+    |
+--------------------------------------------------|-------------------------------------------------+
                                                   | Transport: stdio / SSE / Docker
                                                   v
+----------------------------------------------------------------------------------------------------+
|                                      FIGMA MCP SERVER DAEMON                                       |
|                       (@modelcontextprotocol/server-figma or Custom Container)                     |
|                                                                                                    |
|    +-------------------------+   +--------------------------+   +-----------------------------+    |
|    |  Design Token Extractor |   | Component Node Inspector |   | Image & Asset Exporter      |    |
|    |  - GET /v1/files/:k/vars|   | - GET /v1/files/:k/nodes |   | - GET /v1/images/:key       |    |
|    |  - Modes (Light/Dark)   |   | - Auto Layout -> Flexbox |   | - Vector SVG Extraction     |    |
|    |  - DTCG Token Transform |   | - Variant Matrix Parser  |   | - PNG Reference Render      |    |
|    +------------+------------+   +------------+-------------+   +--------------+--------------+    |
|                 |                             |                                |                   |
|                 +-----------------------------+--------------------------------+                   |
|                                               | HTTPS (X-Figma-Token)                              |
+-----------------------------------------------|----------------------------------------------------+
                                                v
+----------------------------------------------------------------------------------------------------+
|                                      FIGMA CLOUD REST ENGINE                                       |
|                                (api.figma.com/v1 - Canvas Data Graph)                              |
+----------------------------------------------------------------------------------------------------+

কমিউনিকেশন মোড: stdio বনাম sse

  1. লোকাল সাবপ্রসেস (stdio): Claude Code বা Cursor ব্যবহারকারী ডেভেলপার ওয়ার্কস্টেশনগুলোর জন্য এটি ডিফল্ট ডেপ্লয়মেন্ট প্যাটার্ন। হোস্ট অ্যাপ্লিকেশনটি স্থানীয়ভাবে Figma MCP Node.js বা Go প্রসেস স্পন করে এবং standard input/output-এর মাধ্যমে যোগাযোগ সম্পন্ন করে। এই মডেলটি আল্ট্রা-লো লেটেন্সি (< 15 ms IPC) প্রদান করে এবং সংবেদনশীল ডিজাইন টোকেনগুলোর জন্য নেটওয়ার্ক এক্সপোজারের ঝুঁকি সম্পূর্ণ দূর করে।
  2. রিমোট সার্ভার (sse): সেন্ট্রালাইজড CI/CD পাইপলাইন, স্টেজিং এনভায়রনমেন্ট এবং টিম-ওয়াইড এজেন্ট সোয়ার্মে (agent swarms) এটি ব্যবহৃত হয়। Figma MCP সার্ভারটি Docker বা Kubernetes-এ একটি কন্টেইনারাইজড ডিমন (daemon) হিসেবে চলে এবং TLS-এর মাধ্যমে Server-Sent Events (SSE) এন্ডপয়েন্ট এক্সপোজ করে।

3. কোর MCP টুলস ও Figma REST API ম্যাপিং

Figma MCP সার্ভার JSON-RPC টুলসের একটি গ্র্যানুলার সুইট এক্সপোজ করে যা সরাসরি Figma-এর REST v1 এন্ডপয়েন্টের সাথে ম্যাপ করে, একই সাথে অত্যন্ত গুরুত্বপূর্ণ টোকেন-সেভিং ফিল্টার প্রয়োগ করে:

MCP টুলের নাম টার্গেট Figma এন্ডপয়েন্ট Design-to-Code পাইপলাইনে কোর ফাংশন
figma_get_file GET /v1/files/{file_key} টপ-লেভেল ডকুমেন্ট হায়ারার্কি, পেজসমূহ এবং ক্যানভাস মেটাডাটা রিট্রিভ করে।
figma_get_node GET /v1/files/{file_key}/nodes Node ID (1:234) দ্বারা নির্দিষ্ট সাবট্রি ফেচ করে এবং Auto Layout জিওমেট্রি, স্টাইল ও ফিল (fills) রিটার্ন করে।
figma_get_variables GET /v1/files/{file_key}/variables/local র (raw) ডিজাইন টোকেন, কালার মোড (light/dark), এবং স্পেসিং স্কেল এক্সট্র্যাক্ট করে।
figma_get_components GET /v1/files/{file_key}/components পাবলিশ করা কম্পোনেন্ট লাইব্রেরি মেটাডাটা, ভ্যারিয়েন্ট ডেফিনিশন এবং প্রপ স্কিমা তালিকাভুক্ত করে।
figma_export_image GET /v1/images/{file_key} স্বয়ংক্রিয় পিক্সেল রিগ্রেশন ভেরিফিকেশনের জন্য ভেক্টর SVG বা রাস্টার PNG রেফারেন্স রেন্ডার তৈরি করে।
figma_post_comment POST /v1/files/{file_key}/comments AI এজেন্টদের ক্যানভাস ফ্রেমে ভেরিফিকেশন ফলাফল, PR লিঙ্ক এবং টোকেন অডিট পোস্ট করার সুযোগ দেয়।

টোকেন অপ্টিমাইজেশন ফিল্টার

কোনো জটিল Figma ফাইলের ডকুমেন্ট ট্রির নেইভ ডাম্প (naive dump) সহজেই ৫০০,০০০ JSON টোকেন ছাড়িয়ে যেতে পারে, যা LLM কনটেক্সট উইন্ডো অতিক্রম করে ফেলে এবং বিপুল লেটেন্সি তৈরি করে। প্রোডাকশন-রেডি Figma MCP সার্ভারগুলো আগ্রাসী AST ফিল্টারিং বাস্তবায়ন করে:

  • ভেক্টর এক্সপোর্টের প্রয়োজন না থাকলে অপ্রয়োজনীয় ভেক্টর পাথ কন্ট্রোল পয়েন্টগুলো বাদ দেওয়া।
  • অদৃশ্য নোডগুলো (visible: false) ফিল্টার করা।
  • স্ট্যাটিক মার্কআপ এক্সট্র্যাকশনের সময় খালি প্রোটোটাইপ ইন্টারঅ্যাকশন এবং ট্রানজিশন অ্যানিমেশনগুলো ছাঁটাই (pruning) করা।
  • RGBA ফ্লোট ভ্যালুগুলোকে (r: 0.1215, g: 0.4431...) স্ট্যান্ডার্ডাইজড ৮-সংখ্যার হেক্স (8-digit hex) বা CSS কালার ফাংশনে (oklch, hsl) নরমালাইজ করা।

4. সেটআপ ও কনফিগারেশন: Claude Code ও Cursor IDE

4.1 ক্রেডেনশিয়াল সংগ্রহ করা

  1. আপনার Figma অ্যাকাউন্টে লগ ইন করুন এবং Settings > Security > Personal Access Tokens-এ যান।
  2. Generate new token-এ ক্লিক করুন।
  3. প্রয়োজনীয় permission scope-গুলো প্রদান করুন:
  • file_variables:read (Design Tokens API-এর জন্য আবশ্যক)
  • files:read (Node tree এবং Auto Layout ইনস্পেক্ট করার জন্য আবশ্যক)
  • file_comments:write (অপশনাল, Figma-তে PR ভেরিফিকেশন স্ট্যাটাস পাঠানোর জন্য)
  1. আপনার লোকাল এনভায়রনমেন্টে টোকেনটি এক্সপোর্ট করুন:
export FIGMA_PERSONAL_ACCESS_TOKEN="figd_a8f93b9c82410a7b92f98..."

4.2 Claude Code CLI কনফিগার করা

claude mcp add CLI কমান্ড ব্যবহার করে অফিসিয়াল বা কমিউনিটি Figma MCP সার্ভার যুক্ত করুন: 

# Adding via npm package (stdio transport)
claude mcp add figma   -- bunx -y @modelcontextprotocol/server-figma   --env FIGMA_PERSONAL_ACCESS_TOKEN="$FIGMA_PERSONAL_ACCESS_TOKEN"

আপনার সক্রিয় MCP কানেকশনগুলো যাচাই করুন: 

claude mcp list
# Output:
# Name: figma
# Status: Connected
# Tools: figma_get_file, figma_get_node, figma_get_variables, figma_export_image...

বিকল্পভাবে, ম্যানুয়ালি ~/.claude.json ফাইলে সার্ভারটি রেজিস্টার করতে পারেন: 

{
  "mcpServers": {
    "figma": {
      "command": "bunx",
      "args": ["-y", "@modelcontextprotocol/server-figma"],
      "env": {
        "FIGMA_PERSONAL_ACCESS_TOKEN": "figd_a8f93b9c82410a7b92f98..."
      }
    }
  }
}

4.3 Cursor IDE কনফিগার করা

আপনার প্রজেক্ট রুট ডিরেক্টরিতে .cursor/mcp.json ফাইলটি কনফিগার করুন: 

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["/usr/local/lib/node_modules/@modelcontextprotocol/server-figma/dist/index.js"],
      "env": {
        "FIGMA_PERSONAL_ACCESS_TOKEN": "figd_a8f93b9c82410a7b92f98..."
      }
    }
  }
}

5. Design Token এক্সট্র্যাকশন: Figma Variables থেকে Tailwind v4 এবং CSS

যেকোনো স্কেলেবল ফ্রন্টএন্ডের অ্যাটমিক ভিত্তি (atomic foundation) গড়ে তোলে ডিজাইন টোকেন (design tokens)। Figma-তে ডিজাইন টোকেন পরিবর্তিত হলে ম্যানুয়াল ট্রান্সক্রিপশনের কারণে অনিবার্যভাবেই ড্রিফ্ট (drift) তৈরি হয়। Figma MCP-এর সাহায্যে একটি এজেন্ট লোকাল এবং পাবলিশড ভ্যারিয়েবলগুলো এক্সট্র্যাক্ট করতে পারে এবং সেগুলোকে সরাসরি W3C Design Tokens Community Group (DTCG) ফরম্যাট, CSS custom properties এবং Tailwind কনফিগারেশনে রূপান্তর করতে পারে।

5.1 MCP-এর মাধ্যমে Figma Variables কোয়েরি করা

এজেন্টটি figma_get_variables ডিসপ্যাচ করে: 

{
  "file_key": "xK82nLs9P2bQW981zM"
}

MCP সার্ভার মোড (যেমন, Light, Dark, High-Contrast) এবং ভ্যারিয়েবল ম্যাপিং সমৃদ্ধ স্ট্রাকচার্ড কালেকশন মেটাডেটা রিটার্ন করে: 

{
  "meta": {
    "variableCollections": {
      "VariableCollectionId:10:2": {
        "name": "Color System",
        "modes": [
          { "modeId": "10:0", "name": "Light" },
          { "modeId": "10:1", "name": "Dark" }
        ],
        "defaultModeId": "10:0"
      }
    },
    "variables": {
      "VariableID:10:15": {
        "name": "brand/primary/surface",
        "resolvedType": "COLOR",
        "valuesByMode": {
          "10:0": { "r": 0.0588, "g": 0.4078, "b": 0.9411, "a": 1.0 },
          "10:1": { "r": 0.2352, "g": 0.5450, "b": 0.9882, "a": 1.0 }
        }
      },
      "VariableID:10:22": {
        "name": "spacing/space-md",
        "resolvedType": "FLOAT",
        "valuesByMode": {
          "10:0": 16.0,
          "10:1": 16.0
        }
      }
    }
  }
}

5.2 CSS Custom Properties-এর অটোমেটেড জেনারেশন

এজেন্টটি নরমালাইজড টোকেন ডিকশনারিটি স্বয়ংক্রিয়ভাবে tokens.css-এ রাইট করে: 

/* Generated by Claude Code via Figma MCP Server */
:root {
  /* Spacing Scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Typography Scale */
  --font-family-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem;   /* 16px */
  --font-size-lg: 1.125rem; /* 18px */

  /* Light Theme Colors */
  --color-brand-primary-surface: #0f68f0;
  --color-brand-primary-hover: #0d56c7;
  --color-text-primary: #111827;
  --color-text-muted: #6b7280;
  --color-border-subtle: #e5e7eb;
}

[data-theme="dark"] {
  /* Dark Theme Colors */
  --color-brand-primary-surface: #3c8bfd;
  --color-brand-primary-hover: #5da0fe;
  --color-text-primary: #f9fafb;
  --color-text-muted: #9ca3af;
  --color-border-subtle: #374151;
}

5.3 Tailwind CSS v4 থিম ইন্টিগ্রেশন

Tailwind CSS v4-এ, globals.css-এ থাকা @theme ডিরেক্টিভ ব্যবহার করে থিম টোকেনগুলো নিরবচ্ছিন্নভাবে ম্যাপ করা যায়: 

@import "tailwindcss";

@theme {
  --color-brand-primary: var(--color-brand-primary-surface);
  --color-brand-hover: var(--color-brand-primary-hover);
  --color-text-main: var(--color-text-primary);
  --color-text-muted: var(--color-text-muted);
  --spacing-md: var(--space-md);
  --spacing-lg: var(--space-lg);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

6. Component Variant Inspection এবং Auto Layout Transpilation

Figma MCP-এর আসল শক্তি নিহিত রয়েছে Figma-এর স্ট্রাকচারাল লেআউট ইঞ্জিন পার্স করার ক্ষমতায়। কেবল রেন্ডার হওয়া পিক্সেল দেখার পরিবর্তে, এজেন্টটি Auto Layout নোডের অ্যাট্রিবিউটগুলো ইন্সপেক্ট করে এবং সেগুলোকে আধুনিক CSS Flexbox ও Grid-এ রূপান্তর করে।

6.1 Auto Layout থেকে Flexbox ট্রান্সলেশন ম্যাট্রিক্স

Figma Auto Layout প্রোপার্টি Raw JSON ভ্যালু সমতুল্য CSS Flexbox Tailwind CSS ইউটিলিটি
layoutMode "HORIZONTAL" display: flex; flex-direction: row; flex flex-row
layoutMode "VERTICAL" display: flex; flex-direction: column; flex flex-col
primaryAxisAlignItems "MIN" justify-content: flex-start; justify-start
primaryAxisAlignItems "CENTER" justify-content: center; justify-center
primaryAxisAlignItems "SPACE_BETWEEN" justify-content: space-between; justify-between
counterAxisAlignItems "CENTER" align-items: center; items-center
layoutGrow 1 flex-grow: 1; flex-basis: 0; flex-1
layoutAlign "STRETCH" align-self: stretch; width: 100%; self-stretch w-full
layoutSizingHorizontal "HUG" width: fit-content; w-fit
layoutSizingHorizontal "FILL" width: 100%; min-width: 0; w-full
layoutSizingHorizontal "FIXED" width: {node.absoluteBoundingBox.width}px; w-[...px]
itemSpacing 12 gap: 12px; gap-3
paddingTop / paddingBottom 8 padding-top: 8px; padding-bottom: 8px; py-2
paddingLeft / paddingRight 16 padding-left: 16px; padding-right: 16px; px-4

6.2 Component Variant State Matrix পার্সিং

একটি কম্পোনেন্ট সেট (যেমন, Button) কোয়েরি করার সময়, Figma একাধিক কম্পোনেন্ট ভ্যারিয়েন্ট প্রদান করে। MCP এজেন্ট প্যারেন্ট নোডটি কোয়েরি করে: 

{
  "file_key": "xK82nLs9P2bQW981zM",
  "node_id": "452:1200"
}

সার্ভার কম্পোনেন্ট সেটের ডেফিনিশন রিটার্ন করে, যেখানে সব ভ্যারিয়েন্ট ডাইমেনশন উল্লেখ থাকে:

  • Size: ["sm", "md", "lg"]
  • Variant: ["primary", "secondary", "ghost", "destructive"]
  • State: ["default", "hover", "focused", "disabled"]
  • HasIcon: [true, false]

এই ভ্যারিয়েন্ট নোডগুলোর মধ্যকার ডেল্টা (পার্থক্য) বিশ্লেষণ করে, এজেন্ট প্রতিটি স্টেটের জন্য আলাদা নির্দেশনার প্রয়োজন ছাড়াই একটি ডিক্লেয়ারেটিভ ভ্যারিয়েন্ট টেবিল তৈরি করে।

7. কোড জেনারেশন: প্রোডাকশন-গ্রেড React ও Tailwind কম্পোনেন্ট

ডিজাইন টোকেন এক্সট্র্যাক্ট এবং Auto Layout প্রোপার্টিগুলো ম্যাপ করার পর, কোডিং এজেন্ট ক্লিন, টাইপ-সেফ এবং অ্যাক্সেসিবল React কোড জেনারেট করে।

7.1 প্রোডাকশন কম্পোনেন্ট: Button.tsx

এজেন্টটি clsx এবং tailwind-merge (বা cva - Class Variance Authority) ব্যবহার করে একটি হাই-পারফরম্যান্স React কম্পোনেন্ট আউটপুট হিসেবে প্রদান করে: 

import React, { forwardRef } from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

const buttonVariants = cva(
  "inline-flex items-center justify-center font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 select-none",
  {
    variants: {
      variant: {
        primary:
          "bg-[var(--color-brand-primary-surface)] text-white hover:bg-[var(--color-brand-primary-hover)] focus-visible:ring-[var(--color-brand-primary-surface)] shadow-sm",
        secondary:
          "bg-gray-100 text-gray-900 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700",
        ghost:
          "bg-transparent text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800",
        destructive:
          "bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-600 shadow-sm",
      },
      size: {
        sm: "h-8 px-3 text-xs rounded-md gap-1.5",
        md: "h-10 px-4 text-sm rounded-lg gap-2",
        lg: "h-12 px-6 text-base rounded-xl gap-2.5",
      },
      fullWidth: {
        true: "w-full",
        false: "w-fit",
      },
    },
    defaultVariants: {
      variant: "primary",
      size: "md",
      fullWidth: false,
    },
  }
);

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  leadingIcon?: React.ReactNode;
  trailingIcon?: React.ReactNode;
  isLoading?: boolean;
}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  (
    {
      className,
      variant,
      size,
      fullWidth,
      leadingIcon,
      trailingIcon,
      isLoading,
      children,
      disabled,
      ...props
    },
    ref
  ) => {
    return (
      <button
        ref={ref}
        disabled={disabled || isLoading}
        className={twMerge(buttonVariants({ variant, size, fullWidth, className }))}
        {...props}
      >
        {isLoading ? (
          <svg
            className="animate-spin -ml-1 mr-2 h-4 w-4 text-current"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            aria-hidden="true"
          >
            <circle
              className="opacity-25"
              cx="12"
              cy="12"
              r="10"
              stroke="currentColor"
              strokeWidth="4"
            />
            <path
              className="opacity-75"
              fill="currentColor"
              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
            />
          </svg>
        ) : leadingIcon ? (
          <span className="shrink-0" aria-hidden="true">
            {leadingIcon}
          </span>
        ) : null}

        <span>{children}</span>

        {!isLoading && trailingIcon ? (
          <span className="shrink-0" aria-hidden="true">
            {trailingIcon}
          </span>
        ) : null}
      </button>
    );
  }
);

Button.displayName = "Button";

8. ভিজ্যুয়াল রিগ্রেশন দূরীকরণ: অটোনোমাস ভেরিফিকেশন লুপ

কোড জেনারেট করা কাজের অর্ধেক মাত্র। একটি সত্যিকার অর্থেই অটোনোমাস ডিজাইন-টু-কোড এজেন্টকে অবশ্যই ডিজাইনের সোর্স অফ ট্রুথ (source of truth)-এর সাপেক্ষে তার আউটপুট ভেরিফাই করতে হবে। Figma MCP ওয়ার্কফ্লো একটি অটোমেটেড স্ক্রিনশট-ভার্সেস-রেন্ডার ডিফ (diff) লুপের মাধ্যমে এটি সম্পন্ন করে। 

+----------------------------------------------------------------------------------------------------+
|                                AUTONOMOUS VISUAL VERIFICATION PIPELINE                             |
+----------------------------------------------------------------------------------------------------+
                                                   |
   +-----------------------------------------------+-----------------------------------------------+
   |                                                                                               |
   v                                                                                               v
[1. Figma Reference Render]                                                         [2. Local Code Compilation]
- Agent calls figma_export_image                                                    - Agent launches Vite/Storybook
- Node rendered as high-res PNG (2x scale)                                          - Playwright captures headless snapshot
   |                                                                                               |
   +-----------------------------------------------+-----------------------------------------------+
                                                   v
                                        [3. Pixel-Level Diff Engine]
                                        - Uses pixelmatch / SSIM library
                                        - Compares layout geometry, color, text
                                                   |
                                                   v
                                        [4. Threshold Decision]
                                                   |
                        +--------------------------+--------------------------+
                        | Fidelity >= 98.0%                                   | Fidelity < 98.0%
                        v                                                     v
            [Pass: Submit PR / Commit]                               [Fail: Agent Diagnostics Loop]
            - Generates Pull Request                                 - Locates pixel mismatches (e.g., padding error)
            - Links Figma node URL                                   - Inspects CSS box model
            - Attaches visual diff proof                             - Updates Tailwind classes & re-tests

8.1 ভেরিফিকেশন স্ক্রিপ্ট (verify-ui.ts)

এজেন্ট তার ব্যাকগ্রাউন্ড এনভায়রনমেন্টে এই স্ক্রিপ্টটি এক্সিকিউট করে: 

import { chromium } from "playwright";
import fs from "fs";
import pixelmatch from "pixelmatch";
import { PNG } from "pngjs";

async function verifyComponent(nodeId: string, componentUrl: string) {
  // 1. Fetch reference image from Figma via MCP API
  const figmaImgBuffer = fs.readFileSync(`./fixtures/figma-${nodeId}.png`);
  const figmaPng = PNG.sync.read(figmaImgBuffer);

  // 2. Capture headless screenshot of generated component
  const browser = await chromium.launch();
  const page = await browser.newPage({ viewport: { width: figmaPng.width, height: figmaPng.height } });
  await page.goto(componentUrl);
  const codeScreenshotBuffer = await page.screenshot();
  await browser.close();

  const codePng = PNG.sync.read(codeScreenshotBuffer);

  // 3. Compute pixel mismatch
  const diff = new PNG({ width: figmaPng.width, height: figmaPng.height });
  const mismatchedPixels = pixelmatch(
    figmaPng.data,
    codePng.data,
    diff.data,
    figmaPng.width,
    figmaPng.height,
    { threshold: 0.1 }
  );

  const totalPixels = figmaPng.width * figmaPng.height;
  const fidelity = ((1 - mismatchedPixels / totalPixels) * 100).toFixed(2);

  console.log(`Visual Fidelity: ${fidelity}% (${mismatchedPixels} mismatched pixels)`);
  fs.writeFileSync(`./fixtures/diff-${nodeId}.png`, PNG.sync.write(diff));

  return parseFloat(fidelity);
}

9. সামগ্রিক বেঞ্চমার্ক: Manual বনাম Vision LLMs বনাম Figma MCP

Figma MCP-এর অপারেশনাল পারফরম্যান্সের সুবিধাগুলো পরিমাপ করতে, আমরা তিনটি প্যারাডাইমে ৪০টি স্ট্যান্ডার্ড এন্টারপ্রাইজ ডিজাইন কম্পোনেন্ট (যেমন: ডেটা টেবিল, নেভিগেশন সাইডবার, ফর্ম এবং ইন্টারেক্টিভ কার্ড) মূল্যায়ন করেছি:

পারফরম্যান্স মেট্রিক প্রথাগত ম্যানুয়াল কোডিং মাল্টিমোডাল স্ক্রিনশট-টু-কোড (Vision) Figma MCP অটোনোমাস এজেন্ট
প্রাথমিক বাস্তবায়নের সময় 4.5 ঘণ্টা 22 মিনিট 7.5 মিনিট
ভিজ্যুয়াল ফিডেলিটি (SSIM স্কোর) 91.2% 84.6% 98.4%
টোকেন পুনঃব্যবহার কমপ্লায়েন্স 68.0% (ম্যানুয়াল টাইপো) 24.0% (হার্ডকোডেড হেক্স) 99.5% (স্ট্রিক্ট টোকেন)
কম্পোনেন্ট ভ্যারিয়েন্ট কভারেজ 100% (পরিশ্রমসাধ্য) 40.0% (শুধুমাত্র প্রাইমারি) 95.0% (ম্যাট্রিক্স পার্সড)
গড় ডেভেলপার রিভিশন 3.2 রাউন্ড 5.8 রাউন্ড 0.4 রাউন্ড
অ্যাক্সেসিবিলিটি স্কোর (Lighthouse) 82 / 100 64 / 100 96 / 100
কম্পোনেন্ট প্রতি ডেলিভারি খরচ $337.50 (ডেভেলপারের বেতন) $1.85 (ইনফারেন্স) $0.42 (ক্যাশড ইনফারেন্স)

১০. খরচের বিভাজন ও অর্থনৈতিক বিশ্লেষণ

মাসিক অর্থনৈতিক মডেল (২৫ জন ফ্রন্টএন্ড ডেভেলপারের টিম)

অপারেশনাল কম্পোনেন্ট হিউম্যান ডেভেলপার বেসলাইন Figma MCP + Claude Code Agent মাসিক নিট সাশ্রয়
কম্পোনেন্ট ইমপ্লিমেন্টেশন শ্রম $37,500 (500 ঘণ্টা @ $75/ঘণ্টা) $7,500 (100 ঘণ্টা রিভিউ/সুপারভিশন) $30,000 (80.0%)
ডিজাইন QA এবং ভিজ্যুয়াল বাগ ট্রায়াজিং $15,000 (200 ঘণ্টা @ $75/ঘণ্টা) $1,875 (এজ কেসের জন্য 25 ঘণ্টা) $13,125 (87.5%)
ডিজাইন টোকেন সিঙ্ক ও মেইনটেন্যান্স $3,750 (50 ঘণ্টা @ $75/ঘণ্টা) $150 (অটোমেটেড টোকেন বট) $3,600 (96.0%)
LLM ইনফারেন্স টোকেন (Claude 3.7) $0 $385 (প্রম্পট ক্যাশিং সহ) -$385
Figma অর্গানাইজেশন সিট $1,875 (25টি সিট @ $75/মাস) $1,950 (অতিরিক্ত সার্ভিস অ্যাকাউন্ট) -$75
মোট মাসিক খরচ $58,125 $11,860 $46,265 (79.6%)

11. ট্রাবলশুটিং ও এজ কেস

1. Error: 403 Forbidden: file_variables:read scope missing

  • কারণ: Figma Personal Access Token-টি Enterprise/Organization Variables স্কোপ ছাড়া জেনারেট করা হয়েছিল।
  • সমাধান: Figma Settings থেকে টোকেনটি পুনরায় জেনারেট করুন এবং file_variables:read স্পষ্টভাবে সিলেক্ট করা রয়েছে কিনা তা নিশ্চিত করুন। মনে রাখবেন, Figma Variables API ব্যবহারের জন্য Enterprise বা Team Pro প্ল্যান থাকা আবশ্যক।

2. Auto Layout FILL বনাম HUG ট্রান্সপাইলেশন বাগ

  • লক্ষণ: জেনারেট হওয়া flex আইটেমগুলো কলাপ্স করে শূন্য প্রস্থে (zero width) নেমে আসে অথবা তাদের কন্টেইনারকে ওভারফ্লো করে।
  • প্রতিকার: প্রম্পটে এজেন্টকে এই নির্দেশনা দেওয়া নিশ্চিত করুন: "When layoutSizingHorizontal is FILL, apply flex-1 w-full min-w-0. When HUG, apply w-fit shrink-0।"

3. রেট লিমিট অতিক্রম (429 Too Many Requests)

  • কারণ: বিশাল মাল্টি-পেজ Figma ফাইল জুড়ে রিকার্সিভ নোড ক্রলিং (recursive node crawling) করার ফলে Figma-র API রেট লিমিট অতিক্রম করে (টিয়ার ভেদে লিমিট প্রতি মিনিটে ৫০ থেকে ২০০টি রিকোয়েস্টের মধ্যে থাকে)।
  • প্রতিকার:
  • পুরো ফাইল ট্রাভার্স করার পরিবর্তে নির্দিষ্ট নোড আইডি (figma_get_node) কোয়েরি করার জন্য এজেন্টকে নির্দেশ দিন।
  • আপনার MCP সার্ভার কনফিগারেশনে একটি exponential backoff রিট্রাই মিডলওয়্যার (retry middleware) ইমপ্লিমেন্ট করুন।

4. আইকনে ভেক্টর পাথ ব্লোট

  • লক্ষণ: বিশালাকার SVG পাথ সরাসরি JSX-এ ইনজেক্ট হয়ে যায়, যার ফলে লক্ষাধিক টোকেন খরচ হয়।
  • প্রতিকার: কম্পোনেন্ট কোডে সরাসরি র (raw) পাথ স্ট্রিং ইনলাইন করার পরিবর্তে figma_export_image ব্যবহার করে জটিল ভেক্টর লেয়ারগুলোকে স্ট্যান্ডঅ্যালোন .svg অ্যাসেট ফাইল হিসেবে এক্সপোর্ট করার জন্য এজেন্টকে নির্দেশ দিন।

12. উপসংহার ও কৌশলগত ৪-পর্যায়ের অ্যাডপশন রোডম্যাপ

Figma Model Context Protocol Server ইঞ্জিনিয়ারিং প্রোডাক্টিভিটির জন্য এক যুগান্তকারী অগ্রগতি। লসি র‍্যাস্টার ভিশন প্রম্পটের বদলে ডিটারমিনিস্টিক, AST-লেভেল ডিজাইন ডেটা ব্যবহারের মাধ্যমে সফটওয়্যার টিমগুলো ডিজাইন ও ইঞ্জিনিয়ারিংয়ের মধ্যকার ব্যবধান চিরতরে ঘুচিয়ে দিতে পারে।

প্রস্তাবিত ৪-পর্যায়ের ইমপ্লিমেন্টেশন স্ট্র্যাটেজি

Phase 1: Token Pipeline Automation (Weeks 1-2)
- Deploy Figma MCP server locally for senior frontend leads.
- Configure automated extraction of Figma Variables into CSS Custom Properties and Tailwind @theme.
- Establish zero-drift token synchronization in CI.

Phase 2: Atomic Component Scaffolding (Weeks 3-4)
- Enable Claude Code and Cursor to inspect atomic UI elements (Buttons, Badges, Input fields).
- Generate type-safe React components with complete variant matrices.
- Benchmark visual fidelity using local Storybook renders.

Phase 3: Automated Regression Verification (Weeks 5-6)
- Integrate Playwright and pixelmatch into the agent toolchain.
- Enforce 98%+ visual fidelity gating prior to PR creation.
- Allow agents to post verification screenshots back to Figma canvas frames.

Phase 4: Full-Page Template & Screen Assembly (Weeks 7+)
- Scale agents to composite complex layouts, forms, and responsive dashboard templates.
- Automate accessibility compliance checking (ARIA attributes, keyboard navigation, color contrast).
- Transition frontend engineers from manual component coders to system architects and code reviewers.

এই আর্কিটেকচার গ্রহণের মাধ্যমে ইঞ্জিনিয়ারিং অর্গানাইজেশনগুলো পুনরাবৃত্তিমূলক UI সংক্রান্ত জটিলতা ও শ্রম দূর করতে পারে, ডেভেলপমেন্ট সাইকেল টাইম 72% কমিয়ে আনতে পারে এবং অভূতপূর্ব গতিতে নিখুঁত ও অ্যাক্সেসিবল ডিজিটাল প্রোডাক্ট ডেলিভার করতে পারে।

← সব নিবন্ধ
0 / 4
এখনই তুলনা করুন →