AI AI Design Design Vibe Coding

چگونه از Claude Design به Figma برویم1 min read

Reading Time: 4 minutesClaude Design روشی جدید برای طراحی با هوش مصنوعی توسط Anthropic است. نماینده Anima Figma به طراحان حرفه ای اجازه می دهد تا از Claude Design به Figma بروند و به کار روی Canvas ادامه دهند.

From Claude Design to Figma

چگونه از Claude Design به Figma برویم1 min read

Reading Time: 4 minutes

چگونه از Claude Design به Figma برویم:

  1. در Claude Design: اشتراک گذاری → صادرات به صورت مستقل HTML
  2. فایل را دانلود کنید
  3. فایل را در آن رها کنید Anima Figma design agent
  4. عامل طرح را به صورت لایه های Figma ارائه می کند

Claude Design چیست؟

Claude Design محصول جدید طراحی مبتنی بر هوش مصنوعی Anthropic است که در آوریل 2026 در کنار Claude Opus 4.7 به عنوان پیش نمایش تحقیقاتی برای مشترکین Pro، Max، Team و Enterprise عرضه شد. یک درخواست به زبان طبیعی را به یک مصنوع صیقلی مانند یک نمونه اولیه، یک عرشه اسلاید، یک صفحه صفحه یا یک مدل بازاریابی تبدیل می‌کند و سپس به شما امکان می‌دهد آن را از طریق مکالمه، ویرایش‌های مستقیم، نظرات یا لغزنده‌های سفارشی که کلود در جریان ایجاد می‌کند تا متغیرهای خاصی را که می‌خواهید تغییر دهید، اصلاح کنید.

در حین نصب، می‌تواند پایگاه کد و فایل‌های طراحی شما را بخواند تا یک سیستم طراحی بسازد، بنابراین هر پروژه بعدی به جای مکان‌نماهای عمومی، به رنگ‌ها، تایپوگرافی و اجزای واقعی شما می‌پردازد. هدف اصلی آن افرادی است که از لحاظ تاریخی در مرحله “من یک ایده دارم، اکنون به یک طراح نیاز دارم” گیر کرده اند: بنیانگذاران، مدیران ارشد، بازاریابان و مهندسانی که می خواهند در یک جلسه از مفهوم به چیزی بصری حرکت کنند.

چیزی که حداقل امروز انجام نمی‌دهد این است که به Figma عمل می‌کند، و نه Canva تعاملی ارائه می‌کند. صادرات به PDF، PPTX، HTML، یا Canva می‌رود و انتقال آماده برای ساخت به Claude Code می‌رود. این شکاف دقیقاً همان جایی است که Anima در این کیس جای می گیرد.

چرا باید از Claude Design به Figma بروید؟

Claude Design در نسل بسیار عالی است، اما کار طراحی حرفه ای به اولین ماکت جلا ختم نمی شود. از آنجا شروع می شود. لحظه ای که یک طرح باید در برابر یک سیستم طراحی واقعی اصلاح شود، برای نقد به یک هم تیمی تحویل داده شود، نسخه های مختلف آن را کنترل کند، به نقاط شکست پاسخگو منشعب شود، یا در فایل محصول موجود قرار گیرد، شما یک Canvas می خواهید.

Figma جایی است که سیستم‌های طراحی واقعاً زندگی می‌کنند، جایی که ذینفعان نظرات خود را می‌گذارند، اجزا و متغیرها در آن نگهداری می‌شوند و بقیه اعضای تیم شما در حال کار هستند. محصور ماندن در یک حلقه فقط صادراتی (PDF، HTML، Canva) به این معنی است که هر تکرار به جای یک ویرایش کنترل‌شده، یک نسل جدید است و هر سیستم طراحی به سرعت ترکیب می‌شود.

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

Anima Figma design agent چیست؟

