معرفی
فیگما (Figma) یک ابزار ابری برای طراحی رابط کاربری، ساخت نمونه تعاملی و همکاری همزمان روی فایلهای طراحی است. طراحان رابط و تجربه کاربری معمولاً صفحهها، کامپوننتها، سبکهای رنگ و تایپوگرافی، حالتهای مختلف رابط و جریانهای کاربر را در آن نگهداری میکنند.
برای توسعهدهنده فرانتاند، فیگما عمدتاً ابزار خواندن و بررسی طرح است، نه جایگزین مهارت طراحی تجربه کاربری. توسعهدهنده فایل طراحی، فاصلهها، اندازهها، رنگها، حالتهای کامپوننت، رفتار واکنشگرا و داراییهای طراحی (Assets) مانند آیکن و تصویر را بررسی میکند و آنها را به رابط وب تبدیل میکند.
قابلیتهایی مانند Dev Mode میتوانند مشخصات ظاهری لایهها و اطلاعات کامپوننتها را برای تحویل طراحی به توسعه نمایش دهند. دسترسی به Dev Mode، جزئیات قابل مشاهده، کد پیشنهادی و امکان خروجیگرفتن از داراییها به تنظیمات فایل، سطح دسترسی کاربر، پلن تیم و تغییرات محصول فیگما وابسته است. یک دارایی فقط زمانی قابل دریافت است که طراح یا مالک فایل آن را قابل خروجی تعریف کرده باشد و شما نیز دسترسی لازم را داشته باشید.
گردش کار توسعهدهنده فرانتاند با فیگما
- دریافت لینک و نسخه تأییدشده طرح: لینک فایل، صفحه یا Prototype مورد تأیید را از طراح یا مدیر محصول بگیرید. خروجی این مرحله، مرجع واحدی است که نام نسخه، تاریخ تأیید و محدوده صفحههای قابل توسعه در آن روشن باشد.
- بررسی ساختار صفحه و کامپوننتها: صفحهها، بخشها، لایهها و کامپوننتهای مشترک را مرور کنید. گونههای کامپوننت (Variantها)، مانند دکمه فعال، غیرفعال یا دارای بارگذاری، را شناسایی کنید. معیار اتمام، فهرستی از کامپوننتهای قابل استفاده مجدد و صفحههایی است که باید پیادهسازی شوند.
- ثبت اندازههای واکنشگرا و حالتها: breakpointهای طرح، رفتار چیدمان در عرضهای مختلف و حالتهای خالی، خطا، بارگذاری و حالت شناور (Hover) را ثبت کنید. اگر این موارد در فایل نیستند، آنها را حدس نزنید. خروجی باید تصمیم ثبتشده طراح یا مدیر محصول برای هر حالت ضروری باشد.
- بررسی مشخصات و دریافت داراییها: فاصلهها، رنگها، تایپوگرافی، اندازهها و وضعیت لایهها را بخوانید. آیکن، تصویر یا SVG را فقط در صورت قابلخروجیبودن و داشتن دسترسی دریافت کنید. معیار اتمام، فهرست داراییهای نهایی همراه با قالب و محل استفاده هرکدام است.
- ثبت ابهامها پیش از کدنویسی: ابهامهایی مانند متنهای طولانی، رفتار فرم، اعتبارسنجی، ترتیب نمایش در موبایل و وضعیتهای بدون داده را در کامنت فایل یا ابزار پیگیری تیم ثبت کنید. خروجی، پاسخ یا تصمیمی است که مسئول آن مشخص باشد.
- مقایسه پیادهسازی با طرح: پس از توسعه، نسخه اجراشده را در اندازههای توافقشده با طرح مقایسه کنید. تفاوتهای مهم در چیدمان، رنگ، تایپوگرافی، حالتها و واکنشگرایی را ثبت و اصلاح کنید. معیار اتمام، تأیید موارد توافقشده یا ثبت آگاهانه تفاوتهای باقیمانده است.
همکاری در تیمهای محصول ایرانی
الگوی مستند و یکپارچهای برای تحویل طرح در همه تیمهای محصول ایرانی وجود ندارد. هنگام دریافت طرح در هر تیم، بهتر است علاوه بر لینک فیگما، نام صفحههای در محدوده توسعه، breakpointها، متنها و داراییهای نهایی، حالتهای فرم و خطا، رفتار موبایل و مسئول پاسخگویی به ابهامها را مطالبه کنید. این اطلاعات برای هماهنگی توسعهدهنده فرانتاند با طراح رابط و تجربه کاربری و مدیر محصول ضروریتر از صرفاً داشتن یک فایل طراحی است.
خروجی یا کد پیشنهادی فیگما معمولاً جای کدنویسی تمیز، بررسی دسترسپذیری وب، مدیریت حالتها و تطبیق با معماری پروژه را نمیگیرد. فیگما برای توسعه رابط وب، طراحی و نگهداری سیستمهای طراحی، نمونهسازی تعاملی و گفتوگو درباره نیازمندیهای محصول مفید است، اما تصمیم نهایی درباره رفتار محصول باید در همکاری طراح، مدیر محصول و توسعهدهنده گرفته شود.
ویژگیهای کلیدی
موارد زیر تصویری کلی از این بخش برای این ابزار ارائه میکنند.
-
طراحی برداری و رابط مبتنی بر مرورگر
فایلهای طراحی در فضای ابری ذخیره میشوند و اعضای تیم میتوانند بدون ارسال نسخههای متعدد فایل، آنها را در مرورگر یا برنامه دسکتاپ باز کنند.
-
همکاری همزمان
چند نفر میتوانند همزمان روی یک فایل کار کنند، نظر بدهند و تغییرات را ببینند؛ این ویژگی برای بازبینی طراحی میان طراح، محصول و توسعه مفید است.
-
کامپوننتها و کتابخانههای طراحی
کامپوننتهای قابل استفاده مجدد، Variantها و سبکهای مشترک کمک میکنند دکمهها، فرمها و الگوهای رابط در صفحههای مختلف یکدست بمانند.
-
نمونهسازی تعاملی
طراح میتواند اتصال صفحهها، انتقالها و تعاملهای ساده را شبیهسازی کند تا جریان کاربر پیش از پیادهسازی بررسی شود.
-
Dev Mode و بررسی مشخصات طراحی
در صورت فعالبودن Dev Mode و داشتن سطح دسترسی مناسب، توسعهدهنده میتواند ویژگی لایهها، فاصلهها، رنگها، فونتها، اندازهها و وضعیت کامپوننتها را بررسی کند. جزئیات قابل مشاهده و قابلیتهای تحویل طراحی به پلن، تنظیمات فایل و تغییرات فیگما وابستهاند.
-
دریافت داراییهای طراحی
آیکنها، تصاویر و SVGها فقط وقتی قابل دریافتاند که در فایل برای خروجی تنظیم شده باشند و کاربر دسترسی لازم را داشته باشد. قالب و کیفیت خروجی باید پیش از استفاده در پروژه بررسی شود.
-
نظرگذاری و بازخورد در متن فایل
بازخوردها به نقطه یا لایه مشخصی از طرح متصل میشوند؛ بنابراین ابهامهای طراحی نسبت به گفتوگوهای پراکنده در پیامرسانها قابل پیگیریتر هستند.
کاربردها
برای آشنایی بهتر با این ابزار، توجه به موارد زیر میتواند مفید باشد.
-
تحویل طرح به توسعهدهنده فرانتاند
توسعهدهنده لینک و نسخه تأییدشده طرح را دریافت میکند، ساختار صفحه و کامپوننتها را بررسی میکند و breakpointها، حالتهای خطا، بارگذاری و حالت شناور را ثبت میکند. خروجی، فهرست مشخصی از موارد آماده توسعه و ابهامهای باقیمانده است.
-
دریافت داراییهای قابل خروجی
توسعهدهنده مشخصات لایهها را میخواند و فقط آیکنها، تصاویر یا SVGهای قابلخروجی را با دسترسی مناسب دریافت میکند. خروجی، فهرست داراییهای نهایی همراه با قالب و محل استفاده آنها است.
-
ساخت و نگهداری سیستم طراحی
تیم طراحی کامپوننتهای مشترک مانند دکمه، ورودی، کارت و نوار ناوبری را در کتابخانه نگه میدارد تا طراحی و پیادهسازی رابط هماهنگتر شوند.
-
بازبینی جریان کاربر پیش از توسعه
مدیر محصول، طراح و ذینفعان با نمونه تعاملی مسیرهایی مانند ثبتنام، پرداخت یا جستوجو را مرور میکنند و ابهامها را پیش از هزینه توسعه پیدا میکنند.
-
تطبیق رابط پیادهسازیشده با طرح
پس از توسعه، تیم نسخه اجراشده را در اندازههای توافقشده با طرح مقایسه میکند و تفاوتهای مهم در چیدمان، رنگ، حالتهای رابط و واکنشگرایی را اصلاح یا ثبت میکند.
پرسشهای رایج درباره فیگما
اگر درباره این ابزار پرسشی دارید، ممکن است پاسخ آن را در میان موارد زیر پیدا کنید.
آیا توسعهدهنده فرانتاند باید فیگما را مثل طراح یاد بگیرد؟
خیر. توسعهدهنده فرانتاند باید بتواند فایل را بخواند، ساختار صفحه و کامپوننتها را بررسی کند، breakpointها و حالتهای لازم را ثبت کند، داراییهای قابلخروجی را دریافت کند و ابهامها را مطرح کند. ساخت رابطهای پیچیده و تصمیمهای تجربه کاربری معمولاً مسئولیت طراح است.
توسعهدهنده پیش از شروع پیادهسازی چه چیزهایی را از فایل فیگما بررسی کند؟
نسخه تأییدشده طرح، محدوده صفحهها، کامپوننتهای مشترک، اندازههای واکنشگرا، حالتهای بارگذاری و خطا، متنها، داراییهای نهایی و رفتارهای نامشخص را بررسی کنید. کار زمانی آماده شروع است که برای موارد مبهم، پاسخ یا مسئول تصمیم مشخص باشد.
آیا میتوان کد تولیدشده توسط فیگما را مستقیماً در پروژه استفاده کرد؟
معمولاً نه. نمایش یا تولید کد به قابلیت فعال در فایل، سطح دسترسی، پلن و تغییرات محصول فیگما وابسته است. حتی در صورت دسترسی، کد پیشنهادی برای فهم رنگ، فاصله یا ساختار اولیه مفید است، اما اغلب با معماری پروژه، کامپوننتهای موجود، دسترسپذیری و رفتار واقعی رابط هماهنگ نیست.
Dev Mode در فیگما چه کمکی به توسعهدهنده میکند؟
Dev Mode در صورت فعالبودن برای فایل و داشتن دسترسی مناسب، بررسی مشخصات طراحی و تحویل به توسعه را آسانتر میکند. توسعهدهنده میتواند لایهها، فاصلهها، رنگها، فونتها، کامپوننتها و برخی اطلاعات پیادهسازی را مشاهده کند؛ دامنه این اطلاعات به تنظیمات فایل، پلن و نسخه محصول وابسته است.
چرا گاهی نمیتوانم Asset را از فیگما دریافت کنم؟
ممکن است دارایی برای خروجی تنظیم نشده باشد، سطح دسترسی شما کافی نباشد یا قابلیت موردنظر در تنظیمات فایل و پلن تیم در دسترس نباشد. از طراح یا مالک فایل، دارایی نهایی و قالب موردنیاز پروژه را درخواست کنید.
اگر طرح حالت موبایل یا خطا نداشته باشد، چه کار کنم؟
نباید این حالتها را صرفاً حدس بزنید. مواردی مانند اندازههای واکنشگرا، حالت خالی، خطا، بارگذاری، غیرفعال و حالت شناور را بهصورت مشخص با طراح یا مدیر محصول مطرح و تصمیم ثبتشده دریافت کنید.
آموزشهای مرتبط در فرادرس
-
آموزش مقدماتی فیگما، اصول طراحی رابط کاربری UI با Figma + گواهینامه
-
آموزش ساخت کامپوننت در فیگما Figma + نحوه استفاده و مدیریت + گواهینامه
-
آموزش پروتوتایپینگ شرطی در فیگما با متغیرها + پروژه عملی
-
آموزش طراحی وایرفریم با فیگما Figma + پروژه عملی
-
آموزش پلاگین های کاربردی فیگما Figma + گواهینامه
-
آموزش پروژه محور فیگما، طراحی اپلیکیشن فروشگاهی با Figma + گواهینامه
-
دیزاین سیستم چیست و چه کاربردی دارد؟
-
UI چیست؟ | راهنمای جامع آموزش طراحی رابط کاربری