دوره‌ طراحی

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

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

بیایید نگاهی دقیق‌تر بیندازیم.

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

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

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

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

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

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

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

همکاری همزمان به کاهش “تغییر مسیر طراحی” (تفسیر غلط یا فاصله گرفتن از یک طرح توافق شده) کمک می کند. تغییر مسیر طراحی معمولاً زمانی اتفاق می افتد که ایده ای تصور شود و در حالی که پروژه  از پیش تعیین شده در جریان است، به سرعت اجرا شود. متأسفانه ، این اغلب منجر به انحراف از طرح تعیین شده، ایجاد اصطکاک و کار دوباره می شود.

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

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

فیگما از اسلک برای ارتباطات بین تیم ها استفاده می کند

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

پروژه های فیگما می توانند از کانال های اسلک برای نظرات در پرونده استفاده کنند.

به اشتراک گذاری انعطاف پذیر در فیگما

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

فیگما پروژه ها، پرونده ها، صفحات و فریم ها را با هر کسی که مجوز داشته باشد، به اشتراک می گذارد.

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

تعبیه فایل های فیگما امکان آپدیت سریع و همزمان را فراهم میکند

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

اگر کسی در فیگما تغییری در موکاپ ایجاد کند ، می توان آن تغییر را به صورت زنده در ماکت تعبیه شده Confluence مشاهده کرد.

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

Figma ابزارهای طراحی UX را بهبود می بخشدفیگما نیازی به برنامه های اختصاصی برای نمونه سازی و اظهار نظر ندارد.

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

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

فیگما برای بررسی بازخورد عالی است

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

. ابزار طراحی UI وب و بازخورد بررسی می شودطراحان می توانند با باز کردن همان پرونده فیگما ، هنگام بررسی نظر دهند.

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

تحویل به توسعه دهنده با استفاده از فیگما تسهیل می شود

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

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

پرونده های پروژه فیگما در یک مکان بصورت آنلاین ساکن هستند

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

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

این فقط یک روش برای سازماندهی پرونده ها است که بسته به نیاز های فرآیند می تواند متفاوت انجام شود.

پرونده های پروژه را می توان به راحتی در یک نمای اختصاصی سازماندهی کرد.

 API فیگما هماهنگی با ابزار شخص ثالث را فراهم می کند

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

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

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

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

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

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

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

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

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

منابع تیم فیگما برای سیستم های طراحی ایده آل هستند

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

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

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

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

فیگما برای بهبود کار تیمی ساخته شده است

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

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

… این، روشی را که می توانید با همکاران و مشتریان خود کار کنید کاملاً دگرگون می کند.

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

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

معمولاً لذت بخش ترین و پربارترین قسمت روزم زمانی است –  که در فیگما میگذرد. فیگما در حال تغییر شکل دادن به کل کار من است و این عالیست!

دانلود فیگما

جهت دانلود فیگما می‌توانید به وب‌سایت اصلی آن یعنی https://figma.com مراجعه نمایید. و توجه داشته باشید که استفاده از نسخه تحت وب آن نیز به سادگی ممکن است.

منبع: toptal.com

آکادمی آژانس طراحی دایره

آموزش طراحی در آژانس طراحی دایره شامل بوت‌کمپ طراحی ۰ تا ۱۰۰، طراحی تجربه کاربری، طراحی تعاملی، طراحی دیزاین سیستم، رنگ و تایپوگرافی و…

به اشتراک‌گذاری در

جستجو