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

فیگما چیست؟ Figma و قدرت طراحی آن

توسط مینا میرزایی درنرم‌افزار

فیگما یک ابزار طراحی بر اساس فضای ابری (Cloud) است که در عملکرد و ویژگی ها مشابه اسکچ است، اما با تفاوت هایی که فیگما را برای همکاری تیمی بهتر می کند. برای کسانی که به این ادعا شک دارند، ما توضیح خواهیم داد که چگونه فیگما فرایند طراحی را ساده تر می­کند و از برنامه های دیگر در کمک به طراحان و تیم ها برای همکاری کارآمد موثر تر است.

بیاید یک نگاه دقیق تر داشته باشیم.

طراحی با فیگما

اجرای فیگما روی هر سیستم عاملی

فیگما روی هر سیستم عاملی که بتواند یک مرورگر وب را اجرا کند، قابل استفاده است.  Mac، Windows ، Linux و حتی Chromebookها می توانند از فیگما استفاده کنند. این تنها ابزار طراحی در نوع خودش هست که همچین قابلیتی را دارد و در مکان هایی که از سخت افزارهایی با سیستم عامل های مختلف استفاده می کنند همگی می توانند فایل های فیگما را به اشتراک بگذارند، باز کنند و ویرایش کنند.

در بسیاری از سازمان ها، طراحان از Mac و برنامه نویسان از Windows استفاده می کنند. فیگما برای گردآوری این دو گروه کنار هم کمک می کند. ماهیت ماهیت فراگیری فیگما همچنین از آزار دهندگی PNG-pong (زمانی که تصاویر آپدیت شده مداوم بین تیم طراحی جابه جا می شود)جلوگیری میکند.

در فیگما برای در دسترس قرار دادن کار طراحی نیازی به مکانیزم واسطه ای نیست.

همکاری در فیگما ساده و آشناست

چون فیگما مبتنی بر مرورگر کار می کند، تیم ما میتواند همچون Google Docs با هم هکاری داشته باشند. افرادی که در حال مشاهده و ویرایش یک فایل هستند در قسمت بالای برنامه به شکل یک تصویر دایره ای نشان داده شده اند. هر فرد یک مکان نما (Cursor) به نام خود نیز دارد بنابراین پیگیری کارهایی که هر کسی انجام می دهد آسان است. با کلیک بر تصویر شخص دیگر روی چیزی که او مشاهده می کند زوم می شود.

همکاری هم زمان روی ی فایل به کاهش “Design Drift” (کاهش پیشروی بدون برنامه ی طراحی) – که به معنی برداشت اشتباه یا منحرف شدن از یک طراحی توافق شده است- معمولا زمانی رخ می دهد که یک ایده به ذهن خطور می کند و سریعا اجرا می شود در حالی که یک پروژه در حال انجام است. متاسفانه، این مسئله اغلب به انحراف از طرح شروع شده و کار مجدد منجر می شود.

با استفاده از فیگما ، یک تیم لید طراحی می تواند فقط با باز کردن فایل اشتراک گذاشته شده متوجه شود که در هر زمان اعضای تیم چه چیزی را طراحی می کنند. اگر یک طراح به نوعی تعبیر اشتباهی از داستان سیر کاربر داشته باشد، این ویژگی به رهبر تیم این اجازه را می دهد که مداخله کند، مسیر را درست کند و ساعت های یی شماری را که ممکن بود هدر برود ذخیره کند.( در مقابل، تیم هایی که از اسکچ استفاده می کنند هیچ راه سریعی برای اینکه به طراحان بگویند که راه را اشتباه می روند یا خیر وجود ندارد.)

نکته ی جانبی: برخی از طراحان دوست ندارند هنگام کار بر کارشان نظارت شود. بنابراین این بر عهده رهبر تیم است تا منافع این کار را توضیح دهد. به طور کلی، اکثر طراحان سریعا متوجه ارزش این ویژگی می شوند و به راحتی با  کار در یک محیط اشتراک گذاری سازگار می شوند.

ارتباط بین تیمی با اسلک (Slack) در فیگما

فیگما از  اسلک به عنوان کانال ارتباطی خود استفاه می کند. هنگامی که یک کانال فیگما در Slack ساخته می شود هر نظری یا ویرایش طرحی که در فیگما بوجود آید اصطلاحا برای تیم “Slacked” می شود.

این عملکرد هنگام طراحی به طور زنده (Live) بسیار مهم است. زیرا تغییرات در یک فایل فیگما باعث به روز رسانی در هرنمونه ی دیگری که در آن پرونده تعبیه شده است می شود. تغییرات در یک mockup بلافاصله در حالی که کانال بازخورد به طور زنده در حال کار است چک می شوند.

اشتراک گذاری آسان در فیگما

فیگما همچنین اجازه ی اشتراک گذاری هر فایل، صفحه یا قاب (که در سایر ابزارهای طراحی آرت بورد (artboard) نامیده می شود) براساس مجوزها را می دهد. زمانی که پیوند اشتراک گذاری در یک قاب در یک صفحه ایجاد می شود، فردی که روی آن لینک کلیک می کند یک نسخه از فیگما را روی مرورگر باز می کند و یک نمای بزرگ شده از قاب بارگیری می شود.

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

