Claude Code Guide
সব designer guideRead in English

Designer-দের জন্য

AI handoff-এর জন্য আপনার Figma file গুছিয়ে নিন

আপনার Figma file এমনভাবে গুছিয়ে নিন যাতে Claude সেটা ঠিকঠাক পড়তে পারে। Layer-এর ঠিক নাম, annotation আর token export থাকলে handoff-এ ভুল বোঝাবুঝি কমে।

২০ মিনিটintermediate
figma-for-ai-handoffSituation-টা

আপনি Claude Code ব্যবহার করা একজন developer-কে একটা Figma file দিচ্ছেন। আপনার layer-গুলোর নাম "Frame 14" আর "Group 7"। গতবারের handoff-এ যে code এসেছিল, সেটা design-এর সঙ্গে একদমই মেলেনি, আর ঠিক করতে আসা-যাওয়ায় তিন দিন লেগে গিয়েছিল।

আপনি file-টা এমনভাবে গুছিয়ে নেবেন যাতে Claude Code সেটা ঠিকঠাক পড়ে, আর এমন code বানায় যেটা দেখে আপনি নিজের design চিনতে পারেন, দ্বিতীয় দফা correction ছাড়াই।

কোথায় follow করবেন:

যা লাগবে: Mac বা Windows-এর জন্য Claude desktop app। এটা আপনার file-এর একটা folder পড়তে পারে।

শেষে যা পাবেন

01

Layer-এর নাম বলবে component-টার কাজ কী, সেটার shape নয়, যাতে Claude-কে আন্দাজে কিছু ধরে নিতে না হয়

02

Pixel যে behaviour দেখাতে পারে না, তার জন্য annotation: validation rule, transition আর error state

03

একটা token export আর component spec, যা সরাসরি Claude Code session-এ paste করার জন্য ready

ধাপ 01

Layer-এর নাম দিন কাজ দেখে, shape দেখে নয়

Session-এ paste করলে Claude আপনার layer name আর annotation context হিসেবে পড়ে। "Frame 3"-এর মতো generic নাম থেকে generic code আসে। প্রতিটা interactive element-এর নাম এই pattern-এ বদলে দিন: component/state/variant। যেমন: button/primary/default, input/error/filled, card/product/selected।

Prompt
# যে layer-গুলোর নাম ঠিক নেই (Claude-কে আন্দাজ করতে হয়): Frame 14 Group 7 Rectangle 3 Vector 2 # যে layer-গুলোর নাম ঠিক আছে (Claude সরাসরি ব্যবহার করতে পারে): button/primary/default form/amount-entry input/bkash-number icon/chevron-right

আপনি যা দেখবেন

ধাপ 02

Pixel দেখে Claude যে behaviour বুঝতে পারে না, তার annotation দিন

Visual design state দেখায়, কিন্তু transition, error condition বা edge case দেখায় না। Figma annotation (অথবা "AI-NOTES" নামের একটা sticky note layer) দিয়ে লিখে রাখুন: কী কারণে state বদলায়, কোন validation rule খাটে, error হলে কী হয়, আর কোন field optional।

Prompt
# AI-NOTES layer-এর content-এর উদাহরণ (Figma-তে sticky note হিসেবে paste করুন): button/primary/default - Disabled থাকবে যতক্ষণ না: amount > 0 AND phone field validation pass করে - Tap করলে: button disable হবে, spinner দেখাবে, /api/send-money call হবে - Loading state: API call চলার পুরো সময় label-এর জায়গায় spinner থাকবে input/amount/default - Min: 10 BDT, Max: 5000 BDT - Error state: field-এর নিচে inline দেখাবে "Minimum is 10 BDT" - On blur: সঙ্গে সঙ্গে validate করে error দেখাবে (submit-এর জন্য অপেক্ষা করবে না) input/bkash-number/default - Format: 11 digit, শুরু হতে হবে 01 দিয়ে - Error: "Enter a valid 11-digit bKash number"

আপনি যা দেখবেন

ধাপ 03

Token export করুন আর একটা component spec লিখুন

Handoff-এর আগে আপনার design token (color, spacing, type) export করুন আর এক পাতার একটা component spec লিখুন। দুটোই Claude-এ paste করে code generate করতে বলুন। মুখে design বুঝিয়ে বলার চেয়ে এটা দ্রুত, আর screenshot দেখে Claude ঠিক বুঝবে এই আশায় থাকার চেয়ে অনেক বেশি accurate।

json
# Tokens Studio plugin দিয়ে Figma থেকে token export করুন
# অথবা নিজে হাতে একটা JSON file-এ copy করে নিন

{
  "colors": {
    "primary": "#E2136E",
    "error": "#D32F2F",
    "surface": "#F5F5F5"
  },
  "spacing": {
    "xs": "4px", "sm": "8px", "md": "16px", "lg": "24px"
  },
  "typography": {
    "body": { "size": "14px", "weight": "400", "lineHeight": "20px" },
    "label": { "size": "12px", "weight": "500", "lineHeight": "16px" }
  }
}

আপনি যা দেখবেন

ধাপ 04

যে ভুলগুলো প্রায়ই হয়

Figma থেকে Claude-এ handoff-এর সময় এই চারটা ভুল সবচেয়ে বেশি হয়।

  1. শুধু top-level frame-এর নাম বদলানো। Layer-এর নাম সবচেয়ে বেশি দরকার component আর element level-এ, page বা frame level-এ নয়। Frame-এর নাম "Payment Screen" দিলে কোনো লাভ নেই। ওই frame-এর ভেতরের "button/primary/disabled"-ই code বদলে দেয়।
  2. Simple component-এর জন্য AI-NOTES layer বাদ দেওয়া। Simple component-এরও এমন behaviour থাকে যা চোখে পড়ে না: hover state, disabled condition, error trigger। Annotate না করলে Claude common pattern দেখে ধরে নেয়, যা আপনার product-এর সঙ্গে না-ও মিলতে পারে।
  3. Codebase-এর সঙ্গে না মিলিয়েই token export করা। Export-এ যদি এমন Figma variable name থাকে যা আপনার codebase চেনে না, তাহলে developer-কে আরেক দফা নাম মেলাতে হয়। Handoff-এর আগে মিলিয়ে দেখুন, export-এর token name আর dev team যে নাম ব্যবহার করে, সেগুলো এক কি না।
  4. Design শেষ হওয়ার আগেই file handoff করা। যে file এখনও বদলাচ্ছে, তাতে annotation আর layer name যোগ করলে confusion তৈরি হয়। Design stable হলে handoff prep pass একবারই করুন।

এরপর কী?

Claude Code দিয়ে আপনার প্রথম flow বানান

New guides, when they ship

One email, roughly weekly. CLAUDE.md templates, workflows I actually use, and the cut-for-length stuff that does not make the public guides. One-click unsubscribe.

Or read Product Field Notes, the Substack