Figma কোড স্তর এবং Specs: তারা কি, তারা কিভাবে কাজ করে এবং তারা কোথায় থামে2 min read

Figma কোড স্তরগুলি ক্যানভাসে চলমান কোড রাখে এবং Figma Specs সেখানেও Markdown রাখে। উভয়ই 15 অক্টোবর, 2026-এ Config India-এ ওপেন বিটাতে প্রবেশ করেছে, তাই একটি ডিজাইন ফাইল এখন ফ্রেম, একটি কার্যকরী প্রোটোটাইপ এবং একজন এজেন্ট তৈরি করা লিখিত পরিকল্পনা ধারণ করতে পারে।

Figma-এ প্রোটোটাইপ এবং স্পেক ওয়ার্ক সরানো হবে কিনা সেই সিদ্ধান্ত নেওয়া ডিজাইনার, PM এবং ফ্রন্ট-এন্ড ইঞ্জিনিয়ারদের জন্য এই নির্দেশিকা। এটি কভার করে যে প্রতিটি বৈশিষ্ট্য কী করে, কীভাবে শুরু করতে হয়, AI ক্রেডিটগুলিতে এর খরচ কী এবং যেখানে কাজটি Claude, ChatGPT বা Cursor-এ সতীর্থদের জন্য Figma ছেড়ে যেতে হবে।

AI এর যুগে, ডিজাইন হল কোড। AI এর সাথে কোডে সরাসরি ডিজাইন করতে, অথবা আপনার Figma ডিজাইনকে কোডে পরিণত করতে, ব্যবহার করুন Anima Playground: একটি স্ক্রীন বর্ণনা করুন বা একটি Figma ডিজাইন থেকে শুরু করুন, তারপরে আপনি প্রিভিউ এবং প্রকাশ করতে পারবেন এমন একটি সম্পাদনাযোগ্য অ্যাপে পুনরাবৃত্তি করতে থাকুন৷

AI এর সাথে কোডে সরাসরি ডিজাইন করুন

AI দিয়ে ডিজাইন করুন: একটি স্ক্রীন বর্ণনা করুন বা Figma ডিজাইনকে কোডে পরিণত করুন।

Config India 2026-এ Figma কী লঞ্চ করেছে?

কোড স্তর এবং Specs শিরোনাম ছিল, কিন্তু তারা তাদের চারপাশে এজেন্ট বৈশিষ্ট্যগুলির একটি সেট নিয়ে এসেছে। এখানে Figma-এর সহায়তা কেন্দ্র থেকে বর্তমান অবস্থা:

উভয় বিটা বেশ কয়েক সপ্তাহ ধরে রোল আউট হয়, তাই আপনি আপনার দলের বাকিদের আগে বা পরে সেগুলি দেখতে পারেন।

Figma কোড স্তর কি?

একটি কোড স্তর হল একটি স্তর যা বাস্তব, চলমান কোড ধারণ করে। ফ্রেম লিঙ্কের সাথে মিথস্ক্রিয়া জাল করে এমন একটি প্রোটোটাইপের পরিবর্তে, আপনি আপনার ডিজাইনের পাশে ক্যানভাসে বসে একটি কার্যকরী, কোড-ব্যাকড প্রোটোটাইপ পাবেন। সতীর্থরা এটির মাধ্যমে ক্লিক করতে পারে, এটিতে মন্তব্য করতে পারে এবং পাশাপাশি একটি ভিন্ন দিক চেষ্টা করার জন্য এটির নকল করতে পারে।

Figma আপনাকে একটি শুরু করার চারটি উপায় দেয়:

• একটি নকশা থেকে। ফ্রেম নির্বাচন করুন এবং Figma এজেন্টকে একটি কোড স্তরে পরিণত করতে বলুন।
• একটি লাইভ ওয়েবসাইট থেকে। Figma Chrome এক্সটেনশন সহ একটি পৃষ্ঠা ক্যাপচার করুন এবং ক্যানভাসে পেস্ট করুন।
• একটি রেপো থেকে। GitHub বা একটি স্থানীয় ফোল্ডার থেকে একটি সমর্থিত, লাইটওয়েট প্রোটোটাইপিং কোডবেস আমদানি করুন। একটি GitHub আমদানি সেই সংগ্রহস্থলের সাথে সংযুক্ত থাকে।
• গোড়া থেকে। একটি খালি কোড লেয়ার যোগ করুন এবং এজেন্টকে তৈরি করার জন্য অনুরোধ করুন।

