لایه‌های کد Figma و Specs: چه هستند، چگونه کار می‌کنند و کجا متوقف می‌شوند2 min read

لایه های کد Figma کدهای در حال اجرا را روی بوم قرار می دهند و Figma Specs نیز Markdown را در آنجا قرار می دهد. هر دو در 15 اکتبر 2026 در Config India وارد بتای باز شدند، بنابراین یک فایل طراحی اکنون می‌تواند فریم‌ها، نمونه اولیه کار و طرح نوشته‌شده‌ای را که یک نماینده از آن می‌سازد در خود جای دهد.

این راهنما برای طراحان، PM ها و مهندسان جلویی است که تصمیم می گیرند نمونه اولیه و کار مشخصات را به Figma منتقل کنند. این شامل این است که هر ویژگی چه کاری انجام می دهد، نحوه شروع، هزینه آن در اعتبارات هوش مصنوعی، و جایی که کار باید Figma برای هم تیمی های Claude، ChatGPT یا Cursor باقی بماند.

در عصر هوش مصنوعی، طراحی کد است. برای طراحی مستقیم در کد با هوش مصنوعی یا تبدیل طرح های Figma خود به کد، از Anima Playground: یک صفحه را توصیف کنید یا از یک طرح Figma شروع کنید، سپس به تکرار روی یک برنامه قابل ویرایش که می توانید پیش نمایش و منتشر کنید ادامه دهید.

طراحی مستقیم در کد با هوش مصنوعی

طراحی با هوش مصنوعی: یک صفحه نمایش را توصیف کنید یا طرح های Figma را به کد تبدیل کنید.

Figma چه چیزی را در Config India 2026 راه اندازی کرد؟

لایه های کد و 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. در داخل یک فایل Design یا برد FigJam، روی Spec در نوار ابزار کلیک کنید یا فشار دهید D.
3. در حال حاضر یک .md فایل؟ آن را روی بوم بکشید و به یک مشخصات تبدیل می شود.
4. با Markdown که قبلاً می شناسید بنویسید: # برای سرفصل ها - برای گلوله، [] برای کارها، > برای نقل قول، سه بکتیک برای کد. تایپ کنید / برای تصاویر، Figma جاسازی ها و تقسیم کننده ها.

چیزی که یک مشخصات را بیشتر از یک فایل Markdown می کند، چیزی است که در اطراف متن قرار می گیرد. می‌توانید یک قاب، یک برد FigJam یا هر گره‌ای را از بوم جاسازی کنید، بنابراین نیاز و طرحی که توضیح می‌دهد در کنار یکدیگر باقی می‌مانند. هم تیمی ها در مورد آن نظر می دهند و نماینده Figma می تواند آن نظرات را بخواند و به آنها پاسخ دهد.

Specs خارج از Figma نیز کار می کند. عوامل برنامه نویسی متصل به سرور Figma MCP می توانند مشخصات را بخوانند، ایجاد کنند و با استفاده از figma-spec مهارت برای تحویل دادن، پیوند مشخصات را در اعلان عامل برنامه نویسی خود کپی می کنید و فریم ها، نمودارها، لایه های کد و تکه های Code Connect مرتبط با آن ارائه می شود.

چرا Markdown به فرمت دستی تبدیل شد

پست راه‌اندازی خود Figma به صراحت می‌گوید: Markdown اکنون فرمت واقعی برای اشتراک‌گذاری متن با عوامل است. هر عامل کدنویسی آن را می خواند. اکثر تیم های محصول در حال حاضر برنامه ها، PRD ها و دستورالعمل های عامل را در خود نگه می دارند .md فایل ها

خوانده‌ام این است که Specs Figma است که می‌پذیرد انتقال به یک نماینده متن است، سپس آن متن را چند نفره می‌کند. یک محلی AGENTS.md یا PRD هرگز به دلیل فرمت شکست نخورد. شکست خورد زیرا فقط یک نفر آن را ویرایش کرد، از طرح ها دور شد و هیچ کس نمی توانست ببیند عامل از کدام نسخه استفاده می کند.

