تحول بزرگ Figma؛ ادغام AI، Code و Motion؛ عصر جدید طراحی سیستم‌محور و Full-Stack

مقدمه
فیگما در کنفرانس امسال چیزی بیشتر از یک بسته آپدیت معمولی رو نشون داد؛ حرف اصلی این بود که بوم طراحی نباید فقط جایی برای چیدن مستطیل و متن باشه باید به محیطی تبدیل بشه که طراح، تیم توسعه و عامل‌های هوش‌مصنوعی (AI Agents) سر یک میز بنشینن و روی یک چیز کار کنن.

هدف اعلام‌شده هم روشن بود؛ کارهای تکراری و فرساینده از دوش طراح برداشته بشه تا وقت بیشتری برای فکر کردن به ایده بمونه. سه ستون این تغییر عبارتند از Code Layers Motion و Shaders

بخش اول : ابزارهای تازه برای بیان ایده
۱.۱ (Code Layers)
تا امروز، فاصله‌ی بین «طرح» و «محصول واقعی» جایی بود که خیلی از ایده‌ها آب می‌رفتن. Code Layers دقیقاً همین شکاف رو نشونه گرفته؛ یعنی چی ؟

یعنی کد رو می‌تونید مستقیم روی بوم فیگما بنویسید و ویرایش کنید.
مخزن کد پروژه (Repository) قابل کپی شدن داخل فیگماست، یعنی طرح شما از همون ابتدا با کد واقعی سر و کار داره.
Agent فیگما می‌تونه از دل کد، جریان‌های کاری (Flows) رو بیرون بکشه و به لایه‌های طراحی قابل ویرایش تبدیل کنه.
و مهم‌تر از اون اینکه تغییراتی که در طراحی می‌دید، به‌صورت خودکار به محیط کد برمی‌گرده. رفت‌وبرگشت دستی حذف می‌شه.

۱.۲ Motion؛ چیزی بیشتر از یک انیمیشن ساده
انیمیشن در فیگما دیگه به معنی «یه فید کوچیک برای پرزنتیشن» نیست:

انیمیشن و Transitionsها و حتی تبدیل‌های 3D رو مستقیم داخل فیگما می‌سازین.
اگر حوصله‌ی کار دستی ندارید، فقط به چت‌بات فیگما توضیح بدید چی می‌خواید؛ انیمیشن ساخته می‌شه !
نکته‌ی کلیدی برای تیم‌ها اینه که انیمیشن‌ها از نظر کد پشتیبانی می‌شن و آماده‌تحویل به توسعه‌دهنده هستن؛ یعنی دیگه لازم نیست حرکت رو با دست و اشاره برای برنامه‌نویس توضیح بدید.

۱.۳ Shaders؛ افکت‌هایی که تا دیروز جایشان فیگما نبود
فیگما با تکیه بر WebGPU سراغ افکت‌های گرافیکی سنگین رفته؛ساخت Fill و افکت‌های Shader با یک دستور متنی هدف از انجام این کار بود.
افکت‌هایی که قبلاً مجبور بودید بیرون از فیگما درست کنید و به‌شکل تصویر وارد کنید؛ یعنی می‌تونین افکت هایی مثل Dither، Pixelate و انواع مختلف Blur رو بسازین
۱.۴ جریان‌های کاری Figma Weave
بیش از ۲۰ ابزار یکپارچه‌ Weave معرفی شدن؛ ایده‌اش ساده‌ست، جریان‌های پیچیده‌هوش مصنوعی رو به ابزارهایی تبدیل کنه که روی بوم، فقط یک کلیک فاصله دارن.

بخش دوم — ابزارهای هوشمند برای تیم‌ها و Agentها
۲.۱ مهارت‌های Agent و درک بهتر پروژه
تبدیل وظیفه به مهارت؛ کاری که هر هفته تکرارش می‌کنید رو یک بار به Agent یاد بدید و به «مهارت آماده» تبدیلش کنید. بعد کل تیم از همون استفاده می‌کنه که یعنی خروجی یکدست‌تر و خطای کمتر، از طرفی امکان جدید کانتکست دادن هم اضافه شده یعنی می‌تونید Agent رو به منابع خارجی وصل کنید، اجازه‌ی جستجوی وب بدید یا فایل پیوست کنید. هرچی کانتکست بیشتری بگیره، جواب‌هایش کمتر عمومی و بیشتر به پروژه‌ شما مربوط می‌شه.

۲.۲ پلاگین‌های مولد (Generative Plugins)
طراح‌ها بدون یک خط کد نوشتن می‌تونن با کمک Agent پلاگین سفارشی و قابل استفاده‌ی مجدد بسازن. نه محیط توسعه‌ای لازمه، نه دانش برنامه‌نویسی؛ یک Prompt می‌نویسید و یک ابزار کاربردی تحویل می‌گیرید.

بخش سوم — جمع‌بندی و آینده‌ی طراحی
با Code Layers و Motion، اون خط قدیمی بین طراحی و توسعه عملاً محو شده. طرح دیگه یک تصویر نیست که کسی باید ازش کد دربیاره؛ خودش بخشی از فرآیند ساخته.

درباره‌ی نقش هوش مصنوعی هم بهتره توهم نداشته باشیم و بی‌جهت هم نترسیم؛Figma Agent قرار نیست جای خلاقیت شما بنشینه. قراره کار سنگین و تکراری مثل تنظیم دستی Keyframeها، ساخت پلاگین، استخراج فلوها رو برداره تا تمرکز طراح برگرده سر چیزی که واقعاً مهمه؛ هنر و منطق طراحی !

گام بعدی چیه؟ حرکت به سمت طراحی‌هایی که از همون لحظه‌ی تولد با کد، سیستم طراحی و منطق حرکت سازگارن نه چیزی که بعداً باید وصله‌پینه بشه.

پیشنهاد مطالعه

سرور MCP فیگما چیست و چگونه فاصله‌ی طراح و توسعه‌دهنده را پر می‌کند؟

سرور MCP فیگما با اتصال مستقیم ساختار طراحی به ابزارهای هوش مصنوعی، حلقه‌ی اتصال بین طراح و توسعه‌دهنده را پر کرده و کیفیت کدنویسی را ارتقا می‌دهد. با وجود مزایای قابل‌توجه، محدودیت‌های فنی و چالش‌ها…