আপনি Figma MCP সার্ভারের মাধ্যমে ক্যানভাসে কোডিং টুলে তৈরি একটি প্রোটোটাইপও আনতে পারেন।

সম্পাদনা তিনভাবে হয়। আপনি এজেন্টকে প্রম্পট করেন, আপনি একটি পরিবর্তন কোথায় তা দেখানোর জন্য ফ্রেমগুলিকে টীকা দেন বা আপনি কোড এডিটর খুলুন এবং নিজেই কোডটি পরিবর্তন করুন। যখন চাক্ষুষ বিবরণ কোডের চেয়ে বেশি গুরুত্বপূর্ণ, Extract designs একটি কোড লেয়ার থেকে স্ক্রীনকে আবার সম্পাদনাযোগ্য Figma ফ্রেমে পরিণত করে। কোডটি ইঞ্জিনিয়ারদের জন্য প্রস্তুত হলে, আপনি এটিকে একটি শাখায় ঠেলে দিতে পারেন এবং একটি টান অনুরোধ খুলতে পারেন।

Figma Specs কি?

Figma Specs কে “প্রসঙ্গের জন্য একটি স্থানীয় বাড়ি” বলে। বাস্তবে এটি একটি সহযোগী Markdown নথি যা হয় একটি Figma Design ফাইল বা FigJam বোর্ডের ক্যানভাসে বা নিজস্ব Spec ফাইল হিসাবে থাকে৷

শুরু করা দ্রুত:

1. ফাইল ব্রাউজার থেকে একটি স্বতন্ত্র Spec তৈরি করুন, অথবা যান figma.com/spec/new.
2. একটি ডিজাইন ফাইল বা FigJam বোর্ডের ভিতরে, টুলবারে Spec ক্লিক করুন বা টিপুন ডি.
3. ইতিমধ্যে একটি আছে .md ফাইল? এটিকে ক্যানভাসে টেনে আনুন এবং এটি একটি বিশেষত্ব হয়ে যায়।
4. আপনি ইতিমধ্যে জানেন Markdown দিয়ে লিখুন: # শিরোনাম জন্য, - গুলির জন্য, [] কাজের জন্য, > উদ্ধৃতির জন্য, কোডের জন্য তিনটি ব্যাকটিক। টাইপ / ছবির জন্য, Figma এম্বেড এবং ডিভাইডার।

যেটি একটি Markdown ফাইলের চেয়ে একটি বিশেষত্বকে আরও বেশি করে তোলে তা হল পাঠ্যের চারপাশে বসে। আপনি একটি ফ্রেম, একটি FigJam বোর্ড বা ক্যানভাস থেকে যেকোনো নোড এম্বেড করতে পারেন, তাই প্রয়োজনীয়তা এবং নকশা একে অপরের পাশে থাকবে। সতীর্থরা এটিতে মন্তব্য করে এবং Figma এজেন্ট সেই মন্তব্যগুলি পড়তে এবং উত্তর দিতে পারে৷

Specs Figma এর বাইরেও কাজ করে। Figma MCP সার্ভারের সাথে সংযুক্ত কোডিং এজেন্টরা ব্যবহার করে চশমা পড়তে, তৈরি এবং আপডেট করতে পারে figma-spec দক্ষতা একটি বন্ধ করার জন্য, আপনি আপনার কোডিং এজেন্টের প্রম্পটে নির্দিষ্ট লিঙ্কটি অনুলিপি করুন এবং লিঙ্কযুক্ত ফ্রেম, ডায়াগ্রাম, কোড স্তর এবং Code Connect স্নিপেটগুলি এটির সাথে আসে।

কেন Markdown হ্যান্ড-অফ ফর্ম্যাটে পরিণত হয়েছে৷