در داخل Figma، Specs آن را برطرف می کند. سوال باز این است که خارج از آن چه اتفاقی می افتد. جاسازی‌ها، نظرات و مراجع طراحی زنده ویژگی‌های Figma هستند و نمایندگان از طریق مشتریان فهرست‌شده در کاتالوگ Figma MCP به آنها دسترسی پیدا می‌کنند. اگر مهندسان شما، ChatGPT PM شما و کلود تیم بازاریابی شما همگی به یک طرح نیاز دارند، هنوز باید تصمیم بگیرید که نسخه مشترک کجا زندگی می کند.

یک گردش کار عملی: از PRD تا لایه کد برای کشیدن درخواست

در اینجا نحوه تطبیق این دو ویژگی در یک ویژگی واقعی با هم، تنها با استفاده از آنچه امروز Figma وجود دارد، آمده است.

1. PRD خود را روی بوم بکشید. موجود شما .md فایل به مشخصات تبدیل می شود. هیچ چیز بازنویسی نمی شود و ویرایش آن با دست از اعتبار هوش مصنوعی استفاده نمی کند.
2. فریم هایی را که در مورد آن صحبت می کند جاسازی کنید. استفاده کنید / برای اضافه کردن جریان هایی که PRD توصیف می کند. بررسی‌کنندگان اکنون نیاز و صفحه را با هم می‌بینند.
3. فریم های کلیدی را به یک لایه کد تبدیل کنید. آنها را انتخاب کنید و از عامل درخواست کنید. اگر قبلاً یک مخزن نمونه اولیه دارید، به جای آن آن را از GitHub وارد کنید.
4. در یک مکان بررسی کنید. نظرات را در مورد مشخصات و لایه کد جمع آوری کنید. از نماینده Figma بخواهید به هر نظر باز با یک راه حل پیشنهادی پاسخ دهد، در حالی که افراد در موضوعات مشابه بحث می کنند.
5. دست از مشخصات پیوند مشخصات را در Codex، Claude Code یا Cursor متصل به سرور Figma MCP قرار دهید. عامل Markdown به علاوه زمینه طراحی مرتبط را دریافت می کند.
6. کد نمونه اولیه را ارسال کنید. تغییرات لایه کد را به یک شاخه فشار دهید و یک درخواست کشش باز کنید تا مهندسان قبل از ادغام بررسی کنند.

خروجی، مشخصاتی است که عامل برنامه نویسی شما می تواند بخواند و نمونه اولیه کار تیم شما در واقع روی آن کلیک کرده است. کد تولید شده را مانند هر کد دیگری تست کنید. نمونه اولیه ای که اجرا می شود با کد آماده تولید یکسان نیست.

اگر گام بعدی تبدیل طرح Figma به کد است، می‌توانید اجرا کنید، یا از طریق یک دستور کد را طراحی کنید، این کار Anima Playground است.

هزینه لایه های کد و Specs چقدر است؟

• لایه های کد از اعتبارات هوش مصنوعی استفاده می کنند. در طرح‌های پولی، تولید و ویرایش درون لایه کد تا 4 نوامبر 2026 رایگان است. سایر کارهای نماینده در همان درخواست همچنان از اعتبار استفاده می‌کنند و پس از 4 نوامبر، همه وظایف لایه کد از اعتبار استفاده می‌کنند.
• Specs برای نوشتن آزاد است. تایپ و ویرایش مشخصات خودتان از اعتبار استفاده نمی کند. استفاده از عامل با مشخصات انجام می دهد. رسید را بعد از هر درخواست نگه دارید تا ببینید هزینه آن چقدر است.
• Payload و دستورالعمل ها هزینه را اضافه می کنند. Figma اشاره می‌کند که هر دو زمینه و کار بیشتری را به عامل می‌دهند، بنابراین همان درخواست می‌تواند از اعتبارات بیشتری استفاده کند.

محدودیت هایی که باید قبل از برنامه ریزی در مورد آنها بررسی کنید