امکان آپدیت سریع

فیگما همچنین کد های کوچک جاگذاری را برای چسباندن یک iframe به ابزار های شخص ثالث به طور زنده به اشتراک می گذارد. برای مثال اگر از confluence برای نمایش فایل های mockup جاگذاری شده استفاده شود، آن فایل ها با ذخیره کردن فایل فیگما به روز رسانی نمی شوند؛ آن فایل های جاگذاری شده خود فایل فیگما هستند.

اگر تغییری در mockup توسط هرشخصی در فیگما ایجاد شود، آن تغییر به صورت زنده در mockup Confluence. جاگذاری شده و دیده می شود.

تاثیر این ویژگی در فرآیند تجربه کاربری در نمودار زیر نشان داده شده است:

قبل از فیگما :

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

بعداز فیگما :

ابزارهای شخص ثالث دیگر ضروری و لازم نیستند(اما درصورت تمایل می توان از آن ها استفاده کرد). از آنجا که فیگما عملکرد ابزارهای شخص ثالث را که قبلا توضیح داده شده است، برعهده دارد، فقط یک مرحله در این فرآیند وجود دارد. حرکت از طرح ها به فیگما ، در نتیجه همه گروه ها آخرین mockup ها را دارند. هیچ واکنشی به معنای دقیق کلمه وجود ندارد.

دریافت فوق‌العاده فیدبک در فیگما

فیگما در هردوحالت طراحی و پروتوتایپ از اظهار نظر و کامنت گذاشتن پشتیبانی می کند و موضوع مورد نظر در Slack ویا در ایمیل ردیابی و بررسی می شود. برای دریافت بازخورد از تیم با استفاده از ابزار شخص ثالث مانند InVision یا  Marvel نیازی به انتشار پرونده های PNG یا انجام به روز رسانی مداوم نیست.

درحین بررسی طراحی، طراحان تیم می توانند درمورد کار خود در یک صفحه نمایش بزرگ بحث کنند، نظرات را ضبط کنندو مشکلات را در فیگما حل کنند. این فرم بازخورد به صورت زنده با اسکچ امکان پذیر نیست که برای دریافت ورودی تیم نیاز به بارگذاری در سرویس فضای ابری دارد.

Handoff یا تحویل آسان کار در فیگما

فیگما قطعه های کد را در هر قالب یا موضوع انتخاب شده در فرمت های CSS ، iOS  یا Android برای برنامه نویسان نمایش می دهد تا هنگام بررسی یک فایل طراحی از آن ها استفاده کنند. مولفه های طراحی توسط هر توسعه دهنده در هر فایلی که می توانند مشاهده کنند، قابل بازرسی است. برای بدست آوردن اطلاعات نیازی به استفاده از ابزار شخص ثالث نیست. با این وجود، اگر تیم ها چیزی  بیش از اندازه گیری ساده و نمایش css بخواهند انجام دهند، فیگما با Zeplin هماهنگی کامل دارد.

آنلاین بودن فایل‌ها و پروژه‌های فیگما

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

  • پروژه ای را برای ویژگی زمینه ایجاد کنید.
  • یک فایل را برای یک ویژگی بزرگ بسازید.
  • صفحات را در آن فایل برای هر داستان و روند کاربر بسازید.

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

API‌های فیگما

امروزه فیگما دارای  API های توسعه دهنده است تا ادغام درست را با هر برنامه مبتنی بر مرورگر را فراهم کند. شرکت ها از این قابلیت استفاده می کنند تا فایل های طراحی را در برنامه هایشان در نمایش همزمان یکی کنند. به طور مثال، Uber دارای صفحه نمایش های بزرگی است که فایل های طراحی را “live on air” در اطراف شرکت خود نمایش می دهند. طرح ها به اشتراک گذاشته می شوند و از بازخورد هر کسی در این شرکت استقبال می شود.

نرم افزار Atlassian’s JIRA دارای افزونه ی Figma است. بنابراین صاحبان محصول ، توسعه دهندگان و مهندسین کیفیت همیشه در حال مشاهده ی آخرین نسخه از هر گونه mockup از طراحان هستند.

علاوه براین، API های فیگما درخواست های مشتری ها را برای افزونه های شخص ثالث و ویژگی ها پیشرفته ای که اسکچ قبلا ارائه داده است ، انجام می دهند.

ورژن بندی در فیگما

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

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

پروتوتایپ در فیگما

درحالی که اسکچ اخیرا قابلیت پروتوتایپ ساختن را از یک آرت بورد به آرت بورد دیگر را اضافه کرده است، فیگما با ارائه ی transition بین فریم ها، فراتر رفته است. ویژگی پروتوتایپ ساختن ساده فیگما ، نیاز به ابزار دیگری که پروتوتایپ ساختن به شکل اسلایدها مانند InVision یا Marvel را انجام می دهد را از بین می برد. وقتی همه آنچه مورد نیاز است یک ارائه ی ساده با transition است، نیازی به ارسال فایل برای تجدید نظر با ابزارهای دیگر نیست.