Figma-এর নিজস্ব লঞ্চ পোস্ট স্পষ্টভাবে বলে: Markdown এখন এজেন্টদের সাথে প্রসঙ্গ শেয়ার করার জন্য ডি ফ্যাক্টো ফর্ম্যাট। প্রতিটি কোডিং এজেন্ট এটি পড়ে। বেশিরভাগ পণ্য দল ইতিমধ্যেই পরিকল্পনা, পিআরডি এবং এজেন্ট নির্দেশাবলী রাখে .md ফাইল

আমার পড়া হল যে Specs হল Figma স্বীকার করে যে একটি এজেন্টের কাছে হ্যান্ড-অফ হল পাঠ্য, তারপর সেই পাঠ্যটিকে মাল্টিপ্লেয়ার করে। একজন স্থানীয় AGENTS.md অথবা PRD ফরম্যাটের কারণে কখনই ব্যর্থ হয়নি। এটি ব্যর্থ হয়েছে কারণ শুধুমাত্র একজন ব্যক্তি এটি সম্পাদনা করেছেন, এটি ডিজাইন থেকে দূরে সরে গেছে এবং এজেন্ট কোন সংস্করণটি ব্যবহার করেছে তা কেউ দেখতে পারেনি।

Figma এর ভিতরে, Specs এটি ঠিক করে। খোলা প্রশ্ন হল এর বাইরে কী ঘটে। এম্বেড, মন্তব্য এবং লাইভ ডিজাইন রেফারেন্স হল Figma বৈশিষ্ট্য, এবং এজেন্টরা Figma MCP ক্যাটালগে তালিকাভুক্ত ক্লায়েন্টদের মাধ্যমে তাদের কাছে পৌঁছায়। যদি আপনার প্রকৌশলী, আপনার PM-এর ChatGPT এবং আপনার বিপণন দলের Claude সকলের একই পরিকল্পনার প্রয়োজন হয়, তাহলেও শেয়ার করা কপি কোথায় থাকে তা আপনাকে সিদ্ধান্ত নিতে হবে।

একটি ব্যবহারিক কর্মপ্রবাহ: অনুরোধ টানতে PRD থেকে কোড স্তর পর্যন্ত

আজকে Figma ডকুমেন্টগুলি ব্যবহার করে একটি বাস্তব বৈশিষ্ট্যে কীভাবে দুটি বৈশিষ্ট্য একসাথে ফিট করে তা এখানে দেখানো হয়েছে৷

1. আপনার PRD ক্যানভাসে টেনে আনুন। আপনার বিদ্যমান .md ফাইল একটি স্পেক হয়ে যায়। কিছুই পুনর্লিখন করা হয় না, এবং হাতে সম্পাদনা করা কোন AI ক্রেডিট ব্যবহার করে না।
2. এটি যে ফ্রেমগুলি সম্পর্কে কথা বলে তা এম্বেড করুন৷ ব্যবহার করুন / PRD বর্ণনা করে প্রবাহ যোগ করতে। পর্যালোচকরা এখন প্রয়োজনীয়তা এবং স্ক্রিন একসাথে দেখেন।
3. কী ফ্রেমগুলিকে একটি কোড স্তরে পরিণত করুন। তাদের নির্বাচন করুন এবং এজেন্টকে অনুরোধ করুন। যদি আপনার কাছে ইতিমধ্যেই একটি প্রোটোটাইপ রেপো থাকে, তবে পরিবর্তে এটি GitHub থেকে আমদানি করুন।
4. এক জায়গায় পর্যালোচনা. স্পেক এবং কোড লেয়ারে মন্তব্য সংগ্রহ করুন। Figma এজেন্টকে একটি প্রস্তাবিত সংশোধন সহ প্রতিটি খোলা মন্তব্যের উত্তর দিতে বলুন যখন লোকেরা একই থ্রেডগুলিতে ওজন করে।
5. বৈশিষ্ট বন্ধ হাত. Codex, Claude Code বা Figma MCP সার্ভারের সাথে সংযুক্ত Cursor-এ স্পেক লিঙ্ক পেস্ট করুন। এজেন্ট Markdown এবং লিঙ্কযুক্ত ডিজাইনের প্রসঙ্গ পায়।
6. প্রোটোটাইপ কোড পাঠান। কোড লেয়ারের পরিবর্তনগুলিকে একটি শাখায় পুশ করুন এবং একটি পুল অনুরোধ খুলুন যাতে ইঞ্জিনিয়াররা মার্জ করার আগে পর্যালোচনা করে।

