هوش مصنوعی در فیگما؛ آموزش کامل Figma AI و Figma Make برای طراحی سایت و اپلیکیشن

در این آموزش عملی، قابلیت‌های Figma AI و Figma Make را برای ساخت Wireframe، طراحی رابط کاربری، تولید متن و تصویر، ایجاد Prototype و تبدیل ایده به وب‌اپلیکیشن یاد می‌گیرید.

Share
هوش مصنوعی در فیگما؛ آموزش کامل Figma AI و Figma Make برای طراحی سایت و اپلیکیشن

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

Figma AI و Figma Make می‌توانند بخشی از این مسیر را سریع‌تر کنند. با استفاده از آن‌ها می‌توانید از یک توضیح متنی به Wireframe یا طرح اولیه برسید، محتوای آزمایشی تولید کنید، Layerها را مرتب کنید، تصویر بسازید، پس‌زمینه عکس را حذف کنید، اتصال صفحات Prototype را ایجاد کنید و حتی یک رابط تعاملی را به وب‌اپلیکیشن قابل اجرا تبدیل کنید.

اما سرعت بیشتر همیشه به معنی طراحی بهتر نیست. اگر مسئله، مخاطب و محدودیت‌ها را درست تعریف نکنید، نتیجه احتمالاً یک رابط ظاهراً زیبا اما عمومی، نامنسجم و کم‌کاربرد خواهد بود.

در این راهنما قابلیت‌های Figma AI و Figma Make را به‌صورت عملی بررسی می‌کنیم و از یک ایده اولیه، Wireframe، طراحی رابط، Prototype و نسخه تعاملی می‌سازیم.

Figma AI چیست؟

Figma AI مجموعه‌ای از قابلیت‌های هوش مصنوعی است که در محصولات مختلف فیگما مانند Figma Design، FigJam، Figma Slides و Figma Make در دسترس قرار می‌گیرد.

این قابلیت‌ها برای انجام کارهای مختلفی استفاده می‌شوند:

  • ساخت طرح اولیه از روی پرامپت
  • تولید Wireframe
  • ساخت صفحه‌های رابط کاربری
  • تولید و جایگزینی متن
  • کوتاه‌کردن یا بازنویسی محتوا
  • ترجمه متن
  • ساخت و ویرایش تصویر
  • حذف پس‌زمینه عکس
  • نام‌گذاری خودکار Layerها
  • جست‌وجوی بصری
  • ایجاد اتصال‌های Prototype
  • مرتب‌سازی اطلاعات در FigJam
  • ساخت ارائه
  • تبدیل طراحی به Prototype و وب‌اپلیکیشن تعاملی

Figma AI یک ابزار مستقل نیست؛ قابلیت‌های آن در بخش‌های مختلف اکوسیستم Figma قرار گرفته‌اند.

Figma Make چیست؟

Figma Make ابزاری مبتنی بر پرامپت برای تبدیل ایده یا طرح فیگما به رابط تعاملی، Prototype کاربردی یا وب‌اپلیکیشن است.

در Figma Make می‌توانید:

  • پروژه را با یک پرامپت شروع کنید.
  • طراحی موجود Figma را به پروژه متصل کنید.
  • Component و Design System را به‌عنوان مرجع اضافه کنید.
  • نتیجه را در حالت تعاملی اجرا کنید.
  • با گفت‌وگوی مرحله‌ای تغییرات ایجاد کنید.
  • بخش خاصی از Preview را برای اصلاح انتخاب کنید.
  • کد تولیدشده را مشاهده و ویرایش کنید.
  • Prototype را با دیگران به اشتراک بگذارید.
  • در گردش‌کارهای پشتیبانی‌شده پروژه را به GitHub منتقل کنید.
  • برای Prototype خود Backend یا سرویس خارجی تعریف کنید.

بر اساس مستندات رسمی Figma Make، این ابزار برای ساخت Prototypeهای کاربردی، رابط‌های تعاملی و وب‌اپلیکیشن از طریق پرامپت و گفت‌وگو طراحی شده است.

تفاوت Figma AI، First Draft و Figma Make

ابزارخروجی اصلیکاربرد
Figma AIاصلاح و تولید محتوا در فایل طراحیکارهای روزمره طراح
First DraftWireframe یا Design قابل ویرایششروع سریع طراحی
Figma MakePrototype یا وب‌اپلیکیشن تعاملیآزمایش ایده و رفتار محصول
FigJam AIدیاگرام، خلاصه و مرتب‌سازی ایده‌هاتحقیق و برنامه‌ریزی
Figma Slides AIاسلاید و محتوای ارائهارائه محصول و گزارش

اگر فقط به یک صفحه قابل ویرایش در Figma Design نیاز دارید، First Draft مناسب‌تر است. اگر می‌خواهید رابط واقعاً قابل کلیک و اجرا باشد، Figma Make انتخاب بهتری خواهد بود.

آیا Figma AI رایگان است؟

دسترسی به قابلیت‌های Figma AI به نوع Plan، Seat، تنظیمات تیم و قابلیت موردنظر وابسته است. بعضی ابزارها ممکن است در Draft قابل آزمایش باشند، اما استفاده کامل در پروژه تیمی یا قابلیت‌های پیشرفته‌تر به Plan مناسب نیاز داشته باشد.

همچنین اجرای ابزارهای هوش مصنوعی از AI Credit استفاده می‌کند. مقدار اعتبار و امکانات قابل استفاده به Plan و Seat مرتبط است و ممکن است تغییر کند.

برای اطلاعات فعلی، صفحات شروع کار با Figma AI و نحوه کار AI Credits را بررسی کنید.

برای کاهش مصرف:

  • قبل از تولید، بریف را کامل کنید.
  • یک صفحه را بسازید و سپس گسترش دهید.
  • تغییرات را کوچک و مرحله‌ای درخواست کنید.
  • از تولید دوباره کل پروژه برای اصلاح یک دکمه خودداری کنید.
  • Design System را پیش از تولید صفحات متعدد تعریف کنید.
  • خروجی مناسب را Duplicate کنید و روی نسخه کپی کار کنید.

از کجا به قابلیت‌های Figma AI دسترسی پیدا کنیم؟

در Figma Design معمولاً می‌توانید از Actions در Toolbar به ابزارهای هوش مصنوعی دسترسی داشته باشید.

بسته به انتخاب فعلی، ابزارهای مرتبط نمایش داده می‌شوند. برای مثال:

  • با انتخاب Frame، ابزارهای طراحی یا Prototype دیده می‌شوند.
  • با انتخاب متن، گزینه‌های بازنویسی و ترجمه ظاهر می‌شوند.
  • با انتخاب تصویر، ابزار ساخت تصویر یا حذف پس‌زمینه در دسترس قرار می‌گیرد.
  • با انتخاب چند Layer، امکان نام‌گذاری یا مرتب‌سازی فراهم می‌شود.

اگر ابزارها را نمی‌بینید:

  • حساب و Plan را بررسی کنید.
  • از فعال‌بودن AI در تنظیمات تیم مطمئن شوید.
  • دسترسی ویرایش فایل را بررسی کنید.
  • Figma را به‌روزرسانی کنید.
  • در یک Draft شخصی قابلیت را آزمایش کنید.
  • محدودیت منطقه‌ای یا نوع Seat را بررسی کنید.

پیش از استفاده از هوش مصنوعی، بریف طراحی بسازید

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

بریف حداقلی باید این اطلاعات را داشته باشد:

نام محصول:
نوع محصول:
مخاطب:
مسئله اصلی:
هدف صفحه:
اقدام اصلی کاربر:
صفحه‌های موردنیاز:
محتوای ضروری:
سبک بصری:
رنگ‌ها:
پلتفرم:
اندازه صفحه:
محدودیت‌ها:

نمونه:

نام محصول: مدیریتینو
نوع محصول: داشبورد مدیریت پروژه
مخاطب: تیم‌های کوچک ۵ تا ۳۰ نفره
مسئله: مشاهده وضعیت پروژه‌ها و کارهای عقب‌افتاده
هدف صفحه: ارائه نمای کلی روزانه
اقدام اصلی: ساخت Task جدید
صفحه‌ها: ورود، داشبورد، پروژه، Task، اعضا، تنظیمات
سبک: مینیمال و حرفه‌ای
رنگ اصلی: بنفش
پلتفرم: وب دسکتاپ و موبایل
زبان: فارسی و راست‌به‌چپ

هرچه بریف دقیق‌تر باشد، First Draft و Figma Make نتیجه مرتبط‌تری تولید می‌کنند.

چگونه برای طراحی UI پرامپت بنویسیم؟

ساختار پیشنهادی:

[نوع محصول] + [کاربر] + [هدف] + [صفحه‌ها] +
[اجزای اصلی] + [سبک] + [رنگ] + [پلتفرم] +
[زبان و جهت] + [محدودیت‌ها]

نمونه فارسی:

یک داشبورد وب فارسی و راست‌به‌چپ برای مدیریت پروژه تیم‌های کوچک
طراحی کن. صفحه شامل نوار کناری، خلاصه پروژه‌ها، Taskهای امروز،
نمودار پیشرفت و فعالیت‌های اخیر باشد. اقدام اصلی ساخت Task جدید است.
سبک مینیمال، حرفه‌ای و روشن، رنگ اصلی بنفش و گوشه کارت‌ها ۱۲ پیکسل باشد.
از متن واقعی فارسی استفاده کن و طرح را با Auto Layout بساز.

نسخه انگلیسی:

Create a Persian right-to-left web dashboard for project management
used by small teams. Include a sidebar, project summary cards,
today's tasks, progress chart, recent activity, and a primary
Create Task action. Use a clean light interface, purple accent color,
12px card radius, realistic Persian content, reusable components,
and Auto Layout.

اجزای یک پرامپت حرفه‌ای Figma

نوع محصول

فروشگاه اینترنتی
داشبورد مالی
اپلیکیشن رزرو
سامانه پشتیبانی
پلتفرم آموزش آنلاین
وب‌سایت شرکتی
اپلیکیشن مدیریت پروژه
صفحه فرود SaaS

کاربر هدف

مدیران کسب‌وکار کوچک
حسابداران
دانشجویان
طراحان
فروشندگان فروشگاه اینترنتی
تیم پشتیبانی
برنامه‌نویسان
کاربران عمومی موبایل

اقدام اصلی

هر صفحه باید یک هدف اصلی داشته باشد:

ثبت‌نام
خرید محصول
ایجاد پروژه
افزودن Task
رزرو وقت
دانلود گزارش
ارسال پیام
ارتقای اشتراک

اجزای صفحه

Navigation
Hero section
Search
Filter
Data table
Summary cards
Chart
Form
Modal
Empty state
Notification
Pagination
Footer

سبک بصری

minimal
editorial
enterprise
playful
premium dark
clean SaaS
soft glassmorphism
high contrast
mobile-first

محدودیت‌های فنی طراحی

use Auto Layout
use reusable components
use an 8-point spacing system
use design tokens
avoid fixed heights for text containers
support RTL
include desktop and mobile layouts
use accessible color contrast

First Draft چیست؟

First Draft می‌تواند از توضیح متنی، Wireframe یا طرح اولیه قابل ویرایش ایجاد کند.

بر اساس راهنمای رسمی First Draft، هدف این قابلیت تبدیل سریع ایده به Wireframe یا Design قابل ویرایش برای بررسی مسیرهای مختلف طراحی است.

First Draft برای موارد زیر مفید است:

  • شروع سریع پروژه
  • ساخت Wireframe اولیه
  • بررسی چند Layout
  • ایجاد صفحه فرود
  • طراحی داشبورد
  • ساخت صفحه موبایل
  • آماده‌کردن Prototype اولیه
  • ارائه ایده به تیم

خروجی First Draft نباید بدون بازبینی به‌عنوان طراحی نهایی تحویل داده شود.

آموزش ساخت Wireframe با First Draft

  1. یک فایل جدید در Figma Design بسازید.
  2. Actions را باز کنید.
  3. First Draft را انتخاب کنید.
  4. نوع خروجی یا نقطه شروع را مشخص کنید.
  5. بریف صفحه را در پرامپت وارد کنید.
  6. Wireframe یا Design را تولید کنید.
  7. ساختار Frameها و Layerها را بررسی کنید.
  8. محتوا را اصلاح کنید.
  9. اجزا را به Component تبدیل کنید.
  10. صفحات بعدی را بر اساس همان سیستم بسازید.

پرامپت نمونه برای Wireframe فروشگاه

Create a low-fidelity mobile wireframe for a Persian online store.
Include home, product list, product detail, cart, checkout,
and order confirmation screens. Use right-to-left layout,
clear hierarchy, realistic Persian labels, simple grayscale components,
and no decorative images.

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

Wireframe را چگونه ارزیابی کنیم؟

این پرسش‌ها را پاسخ دهید:

  • کاربر می‌داند در کدام بخش قرار دارد؟
  • اقدام اصلی صفحه مشخص است؟
  • مسیر رسیدن به هدف کوتاه است؟
  • اطلاعات مهم در بالای صفحه قرار دارند؟
  • تعداد گزینه‌ها بیش از حد نیست؟
  • حالت بازگشت وجود دارد؟
  • خطاها قابل فهم‌اند؟
  • Empty State تعریف شده است؟
  • Loading State وجود دارد؟
  • نسخه موبایل قابل استفاده است؟
  • ترتیب RTL درست اجرا شده است؟

ظاهر زیبا نباید مشکلات معماری اطلاعات را پنهان کند.

تبدیل Wireframe به طراحی نهایی

بعد از تأیید ساختار:

  1. رنگ‌های اصلی و خنثی را تعریف کنید.
  2. Text Styleها را بسازید.
  3. سیستم فاصله‌گذاری تعیین کنید.
  4. Grid را فعال کنید.
  5. اجزای تکراری را Component کنید.
  6. Variantها را بسازید.
  7. محتوای واقعی وارد کنید.
  8. تصاویر مناسب اضافه کنید.
  9. حالت‌های مختلف را طراحی کنید.
  10. Prototype را ایجاد کنید.

نمونه سیستم فاصله‌گذاری:

4, 8, 12, 16, 24, 32, 48, 64

نمونه Radius:

Small: 6
Medium: 10
Large: 16
Pill: 999

از مقادیر تصادفی مانند 13، 19 و 27 در بخش‌های مختلف استفاده نکنید، مگر اینکه Design System دلیل مشخصی داشته باشد.

تولید متن رابط کاربری با Figma AI

Figma AI می‌تواند در نوشتن و اصلاح متن‌های رابط کمک کند:

  • عنوان صفحه
  • متن دکمه
  • توضیح فرم
  • پیام خطا
  • Empty State
  • Tooltip
  • Onboarding
  • اعلان
  • محتوای آزمایشی
  • متن کارت محصول

طبق فهرست ابزارهای Figma AI، قابلیت‌هایی برای بازنویسی، کوتاه‌کردن، ترجمه و جایگزینی متن در بخش‌های مختلف فیگما وجود دارد.

ویژگی‌های متن مناسب UI

متن رابط باید:

  • کوتاه باشد.
  • مستقیم باشد.
  • اقدام را توضیح دهد.
  • از اصطلاح مبهم دوری کند.
  • با لحن برند هماهنگ باشد.
  • در تمام صفحات یک واژه ثابت به کار ببرد.

نمونه نامناسب:

جهت انجام عملیات مربوطه اینجا کلیک نمایید

نمونه بهتر:

ساخت پروژه

نمونه نامناسب پیام خطا:

خطایی رخ داده است

نمونه بهتر:

اتصال اینترنت برقرار نیست. دوباره تلاش کنید.

نمونه متن برای حالت‌های مختلف

Empty State

هنوز پروژه‌ای ندارید
اولین پروژه را بسازید و کارهای تیم را در یک مکان مدیریت کنید.
[ساخت پروژه]

خطای فرم

شماره موبایل باید ۱۱ رقم باشد.

Loading

در حال دریافت گزارش...

موفقیت

پروژه با موفقیت ساخته شد.

تأیید حذف

این پروژه حذف شود؟
تمام Taskهای داخل آن نیز حذف می‌شوند.
[انصراف] [حذف پروژه]

برای عملیات مهم، متن دکمه تأیید باید خود اقدام را بیان کند؛ مانند «حذف پروژه»، نه «بله».

جایگزینی محتوای آزمایشی

Lorem Ipsum برای بررسی واقعی رابط فارسی مناسب نیست. طول واژه‌ها، ارتفاع خطوط و جهت متن فارسی با لاتین متفاوت است.

از Figma AI بخواهید محتوای واقعی و متنوع تولید کند:

Replace all placeholder content with realistic Persian content
for a project management application. Use varied project names,
short task titles, Persian dates, realistic team member names,
and different task statuses. Preserve the existing layout.

سپس بررسی کنید:

  • متن‌ها بیش از حد هم‌اندازه نیستند.
  • عنوان بلند باعث شکستن Layout نمی‌شود.
  • عدد و متن فارسی درست کنار هم قرار می‌گیرند.
  • تاریخ‌ها فضای کافی دارند.
  • دکمه‌ها با متن فارسی سازگارند.
  • متن در حالت بزرگ‌نمایی سیستم قابل استفاده است.

بازنویسی، کوتاه‌کردن و تغییر لحن

برای متن طولانی:

Shorten this text for a dashboard helper message.
Preserve the meaning and use clear professional Persian.
Maximum 90 characters.

برای لحن دوستانه:

Rewrite this message in friendly but professional Persian.
Avoid slang and keep it under two short sentences.

برای لحن سازمانی:

Rewrite this onboarding text in formal and concise Persian
for an enterprise financial dashboard.

محدودیت طول را مشخص کنید؛ در غیر این صورت متن جدید ممکن است Layout را خراب کند.

ترجمه رابط کاربری با هوش مصنوعی

ترجمه UI فقط جایگزینی واژه‌ها نیست. بعد از ترجمه باید Layout را بررسی کنید.

برای ترجمه:

  1. متن‌های موردنظر را انتخاب کنید.
  2. Translate را اجرا کنید.
  3. زبان مقصد را مشخص کنید.
  4. نتیجه را از نظر اصطلاحات بررسی کنید.
  5. عرض دکمه‌ها و ارتفاع کارت‌ها را اصلاح کنید.
  6. جهت رابط را در زبان‌های RTL تغییر دهید.
  7. اعداد، تاریخ و واحد پول را بررسی کنید.

نمونه پرامپت:

Translate the selected UI text into natural Persian.
Use concise product language, preserve placeholders,
do not translate brand names, and keep button labels short.

عبارت‌های فنی رایج را یکسان نگه دارید. مثلاً در یک صفحه «پروژه» و در صفحه دیگر «طرح» برای مفهوم یکسان استفاده نکنید.

ساخت و ویرایش تصویر با Figma AI

Figma AI می‌تواند برای تولید تصویر و اصلاح تصاویر داخل طراحی استفاده شود.

کاربردها:

  • ساخت تصویر Hero
  • تولید عکس محصول آزمایشی
  • ساخت Avatarهای غیرواقعی
  • تولید پس‌زمینه
  • ساخت تصویر Onboarding
  • جایگزینی تصاویر Placeholder
  • حذف پس‌زمینه عکس
  • اصلاح جزئی تصویر

بر اساس راهنمای Actions در Figma Design، ابزارهای تولید تصویر و حذف پس‌زمینه در میان قابلیت‌های Actions قرار دارند.

پرامپت تصویر برای رابط کاربری

برای Hero یک وب‌سایت مدیریت پروژه:

Minimal premium 3D illustration of a collaborative project dashboard,
floating task cards and calendar elements,
soft purple and blue palette, light background,
main visual centered, clean SaaS style,
no text, no logo, subtle shadows

برای تصویر Onboarding:

Friendly editorial illustration of a small team organizing tasks,
modern flat geometric style, purple and warm beige palette,
simple shapes, clean white background, no text

برای تصویر محصول:

Professional product photograph of a black wireless headphone,
light-gray studio background, soft diffused lighting,
three-quarter view, realistic materials,
minimal composition, no text, no logo

متن و لوگوی نهایی را داخل تصویر مولد نسازید. آن‌ها را به‌صورت Layer واقعی در Figma اضافه کنید.

حذف پس‌زمینه عکس در Figma

  1. تصویر را انتخاب کنید.
  2. Actions را باز کنید.
  3. Remove Background را اجرا کنید.
  4. لبه‌های سوژه را بررسی کنید.
  5. نتیجه را روی پس‌زمینه روشن و تیره آزمایش کنید.
  6. در صورت نیاز تصویر را در ابزار تخصصی‌تر اصلاح کنید.

نواحی دشوار:

  • مو
  • شیشه
  • پارچه نیمه‌شفاف
  • سایه نرم
  • اجسام همرنگ پس‌زمینه
  • لبه‌های دارای Motion Blur

برای عکس محصول حرفه‌ای، نتیجه را در بزرگ‌نمایی ۱۰۰ درصد بررسی کنید.

نام‌گذاری خودکار Layerها

Layerهای دارای نام‌هایی مانند Frame 382، Rectangle 91 و Group 12 نگهداری فایل را دشوار می‌کنند.

Figma AI می‌تواند مجموعه‌ای از Layerها را بر اساس محتوای آن‌ها نام‌گذاری کند.

ساختار نام‌گذاری پیشنهادی:

Page/
  Header/
    Logo
    Navigation
    UserMenu
  Main/
    SummaryCards
    ProjectTable
    RecentActivity
  Sidebar/
    PrimaryNavigation
    UpgradeCard

برای Componentها:

Button/Primary/Default
Button/Primary/Hover
Button/Primary/Disabled
Input/Text/Default
Input/Text/Error
Card/Project/Active

نام‌گذاری باید معنی و نقش را توضیح دهد، نه ظاهر لحظه‌ای را. به‌جای PurpleButton از Button/Primary استفاده کنید.

راهنمای Rename Layers نیز نام‌گذاری گروهی و استفاده از Figma AI برای مرتب‌سازی Layerها را توضیح می‌دهد.

ساخت Component و Variant

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

برای یک دکمه:

Property: Type
Primary
Secondary
Tertiary
Danger

Property: State
Default
Hover
Pressed
Focus
Disabled
Loading

Property: Size
Small
Medium
Large

برای Input:

State: Default, Focus, Filled, Error, Disabled
Label: True, False
Helper: True, False
Icon: None, Start, End

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

استفاده صحیح از Auto Layout

Auto Layout برای ساخت رابط Responsive ضروری است.

برای هر Frame این موارد را بررسی کنید:

  • Direction
  • Gap
  • Padding
  • Alignment
  • Hug Contents
  • Fill Container
  • Fixed Width
  • Min Width
  • Max Width
  • Wrap

مثال کارت:

Direction: Vertical
Gap: 12
Padding: 16
Width: Fill Container
Height: Hug Contents
Alignment: Stretch

مثال دکمه:

Direction: Horizontal
Gap: 8
Padding Horizontal: 16
Padding Vertical: 10
Width: Hug Contents
Height: Hug Contents
Alignment: Center

خروجی First Draft را بررسی کنید؛ صرف وجود Auto Layout به معنی استفاده صحیح از آن نیست.

طراحی رابط فارسی و RTL

برای طراحی فارسی:

  • ترتیب ستون‌ها را RTL کنید.
  • Navigation اصلی را معمولاً در سمت راست قرار دهید.
  • آیکون‌های جهت‌دار را معکوس کنید.
  • متن را راست‌چین کنید.
  • جهت Progress و Stepper را بررسی کنید.
  • جای آیکون و Label را هماهنگ کنید.
  • ترکیب عدد و متن انگلیسی را آزمایش کنید.
  • منوی قبلی و بعدی را درست جهت‌دهی کنید.

مواردی که نباید لزوماً معکوس شوند:

  • دکمه پخش
  • کنترل‌های استاندارد رسانه
  • لوگو
  • نمودار زمانی، بسته به منطق داده
  • علامت‌های ریاضی
  • بعضی آیکون‌های جهانی

یک صفحه را فقط با Text Align: Right به RTL واقعی تبدیل نمی‌کنید. ترتیب اجزا، Navigation و حرکت رابط نیز باید بازطراحی شوند.

طراحی Responsive با Figma AI

از مدل نخواهید فقط یک صفحه دسکتاپ بسازد. نقاط شکست را مشخص کنید.

نمونه:

Create desktop, tablet, and mobile versions of this dashboard.
Use a 12-column grid on desktop, 8 columns on tablet,
and 4 columns on mobile. Collapse the sidebar into a bottom navigation
on mobile. Stack summary cards vertically and keep the primary action visible.

Breakpoints نمونه:

Desktop: 1440
Laptop: 1280
Tablet: 768
Mobile: 390

این اعداد نقطه شروع‌اند و باید با نیاز محصول هماهنگ شوند.

در موبایل:

  • جدول را به Card تبدیل کنید.
  • فیلترها را داخل Sheet قرار دهید.
  • Sidebar را به Navigation مناسب تبدیل کنید.
  • عناصر ثانویه را مخفی یا جمع کنید.
  • اندازه لمس را کافی نگه دارید.
  • اقدام اصلی را قابل دسترس نگه دارید.

ساخت Prototype با هوش مصنوعی Figma

Figma AI می‌تواند بین Frameها Interaction ایجاد کند.

برای استفاده:

  1. Frameهای موردنظر را انتخاب کنید.
  2. وارد تب Prototype شوید.
  3. Add Interactions را اجرا کنید.
  4. اجازه دهید ارتباط‌ها ساخته شوند.
  5. Preview را باز کنید.
  6. تمام مسیرها را آزمایش کنید.
  7. Trigger و Destination را اصلاح کنید.
  8. Transitionها را تنظیم کنید.

طبق راهنمای Make Interactions with AI، نام‌گذاری منظم Layerها می‌تواند به تشخیص بهتر دکمه‌ها و مقصد صفحات کمک کند.

مسیرهای مهم Prototype

برای اپلیکیشن فروشگاهی:

Home
→ Product List
→ Product Detail
→ Add to Cart
→ Cart
→ Checkout
→ Payment State
→ Order Confirmation

همچنین مسیرهای فرعی را طراحی کنید:

Empty Cart
Out of Stock
Payment Error
Invalid Discount Code
Network Error
Loading
Search with No Results

Prototype فقط مسیر موفق را نشان ندهد.

انتخاب Transition

Transitionکاربرد
Instantتغییر سریع حالت
Dissolveتغییر محتوای ساده
Smart Animateحرکت بین اجزای مشابه
Move Inبازشدن Panel یا صفحه
Move Outبستن Panel
PushNavigation متوالی
Slide InDrawer و Bottom Sheet

از Animationهای متعدد و طولانی برای هر کلیک استفاده نکنید. حرکت باید به فهم ساختار کمک کند.

Figma Make؛ تبدیل طراحی به Prototype کاربردی

Figma Make می‌تواند از پرامپت یا طراحی موجود، نسخه تعاملی بسازد.

دو روش اصلی:

شروع از پرامپت

برای زمانی مناسب است که هنوز طراحی ندارید و می‌خواهید ایده را سریع آزمایش کنید.

شروع از طراحی موجود

وقتی Frameها، Componentها یا Design System آماده‌اند، آن‌ها را به Prompt متصل کنید تا نتیجه به طراحی شما نزدیک‌تر شود.

آموزش شروع پروژه در Figma Make

  1. Figma Make را باز کنید.
  2. یک فایل جدید بسازید.
  3. هدف پروژه را با پرامپت توضیح دهید.
  4. در صورت وجود، فایل طراحی یا Component را Attach کنید.
  5. ابتدا Plan یا ساختار پیشنهادی را بررسی کنید.
  6. تولید رابط را شروع کنید.
  7. Preview را اجرا کنید.
  8. هر مرحله را جداگانه آزمایش کنید.
  9. تغییرات را با پرامپت‌های کوچک اعمال کنید.
  10. در صورت نیاز کد را بررسی کنید.
  11. نسخه قابل اشتراک بسازید.

راهنمای ساخت فایل Figma Make توضیح می‌دهد که می‌توان نتیجه را با ادامه گفت‌وگو، ویرایش Preview و تغییر مستقیم کد اصلاح کرد.

پرامپت کامل برای Figma Make

Build a responsive Persian right-to-left project management web app
for teams of 5 to 30 people.

Core pages:
- Sign in
- Dashboard
- Projects
- Project details
- Tasks
- Team members
- Settings

Dashboard requirements:
- Right-side navigation
- Project summary cards
- Today's tasks
- Recent activity
- Project progress chart
- Primary Create Task action

Behavior:
- Users can create, edit, complete, and filter tasks
- Add loading, empty, success, and error states
- Use realistic Persian content
- Persist demo changes in local state

Design:
- Clean light enterprise interface
- Purple primary color
- 8-point spacing system
- 12px card radius
- Responsive desktop and mobile layouts
- Accessible color contrast
- Reusable components

چرا پرامپت Figma Make باید رفتار را توضیح دهد؟

در Figma Design بیشتر ظاهر اهمیت دارد؛ اما در Figma Make باید رفتار نیز مشخص شود.

به‌جای:

یک داشبورد مدیریت پروژه بساز

بنویسید:

کاربر بتواند Task جدید بسازد، وضعیت آن را تغییر دهد،
بر اساس مسئول و وضعیت فیلتر کند و Task تکمیل‌شده را ببیند.
برای ذخیره، Loading و Success State نمایش داده شود.

جزئیات رفتاری مهم:

  • کلیک روی دکمه چه می‌کند؟
  • اطلاعات کجا نمایش داده می‌شوند؟
  • فرم چه اعتبارسنجی دارد؟
  • حالت خطا چیست؟
  • داده بعد از Refresh باقی می‌ماند؟
  • کاربر چگونه به صفحه قبل بازمی‌گردد؟
  • نقش‌های مختلف چه می‌بینند؟

استفاده از طراحی موجود در Figma Make

اگر Design دارید:

  1. Frameهای تمیز و نهایی را انتخاب کنید.
  2. Componentها را نام‌گذاری کنید.
  3. Variantها را کامل کنید.
  4. Auto Layout را اصلاح کنید.
  5. Design را به Prompt متصل کنید.
  6. مشخص کنید کدام بخش باید حفظ شود.
  7. رفتارها را جداگانه توضیح دهید.

نمونه:

Use the attached dashboard design as the visual source of truth.
Preserve its colors, typography, spacing and components.
Make the Create Task button open a modal with title, assignee,
due date, priority and description fields.
Validate the title field and show a Persian success message after saving.

عبارت visual source of truth روشن می‌کند که مدل نباید Style را آزادانه تغییر دهد.

اضافه‌کردن Guideline به Figma Make

Guidelineها دستورهای ثابت پروژه هستند و از تکرار محدودیت‌ها در هر پرامپت جلوگیری می‌کنند.

نمونه:

Always use Persian and right-to-left layout.
Use the provided design system components whenever available.
Do not introduce new colors outside the defined variables.
Use an 8-point spacing system.
Keep all user-facing text concise.
Always include loading, empty, error and success states.
Do not change the primary navigation structure without confirmation.

طبق مستندات Guidelines در Figma Make، این دستورها می‌توانند نحوه کدنویسی، رفتار و استفاده از Style Context را هدایت کنند.

فایل‌های قابل اضافه‌شدن به Prompt

برای هدایت بهتر Figma Make یا Agent می‌توان فایل‌های مرجع اضافه کرد، مانند:

  • فایل Figma
  • تصویر
  • فایل متنی
  • PDF
  • ویدئو
  • فایل صوتی
  • ارائه
  • Spreadsheet، در قابلیت‌های پشتیبانی‌شده

بر اساس راهنمای Attach Files، نوع فایل‌های قابل اتصال به ابزار و Plan بستگی دارد.

فایل مرجع را همراه توضیح اضافه کنید:

Use the attached PDF only for product requirements.
Use the attached Figma file for visual style.
Use the spreadsheet as sample product data.
Do not copy the PDF layout.

بدون توضیح، مدل ممکن است نقش هر فایل را اشتباه تشخیص دهد.

اصلاح مرحله‌ای در Figma Make

پرامپت نامناسب:

همه چیز را حرفه‌ای‌تر کن، رنگ را عوض کن، موبایل بساز،
نمودار اضافه کن، فرم را اصلاح کن و ظاهر را مدرن کن.

پرامپت بهتر:

In the dashboard header only, reduce the visual height,
keep the existing typography, move the Create Task button
next to the page title, and do not modify the sidebar.

سپس در مرحله بعد:

For screens below 768px, replace the sidebar with a bottom navigation.
Keep Dashboard, Projects, Tasks and Profile as the four items.

هر پرامپت باید محدوده تغییر را مشخص کند:

  • کدام صفحه؟
  • کدام Component؟
  • چه چیزی تغییر کند؟
  • چه چیزی حفظ شود؟
  • معیار پذیرش چیست؟

Figma Agent چه کاری انجام می‌دهد؟

Agent داخل Figma Design می‌تواند از ابزارهای موجود برای اجرای تغییرات یک‌باره یا گروهی استفاده کند.

برای مثال:

  • نام‌گذاری Layerها
  • جایگزینی محتوا
  • ساخت تصویر
  • اصلاح چند Frame
  • ایجاد نسخه‌های مختلف
  • ارائه بازخورد طراحی
  • انجام بعضی تغییرات روی Canvas

طبق راهنمای Figma Agent، تفاوت اصلی این Agent با Figma Make آن است که Agent مستقیماً روی فایل Design کار می‌کند، درحالی‌که Make برای تولید Prototype یا اپلیکیشن تعاملی استفاده می‌شود.

تغییرات Agent را بعد از اجرا بررسی کنید و در صورت نامناسب‌بودن Undo کنید.

استفاده از FigJam AI برای شروع پروژه

پیش از طراحی رابط می‌توانید در FigJam این موارد را بسازید:

  • User Flow
  • Sitemap
  • Customer Journey
  • Mind Map
  • Affinity Map
  • فهرست Featureها
  • دسته‌بندی بازخوردها
  • خلاصه جلسه
  • نمودار فرایند

نمونه پرامپت:

Create a user flow for a Persian online appointment booking app.
Include search, service selection, provider selection,
date and time selection, user details, payment,
confirmation, cancellation and rescheduling.

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

پروژه عملی: طراحی اپلیکیشن رزرو وقت

مرحله اول: تعریف مسئله

کاربر باید بتواند خدمت، ارائه‌دهنده، تاریخ و ساعت را انتخاب
و رزرو خود را تأیید کند.

مرحله دوم: ساخت User Flow

Home
→ Select Service
→ Select Provider
→ Select Date
→ Select Time
→ Enter Information
→ Review
→ Payment
→ Confirmation

مسیرهای جایگزین:

No Available Time
Payment Failed
Expired Time Slot
Cancel Booking
Reschedule

مرحله سوم: ساخت Wireframe

پرامپت:

Create low-fidelity mobile wireframes for a Persian RTL appointment
booking app. Include home, service selection, provider selection,
calendar, time slots, user details, review, payment and confirmation.
Use grayscale, simple components and realistic Persian labels.

مرحله چهارم: ساخت Design System

تعریف کنید:

  • Color Variables
  • Text Styles
  • Spacing
  • Radius
  • Shadow
  • Button
  • Input
  • Card
  • Calendar Day
  • Time Slot
  • Modal
  • Toast

مرحله پنجم: طراحی نهایی

  • رنگ اصلی را اعمال کنید.
  • تصویرهای لازم را بسازید.
  • متن واقعی وارد کنید.
  • حالت‌های انتخاب و غیرفعال را طراحی کنید.
  • نسخه موبایل و دسکتاپ را بررسی کنید.

مرحله ششم: Prototype

  • انتخاب خدمت
  • انتخاب زمان
  • تکمیل فرم
  • پرداخت
  • نمایش خطا
  • تأیید نهایی

مرحله هفتم: Figma Make

طرح را به Make متصل کنید و رفتارهای واقعی را توضیح دهید.

استفاده از API درواره کنار Figma

Figma AI داخل محیط طراحی کار می‌کند. API درواره می‌تواند بخش‌های خارج از Canvas را به‌شکل برنامه‌پذیر خودکار کند:

  • تبدیل توضیحات مشتری به Product Brief
  • ساخت User Persona
  • تولید User Story
  • ساخت Acceptance Criteria
  • تولید متن رابط کاربری
  • آماده‌کردن داده آزمایشی
  • تولید پرامپت First Draft
  • تولید پرامپت Figma Make
  • خلاصه‌سازی بازخورد کاربران
  • دسته‌بندی درخواست‌های Feature
  • بررسی اولیه متن از نظر وضوح
  • ساخت مستند Component
  • تولید محتوای چندزبانه
  • ساخت Alt Text برای تصاویر
  • اتصال تولید محتوا به CMS یا اپلیکیشن

درواره یک API سازگار با OpenAI ارائه می‌دهد که می‌توانید آن را از طریق زبان‌ها و ابزارهای مختلف استفاده کنید.

برای مشاهده مدل‌های فعلی و قیمت استفاده، صفحه مدل‌ها و قیمت‌های درواره را ببینید.

مثال API برای ساخت Product Brief

curl https://api.darvareh.ir/v1/chat/completions \
  -H "Authorization: Bearer YOUR_DARVAREH_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "model": "YOUR_MODEL_ID",
    "messages": [
      {
        "role": "system",
        "content": "تو یک Senior Product Designer هستی. توضیح فارسی محصول را به بریف ساختاریافته طراحی تبدیل کن. خروجی فقط JSON معتبر باشد."
      },
      {
        "role": "user",
        "content": "یک اپلیکیشن فارسی برای رزرو وقت سالن زیبایی می‌خواهیم. کاربر باید خدمت، متخصص، روز و ساعت را انتخاب کند، اطلاعات تماس بدهد و رزرو را تأیید کند. رابط باید ساده و موبایل‌محور باشد."
      }
    ],
    "temperature": 0.2
  }'

نمونه خروجی:

{
  "product": {
    "type": "mobile appointment booking application",
    "language": "Persian",
    "direction": "RTL",
    "primary_platform": "mobile"
  },
  "primary_user": {
    "description": "کاربری که می‌خواهد سریع وقت خدمات زیبایی رزرو کند",
    "primary_goal": "انتخاب و تأیید وقت در کمترین مرحله"
  },
  "core_flow": [
    "انتخاب خدمت",
    "انتخاب متخصص",
    "انتخاب تاریخ",
    "انتخاب ساعت",
    "ورود اطلاعات تماس",
    "بررسی رزرو",
    "تأیید"
  ],
  "required_screens": [
    "خانه",
    "فهرست خدمات",
    "متخصصان",
    "تقویم",
    "زمان‌های موجود",
    "اطلاعات کاربر",
    "بررسی نهایی",
    "تأیید رزرو"
  ],
  "states": [
    "loading",
    "empty",
    "error",
    "success",
    "disabled",
    "selected"
  ]
}

مثال پایتون برای تولید متن‌های UI

from openai import OpenAI
import json

client = OpenAI(
    api_key="YOUR_DARVAREH_API_KEY",
    base_url="https://api.darvareh.ir/v1"
)

response = client.chat.completions.create(
    model="YOUR_MODEL_ID",
    temperature=0.2,
    messages=[
        {
            "role": "system",
            "content": (
                "You are a senior Persian UX writer. Return only valid JSON. "
                "Use concise, natural Persian. Provide title, description, "
                "primary_action and secondary_action for each UI state."
            )
        },
        {
            "role": "user",
            "content": (
                "Generate UI copy for an appointment booking application. "
                "States: no available time, payment failed, booking confirmed, "
                "network error, empty booking history and cancellation confirmation."
            )
        }
    ]
)

content = response.choices[0].message.content
ui_copy = json.loads(content)

print(json.dumps(ui_copy, ensure_ascii=False, indent=2))

نمونه خروجی:

{
  "no_available_time": {
    "title": "زمان خالی پیدا نشد",
    "description": "روز دیگری را انتخاب کنید یا متخصص دیگری را ببینید.",
    "primary_action": "انتخاب روز دیگر",
    "secondary_action": "تغییر متخصص"
  },
  "payment_failed": {
    "title": "پرداخت انجام نشد",
    "description": "مبلغی از حساب شما کسر نشده است. دوباره تلاش کنید.",
    "primary_action": "تلاش دوباره",
    "secondary_action": "بازگشت"
  },
  "booking_confirmed": {
    "title": "وقت شما ثبت شد",
    "description": "جزئیات رزرو در بخش وقت‌های من در دسترس است.",
    "primary_action": "مشاهده رزرو",
    "secondary_action": "بازگشت به خانه"
  }
}

تولید داده آزمایشی برای Figma

برای آزمایش Layout به داده‌های متنوع نیاز دارید:

from openai import OpenAI
import json

client = OpenAI(
    api_key="YOUR_DARVAREH_API_KEY",
    base_url="https://api.darvareh.ir/v1"
)

response = client.chat.completions.create(
    model="YOUR_MODEL_ID",
    temperature=0.4,
    messages=[
        {
            "role": "system",
            "content": (
                "Generate realistic but fictional Persian sample data. "
                "Return valid JSON only. Do not use real personal information."
            )
        },
        {
            "role": "user",
            "content": (
                "Create 12 project management tasks with varied title lengths, "
                "statuses, priorities, Persian due dates and fictional assignees. "
                "Include short, medium and very long titles to test UI overflow."
            )
        }
    ]
)

data = json.loads(response.choices[0].message.content)
print(json.dumps(data, ensure_ascii=False, indent=2))

این داده‌ها را برای آزمایش موارد زیر استفاده کنید:

  • Overflow متن
  • عرض ستون‌ها
  • فیلترها
  • Pagination
  • وضعیت‌های مختلف
  • Avatar Group
  • Badgeها
  • نسخه موبایل

تولید پرامپت Figma Make با API درواره

from openai import OpenAI

client = OpenAI(
    api_key="YOUR_DARVAREH_API_KEY",
    base_url="https://api.darvareh.ir/v1"
)

product_brief = """
یک داشبورد فارسی مدیریت فروش برای فروشگاه‌های کوچک می‌خواهیم.
صفحه اصلی باید فروش امروز، سفارش‌ها، محصولات کم‌موجودی،
نمودار فروش هفتگی و سفارش‌های اخیر را نشان دهد.
کاربر باید بتواند سفارش را جست‌وجو و وضعیت آن را تغییر دهد.
"""

response = client.chat.completions.create(
    model="YOUR_MODEL_ID",
    temperature=0.2,
    messages=[
        {
            "role": "system",
            "content": (
                "Convert the Persian product brief into a detailed English "
                "Figma Make prompt. Include pages, components, behaviors, "
                "states, responsive rules, RTL requirements and acceptance criteria."
            )
        },
        {
            "role": "user",
            "content": product_brief
        }
    ]
)

print(response.choices[0].message.content)

چک‌لیست بررسی خروجی هوش مصنوعی

ساختار محصول

  • صفحه هدف مشخص دارد.
  • اقدام اصلی قابل تشخیص است.
  • Navigation منطقی است.
  • مسیر کاربر کوتاه است.
  • صفحات ضروری وجود دارند.
  • حالت‌های لبه‌ای طراحی شده‌اند.

طراحی بصری

  • فاصله‌گذاری منظم است.
  • Typography سلسله‌مراتب دارد.
  • رنگ‌های متعدد بی‌دلیل استفاده نشده‌اند.
  • Componentها هماهنگ‌اند.
  • فضای خالی کافی است.
  • طرح شبیه Template عمومی باقی نمانده است.

RTL

  • ترتیب اجزا درست است.
  • Sidebar و Navigation مناسب‌اند.
  • آیکون‌های جهت‌دار بررسی شده‌اند.
  • ترکیب متن و عدد درست نمایش داده می‌شود.
  • جدول و Pagination منطقی هستند.

Component

  • اجزای تکراری Component شده‌اند.
  • Variantها وجود دارند.
  • Stateهای لازم تعریف شده‌اند.
  • نام‌گذاری قابل فهم است.
  • Propertyها منظم‌اند.

Responsive

  • نسخه موبایل طراحی شده است.
  • جدول‌ها در موبایل قابل استفاده‌اند.
  • دکمه‌ها اندازه لمس مناسبی دارند.
  • متن از Frame بیرون نمی‌زند.
  • Navigation موبایل تعریف شده است.

Prototype

  • تمام لینک‌ها کار می‌کنند.
  • مسیر بازگشت وجود دارد.
  • Loading و Error نمایش داده می‌شوند.
  • فرم‌ها اعتبارسنجی دارند.
  • نتیجه عملیات قابل مشاهده است.

اشتباهات رایج در استفاده از Figma AI

شروع با پرامپت مبهم

پرامپت مبهم معمولاً یک Template عمومی تولید می‌کند. مخاطب، هدف، صفحه‌ها و محدودیت‌ها را مشخص کنید.

پذیرش خروجی به‌عنوان طراحی نهایی

First Draft نقطه شروع است. معماری اطلاعات، محتوا، Componentها و حالت‌ها باید بررسی شوند.

طراحی فقط Happy Path

خطا، Loading، Empty State، دسترسی محدود و قطع ارتباط را فراموش نکنید.

نادیده‌گرفتن RTL

راست‌چین‌کردن متن کافی نیست. ترتیب کل رابط و Navigation باید بررسی شود.

استفاده از محتوای بی‌معنی

Lorem Ipsum مشکلات واقعی طول متن فارسی را نشان نمی‌دهد.

Component نکردن عناصر تکراری

