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

در این جلسه قصد داریم component و variant ساختن در فیگما را آموزش دهیم. افزون بر این، آموزش ساخت یک UI Kit کامل دکمه را نیز در این ویدئو، تجربه خواهیم کرد.

قابلیت‌هایی که در نرم افزار فیگما وجود دارد طراحی را آسان‌تر و لذت‌بخش‌تر می‌کند. برای مثال اگر یک پروژه بزرگ طراحی کرده‌اید و سپس کارفرما تغییراتی از شما بخواهد با وجود واریانت و کامپوننت در فیگما این تغییرات در یک چشم بهم زدن انجام می‌شود. در این قسمت از دوره آموزش رایگان ui ux از آژانس نوآوری رسام قصد داریم به Variant در فیگما و هم چنین کامپوننت بپردازیم. پس از شما دعوت می‌کنیم تا پایان این جلسه ما را همراهی کنید.

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

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

تغییرات آسان با  واریانت و کامپوننت در فیگما

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

ساخت Properties و Variant در فیگما

در این ویدیو ما یک کامپوننت دکمه ساختیم. این کامپوننت، 192 حالت مختلف داشت. استیت، استایل، سایز و انحناهای مختلف. برای اینکه بتوانید سویه‌های مختلفی برای کامپوننت خود بسازید، از واریانت استفاده کنید. مانند حالت‌های مختلف رنگ و سایز. البته Properties‌های فیگما، به جز واریانت، 3 مورد دیگر هم دارند که در ویدئو کامل آموزش دادیم. اینجا نیز به آن‌ها اشاره می‌کنیم. دقت کنید که این 3 مورد زیر به همراه واریانت، صرفا زمانی کار می‌کنند که شما یک کامپوننت داشته باشید.

  • مقدار Boolian: دقیقا مشابه برنامه نویسی، حالت 0 و 1 دارد. مثلا یک دکمه، آیکن داشته باشد یا خیر. یک متنی نمایش داده بشود یا خیر.
  • مقدار Text: این مقدار نیز برای تغییر دادن متن داخل یک کامپوننت، به صورت پارامتری به کار می‌رود.
  • مقدار Instance Swap: این مقدار زمانی استفاده می‌شود که شما داخل کامپوننت خود، یک کامپوننت داخلی دیگر نیز داشته باشید. فرض کنید دکمه‌ای که ساختید، به جز اینکه خودش کامپوننت هست، داخلش هم یک آیکن دارد که آن نیز به صورت کامپوننت بوده و کاربر (طراح رابط کاربری) شاید بخواهد آن را نیز تغییر بدهد.
طراحی راحت با قابلیت کامپوننت و واریانت در فیگما

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

طراحی آسان با قابلیت واریانت و کامپوننت در فیگما

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

4.7/5 - (12 امتیاز)

4 پاسخ

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

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

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

      موفق باشید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

متخصصین آژانس نوآوری رسام
فرم درخواست پروژه و مشاوره
تماس با کارشناسان رسام: 09351436045