আউটপুট হল একটি স্পেস যা আপনার কোডিং এজেন্ট পড়তে পারে এবং একটি কার্যকরী প্রোটোটাইপ যা আপনার দল আসলে ক্লিক করেছে। অন্য কোন কোডের মত জেনারেট করা কোড পরীক্ষা করুন। একটি প্রোটোটাইপ যা চলে তা উৎপাদন-প্রস্তুত কোডের মতো নয়।

যদি পরবর্তী ধাপে একটি Figma ডিজাইনকে কোডে পরিণত করা হয় তাহলে আপনি চালাতে পারেন, অথবা প্রম্পট থেকে কোডে ডিজাইন করতে পারেন, সেটা হল Anima Playground এর কাজ।

কোড স্তর এবং Specs খরচ কি?

• কোড লেয়ার এআই ক্রেডিট ব্যবহার করে। পেইড প্ল্যানে, 4 নভেম্বর, 2026 পর্যন্ত একটি কোড লেয়ারের ভিতরে তৈরি করা এবং সম্পাদনা করা বিনামূল্যে। একই প্রম্পটে অন্যান্য এজেন্ট কাজ এখনও ক্রেডিট ব্যবহার করে এবং 4 নভেম্বরের পরে সমস্ত কোড লেয়ার কাজ ক্রেডিট ব্যবহার করে।
• Specs লেখার জন্য বিনামূল্যে। টাইপ করা এবং একটি নির্দিষ্টকরণ সম্পাদনা করা ক্রেডিট ব্যবহার করে না। একটি বৈশিষ্ট্য সঙ্গে এজেন্ট ব্যবহার করে. প্রতিটি প্রম্পটের পরে রসিদটি ঘোরান যাতে এটির দাম কত হয়।
• Payload এবং নির্দেশিকা খরচ যোগ করে। Figma নোট করে যে উভয়ই এজেন্টকে আরও প্রসঙ্গ এবং আরও কাজ দেয়, তাই একই প্রম্পট আরও ক্রেডিট ব্যবহার করতে পারে।

আপনি তাদের চারপাশে পরিকল্পনা করার আগে পরীক্ষা করার সীমাবদ্ধতা

• রোলআউট উভয় বৈশিষ্ট্যই ওপেন বিটাস সপ্তাহ ধরে রোল আউট। Figma Design টুলবারে কোড আইকন এবং ফাইল ব্রাউজারে Spec বিকল্পটি দেখুন।
• পরিকল্পনা। Specs একটি প্রদত্ত পরিকল্পনা প্রয়োজন৷ স্টার্টার ব্যবহারকারীরা কোড স্তরগুলি পান কিন্তু Specs নয়৷ উভয় তৈরি করতে সম্পাদনা অ্যাক্সেস প্রয়োজন.
• অপ্ট আউট শুধুমাত্র এন্টারপ্রাইজ প্রশাসকরা কোড স্তরগুলি বন্ধ করতে পারেন, এবং শুধুমাত্র সমস্ত Figma AI বৈশিষ্ট্যগুলি বন্ধ করে৷
• রেপো সাইজ। GitHub আমদানি লাইটওয়েট প্রোটোটাইপিং কোডবেসের জন্য, সম্পূর্ণ প্রোডাকশন অ্যাপ নয়।
• ডিজাইন সিস্টেম কোড। কোড উত্সগুলির মাধ্যমে আপনার আসল উপাদান কোড সংযোগ করা এখনও একটি বন্ধ বিটা, তাই কোড স্তরগুলি এখনও আপনার উত্পাদন উপাদানগুলি ব্যবহার নাও করতে পারে৷

যেখানে Figma থামবে এবং যেখানে Anima এবং AgentGrid.io ফিট হবে