پروتوتایپ های فیگما دقیقا می توانند مانند فایل های طراحی فیگما توزیع شوند. هرکس توسط یه لینک می تواند پروتوتایپ را مشاهده کند و کامنت بگذارد و دوباره، این بازخورد در پنل نظرات ابزار و در Slack ضبط می شوند. توسعه دهندگان می توانند جریان یک طرح را ببینند و نظرات مستقیم برای طراحان بگذارند و اندازه ها و ویژگی های CSSرا از داخل پروتوتایپ دریافت کند.

لایبریری‌های آماده فیگما

سیستم های طراحی برای بسیاری از شرکت ها به یک ضرورت تبدیل شده اند و نیاز به مولفه هایی(نمادها در اسکچ و illustrator) با قابلیت استفاده ی مجدد، مقیاس پذیر و برای استفاده در کتابخانه ی الگوی (pattern) موجود در دسترس طراحان UX و توسعه دهندگان فرانت اند وجود دارد.

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

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

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

کار تیمی با فیگما

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

استفاده از  فیگما برای هرکسی آسان است و روی هر سیستم عاملی قابلیت  امکان استفاده آن وجود دارد و به تیم ها اجازه می دهد تا کار و کتابخانه خود را به سرعت به اشتراک بگذارند.

کارشناسان طراحی که از بعد از استفاده از اسکچ به فیگما سوییچ کردند (فایل های اسکچ عینا به فیگما می توانند منتقل شوند) مایوس نیستند:

این ، روشی را که در آن میتوانید با همکاران و مشتریان خود همکاری کنید را کاملا تغییر می دهد.

فیگما بهترین ابزارهای طراحی جهان ui را درچند سال گذشته متحد کرده است.

در سال های گذشته من از فیگما برای فرایند طراحی UI/UX خود استفاده کرده ام و این امر باعث استفاده ی بهتر از ساعت کاری و ذخیره ی آن شده است. این واقعا روند کار طراحی مرا تغییر داده است.

زمانی را که در فیگما سپری می کنم معمولا  لذت بخش ترین و پربار ترین بخش روز من است.

منبع: toptal.com

Figma‌Figma چیست؟Invision StudiosketchSlackاسکچاسلکاینویژنطراحی با فیگمافیگمافیگما چیست؟نرم افزار Figmaنرم افزار طراحی فیگمانرم افزار فیگما
74
لایک این نوشته
12 پست ها
مینا میرزایی
  • روش‌های تفکر (قسمت اول)
    قبلینوشتهروش‌های تفکر (قسمت اول)
  • بعدینوشتهاینویژن استودیو (Invision studio) و کاربردهای آن
    روش‌های تفکر (قسمت اول)

پست های مرتبط

کامپوننت‌ فیگما
نرم‌افزار

کامپوننت‌ فیگما

قدرت فیگما به عنوان یک ابزار طراحی
نرم‌افزار

قدرت فیگما به عنوان یک ابزار طراحی

با این ۷ نکته  در Figma بهترین شوید
نرم‌افزار

با این ۷ نکته در Figma بهترین شوید

1 نظر

  1. محمدرضا نوروزی
    پاسخ
    6 دی 1399

    سلام خسته نباشید
    ببخشید وقتی تو فیگما ابحکتی رو بدیل به کامپوننت می کنن چطور میتونن از قابلیت های variant , property استفاده کنن؟اصلا اینا به چه دردی میخورن؟

    پاسخ
    • محسن نجفی
      پاسخ
      13 دی 1399

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

      پاسخ

دیدگاهتان را بنویسید (لغو پاسخ)

آدرس ایمیل شما منتشر نخواهد شد. فیلدهای مورد نیاز علامت گذاری شده اند *

*
*

نقشه سایت

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

کلاس و کارگاه

  • ورکشاپ تخصصی تجربه کاربری
  • ورکشاپ طراحی تعاملی
  • ورکشاپ گیمیفیکیشن و اینترنت اشیا

در خبرنامه عضو شوید

طراحی رابط کاربری و تجربه کاربری یکی از مهم‌ترین المان‌های ساخت محصولات دیجیتال به حساب می‌آید. طراحی رابط کاربری یا (User Interface (UI، طراحی تجربه کاربری یا (User Experience (UX، طراحی تعاملی و یا اینتراکشن دیزاین (Interaction Design)، گیمیفیکیشن و طراحی گیمیفیکیشن یا Gamification، طراحی انیمیشن و لوتی با افتر اکت نیز از دیگر موارد آن می‌باشند. در ضمن استفاده از IOT و ترکیب آن با گیمیفیکیشن انقلابی در محصولات دیجیتال خواهد بود. در این راستا استفاده از ابزارهای مورد نیاز نظیر فیگما (Figma)، ادوبی اکس‌دی (Adobe XD)، فتوشاپ (Photoshop)، ایلستریتور (IIllustrator)، پرینسیپل (Pricniple) و … نیز از اهمیت بالایی برخوردار خواهد بود.

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

طراحان محصول ایران روشن

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

Copy