Anima Figma design agent یک پلاگین هوش مصنوعی است که در داخل Figma زندگی می کند و دارای قابلیت های کامل Canvas است. می‌تواند فریم‌ها را ایجاد کند، طرح‌بندی خودکار را اعمال کند، از مؤلفه‌های شما استفاده کند، متغیرها و نشانه‌های شما را پیوند دهد، انواع مختلف را بسازد، و صفحات را دوباره سازمان‌دهی کند، همه از یک پنل چت. Anima هشت سال را به عنوان پل بین طراحی و کد گذرانده است، با 1.7 میلیون نصب بر روی افزونه Figma-to-code و درک ساختاری عمیق از نحوه کنار هم قرار دادن فایل‌های Figma: روابط مؤلفه‌ها، منطق طراحی سیستم، قراردادهای نام‌گذاری، مقیاس‌های فاصله.

عامل آن تخصص ساختاری را به جهت دیگر گردش کار می آورد، ورودی های خارجی مانند یک فایل Claude Design HTML مستقل، یک اسکرین شات، یا یک درخواست را دریافت می کند و آنها را به عنوان لایه های Figma که از لایه های اولیه ژنی جدید استفاده می کنند، به صورت تودرتو و آماده ارائه می کند. می‌توانید بسته به کار، مدل اصلی را بین Claude، GPT و Gemini تغییر دهید، و چون همه چیز در Canva شما اتفاق می‌افتد، خروجی بلافاصله توسط شما و سایر اعضای تیمتان قابل ویرایش است.

چگونه طراحی وارداتی Claude Design را به اجزای Figma تبدیل کنیم؟

هنگامی که عامل Anima خروجی Claude Design شما را بر روی Canvas ارائه کرد، نیازی نیست که الگوهای تکراری را به صورت دستی دنبال کنید و خودتان آنها را در اجزای خود بپیچید. نماینده می تواند این کار را برای شما انجام دهد. از آنجایی که Anima درک ساختاری عمیقی از نحوه کار فایل‌های Figma دارد، می‌تواند طراحی وارد شده را تجزیه و تحلیل کند، الگوهای تکراری UI (دکمه‌ها، کارت‌ها، فیلدهای ورودی، آیتم‌های ناوبری، ردیف‌های فهرست) را تشخیص دهد و آنها را در جای خود با چیدمان خودکار، انواع و نام‌گذاری مناسب بسازد.

شما چندین مسیر دارید، و نماینده آنها را از طریق چت مدیریت می کند:

از اجزای موجود خود دوباره استفاده کنید.

اگر فایل Figma شما قبلاً دارای سیستم طراحی است، فقط بپرسید: «دکمه‌های موجود در طرح وارداتی را با نمونه‌هایی از مؤلفه Button ما جایگزین کنید» یا «این کارت‌ها را به نوع ProductCard ما نگاشت کنید». عامل کتابخانه شما را می خواند، عناصر وارد شده را با نزدیکترین اجزای موجود مطابقت می دهد و آنها را به عنوان نمونه تعویض می کند. توکن‌ها، انواع و قراردادهای نام‌گذاری شما دست نخورده باقی می‌مانند، بنابراین کار وارداتی Claude Design بلافاصله مانند بقیه محصول شما به نظر می‌رسد و رفتار می‌کند.

اجزای جدید را از ابتدا تعریف کنید.

اگر طرح وارد شده الگوهایی را معرفی می‌کند که هنوز ندارید، به سادگی لایه‌ها را انتخاب کنید و از عامل بخواهید اجزایی از آنها ایجاد کند: «این کارت را به یک مؤلفه قابل استفاده مجدد با انواع پیش‌فرض، شناور و انتخاب شده تبدیل کنید» یا «نوار ناوبری را جزء کنید و نشان‌واره و پیوندها را به‌عنوان ویژگی‌ها در معرض دید قرار دهید». عامل کامپوننت را می‌سازد، ساختار متغیر، ویژگی‌های سیم‌ها را تنظیم می‌کند و نمونه‌هایی را در جایی که عناصر اصلی بودند قرار می‌دهد، همه بدون اینکه شما Canvas را ترک کنید.

اثر خالص این است که چیزی که به عنوان یک ماکت هوش مصنوعی در Claude Design شروع شد، در Figma به عنوان یک مجموعه اجزای با ساختار مناسب و منطبق با سیستم، آماده برای تکرار تیم شما می شود.

 

نماینده Anima Figma به طراحان حرفه ای اجازه می دهد تا از Claude Design به Figma بروند و به کار روی Canvas ادامه دهند.

|

Co-founder & CPO

Leave a comment

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *