Skip to content
بازگشت به وبلاگ طراحی و تجربه کاربری

فیگما چیست و چرا ابزار اصلی طراحان محصول شده است؟.

فیگما چیست و چرا ابزار اصلی طراحان محصول شده است؟

زمانی همکاری روی فایل طراحی یعنی نسخه‌هایی با اسم‌هایی مثل final، final-2 و final-really-last. فایل برای همکار فرستاده می‌شد، کامنت در پیام‌رسان می‌آمد و توسعه‌دهنده نمی‌دانست کدام نسخه مرجع است. فیگما بخش بزرگی از این آشفتگی را با یک ایدهٔ ساده کم کرد: همه روی یک فضای مشترک کار کنند.

فیگما یا Figma یک پلتفرم مبتنی بر فضای ابری برای طراحی رابط کاربری، ساخت پروتوتایپ، سیستم طراحی و همکاری تیم محصول است. طراح، مدیر محصول، نویسنده و توسعه‌دهنده می‌توانند یک فایل مشترک را ببینند، نظر بدهند و به آخرین نسخه دسترسی داشته باشند. امروز دامنهٔ آن از طراحی صفحه فراتر رفته و ابزارهایی برای ایده‌پردازی، توسعه، طراحی با AI و نزدیک کردن کد و بوم دارد.

فیگما چه کارهایی انجام می‌دهد؟

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

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

فیگما روی مرورگر اجرا می‌شود و برنامهٔ دسکتاپ هم دارد. این دسترسی باعث شد تیم‌ها کمتر به سیستم‌عامل مشخص یا ارسال فایل وابسته باشند.

چرا برای طراحی UI UX محبوب شد؟

همکاری هم‌زمان

چند نفر می‌توانند یک فایل را ببینند و ویرایش کنند. کامنت کنار همان بخش طراحی قرار می‌گیرد و زمینهٔ بازخورد گم نمی‌شود. این ویژگی برای تیم‌های دورکار و چندوظیفه‌ای اهمیت زیادی دارد.

Auto Layout

Auto Layout کمک می‌کند اجزا با تغییر متن، اندازه یا تعداد آیتم‌ها رفتار منطقی داشته باشند. به جای جای‌گذاری دستی، رابطهٔ فاصله، جهت و کشش تعریف می‌شود. این قابلیت طراحی را به منطق اجرای واقعی نزدیک‌تر می‌کند.

Component و Variant

یک دکمه یا کارت را به‌صورت جزء قابل استفادهٔ مجدد می‌سازیم و حالت‌های آن را تعریف می‌کنیم. وقتی جزء اصلی به‌روزرسانی شود، نمونه‌ها هم هماهنگ می‌مانند. Variant وضعیت‌هایی مثل اندازه، نوع و حالت را در یک مجموعه سازمان می‌دهد.

Variable و سیستم طراحی

رنگ، فاصله، اندازه و حتی حالت‌های theme می‌توانند با متغیر مدیریت شوند. کتابخانهٔ مشترک به تیم اجازه می‌دهد به‌جای ساختن دوباره، از اجزای تأییدشده استفاده کند و تغییر را در مقیاس کنترل کند.

Prototype

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

فیگما فقط ابزار طراح نیست

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

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

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

برای شروع فیگما چه چیزهایی را یاد بگیریم؟

ترتیب پیشنهادی من این است:

  1. Frame، Layer، Shape و Text؛
  2. تراز، فاصله و Grid؛
  3. Auto Layout و رفتار اندازه؛
  4. Component، Instance و Variant؛
  5. Style و Variable؛
  6. Prototype و حالت‌های تعامل؛
  7. Library، Comment و آماده‌سازی برای توسعه.

هر بخش را با پروژه یاد بگیرید. یک فرم ثبت‌نام بسازید که پیام خطا و loading دارد. یک کارت با متن کوتاه و بلند امتحان کنید. یک نوار ناوبری برای موبایل و دسکتاپ طراحی کنید. مشکل واقعی باعث می‌شود قابلیت را بفهمید، نه فقط محل دکمه را حفظ کنید.

قابلیت‌های هوش مصنوعی فیگما در ۲۰۲۶

فیگما در ۲۰۲۶ عامل طراحی را به بوم اضافه کرده است؛ ابزاری که می‌تواند با زمینهٔ فایل و سیستم طراحی، جهت‌های تازه بسازد یا ویرایش‌های گروهی انجام دهد. Figma Make هم نمونه‌های code-backed را از prompt و طراحی شکل می‌دهد و اتصال کد و canvas پررنگ‌تر شده است.

گزارش رسمی ۲۰۲۶ فیگما می‌گوید استفاده از AI همکاری میان نقش‌ها را بیشتر کرده و طراحان و توسعه‌دهندگان بیش از قبل وارد فضای کاری یکدیگر شده‌اند. اما خود گزارش روی نکتهٔ مهمی تأکید دارد: وقتی ساختن آسان‌تر می‌شود، تشخیص اینکه چه چیزی ارزش ساختن دارد مهم‌تر است.

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

محدودیت‌های فیگما

فیگما محصول نهایی نیست. پروتوتایپ ممکن است تعامل را قانع‌کننده نشان دهد، اما محدودیت داده، عملکرد، دسترس‌پذیری و edge caseهای اجرا را کامل پوشش نمی‌دهد. طراحی باید در محصول واقعی هم بررسی شود.

وابستگی به اینترنت و حساب، محدودیت پلن‌ها و مدیریت دسترسی برای کاربران ایرانی هم می‌تواند چالش باشد. بهتر است فایل‌های مهم، exportهای ضروری و سیاست دسترسی تیم مدیریت شوند.

پلاگین زیاد هم لزوماً بهره‌وری را بالا نمی‌برد. هر ابزار تازه هزینهٔ یادگیری و وابستگی دارد. اول مسئله را بشناسید و فقط وقتی کار تکراری یا نیاز مشخص دارید پلاگین اضافه کنید.

اشتباه‌های رایج تازه‌کارها در فیگما

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

اگر Auto Layout می‌دانید ولی نمی‌توانید سلسله‌مراتب درست بسازید، ابزار مسئله را حل نمی‌کند. اگر Prototype چشمگیر است اما کاربر دکمهٔ اصلی را پیدا نمی‌کند، حرکت‌ها ارزش کمی دارند.

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

آیا فیگما رایگان است؟

فیگما پلن رایگان با امکانات پایه دارد و پلن‌های پولی برای تیم، کتابخانه، Dev Mode و قابلیت‌های گسترده‌تر ارائه می‌شوند. جزئیات پلن‌ها تغییر می‌کند و باید از صفحهٔ رسمی قیمت بررسی شود.

آیا فیگما جای Adobe XD را گرفته است؟

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

آیا با یادگیری فیگما طراح UI UX می‌شویم؟

نه. فیگما ابزار اجرای طراحی است. اصول بصری، تجربه کاربری، تحقیق، تست و حل مسئله مهارت‌های جدا و ضروری‌اند.

جمع‌بندی من

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

اما کیفیت کار هنوز از تصمیم طراح می‌آید. ابزار می‌تواند فاصله را دقیق کند، component را تکثیر کند و حتی نسخهٔ تازه بسازد؛ نمی‌تواند به‌تنهایی تشخیص دهد مسئلهٔ کاربر چیست و کدام trade-off برای محصول درست است. فیگما را عمیق یاد بگیرید، ولی اجازه ندهید یادگیری ابزار جای طراحی را بگیرد.

نوشتهٔ محمد عبدی، طراح محصول و تجربهٔ کاربری.

منابع و مطالعهٔ بیشتر