فیگما چیست؟ طراحی UI، پروتوتایپ و تحویل به توسعه

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

جست‌وجوهایی مثل «فیگما چیست»، «آموزش Figma برای UI»، «Auto Layout»، «پروتوتایپ در فیگما» و «Handoff به برنامه‌نویس» از تیمی می‌آید که می‌خواهد قبل از کد، ظاهر و رفتار را ببیند. در این راهنما خود ابزار، دلیل انتخاب تیمی، چیدمان خودکار، نمونهٔ تعاملی و تحویل را جدا می‌کنیم. ساخت فلو تست را در پروتوتایپ چیست عمیق‌تر بخوانید، ساختار صفحه را در وایرفریم، و اجرای طراحی را در خدمات UI/UX روبینش.

Figma is a collaborative web application for interface design, with additional offline features enabled by desktop apps.

فیگما چیست و چه چیزی نیست؟

فیگما محیط طراحی رابط است: فریم به‌جای آرت‌بورد چاپی، کامپوننت به‌جای کپی شکل، و کامنت روی همان نقطهٔ صفحه. فایل در ابر است پس نسخهٔ «نهایی روی دسکتاپ علی» کمتر گم می‌شود. این برای تیم فارسی با کارفرما، طراح و فرانت در شهرهای مختلف عملاً مهم است. فیگما فتوشاپ نیست؛ رتوش عکس و پوستر چاپی کار اصلی‌اش نیست. فیگما IDE نیست؛ فاصله را نشان می‌دهد اما منطق احراز و دیتابیس را اجرا نمی‌کند.

نسخهٔ FigJam برای وایت‌برد و جریان است نه برای UI پیکسلی. قاطی کردن اسکچ جریان با فایل تحویل، جلسه را شلوغ می‌کند. فایل UI باید صفحه، حالت و کامپوننت داشته باشد. فایل جریان باید تصمیم و مسیر داشته باشد. هر دو لازم‌اند؛ یکی جای دیگری را نمی‌گیرد. اگر فقط FigJam دارید هنوز طراحی قابل ساخت ندارید. اگر فقط UI براق دارید هنوز ممکن است مسیر کاربر ناقص باشد.

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

چرا تیم‌ها فیگما می‌خواهند؟

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

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

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

Auto Layout چیست و چرا در UI فارسی مهم است؟

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

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

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

پروتوتایپ در فیگما چه کمکی می‌کند؟

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

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

Handoff در فیگما یعنی چه؟

Handoff یعنی توسعه‌دهنده بفهمد رنگ، فاصله، حالت و استثنا از کجا می‌آید. چک‌لیست تحویل و حالت فرم را در دیزاین هندآف چیست جدا بنویسید؛ اینجا خودِ ابزار فیگما است. Dev Mode و Inspect عدد می‌دهند اما زمینه نمی‌دهند. باید بنویسید کدام فاصله توکن است، کدام استثنای موقت، کدام تصویر صادر می‌شود، و کدام تعامل در اسپرینت اول نیست. لینک فایل به‌تنهایی تحویل نیست. اگر فرانت از قبل کتابخانه دارد، نام‌ها را با همان کتابخانه هم‌خوان کنید. ساختن زبان موازی در فیگما اختلاف را بیشتر می‌کند.

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

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

مجوز و پوشه را از روز اول جدی بگیرید. فایل سازمانی باید در تیم شرکت باشد نه در اکانت شخصی طراح فریلنس که فردا در دسترس نیست. نسخهٔ «کپی برای ایمنی» بدون تاریخ، همان آشوب ایمیل را برمی‌گرداند. شاخه یا صفحهٔ Archive برای ایده‌های ردشده بگذارید تا بوم اسپرینت شلوغ نشود. مهمان کارفرما را Viewer کنید مگر قرار است خودش متن را عوض کند؛ ویرایش همگانی لایه را جابه‌جا می‌کند و تاریخچه را پر از نویز می‌کند.

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

متن فارسی داخل کامپوننت را با دادهٔ واقعی یا نزدیک به واقعی تست کنید. عنوان خدمت پزشکی یا نام محصول فروشگاهی از lorem لاتین بلندتر یا کوتاه‌تر است و تراز را عوض می‌کند. عدد، تومان نمایشی ساختگی در فایل طراحی اگر با سیاست قیمت سایت یکی نباشد، جلسه را به بحث عدد می‌کشاند. در فایل بنویسید «قیمت نمونه است» یا اصلاً عدد نگذارید و به تیم محتوا بسپارید. فیگما جای تعهد تعرفه نیست.

چه وقت فیگما لازم نیست یا زیاد است؟

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

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

چک‌لیست فایل فیگما قبل از اسپرینت

1. نقطهٔ شروع Present و سناریوی تست مشخص است.
2. فریم‌های اسپرینت اول از ایده‌های بعدی جدا برچسب خورده‌اند.
3. دکمه‌ها و فرم‌های تکراری کامپوننت و Auto Layout دارند.
4. حالت خالی، خطا و بارگذاری برای جریان اصلی طراحی شده.
5. نسخهٔ موبایل صفحات کلیدی وجود دارد.
6. نام رنگ و فاصله با توکن یا راهنمای کوتاه آمده.
7. توسعه می‌داند کدام interaction خارج از اسکوپ است.
8. لینک فایل دسترسی درست دارد؛ ویرایش همگانی بی‌دلیل نیست.

جمع‌بندی: بوم مشترک، قاعده، تحویل

فیگما چیست؟ بوم مشترک طراحی رابط با همکاری، Auto Layout، پروتوتایپ و مسیر handoff. جایگزین تحقیق، کد و سیستم کامل نیست. تیم‌ها آن را برای نسخهٔ واحد و گفت‌وگوی سریع می‌خواهند. فایل بدون برچسب و بدون حالت خطا فقط زیبا است.

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