• عرضه. هر دو ویژگی نسخه بتای باز هستند که طی هفته‌ها عرضه می‌شوند. به دنبال نماد کد در نوار ابزار Figma Design و گزینه Spec در مرورگر فایل بگردید.
• طرح ها. Specs به یک طرح پولی نیاز دارد. کاربران شروع کننده لایه های کد را دریافت می کنند اما Specs را دریافت نمی کنند. هر دو برای ایجاد نیاز به دسترسی ویرایش دارند.
• انصراف دادن. فقط ادمین های Enterprise می توانند لایه های کد را خاموش کنند و تنها با خاموش کردن همه ویژگی های Figma AI.
• اندازه مخزن. واردات GitHub برای پایه های کد نمونه سازی سبک وزن است، نه یک برنامه تولید کامل.
• طراحی کد سیستم اتصال کد مؤلفه واقعی شما از طریق منابع کد هنوز یک نسخه آزمایشی بسته است، بنابراین ممکن است لایه‌های کد هنوز از مؤلفه‌های تولید شما استفاده نکنند.

جایی که Figma متوقف می شود و Anima و AgentGrid.io در کجا قرار می گیرند

اگر کل تیم شما در Figma کار می کند، لایه های کد و Specs یک پیش فرض قوی هستند. نمونه اولیه، طرح و نظرات در یک فایل قرار دارند و نماینده Figma و مشتریان MCP می توانند روی آنها کار کنند.

دو موقعیت رایج هنوز خارج از آن فایل هستند.

این ایده از جای دیگری شروع شد. یک نمونه اولیه Claude Design، یک صفحه HTML ایجاد شده توسط ChatGPT، یا یک سایت زنده که می خواهید از آن یاد بگیرید. سرور MCP Figma اکنون دارای یک html_to_figma ابزاری برای HTML تولید شده توسط عامل. Anima Buddy، عامل طراحی هوش مصنوعی ما در داخل Figma، نیز تبدیل می شود HTML، مصنوعات، تصاویر و URL های کلود را در لایه های Figma قابل ویرایش قرار دهید، که زمانی مفید است که می خواهید با سیستم طراحی خود به طراحی روی آن لایه ها ادامه دهید.

نتیجه باید از Figma خارج شود. مشخصات یا نمونه اولیه شما باید توسط افرادی خارج از تیم Figma شما بررسی شود، توسط نمایندگان چندین فروشنده ویرایش شود یا به عنوان یک پیوند زنده منتشر شود. این کاری است که AgentGrid.io ساخته شده توسط Anima انجام می دهد. مصنوع Markdown در AgentGrid.io یک سند زنده و ذخیره خودکار است که افراد و عوامل مرتبط مانند Claude، ChatGPT، Cursor و Grok Bot می‌توانند آن را ویرایش کنند و هر تغییر با نام در تاریخچه نسخه نسبت داده شود. مصنوع HTML صفحه‌ای در حال اجرا است که می‌توانید روی آن نظر بدهید و پس از تأیید آن را در یک URL عمومی منتشر کنید. همچنین می توانید یک فریم Figma را به عنوان مصنوع برنامه به AgentGrid.io وارد کنید. این واردات یک طرفه است، بنابراین ویرایش های بعدی 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 اعتبار هوش مصنوعی هزینه دارند؟

بله. در طرح‌های پولی، تولید و ویرایش در داخل لایه کد تا ۴ نوامبر ۲۰۲۶ رایگان است. سایر کارگزاران در همان درخواست همچنان از اعتبار استفاده می‌کنند و پس از ۴ نوامبر، همه وظایف لایه کد از اعتبارات هوش مصنوعی استفاده می‌کنند.

آیا Claude Code، Codex یا Cursor می توانند Figma Spec را بخوانند؟

بله، اگر به سرور Figma MCP متصل باشند. عوامل برنامه نویسی می توانند مشخصات را با مهارت figma-spec بخوانند، ایجاد و به روز کنند، و شما می توانید یک پیوند مشخصات را در اعلان خود بچسبانید تا در زمینه طراحی مرتبط آن منتقل شود.

کدام برنامه های Figma شامل Specs می شود؟

Specs در نسخه بتای باز در طرح‌های پولی است: حرفه‌ای، سازمانی، سازمانی و آموزشی، به‌علاوه دولت در مقاله Figma Config India. این در طرح شروع رایگان نیست. لایه‌های کد در همه برنامه‌ها، از جمله Starter، در حال پخش شدن هستند.