যদি আপনার পুরো দল Figma-এ কাজ করে, কোড স্তর এবং Specs একটি শক্তিশালী ডিফল্ট। প্রোটোটাইপ, পরিকল্পনা এবং মন্তব্যগুলি একই ফাইলে বসে এবং Figma এর এজেন্ট এবং MCP ক্লায়েন্টরা তাদের উপর কাজ করতে পারে৷

দুটি সাধারণ পরিস্থিতি এখনও সেই ফাইলের বাইরে পড়ে।

ভাবনা শুরু হয় অন্য কোথাও। একটি Claude Design প্রোটোটাইপ, একটি ChatGPT-জেনারেটেড HTML পৃষ্ঠা, অথবা একটি লাইভ সাইট যা থেকে আপনি শিখতে চান৷ Figma এর MCP সার্ভারে এখন একটি আছে html_to_figma এজেন্ট-জেনারেটেড HTML-এর জন্য টুল। Anima-এর Buddy, Figma-এর ভিতরে আমাদের AI ডিজাইন এজেন্টও ঘুরে HTML, Claude artifacts, images and URLs in editable Figma লেয়ার, যখন আপনি আপনার ডিজাইন সিস্টেমের সাথে সেই স্তরগুলিতে ডিজাইন করতে চান তখন এটি কার্যকর।

ফলাফল Figma ছেড়ে যেতে হবে। আপনার বৈশিষ্ট্য বা প্রোটোটাইপ আপনার Figma দলের বাইরের লোকেদের দ্বারা পর্যালোচনা করা উচিত, বেশ কয়েকটি বিক্রেতার এজেন্ট দ্বারা সম্পাদিত, বা একটি লাইভ লিঙ্ক হিসাবে প্রকাশিত৷ এটি হল AgentGrid.io, Anima দ্বারা নির্মিত কাজ। Markdown আর্টিফ্যাক্ট AgentGrid.io একটি লাইভ, স্বয়ংক্রিয়ভাবে সংরক্ষণ করা নথি যা লোকেরা এবং সংযুক্ত এজেন্ট যেমন Claude, ChatGPT, Cursor এবং Grok Bot সম্পাদনা করতে পারে, প্রতিটি পরিবর্তন সংস্করণ ইতিহাসে নামের দ্বারা দায়ী করা হয়েছে৷ একটি HTML আর্টিফ্যাক্ট হল একটি চলমান পৃষ্ঠা যেখানে আপনি মন্তব্য করতে পারেন এবং এটি অনুমোদিত হলে একটি সর্বজনীন URL-এ প্রকাশ করতে পারেন৷ আপনি একটি অ্যাপ আর্টিফ্যাক্ট হিসাবে AgentGrid.io-এ একটি Figma ফ্রেম আমদানি করতে পারেন৷ সেই আমদানি একমুখী, তাই পরে Figma সম্পাদনাগুলি সিঙ্ক হয় না৷

দুটি একই পদক্ষেপের জন্য প্রতিদ্বন্দ্বিতা করছে না। Figma ডিজাইন ক্যানভাসের মালিক। AgentGrid.io যেখানে Markdown এবং HTML আর্টিফ্যাক্টগুলি চলে যায় যখন কাজটি টুল এবং দলকে অতিক্রম করে।

AgentGrid.io চেষ্টা করুন আপনার দলের প্রতিটি এজেন্ট সম্পাদনা এবং প্রকাশ করতে পারে এমন একটি বিশেষ বা প্রোটোটাইপ রাখতে।

যখন প্রতিটি টুল ব্যবহার করুন