این کار باعث تفاوت در دکمه‌ها، Inputها و کارت‌ها می‌شود و نگهداری فایل را دشوار می‌کند.

پرامپت تغییرات بسیار بزرگ

در Figma Make، تغییرات را محدود و مرحله‌ای درخواست کنید.

توجه بیش از حد به ظاهر

زیبایی نمی‌تواند مسیر پیچیده، محتوای مبهم یا اقدام نامشخص را جبران کند.

نادیده‌گرفتن نسخه موبایل

نسخه دسکتاپ را با کوچک‌کردن ساده به موبایل تبدیل نکنید. اولویت محتوا و Navigation باید بازطراحی شوند.

انتقال مستقیم Prototype به محصول نهایی

Prototype تولیدشده باید از نظر معماری، عملکرد، کیفیت کد، داده و تجربه کاربری توسط تیم فنی و محصول بررسی شود.

پرسش‌های متداول

Figma AI چیست؟

Figma AI مجموعه‌ای از ابزارهای هوش مصنوعی در محصولات فیگما برای ساخت طرح اولیه، تولید و اصلاح متن و تصویر، نام‌گذاری Layerها، ایجاد Prototype و انجام کارهای تکراری طراحی است.

Figma Make چیست؟

Figma Make ابزاری برای تبدیل پرامپت یا طراحی Figma به Prototype کاربردی، رابط تعاملی یا وب‌اپلیکیشن قابل اجرا است.

تفاوت First Draft و Figma Make چیست؟

First Draft بیشتر برای ساخت Wireframe یا Design قابل ویرایش داخل Figma Design استفاده می‌شود. Figma Make روی ساخت تجربه تعاملی و وب‌اپلیکیشن تمرکز دارد.

آیا Figma AI از زبان فارسی پشتیبانی می‌کند؟

می‌توان از پرامپت و محتوای فارسی استفاده کرد، اما کیفیت تمام قابلیت‌ها یکسان نیست. برای پروژه فارسی باید متن، فونت، جهت RTL، ترکیب عدد و واژه‌های انگلیسی را دستی بررسی کنید.

آیا می‌توان با Figma AI سایت طراحی کرد؟

بله. می‌توانید Wireframe، طرح نهایی و Prototype سایت را بسازید. Figma Make نیز می‌تواند نسخه تعاملی ایجاد کند؛ اما پیش از استفاده در محصول واقعی، بررسی فنی و طراحی ضروری است.

آیا Figma Make کد تولید می‌کند؟

Figma Make برای ساخت Prototype و وب‌اپلیکیشن تعاملی از کد استفاده می‌کند و در گردش‌کارهای پشتیبانی‌شده امکان مشاهده و ویرایش کد وجود دارد.

آیا می‌توان طراحی فعلی را به Figma Make داد؟

بله. می‌توانید فایل‌ها، Frameها، Componentها و منابع موجود را به Prompt متصل و از آن‌ها برای هدایت نتیجه استفاده کنید.

آیا Figma AI می‌تواند Prototype بسازد؟

بله. در Figma Design می‌تواند بعضی Interactionها را میان Frameها ایجاد کند و Figma Make نیز برای ساخت Prototypeهای تعاملی‌تر طراحی شده است.

آیا Figma AI جایگزین طراح UI/UX می‌شود؟

خیر. ابزار می‌تواند تولید اولیه و کارهای تکراری را سریع کند، اما تعریف مسئله، تحقیق کاربر، معماری اطلاعات، اولویت‌بندی، Design System و ارزیابی تجربه کاربری همچنان به تصمیم انسانی نیاز دارند.

درواره چه ارتباطی با Figma دارد؟

درواره زیرساخت API مدل‌های هوش مصنوعی است و می‌تواند در کنار Figma برای تولید بریف، متن UI، داده آزمایشی، پرامپت، مستندات و گردش‌کارهای خودکار استفاده شود.

قیمت استفاده از مدل‌های درواره چقدر است؟

هزینه به مدل و میزان استفاده بستگی دارد. فهرست به‌روز مدل‌ها و قیمت آن‌ها در صفحه مدل‌های درواره قرار دارد.

جمع‌بندی

Figma AI می‌تواند بخش زیادی از کارهای ابتدایی و تکراری طراحی را سریع‌تر کند. First Draft برای تبدیل ایده به Wireframe یا Design اولیه کاربرد دارد، ابزارهای متن و تصویر آماده‌سازی محتوا را ساده‌تر می‌کنند و قابلیت Prototype می‌تواند اتصال میان صفحه‌ها را بسازد.

Figma Make یک مرحله جلوتر می‌رود و طرح یا توضیح محصول را به یک تجربه تعاملی تبدیل می‌کند. این ابزار برای آزمایش ایده، ارائه به مدیران، بررسی رفتار و ساخت Prototype سریع بسیار مفید است.

بااین‌حال، نتیجه حرفه‌ای زمانی حاصل می‌شود که ابتدا مسئله، کاربر، مسیر و محدودیت‌ها را مشخص کنید. سپس خروجی هوش مصنوعی را به Component، Design System، حالت‌های واقعی، نسخه Responsive و Prototype قابل آزمایش تبدیل کنید.

برای خودکارسازی مراحل خارج از Figma، مانند تولید Product Brief، متن رابط، داده آزمایشی، پرامپت و مستندات، می‌توانید از API درواره استفاده کنید.

مقالات مرتبط

برای مطالعه شرایط استفاده و محدودیت‌های مسئولیت، صفحه «سلب مسئولیت» را مشاهده کنید.

Read more

اتوماسیون هوش مصنوعی چیست؟ کاربردها و آموزش ساخت AI Automation

اتوماسیون هوش مصنوعی چیست؟ کاربردها و آموزش ساخت AI Automation

اتوماسیون هوش مصنوعی با ترکیب گردش‌کارهای خودکار و مدل‌های هوش مصنوعی، پردازش متن، دسته‌بندی، استخراج اطلاعات و تصمیم‌های پیشنهادی را خودکار می‌کند. در این راهنما، معماری و ساخت نمونه عملی آن با API درواره را می‌آموزید.

Agentic Commerce چیست؟ آینده خرید با ایجنت هوش مصنوعی

Agentic Commerce چیست؟ آینده خرید با ایجنت هوش مصنوعی

Agentic Commerce شیوه‌ای جدید برای خرید اینترنتی است که در آن ایجنت هوش مصنوعی می‌تواند نیاز کاربر را بفهمد، محصولات را جست‌وجو و مقایسه کند و فرایند خرید را پیش ببرد. در این راهنما با معماری، UCP، ACP و پیاده‌سازی آن با API درواره آشنا می‌شوید.