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

در این جلسه قصد داریم 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.2/5 - (21 امتیاز)

62 پاسخ

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

    1. درود بر شما، وقت بخیر
      باید به جای ساختن boolian برای نمایش یا عدم نمایش آیکن، از حالت واریانت جدید استفاده کنیم که 3 حالت را پوشش بدهد. سمت راست، سمت چپ و مخفی بودن. چون boolian صرفاً دو حالت را پوشش می‌دهد.

      موفق باشید.

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

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

    1. درود بر شما. وقت بخیر
      بنده خودم شخصاً قیمه قیمه شدم تا این قسمت رو یاد بگیرم. یکم سخت است و قبول دارم. اما باید یک ویدئو خوب پیدا کنیم. بیفتیم به جانش و چندین بار ببینیم و تمرین کنیم. انقدر انجامش بدهیم تا یاد بگیریم. دقیقا مثل فرمول‌های ریاضی. دلیل اینکه کمی مثال رو در این جلسه پیچیده کردم همین است. باید پارامترهای (واریانت‌های) مختلفی داشته باشد که یادگیری شکل بگیرد. اگر خیلی ساده باشد عملکرد آنها خوب درک نمی‌شود.

      موفق باشید.

  4. سلام استاد امیدوارم که تندرست باشید
    من وقتی میخوام سایز medium که همون 48 هست رو اعمال کنم روی دکمه ها با وجود اعمال تنظیمات گفته شده در ویدیو، دکمه ها داخل هم میرن از عرض و هرکاری میکنم درست نمیشن. اسکرینش رو براتون میزارم ممنون میشم چک کنید.

    1. درود بر شما. وقت بخیر
      اسکرین‌شات رو دیدم. کلا فیگما برای سورت کردن داخل گزینه‌های واریانت یکم باگ داره به نظرم. با تعداد کمتری گزینه‌ها رو select کنید اون موقع اعدادش میاد و میشه تنظیم کرد. من خودم برای اینکه این اتفاق نیفته قبل از اینکه سایزها رو بزرگ کنم (مثلا با زیاد شدن پدینگ و ارتفاع که باعث بزرگ شدن سایز دکمه‌ها می‌شوند) میام قبلش کلا فواصل دکمه هارو یکم بیشتر می‌کنم که توی یکدیگر نروند. در واقع داخل ویدئو هم، چنین کاری رو انجام دادم.

      موفق باشید.

  5. سلام وقتتون به خیر، توی آپدیت جدید فیگما، چطور میتونم instance swap رو برای تغییرات آیکون ایجاد کنم؟
    خیلی لطف می‌کنید.

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

      موفق باشید.

  6. عرض احترام خدمت شما
    شما فرمودید که padding در ساخت دکمه ها ، باید بالا و پایین نصف چپ و راست باشد اما در سایز small این را رعایت نکردید ایا دلیل خاصی دارد یا صرفاً برای زیبایی این کار را انجام دادید.

    1. درود بر شما. وقت بخیر
      تبریک می‌گویم به خاطر دقت شما. همینطور هست. قاعدتاً مقدار پدینگ چپ و راست باید 2 برابر بالا و پائین باشد. اما قوانین طراحی در عین حال که نظم می‌طلبد، استثناء هم دارد. دقیقاً مانند قوانین راهنمایی و رانندگی که مثلا ممکن است مامورین از خط ویژه اتوبوس برای کمتر کردن حجم ترافیک استفاده کنند. در طراحی هم گاهی این استثناءها رخ می‌دهد.

      موفق باشید.

  7. سلام من با sticky یه ایکن سبد خرید درست کردم ولی منوی بالای صفحه که fix هست میاد رو ایکن موقعی که صفحه رو پایین میارم چیکار کنم؟

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

      موفق باشید.

  8. سلام استاد وقتتون بخیر باشه
    برای من Properties و Variant نشون نمیده گزینه اش رو چیکار کنم؟؟

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

      ارادتمندم. موفق باشید.

  9. سلام استاد خسته نباشید
    باز هم تشکر از آموزش های مفید شما که واقعا آموزنده هست.
    یک سوال داشتم برای دسته کامپوننت های سایز small که در ویدیو آموزش دادین بهتر نیست پدینگ رو 24 و 12 بزاریم به جای 24 و 16؟ که اون نسبت دو برابر که فرمودین حفظ بشه؟

    1. درود بر شما. وقت شما بخیر.
      سپاسگزارم از شما. بله درست فرمودید. البته چون ارتفاع دکمه نیز به صورت دستی از مقادیر نسبت 8 مانند 24 و 32 و 40 و 48 و… استفاده می‌شود، عملا این مشکل برخی مواقع به این صورت نیز برطرف می‌شود.

      موفق باشید.

  10. سلام
    وقتی سایز آیکن و متن داخل دکمه رو کوچک میکنم اندازه دکمه هم کوچک میشود.
    چجوری این مشکل حل میشه؟

    1. درود بر شما. وقت بخیر
      ببینید این مشکل به حساب نمی‌آید. چون اندازه‌ها کوچکتر می‌شوند، عملا باعث می‌شوند فضای کمتری اشغال بشود. چون شما آن دکمه را Autolayout کردید که البته کار درستی هم کردید. پس پدینگ و مارجین اطراف دکمه، وابسته هستند به محتواهای داخل آن دکمه. پس اگر آیکن و متن دکمه کوچکتر یا بزرگتر بشود، سایز کلی دکمه هم تغییر می‌کند. برای اینکه موقع طراحی مشکل ساز نشود، از سایزهای مشخصی برای ارتفاع استفاده می‌شود. یعنی مان 32 و 40 و 48 و 56 و 64 و…

      موفق باشید.

  11. سلام
    زمانی که میخوام واریانت سایز رو درست کنم وقتی ارتفاع رو تغییر میدم سایز دکمه ها تغییر میکنه ولی متن و آیکن ثابت میمونه و اندازشون هیچ تغییری نداره.
    لطفا راهنمایی کنید.

    1. درود بر شما. وقت بخیر
      درست می فرمائید. همینطوره. در واقع قرار نیست همیشه سایز آیکن و متن را تغییر بدهیم. مثلا وقتی فونت 14 پیکسل هست و ارتفاع 32 پیکسلی قرار است بشود 40 پیکسل، لزوماً احتیاجی نیست که سایز آیکن و متن را هم عوض بکنیم. اما اگر این ارتفاع و پدینگ و مارجین بیشتر بشود، مثلا فرض کنید که 56 یا 64 پیکسل بشود، آنجا این موضوعی که فرمودید می‌تواند رخ بدهد و مثبت است. انجامش هم ساده هست. آنها را Select می‌کنیم و سایزشان را بزرگ‌تر می‌کنیم.

      موفق باشید.

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

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

      موفق باشید.

  13. سلام استاد وقتتون بخیر
    ضمن تشکر از زحمات شما به خاطر شیوه عالی تدریستون و دوره‌ای که به صورت رایگان در اختیار ما قرار دادید.
    در ویدیوی آموزشی، گفته بودید که مثلا برای ایجاد دکمه padding از دو طرف رو ۱۶ و از بالا و پایین رو ۸ قرار بدیم. ولی وقتی این مقادیر رو وارد می‌کنم، دکمه من خیلی کوچک به نظر می‌رسه و شبیه به چیزی که در ویدیو نشان داده شده نیست. ممکنه به خاطر تنظیمات صفحه یا تفاوت‌های مقیاسی باشه؟ ممنون می‌شم راهنمایی کنید

    1. درود بر شما. وقت شما بخیر
      ممکن است سایز فونت شما و یا آیکن کنار شما و یا حتی هر دوی آنها خیلی کوچک شده باشند. سایز آیکن رو بنده روی 16 و سایز فونت را هم روی 14 گذاشته بودم. ضمن اینکه تنظیمات تایپوگرافی را نیز طبیعتاً در جلسات قبلی اجرا کرده بودم. این موارد را نیز بررسی بفرمائید.

      موفق باشید.

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

      موفق باشید.

  14. سلام استاد
    وقت بخیر و ممنون بابت آموزش عالیتون
    یه سوال دارم برای قسمت سایز بندی وقتی که میخوام سایز small رو ایجاد کنم pading رو در قسمت frame نمایش نمیدهد در صورتی که اگه همه رو انتخاب نکنم فقط چند تا کامپوننت باشه نشون میده نمیشه فاصله همه کامپوننت هارو با هم عوض کنم

    1. درود بر شما. وقت بخیر.

      درست می فرمائید. کلا این حالا Autosize فیگما خیلی خوبه. اما داخل واریانت‌ها (خصوصا زمانی که تعداد بالاست) گاهی دقیق کار نمیکنه. بنابراین با تعداد کمتر انتخاب کنید و فواصل بین شون رو مرتب کنید. (منظور من فواصل بین دکمه ها هست).
      موفق باشید.

  15. استاد وقتی این کامپوننت هارو میسازیم باید ان را کپی و در صفحه uikit ‌به صورت دستی paste ‌کنیم؟ منظورم اینه بعدا از کجا و چطوری ازشون استفاده کنیم؟ چون دیدم شما توی صفحه ukit خودتون نمونه کامپوننت زیادی دارید ولی برای من خالی میمونه… من خیلی سوال دارم و گیج شدم

    1. درود بر شما. وقت شما بخیر
      کلا بهتره که کامپوننت‌ها را در یک صفحه مثلا با نام uikits بسازید. اینطوری همه کامپوننت‌ها یکجا هستند و خیلی سریع می‌توانیم آنها را پیدا و ویرایش کنیم. حتی اگر در صفحه دیگر هم بود می‌توانیم Cut کنیم و در این صفحه Paste کنیم.

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

  16. یه سوال دیگه استاد
    من از کجا میتونم اون button table ‌رو با اون استایل های state size…. پیدا کنم بذارم کنار کامپوننتی که امروز ساختمش
    من اون متن اماده ای که از روی اون ساختید رو ندارم متاسفانه .

    1. درود بر شما. وقت بخیر
      فایل آماده پروژه توی کامیونیتی فیگما هست. اگر دوست داشتید بردارید. در گوگل یا خود کامیونیتی فیگما سرچ کنید pooya creative agency

      موفق باشید.

  17. سلام استاد خسته نباشید
    شما فرمودید میتونیم مثلا از این دکمه در قسمت سبد خرید استفاده کنیم و وقتی کارفرما خواست رنگ همشون سبز بشه روی دکمه ی مادر این کار رو انجام بدیم در قسمت uikit. تا روی همه اعمال شه درسته؟ خب مثلا در جایی دیگه از همین دکمه برای 20تا دکمه ی سطل زباله هم استفاده کردیم و بخواهیم مثلا رنگ آن دکمه ی سطل زباله رو نارنجی کنیم. اونوقت دکمه های سبد خرید که قرمز بود هم نارنجی نمیشن؟(یا باید برای سطل زباله با رنگ نارنجی هم جدا کامپوننت بسازیم؟ )
    من توی نحوه و کاربرد استفاده ازش مشکل دارم. یعنی چطوری میتونم از همین یدونه دکمه داشبورد که الان با تمام خصوصیات و استایل هاش ساختیم هم در بخش مثلا 50 تایی سبد خرید با رنگ سبز به صورت جداگانه استفاده کنم و هم مثلا برای 30 تا دکمه سطل زباله ازش استفاده کنیم که تغییر روی هرکدوم ختلالی روی هم نذارن

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

      موفق باشید.

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

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

      موفق باشید.

  19. سلام استاد. چطور موقعی که جدول رو که با نگهداری دکمه های alt+shift+arrowkey جابجا میکنیم، دقیقا به فاصله های constraint ای که میخواهیم برسیم؟ مثلا من میخواستم بالا و چپ هر دو 32 باشند ولی یکی32 میشد و دیگری 30. جطور باید بهش عدد داد غیر از جابجاییِ دستی؟

    1. درود بر شما. عرض ادب
      فواصل بین آیتم‌ها را نشان می‌دهد وقتی روی حالت Tidy Up باشد. (شاید منظورتان را خوب متوجه نشده باشم اما زیر مقادیر width و height مقادیر را می‌شناسد و سریع می‌توان تغییر داد با کیبورد و یا با ماوس).

      موفق باشید.

  20. سلام ببخشید استاد یاد گرفتن فیگما برای کسی که با وردپرس و المنتورپرو سروکار داره، میتونه کارایی داشته باشه؟ میتونیم بعضی قسمت ها رو با المنتورپرو بسازیم و بعضی بخش ها مثل اسلاید ها رو با فیگما ساخت؟

    1. درود بر شما. وقت بخیر
      به شدت! چون خیلی از افراد هستند که برنامه‌نویسی بلدند، موضوعات امنیت و سرعت سایت را خوب می‌دانند. به مسائل سرور و شبکه (دست‌کم مواردی که در وردپرس مورد نیاز هست) تسلط دارند. اما اگر موضوعات uiux رو نشناسند نمی‌توانند سایت خوبی طراحی کنند. بنابراین خیلی می‌تواند کمک‌کننده باشد. این کار باعث می‌شود پروژه‌های وردپرسی پردرآمدی را بدست بیاوریم.

      موفق باشید.

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

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

      اگر منظور این هست که “آیا می‌شود بخشی از طرح فیگما را در وردپرس پیاده سازی کرد؟” اگر سوال این هست باید بگویم که بله می‌شود. فقط باید قبلش با کارفرما هماهنگ بود که در صورت رضایت کارفرما، پیش برود.
      موفق باشید.

  22. استاد من سوالی دارم
    توی این قسمت از درس به اونجا رسیدم که
    state-style-radius ایجاد شده. حالا میخوام سایز رو ایجاد کنم
    ایکس اسمال رو روی همون اولی اعمال می کنم اما درینجای ویدیو شما همه ی محتوای داخل button رو انتخاب و فاطله هارو بیشتر می کنید اما برای من padding و margin توی این بخش نمیاد که این کارو انجام بدم
    کپی هم که میگیرم برای ساخت دکمه small چون ابعاد بزرگتر میشه دکمه ها با هم تداخل پیدا میکنن
    علتش چی هست که padding و margin برام نمیاد

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

      موفق باشید.

  23. سلام و عرض خسته نباشید
    پیشنهاد شما استفاده از یوآی کیت آماده هست یا صفر تا صد رو خودمون بسازیم؟

    1. درود بر شما. وقت شما بخیر

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

      موفق باشید.

  24. با سلام چرا وقتی instance swap رو میسازم اون گزینه ای که ایکون رو میخام بهش ارجاع بدم ندارم؟
    یا حتی مث روش دوم شما اول ایکون رو انتخاب میکنم و بعد میخام instance swap بازم گزینه‌ای ندارم.
    —–
    جواب سوالم رو پیدا کردم. آیکنی که داخل دکمه گذاشته بودم و آیکنی که انتخاب کرده بودم با هم متفاوت بود.

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

      موفق باشید.

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

    1. درود بر شما. وقت شما بخیر

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

      موفق باشید.

  26. من شاید ۲۰ تا فیلم راجب ب دکمه ها و کامپوننت ها دیدم ولی هیچکدام به این خوبی توضیح نداده بودن واقعا لذت بردم از توضیحتون ، تشکرررر

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

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

    2. سلام وقت بخیر.
      من وقتی دکمه هارو برای واریانت ها درست کردم سایز دکمه اصلا تراز نیست و بهم میریزه
      میشه یه سایز دقیقی بهم بگید تا بهتر بشه، و چیز دیگه که هست برای برخی از دکمه ها radius اعمال نمیشد

    3. درود بر شما. وقت بخیر

      به طور کل، برای دکمه ها ارتفاع دستی با نسبت 8 وارد می کنند. یعنی 32 و 40 و 48 و 56 و 64 و…
      برای عرض هم با توجه به پدینگ و اندازه فونتی که می دهیم، سایز مناسب بدست می آید. (فواصل چپ و راست در پدینگ باید دو برابر فواصل پائین و بالا باشد). برای سهولت بیشتر پیشنهاد می‌کنم فایل پروژه که در کامیونیتی فیگما هست را مشاهده بفرمائید. برای این منظور، داخل گوگل pooya creative agency را جستجو کنید و در فیگما آنرا باز کرده و دکمه های آنرا ببینید. برای radius نیز، باز در همین فایل، واریانت radius را بررسی کنید (طراحی شده اش را گذاشتم). مقدار radius هم 0 و 4 و 8 و… هستند.

      اگر نمونه دیگری هم مدنظر داشتید ببینید مقدار Tida Buttons را در کامیونیتی فیگما یا گوگل سرچ کنید (هم فارسی و انگلیسی هست فایل آن).
      موفق باشید.

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

    1. درود بر شما. وقت بخیر
      لزوما در همه uikit هایی که برای دکمه‌ها ساخته می‌شود، سایز دکمه تغییر نمی‌کند.
      در برخی تغییر می‌کند و در برخی نیز ثابت هست. مثلا برای همان uikit دکمه که ما ساختیم، دست کم برای 3 سایز کوچکتر، نیازی به تغییر سایز نیست. اما بزرگ‌ترین سایز از نظر فواصل را می‌توان به جای 14 مثلا از 16 استفاده کرد. (باید دقت کنیم که ارتفاع ترجیحاً از حالت زود و نسبت 8 هم خارج نشود و اشکالی ندارد که ارتفاع دکمه به جای Hug روی حالت Fixed باشد).

      موفق باشید.

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

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

      موفق باشید.

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

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

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

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