• Figma কোড স্তর ব্যবহার করুন যখন স্টেকহোল্ডারদের ডিজাইনের পাশে একটি কার্যকরী প্রোটোটাইপে ক্লিক করতে হবে এবং পাশাপাশি দিকনির্দেশ তুলনা করতে হবে।
• Figma Specs ব্যবহার করুন যখন প্ল্যানটি ফ্রেমের পাশে থাকা উচিত এবং Figma MCP সার্ভারের মাধ্যমে কোডিং এজেন্ট দ্বারা পড়া উচিত।
• ব্যবহার করুন Anima Playground আপনি যখন সরাসরি এআই-এর সাথে কোডে ডিজাইন করতে চান বা একটি Figma ডিজাইনকে সম্পাদনাযোগ্য অ্যাপে পরিণত করতে চান তখন আপনি প্রিভিউ ও প্রকাশ করতে পারেন।
• ব্যবহার করুন Buddy যখন শুরুর বিন্দু Figma এর বাইরে থাকে এবং আপনি ক্যানভাসে সম্পাদনাযোগ্য স্তর চান। একটি ব্রাউজার নির্মাতা বনাম Figma-এ বিল্ডিংয়ের সম্পূর্ণ তুলনার জন্য, দেখুন Figma Make বনাম Anima Playground.
• AgentGrid.io ব্যবহার করুন যখন স্পেক বা প্রোটোটাইপটি টুল জুড়ে মানুষ এবং এজেন্টদের দ্বারা সম্পাদনা করতে হবে, মন্তব্য সহ পর্যালোচনা করতে হবে এবং একটি লাইভ লিঙ্ক হিসাবে প্রকাশ করতে হবে।

প্রায়শই জিজ্ঞাসিত প্রশ্ন

Figma-এ কোড স্তরগুলি কী কী?

একটি কোড স্তর হল Figma ক্যানভাসের একটি স্তর যা বাস্তব, চলমান কোড ধারণ করে। আপনি নির্বাচিত ফ্রেম থেকে একটি তৈরি করতে পারেন, Figma Chrome এক্সটেনশনের সাথে ক্যাপচার করা একটি লাইভ ওয়েবসাইট, একটি GitHub প্রোটোটাইপিং রেপো, বা একটি ফাঁকা প্রম্পট, তারপরে এটিতে ক্লিক করুন, এটিতে মন্তব্য করুন এবং দিকনির্দেশের তুলনা করতে এটির নকল করুন৷

Figma Specs কি শুধু Markdown?

Specs তার পাঠ্যের জন্য Markdown ব্যবহার করে, এবং আপনি একটি তৈরি করতে ক্যানভাসে যেকোনো .md ফাইল টেনে আনতে পারেন। এটি সেই পাঠ্যের চারপাশে Figma বৈশিষ্ট্যগুলি যোগ করে: এমবেডেড ফ্রেম এবং FigJam বোর্ড, মন্তব্য, এবং একটি এজেন্ট যে সেই মন্তব্যগুলি পড়তে এবং উত্তর দিতে পারে৷

Figma কোড স্তরের কি AI ক্রেডিট খরচ হয়?

হ্যাঁ। পেইড প্ল্যানে, 4 নভেম্বর, 2026 পর্যন্ত একটি কোড লেয়ারের ভিতরে তৈরি এবং সম্পাদনা বিনামূল্যে। একই প্রম্পটে অন্যান্য এজেন্ট কাজ এখনও ক্রেডিট ব্যবহার করে এবং 4 নভেম্বরের পরে সমস্ত কোড লেয়ার কাজ AI ক্রেডিট ব্যবহার করে।

Claude Code, Codex বা Cursor কি Figma Spec পড়তে পারে?

হ্যাঁ, যদি তারা Figma MCP সার্ভারের সাথে সংযুক্ত থাকে। কোডিং এজেন্টরা figma-spec দক্ষতার সাথে চশমা পড়তে, তৈরি করতে এবং আপডেট করতে পারে এবং আপনি তার লিঙ্কযুক্ত ডিজাইনের প্রসঙ্গটি পাস করার জন্য আপনার প্রম্পটে একটি বিশেষ লিঙ্ক পেস্ট করতে পারেন।

কোন Figma পরিকল্পনা Specs অন্তর্ভুক্ত?

Specs পেড প্ল্যানে খোলা বিটাতে রয়েছে: পেশাদার, সংস্থা, এন্টারপ্রাইজ এবং শিক্ষা, প্লাস সরকার প্রতি Figma-এর Config India নিবন্ধ। এটি বিনামূল্যের স্টার্টার প্ল্যানে নেই। স্টার্টার সহ সমস্ত প্ল্যানে কোড স্তরগুলি রোল আউট হচ্ছে৷