قابلیت‌هایی که در نرم افزار فیگما وجود دارد طراحی را آسان‌تر و لذت‌بخش‌تر می‌کند. برای مثال اگر یک پروژه بزرگ طراحی کرده‌اید و سپس کارفرما تغییراتی از شما بخواهد با وجود واریانت و کامپوننت در فیگما این تغییرات در یک چشم بهم زدن انجام میشود. در این قسمت از دوره آموزش رایگان 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 وجود دارند. این قابلیت جذاب یعنی کامپوننت در فیگما و واریانت را از دست ندهید و حتی اگر توانستید ویدئو را چند بار ببینید تا به این قابلیت مسلط بشوید. این بخش کمی در قدم اول شاید دشوار به نظر برسد و واقعا نیاز به چند بار تمرین دارد.
طراحی آسان با قابلیت واریانت و کامپوننت در فیگما
اگر از واریانت و کامپوننت در فیگما به درستی استفاده کنید بدون شک موقع تغییرات طرح اذیت نخواهید شد. در این قسمت از دوره طراحی رابط و تجربه کاربری آموزش کامپوننت در فیگما، واریانت و متعلقات مربوط به این دانش مهم را توضیح دادیم. خوشحال می‌شویم تجربیات خود را با ما به اشترک بگذارید. همچنین اگر سوالی در مورد این مبحث داشتید از بخش دیدگاه‌ها، از متخصصین آژانس نوآوری رسام بپرسید. موفق باشید 😍
معرفی منابع و تمرین برای این جلسه
بدون هیچ عذر و بهانه‌ای، یک کامپوننت زیبا بسازید و از دیدن آن لذت ببرید 😎 قبول دارید که فیگما دوست داشتنی است؟ پس خسته نشوید و تمرین کنید. حتما این کامپوننت با جزئیاتش را مطابق با ویدئو بسازید. برای اینکه عذاب وجدان نداشته باشیم بابت عدم معرفی مقاله، یک لینک هم درج میکنیم که بتوانید مقاله مرتبط هم مطالعه کنید.
https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants
163 پاسخ
سلام وقتتون بخیر
یه سوالی داشتم. کامپوننت رپر wrapper میشه تو فیگما ساخت؟ مثلا یه باکسی که با شکل های مختلف و منحنی ها ساخته بشه، کلا این بخش بشه یه کامپوننت و هر بار یه instance ازش میاریم بشه داخلش آیتم گذاشت؟
درود بر شما دوست گرامی، وقت شما بخیر
بله می‌توانیم اصلا کامپوننت‌ها را تو در تو بسازیم. مثلا یک کامپوننت اصلی و بیرونی به نام Wrapper و عناصر داخل آن هم می‌توانند کامپوننت داخلی باشند که آنها هم برای خودشان Property و Value داشته باشند.
موفق باشید.
سلام و تشکر بابت تمام توضیحات و آموزش‌هایتان، من دکمه رو ساختم و بعد کپی ساختم اما متاسفانه تنظیمات state,style و… نمیاد اصلا امکانش هست راهنمایی کنید که مشکل از چیه؟
درود بر شما دوست گرامی، وقت شما بخیر
اتفاقات مختلفی ممکن است رخ داده باشد. رایج‌ترین آن این هست که ممکن است متغیر ساخته باشید اما اعمال نکرده باشید. یا مثلا واریانت ساخته باشید اما State های آن را اختصاص نداده باشید به گزینه‌ها. این موضوع و موضوع Auto Layout در شروع کار کمی سخت هست. بنابراین اگر مایل بودید چند بار ویدئو را مشاهده و در حین آن تمرین کنید.
موفق باشید.
سلام و عرض احترام بخاطر آموزش خوب شما، من سعی کردم همراه با شما تمام واریانت ها رو برای دکمه ها بسازم. مشکلم تو قسمت کپی کردن تعداد بالای عناصر بود که خیلی برای من کند انجام میشد نمیدونم شاید بخاطر سرعت اینترنت بود. اما در کل بنظرم کار خیلی وقت گیری هست. در آخر کامپوننت هایی که در کامیونیتی آماده هستند رو معرفی کردین. بنابراین برای هر پروژه می توانیم از آنها استفاده کنیم و لازم نیست خودمون طراحی کنیم، درسته؟ باید فقط سرچ کنیم که از کدومش استفاده کنیم بهتره؟
درود بر شما دوست گرامی، وقت شما بخیر
اشکالی ندارد که اگر حتی نشده در قدم اول کامل اون رو بسازید. یکم مهلت به خودتان بدهید. این مباحث کمی دشوار هست و مطمئن باشید چند بار دیگر اگر طراحی کنید کامل بهش مسلط می‌شوید. در واقع مباحث این جلسه پیشرفته‌تر هست مقداری. بله شما می‌توانید از دیزاین سیستم آماده و عناصر آماده هم بهره ببرید و هیچ اشکالی هم ندارد. حتی در برخی شرکت‌ها از شما می‌خواهند که مثلا با متریال کار کنید. جلسات دیگر را هم ببینید. من در جلسه دیزاین سیستم گفتم که چطور این کار را انجام بدهیم.
موفق باشید.
سلام. از آموزش و راهنمایی بی دریغتون ممنونم.
یه سوال درباره کامپوننت‌ها دارم. چطور میشه محتوای یک property از یک کامپوننت واریانس شده رو در داخل کار تغییر داد. ببخشید که طولانی میشه اما مجبورم مفصل توضیح بدم که منظورم رو برسونم. من برای تمرین یک ماشین حساب طراحی کردم. یک دکمه طراحی کردم که ۲ حالت داره، فرض کنید دکمه ۱ که حالت اولش قبل از فشرده شدن هست و حالت دومش بعد از فشرده شدن. این دو حالت رو کامپوننت و واریانس کردم . بعد توی کامپوننت هم یک Flow ایجاد کردم که با فشرده شدن دکمه Property دوم نمایش داده بشه (while pressing) اینطوری در واقع دیگه لازم نبود تما دکمه‌ها رو دونه دونه پروتوتایپ کنم. حالا وقتی از این کامپوننت در کار استفاده میکنم. خب نوشته حالت عادی رو میتونم تغییر بدم و مثلا نوشته دکمه رو بکنم ۴. اما نوشته حالت فشرده رو که Property دوم هست رو نمیتونم تغییر بدم. از همون قسمت پراپرتی، حالت دوم رو انتخاب میکنم و نوشته رو تغییر میدم ولی وقتی طرح رو پرزنت میکنم، همه چیز درست کار میکنه ولی رقم دکمه در حالت فشرده درست نیست. مثلا ۴ رو فشار میدم همون عدد ۱ که توی کامپوننت بود رو نشون میده.
این رو هم اضافه کنم که جناب استاد شما به ما جسارت تمرین‌های سخت رو دادید D: باید بگم من این کار رو بصورت Neumorphism طراحی کردم و در این فرم حالت دکمه‌ها خیلی مهمه چون بُعد رو نشون میده.
بازم پوزش میخوام طولانی شد. ممنون میشم اگر راهنمایی بفرمایید.
درود بر شما دوست گرامی، وقت شما بخیر
ارادتمندم جناب عسگری، من اگر البته درست متوجه شده باشم و درک کرده باشم فرمایش شما رو، به نظر می‌رسد این متن که داره تغییر میکنه عملا داره عوض میشه. آیا خود آن متن Text Property دارد. خودم کمی تسمه پاره کردم حقیقتا و موارد این شکلی رو سخت میشه اینطوری توضیح داد. مگر اینکه آن فایل را ببینم. به‌نظرم بسیار عالی هست که انقدر عمیق و خوب تمرین می‌کنید. بعداً حتما نسخه پریمیوم فیگما رو هم تمرین کنید. در نسخه پریمیوم امکاناتش بسیار بیشتر است.
موفق باشید.
ممنون از پاسخ‌تون استاد
درود بر شما دوست گرامی، وقت شما بخیر
من مشاهده کردم. از آنجایی که یک کامپوننت ساخته شده، طبیعتا توی کلیک صرفا یک State رو نشون می‌داد که عدد یک بود. حالا اگر ما متغیر متنی برای جفت State ها بسازیم، اینطوری توی صفحه بندازیم به‌نظرم مشکل برطرف میشود. چون وقتی بچه آن کامپوننت را انداختیم در صفحه، با توجه به متغیر متنی که وجود دارد برای هر دو، می‌توانیم تغییر بدهیم که هر عدد چه در حالت عادی و چه در حالت کلیک، عدد مدنظر خودش را نشان بدهد.
موفق باشید.
درود بر شما
وقتی از لوگو استفاده می کنیم، چطور می تونیم باهاش مثل آیکن برخورد کنیم؟
درود بر شما دوست گرامی، وقت شما بخیر
اگر منظور فرمت هست، هر دو در واقع بهتر است لایه‌باز و svg باشند که داخل فیگما آسان‌تر بتوانیم ازشون استفاده کنیم. منظور سوال رو خوب درک نکردم. در واقع اصلا قرار نیست از لوگو به عنوان آیکن استفاده کنیم. برعکس این گاهی رخ می‌دهد. یعنی ممکن است یک لوگو شبیه یک آیکن باشد.
موفق باشید.
سلام استاد وقت بخیر
قسمت آخر ویدئو فرمودید زمان میگیره و انجام ندادید مربوط به دکمه های ردیف لارج فونت از از small به medium و سایز آیکون از 16px به 20px تغییر دهیم می خواستم بدونم باید 144 بار متن دکمه و 96 بار آیکون ها (48 از دکمه ها بدون آیکون هست) با shift انتخاب کنیم و تغییرات انجام بدیم یا روش سریع تری هم وجود دارد؟
درود بر شما دوست گرامی، وقت شما بخیر
آقا سینا فیگما از منوی Select (در همان منوی کلاسیک بالا زیرمجموعه Edit هستش) می‌توانید عناصری که پارامترهای یکسان (مثلا متغیر متن، رنگ زمینه، رنگ استروک و…) دارند رو میشه انتخاب کرد. اینطوری آسان‌تر میشود.
موفق باشید.
سلام استاد وقت بخیر
برای درست کردن prototype ترتیب قرار گیری تو نتیجه تاثیر داره؟ البته تو تجربه من داشته. ولی میخوام بدونم چطور میشه درستش کرد؟
من دو تا card طراحی کردم همه چیشون مثل هم هست ولی تو prototype هر کدوم متفاوت نشون داده میشن. چطور میتونیم این مشکل رو رفع کنیم؟
درود بر شما دوست گرامی، وقت شما بخیر
ببخشید من این رو خوب متوجه نشدم که چه اتفاقی رخ داده است. قاعدتا ساختار کارت بله بایستی یکسان باشد. نهایتا تصویر و متن آن می‌تواند متفاوت باشد. اما شاکله اصلی آن مانند رنگ و انحنا و فواصل و… بایستی یکسان باشند.
موفق باشید.
سلام.وقتتون بخیر
ممنونم از آموزش های خوبتون.
خدا قوت.
یه خواهشی داشتم
اگه امکانش هست روی ویدئو ها
آپشن اینکه بتونیم ۳۰ ثانیه جلو یا عقب بزنیم رو قرار بدین عالی میشه.
برای عقب و جلو رفتن ویدئو یه ذره شرایط سخته.
ممنونم
درود بر شما دوست گرامی، وقت شما بخیر
سپاس از لطف و همراهی شما. چشم من پلیر سایت رو قوی‌تر میکنم که امکانات بیشتری داشته باشد.
موفق باشید.
واقعا نمیدونستم ولی خب بهونه خوبی شد دوباره از اول تمرین کنم ولی دکمه ها خیلی شد و قصد دارم برای رنگ‌های با معنی رایج مثل info , primary , warning.. جدا بسازم یعنی برا پالت رنگی سایتم ساختم و برا اونا جدا بنظرتون منطقی و اصولی هستش؟
درود بر شما دوست گرامی، وقت شما بخیر
بله ممکن است برای رنگ‌های Semantic هم دکمه طراحی بشود و گاهی لازم خواهد شد.
موفق باشید.
درود مجدد استاد وقت بخیر خسته نباشید من این قسمت رو چندین بار تماشا و عملی تمرین کردم و خب نمیدونستم فیگما بعد رفرش ctrl + z بزنیم نمیشه به حالتا قبلی برگشت و سوالی که دارم اینه من کامپونننت دکمه رو ساختم امکانش هست مشاهده کنید لینک بفرستم؟ ممنون از زحماتتون.
درود بر شما دوست گرامی، وقت شما بخیر
فیگما یک بخشی دارد به اسم Version History که در نسخه رایگان تا یکماه آن را نگه می‌دارد. (کنار اسم یک پروژه یک فلش هست اونو بزنید پیداش می‌کنید). از آنجا می‌توانید به ورژن‌های روزهای قبل برگردید. قبلش ترجیحا یک بکاپ (خروجی فایل fig) از پروژه بگیرید. برخی کامنت‌ها ممکنه تکراری باشه متن‌شون گاهی ما صرفا اون تکراری‌ها را حذف میکنیم. به نظرم دوره رو کامل ببینید تمرین بکنید آخر سر در جلسه آخر اگر دوست داشتید لینک بفرستید من نگاه میکنم.
موفق باشید.
سلام استاد وقت بخیر
یک سوال یک هدر قراره ساخته بشه با چنتا عنوان که هرکدوم زیر شاخه های مخصوص خودشون رو دارن. آیا برای اینکار برای هرکدوم از عنوان ها و زیر شاخ هاش باید کامپوننت ست جدا ساخته بشه؟(منو دارپ دون). یا میشه یکی ساخت و عنوان و زیر شاخه ها رو متنشو تغییر داد؟
چون من اینکارو کردم و فقط عنوانش تو حال بعدی درست تغییر میکنه ولی اسم زیر شاخه هارو که تغییر میدم تو پریویو اسم ها تغییر نمیکنه وفقط عنوانش رو درست نشون میده. ولی مثلا وقتی از قسمت asset منو باز شده رو (اکاردئون اوپن) بیارم تو صفحه و اسم هارو تغییر بدم و به همون صورت هم بذارمش تو صفحه، تو پریویو درست نشون میده و کلیک هم روش میکنی درست بسته میشه ولی نمیشه منو باز رو تو هدر گذاشت که. راهنمایی کنید ممنون میشم امیدوارم تونسته باشم درست مشکل رو بیان کرده باشم. اگر نمیشه که هیچی ولی اگر میشه لطفا ایراد کارم رو بفرمایید.
درود بر شما دوست گرامی، وقت شما بخیر
با فرض اینکه نسخه رایگان فیگما رو داریم، ببینید عملا متن اگر قرار باشد به صورت پارامتری تغییر کند نیاز به متغیر text داریم و این موضوع کامپوننت می‌طلبد. ما یک سطح زیرمنو این شکلی رو ساختیم در دوره. هاورش کامپوننت جداگانه بود و یک کامپوننت دیگر هم ساخته بودیم که کل آکاردئون رو شامل میشد. این رو در preview نشان میده. در ویدئوش من preview گرفتم. در واقع این چیزی که مدنظر شماست مثل همان هست اما یک لایه بیشتر است اگر درست درک کرده باشم فرمایش شما رو.
موفق باشید.
بله استاد انجام دادید منم طبق همون انجامش دادم ولی فقط یک عنوان هست به اسم آکاردئون و زیر شاخه هاش هم گزینه های آکاردئون
ولی اگر بخواین از این کامپوننت تو دو تا عنوان استفاده کنید، از قسمت asset میاردیش و عنوان و زیر عنوان ها رو اسم ها رو عوض می‌کنید ولی بازم تو Preview همون آکاردئون و گزینه های آکاردئون نشون میده.
حالا به فرض میخوایم یک عنوان دیگه داشته باشیم مثلا صفحه اصلی با گزینه های مختص خودش. مثل همه سایت ها که وقتی میری تو قسمت هدر چنتا گزینست که وقتی روشون کلیک یا هاور میکنی چنتا گزینه دیگه زیرش ظاهر میشه. سوال اصلی همینجاست آیا باید برای هر عنوان و زیر شاخه هاش کامپوننت جدا ساخت؟ تا بشه متن عنوان و زیر عنوان رو تغییر داد؟ (مثل آکاردئون و گزینه های آکاردئون). یعنی اگر من تو هدر 3 تا عنوان دارم که هر عنوان زیر شاخه داره، باید 3 بار dropdown-menu درست کنم با اسم های مختلف؟ یا روشی هست که با همون کامپوننت ستی که ساخته شده، بشه برای چنتا عنوان اسفتاده کرد که هرکدوم زیر عنوان متفاوت داره که رو زیر عنوان میری همه حالت هاور رو هم داشته باشن.
درود بر شما دوست گرامی، وقت شما بخیر
بله درست می‌فرمائید. عرض بنده همین بود که فرزند دیگری به عنوان یک لایه کامپوننت دیگر می‌توانیم بسازیم. در واقع انگار سه مرحله کامپوننت ساختیم. یه فایلی بود در کامیونیتی فیگما ازش صحبت کرده بودیم. testing figma interactive components. اونجا هم چنین چیزی رو به طرق دیگری ساخته بود اگر خواستید آن را هم مشاهده بفرمائید.
موفق باشید.
سلام استاد عزیز و وقت بخیر
کاملا راه ساختن ورینت فهمیدم. اما یه چیزی هستش. اونم اینه برای ساخت ورینت هاور گذاشتیم اسمشو state اما کپی کردیم و ارور داد و گذاشتیم secondary و درست شد. اما سوال من درباره فلسفه این ارور. همه این ها داخل اون مربع بودن و اصلا چرا ارور داد و سیستم تشخیص نداد که اصلا شاید این ۴ تا جدید هم با قبلی یکی هست یا نه. نمیدونم منظور سوالمو تونستم برسونم یا نه. سوال بیشتر درباره اون فلسفه ارور که چرا و چجوری تشخیص داد که باید ارور بده ارور داد.
درود بر شما دوست گرامی، وقت شما بخیر
یکم این جلسه سخت هست و تکرار می‌خواهد. البته خوشبختانه موفق شدید و از پسش برآمدید. آقای مهندس تقریبا میشه گفت روندی مشابه ماتریس‌ها تو ریاضی رو داره. فرض کنید ما یک ماتریس سه در سه داریم. حالا به آن یک ماینور یا یک عنصر و یا همان یک درایه، اضافه کنیم. خب این درایه، درسته که صرفا یک مورد هست اما عملا هم باعث ایجاد سطر و هم باعث ایجاد ستون میشود. پس دو مشخصه (دو تا state) لازم خواهد داشت. در ماتریس می‌توانیم بهش بگیم سطر و ستون. حالا اینجا میشه همان واریانت‌ها. خب طبیعتا این‌ها نباید تکراری بشوند. مثلا اگر سطر اول قرار است Primary باشد، سطر دوم دیگر معنی ندارد که Primary باشد چون مشخصه دیگری است. یکم باز شاید مثال من موضوع را آسان‌تر کرده باشد اما اگر باز هم احساس کردید ابهام هست، زیاد بهش اهمیت ندید و این موضوع در شروع برای همه سخته. برای منم سخت بود و 5 بار ساختم تا یاد گرفتم. بنابراین اصلا مجدد ویدئو را ببینید. من زیاد تو ویدئو نکته گفتم. اطمینان داشته باشید اگر دوباره ببینید خیلی قضیه شفاف و آسان میشه.
موفق باشید.
وقت بخیر استاد جان. خسته نباشد فراوان
یه سوال دارم. استاد فیگما باگ داره؟ مثلا من پروپرتی تکست رو از هر دو روش که موجوده اضافه میکنم بعد وقتی میرم روی چایلد هام و میخام تکست رو عوض کنم اصن تکست رو نشون نمیده رو اعصابم رفته. یه سوال دیگه هم دارم مثلا من وقتی Alt رو میگیرم که فریم کپی بشه اون خط قرمزه که فاصله هاشون رو نشون میده برای من نمیاد یعنی فقط خط قرمز هست ولی عدد نداره که ببینم مثلا چقد دارم فاصله میدم.
درود بر شما دوست گرامی، وقت شما بخیر
سپاسگزارم. نه بعید هست. باگ خاصی در این زمینه مواجه نشدم. معمولا زود به زود بروز میشه. من یک احتمالی که می‌دهم این هست که شاید لایه‌ای که انتخاب میشه برای اعمال متغیر، ممکنه متن نباشه. مثلا ممکنه متن توی فریم باشه و ما آن فریم رو select کرده باشیم. در این صورت خب متغیر text را نمی‌توان بهش اعمال کرد و صرفا باید خود لایه متن به صورت select باشد. یا مثلا ممکنه لایه متنی تبدیل شده باشد به وکتور. اگر درست نشد به نظرم یکبار اصلا آن لایه متن رو حذف کنید دوباره بنویسید و بعد متغیر را بهش اعمال کنید.
وقتی ما دکمه Alt را می‌گیریم، باید ماوس رو ببریم روی سایر عناصر دیگر که میخواهیم فواصل رو نشون بده. مثلا اگر کنار آن فریم، یک فریم یا عنصر دیگری وجود داشته باشد، وقتی Alt را نگه داشتیم باید ماوس را هم روی آن عناصر دیگر برد که فواصل را نشان بدهد.
موفق باشید.
بسیار عالی بود خسته نباشید …
فقط یک سوال برای من پیش اومد، آیا در تمامی پروژه‌ها، کامپوننت‌ها رو همینطور که شما ساختید، می‌سازند یا اینکه از ابزار های اماده استفاده می‌کنند و صرفا ادیت‌های مربوطه روی main component ها ایجاد می‌کنند؟
درود بر شما دوست گرامی. وقت شما بخیر.
همه پروژه‌ها نیاز به دیزاین سیستم ندارند. در برخی پروژه‌ها که تعداد صفحات و حجم پروژه کمتر است، صرفاً uikit های ضروری پروژه را می‌سازند. اما کلا استفاده از دیزاین سیستم و uikit های آمده، اشکالی ندارد و در پروژه‌های واقعی هم مورد استفاده قرار می‌گیرد. در برخی پروژه‌ها نیز اختصاصی از صفر ساخته میشود.
موفق باشید.
سلام وقت بخیر و خیلی ممنون از تدریس عالیتون
من به یک مشکلی برخوردم بعد از ساختن دکمه ها تعدادشون 579 شده یعنی 3تا بیشتر که هرچقدر چک میکنم همه چی به تعداد هست حدسم اینه شاید کپی گرفته شده وروی هم قرار گرفته باشد حالا نمیدونم بین این همه دکمه چجوری پیداشون کنم؟ ایا روشی هست بشه با دراگ کردن تعدادایتم های اون قسمت مشخص رو فهمید؟
وسوال دیگر اینکه من برای تراز کردن دکمه ها که همه در یک ردیف قرار بگیرند از روی خطهای قرمز خط قرمز بالا وپایین همزمان بیاد یعنی دیگه تویک راستا هستند؟من این کارو انجام دادم اما فکر میکنم کمی شیبی به سمت بالا دارند یا شاید خطای دید هست نمیدونم!! گیج شدم
ومورد بعدی اینکه به جز دکمه ها دیگه چه عناصر دیگه ای هست که باید به این روش ساخت؟
درود بر شما دوست گرامی. وقت شما بخیر.
سپاس از شما. خیلی خوب دارید پیش می‌روید و نصف دوره رو به نتیجه رسوندید و این عالیه. ممکنه مثلا مواردی کپی شده باشند و روی هم افتاده باشند. این جلسه کمی سخت است اما خیلی هم سخت نگیرید مهرناز جان. اگر خیلی خودتو اذیت کنی برای پیدا کردنش، ممکنه اصل موضوع دلت رو بزنه. چون فایل هم جلوی چشم من نیست که بتونم ببینم و بررسی اش کنم. وقتی شما این رو کامل ساختی یعنی موضوع رو یاد گرفتی. این مهمترین هدف من توی این جلسه بود که خوشبختانه رخ داده. به نظرم اصلا یکبار دیگه از اول بسازش. هم مشکلش حل میشه و هم یکبار دیگه این مسئله تمرین شده. اصلا فرض کن واریانت ساز رو هم نساخته باشی. باز بالاخره شما یک کامپوننت حرفه‌ای و خفن رو ساختی. یک موضوع مهم و پیچیده رو در فیگما یاد گرفتی این مهمه. اون خطوط قرمز، اصطلاحا اسنپ هستن. تراز می‌شوند با عناصر دیگر. حتی می‌توانی موارد رو با هم انتخاب کنی و با align هایی که در جلسه فیگما آموزش دادیم تراز کنی. همان هایی که در بالای صفحه سمت راست هستند.
جلسات بعد، کلی کامپوننت دیگر هم ساخته میشه. دکمه فقط یکی از آنهاست. خیلی چیزای جالبی میشه ساخت که در همین دوره آنها را ساختیم. مثل، هدر، فوتر، کارت، منو و کلی کامپوننت دیگه. بنابراین این کامپوننت رو یکبار دیگر تمرین کن و بساز و بعد ازش رد بشو و دوره را ادامه بده. این موضوع بازم تکرار میشه در جلسات پیش رو.
موفق باشید.
سلام مجدد متوجه اشتباهم شدم
وقت بخیر استاد
دررابطه با ورینت کردن دکمه ها ایا باید برای حالت های success ,warning و error هم حالت های مختلفش رو ساخت؟
درود بر شما. وقت شما بخیر
بله اگر ساخته بشود در واقع دکمه‌ها کامل‌تر هم شده. من در جلسات پیش رو مانند جلسه دیزاین سیستم، کلی پروژه آماده و رایگان که هم فارسی دارن هم انگلیسی، معرفی کردم که از آنها هم می‌توان استفاده کرد. فایل پروژه خودمان نیز در دسترس هست و قابل دریافت.
موفق باشید.
سلام و وقت بخیر خدمت استاد گرامی خدا قوت
ببخشید میخواستم بدونم من الان برای ساخت واریانت‌ها تمرین میکنم و همه رو میسازم جهت یادگیری کامل اما میخواستم بدونم با توجه به توصیحات آخر جلسه زمانی که پروژه بزرگ‌تری آماده میکنیم و کامپوننت‌ها و واریانت‌های بیشتری باید بسازیم، میتونیم ازکامپوننت‌های آماده برا تسریع کار استفاده کنیم یا همچنان اولویت در پروژه ساخت دستی کامپوننته؟ یعنی برای کارفرما تفاوتی داره؟
درود بر شما. وقت بخیر
بله می‌توانیم. توی جلسه دیزاین‌سیستم، کلی از این موارد آماده اعم از فارسی و انگلیسی رو توضیح دادم. آن جلسه را هم حتما در ادامه دوره ببینید.
موفق باشید.
سلام استاد وقتتون بخیر
واقعا ممنونم بابت آپدیت عالی دوره UI/UX
این جلسه فوق‌العاده بود
با توضیحات دقیق و مرحله‌به‌مرحله‌ای که ارائه دادید، دیگه هیچ نکته‌ای باقی نموند و همه‌چیز کاملاً جا افتاد.
خیلی ممنونم از وقتی که برای این‌همه دقت و کیفیت تو آموزش می‌ذارید.
درود بر شما. وقت بخیر
سپاسگزارم از لطف و همراهی و مهربانی شما. شاد و سلامت باشید همیشه.
موفق باشید.
سلام خواستم تشکر بکنم از دوره عالیتون. واقعا نسبت به باقی دوره‌ها خیلی بهتر ارتباط گرفتم با این دوره.
من توی جلسات گذشته که استایل‌های تایپوگرافی رو اضافه می‌کردید اینکارو نکردم. همون فایل فیگما پروژه رو که شما قرار داده بودید رو دانلود کردم و ایمپورت کردم.
الان چرا از بخش استایل ها به اون تایپوگرافی ها دسترسی ندارم؟ یا حتی استایل های رنگی اونا هم نیستن؟
مگه اینا با ایمپورت فایل فیگما منتقل نمیشن؟ باید دستی اینارو اضافه کنم؟
درود بر شما محمد جان. وقت شما بخیر
سپاس از لطف و همراهی شما. فایل draft که من درج کرده بودم، استایل‌هاش رو وارد نکرده بودم. در واقع عمداً به این صورت هست که افراد خودشان Add کنند و بهش مسلط بشوند (اگر دستی هم Add کنید زمانبر نیست کمتر از 10 دقیقه قابل انجام است).
موفق باشید.
سلام خسته نباشید
وقتی من سایز دکمه هارو بزرگ میکنم متن و ایکون بزرگ نمیشن
درود بر شما. وقت بخیر
قرار نیست این اتفاق رخ بدهد. چون دکمه‌ها را در چند سایز ساختیم، هر سایزی لازم شد، در پروژه استفاده میشود. مگر در مواردی خاص که ممکن است مثلا در نسخه موبایل، نسخه کوچکتری از دکمه را استفاده کنند که این مورد هم کمتر رخ می‌دهد. دکمه‌ها ارتفاع‌های مشخص نسبت هشتی دارند. عرض آنها هم یا متناسب با کل عرض صفحه است (اصطلاحاً Full Width هست) و یا اینکه به اندازه مقدار متن + پدینگ، عرض می‌گیرد.
موفق باشید.
سلام استاد
وقتتون بخیر
استاد بنده میام واریانت با تعداد بالا کپی کنم لگ بدی میزنه سیستم با اینکه سیستم خوبیه مشکل چیه؟
درود بر شما. وقت بخیر
موقع preview رو می‌فرمائید؟ کلا حتی اگر واریانت‌ها کم هم باشد، هنگام پیش‌نمایش، این مشکل مقداری وجود دارد و کمی باگ نرم‌افزاری هست به نظرم. اگر هم منظور هنگ کردن سیستم هست، باز این هم طبیعی است. اگر حجم مقداری که کپی میکنیم زیاد باشد، این موضوع نیز گاهی رخ می‌دهد. سخت‌افزار و منابع سیستم هم در این مقوله مقداری موثر هستند.
موفق باشید.
سلام و عرض ادب
استاد به فایل واریانتی که ساختید می تونم دسترسی داشته باشم برای تمرین؟
درود بر شما. وقت بخیر
ورژن قبلی هست در کامیونیتی فیگما. ورژن جدید هم در آینده درج خواهیم کرد.
مشاهده فایل کامل پروژه پویا
موفق باشید.
سلام خسته نباشید. ممنون واقعا بابت آموزش هاتون
فرمودید برای قسمت لارج سایز تکست هارو بیشتر کنیم میخواستم بدونم دونه دونه باید این کاروکرد؟ یا اون حالتی که گفتین با تغییر دکمه اصلی بقیه م تغییر میکنن کجا بود؟
درود بر شما. وقت بخیر
حتی اگر دونه دونه هم انتخاب کنیم خیلی وقت‌گیر نیست. چون یک چهارم دکمه‌ها سایز Large هستند. اما در منوی کلاسیک فیگما (بالا سمت چپ)، بخشی تحت عنوان Select هست که می‌توان با موضوعات مختلف، عناصر را انتخاب کرد. مثلا اگر تشابه در متن، رنگ متن، رنگ زمینه، پراپرتی یکسان و… داشته باشند. با آنها می‌توان سریع‌تر انتخاب کرد. در ویدئو با آن اشاره کرده‌ام.
موفق باشید.
سلام وقتتون بخیر، برای انجام boolean تو قسمت appearance گزینهی apply variable property برای من نیست، جز نسخه‌ی پولیه یا من پیداش نکردم؟!
درود بر شما. وقت بخیر
در نسخه رایگان فیگما شما می‌توانید وریبل بسازید اما تنوع دارد و نمی‌توان عملاً در نسخه رایگان، استفاده خوبی از آنها داشت و عمده بخش وریبل‌ها، در نسخه پریمیوم فیگما هست. پیشنهاد میکنم نسخه education فیگما رو روی یکی از اکانت‌های تستی خودتان فعال کنید تا بتوانید (دو سال به‌صورت رایگان) قابلیت‌های پریمیوم رو تمرین کنید.
موفق باشید.
سلام استاد
خسته نباشید
استاد یعنی ما برای هر دکمه یا چیزی ک قابل کیلیک کردن باشه باید این همه واریانت درست کنیم؟
درود بر شما. وقت بخیر
بله اگر پروژه خصوصاً صفحات زیادی داشته باشه و قرار باشه از دکمه‌ها زیاد استفاده کنیم، حتما باید کامپوننت دکمه ایجاد کنیم.
موفق باشید.
سوالی که داشتم این که وقتی ما یک دکمه رو کامپوننت میکنیم و بعد وارینتش میکنیم توی پروتوتایپ که این‌ها رو به هم وصل میکنیم اسم یا تکست دکمه‌ها عوض میشن. برای این راه حل دارین؟
درود بر شما. وقت بخیر
عوض نمی‌شوند. در واقع زیرمجموعه خواهند داشت. مثال میزنم. فرض کنید اسمش header باشد که حالت دسکتاپ و موبایل را داشته باشد. در این‌صورت اسمش میشود header/desktop و header/mobile. در واقع اسم آن state مثلا موبایل، همان mobile بوده و مقدار بالادست آنها، اسم کلی کامپوننت هستند.
موفق باشید.
با سلام. یعنی هر روزی که با ویدیوهای شما دارم میرم جلو کاملا پیشرفت و حس میکنم که دارم چند مرحله جلو میرم، چون هم ساختشو یاد میگیرم هم پلاگین‌هاش و راه‌های ساده‌تر ساخت. واقعا ممنون از آموزش‌های خوبتون که بهطور رایگان در اختیار گذاشتید.
درود بر شما. وقت بخیر
سپاس از لطف و مهربانی شما ارسلان جان. امیدوارم شاد و سلامت باشید همیشه.
موفق باشید.
درود بر شما
سپاس از آموزش بسیار خوبتون. با توجه به آپدیت و تغییرات فیگما، خیلی فهم این قسمت با آموزش قبلی برام مشکل بود که الان متوجه شدم. ممنون
درود بر شما. وقت بخیر
بله درست می‌فرمائید. میشه گفت محتوای این جلسه، بیشترین تغییر رو داشته با فیگمای تا دو سال اخیر. الان جدید‌ترین نسخه را آموزش دادیم که این مشکل برطرف بشود.
موفق باشید.
سلام وقتتون بخیر
یکی از نکته های خیلی خوبه این دوره مخصوصا قسمت تئوریش اینه که متنش رو هم نوشتید و میتوینم راحت نُت داشته باشیم. یه سوالی داشتم. وقتی یه سری المان داریم و آنها رو درگ میکنیم دیگه اون آیتم که با درگ کردن مشخص میشه و میتونه تراز کنه نیست، همون ایتم که شبیه چندتا خط هست.
فک کنم تو ورژن جدید فیگما نباشه
درود بر شما. وقت بحیر
در واقع وقتی آنها را Drag میکنیم، از حالت Tidy در می‌آیند. میشه مجدد آنها را مرتب کرد که آن خطوط و نقطه‌ها بیایند. با دکمه‌های ترکیبی ctrl + alt + shift + T هم می‌توان این کار را انجام داد.
موفق باشید.
سلام روزتون بخیر. ممنون از آموزش‌هاتون. خواستم بپرسم ویدیو های این بخش یعنی کامپوننت و واریانت رو هم آپدیت خواهید کرد؟
درود بر شما. وقت بخیر
بله. به مرور همه را بروز میکنم.
موفق باشید.
سلام استاد خواستم بدونم که لازمه دکمه ها رو طراحی کنیم یا میتونیم از قالب های آماده استفاده کنیم
درود بر شما. وقت بحیر
هم می‌توانیم خودمان طراحی کنیم هم می‌توانیم از دیزاین‌سیستم‌های آماده استفاده کنیم. در جلسات پیش رو، دیزاین‌سیستم رو مورد بررسی قرار داده‌ایم.
موفق باشید.
سلام و خسته نباشید. خواستم از زحماتتون تشکر کنم. واقعا ممنونم که این مباحث رو با جزییات زیاد و رایگان در اختیار ما قرار میدین. امیدوارم که همیشه سربلند و موفق باشید. سپاس فراوان.
درود بر شما. وقت بحیر
سپاس از لطف و همراهی شما دوست گرامی.
موفق باشید.
سلام ممنون از آموزش عالیتون
همرو من انجام دادم ولی نشد قسمت عوض کردن ایکون
با توجه به تغییرات جدید فیگما
میشه لطفا راهنمایی کنید
درود بر شما. وقت بحیر
کمی فیگما تغییر کرده و داریم مجدد دوره رو تهیه میکنیم. برای ساختن Instance Swap می‌توانید از سایدبار سمت راست (بالای سایدبار) می‌توانید اضافه کنید. موقع اضافه کردن دقت کنید که حتما Icon شما که حتما هم باید خودش فرزندی از یک کامپوننت دیگر باشد، حتما بایستی در حالت انتخاب باشد.
موفق باشید.
سلام خسته نباشید استاد ممنون از دوره رایگان‌تون و خدمت بزرگی دارید به ما میکنین. استاد یه سوال داشتم
در قسمت secondary در ساختن واریانت ها، آنجا که پس زمینه رو برداشتید و Stroke دادید، اون رنگ نوشته دکمه سفید بود بعدش میخواستیم رنگ متون رو عوض کنیم عوض نمیشه با این که تو selection colors رنگ سفید رو تشخیص داده بود با این حال رنگ متنو عوض نمیکنه
درود بر شما. وقت شما بخیر
سپاسگزارم. به طور کل روی هر فریم یا بخشی از فیگما که کلیک کنیم، همانطور که اشاره هم فرمودید، رنگ‌های به‌کار رفته در آن ناحیه رو می‌شناسد. همان‌جا می‌توانید رنگ مدنظر رو انتخاب کنید و تغییر بدهید. این باعث میشود مجبور نشوید عناصر مختلف را با کلیک و دابل‌کلیک انتخاب کنید و سرعت بالا می‌رود. در بخش Secondary که فرمودید در واقع بنده برای تغییر Stroke و یا رنگ متن، به همین روش اغلب انجام دادم.
موفق باشید.
سلام خسته نباشید استاد من برای قسمت radius مشکلی ک دارم آیکونی که برای تغییر هست رو ندارم که باعث گرد شدن گوشه ها شه هرچقدر هم گزینه های دیگه رو امتحان کردم نمیشد
درود بر شما. وقت بحیر
برای مقدار radius شما دو بخش رو باید تغییر بدهید. هم اسم آن که از مقادیر 0 و 4 و 8 و round استفاده کردیم. هم اینکه radius خود دکمه. هر دو مورد در سایدبار سمت راست فیگما قرار دارند. زمانی هم قابل استفاده هستند که شما دکمه‌هایی که می‌خواهید radius شان را تغییر بدهید را در حالت انتخاب قرار داده باشید.
موفق باشید.
سلام وقت بخیر ممنون از دوره آموزشی عالی تون
برای اینکه آیکن به چپ و راست هم واریانت حالت جدید از کجاست من روی آیکن دابل کلیک کردم و واریانت تغییر آیکن براش تعریف کردم ولی برای نمایش ندادن آیکن چپ و راست آیکن حالت جدید پیدا نمی‌کنم
درود بر شما. وقت بحیر
ما برای پروژه پویا صرفا آیکن را در uikit به صورت نمایش در سمت راست درست کرده بودیم که از boolian استفاده شده بود. اما اگر قصد دارید uikit دکمه، آیکن را در سه حالت راست، چپ و مخفی داشته باشد، دیگر boolian برای این قسمت مناسب نیست. چون بیش از دو حالت داریم. بنابراین باید یک واریانت بسازید. حالا تمام آیکن‌ها را سمت راست قرار دهید. در حالت دیگر این واریانت تمام آیکن‌ها را سمت چپ و همینطور یکبار هم همه آیکن‌ها را مخفی کنید. دقیقا مشابه radius و size این موضوع درست میشود.
موفق باشید.
سلام استاد خسته نباشید، ببخشید من مفهوم کامپوننت و uikit رو درست متوجه نشدم، ممکنه یه توضیح خیلی ابتدایی بدید؟
درود بر شما. وقت بحیر
در واقع این دو یکسان هستند. uikit ها همان عناصری هستند که در پروژه در دفعات بیش از یکبار استفاده می‌شوند. مانند دکمه‌ها. طبیعتا برای ساخت این عناصر نیز از کامپوننت‌ها در فیگما استفاده میکنیم. بنابراین این دو یکسان هستند.
موفق باشید.
سلام وقت بخیر
چرا تو تب Assets من کامپوننت‌ها و … وجود ندارند و فقط یسری کتابخانه هست چطور میتونم کامپوننت‌ها فعال کنم؟
درود بر شما. وقت بخیر
کامپوننت‌هایی که در پروژه خودتان ساختید صرفاً در همان پروژه فیگما قابل استفاده هستند (مگر اینکه آنها را در پروژه دیگری کپی کنید). اگر اطمینان دارید که کامپوننت مدنظر را ساختید، اسمش رو سرچ کنید داخل تب Assets. چون در این تب همان بالاش امکان سرچ هم دارد. سمت راست باکس سرچ هم یک گزینه شبیه آچار دارد که روش کلیک کنید می‌تونید تیک گزینه Created this file رو انتخاب کنید که دیگه Global Component هارو نشون نده و صرفاً کامپوننت‌های ساخته شده در پروژه خودتان رو نشون بده. البته این تیک رو اگر نزنید هم موقع سرچ، موارد مدنظر شمارو می‌آورد. به شرطی که اسم کامپوننت رو بدانید.
موفق باشید.
سلام استاد ممنون از تدریس و حمایت های عالیتون. (خودتون هم بی نظیرید)
مشکلم حل شد فقط وقتی Instance Swap میسازم علامت تعجب رو داره و عمل نمیکنه اینو باید چطوری برطرف کنم؟
کاش دوره زودتر به روزرسانی بشه
درود بر شما آقا هومن. وقت بخیر
سپاسگزارم. خوبی از شماست. اتفاقا تولید محتوا رو شروع کردم. خیلی سخته اما پیش می‌روم.
دلیل وجود علامت سوال این است که متغیر ساخته شده و اعمال نشده. چون فرمودید که Instance Swap هست پس قاعدتا برای یک عنصر داخل کامپوننت اصلی است که خودش هم کامپوننت هستش (که در پروژه ما، آیکن داخل دکمه این شرایط رو داشت). پس لایه آیکن داخل دکمه رو انتخاب بفرمائید و سپس از همان سایدبار سمت راست (بالاهاش) بایستی متغیر رو انتخاب و اختصاص بدید.
موفق باشید.
سلام وقت بخیر
من وقتی Boolian و Instance Swap یا حتی Text می سازم گزینه layer برای من وجود نداره و تغییرات اعمال نمیشه در واقع هر کاری میکنم اون گزینه علامت تعجب از بین نمیره
قسمت سمت راست صفحه رو هم گشتم ولی نتونستم layer رو پیدا کنم. بایدچکار کنم؟
درود بر شما. وقت بخیر آقا هومن
کمی نرم‌افزار فیگما عوض شده. در همان سایدبار هست. قیافه آیکن آن و اسامی کمی عوض شده (ما در حال بروز کردن دوره خودمان هستیم). برخی گزینه‌ها در کلیک راست هم وجود دارد. برای Boolian در همان سایدبار سمت راست صفحه (وسط‌هاش) بخشی تحت عنوان Appearance وجود داره که آنجا می‌توانید انتخاب کنید. برای Instance Swap و متغیر مربوط به Text هم بالای سایدبار هستند. در بالای سایدبار سمت چپ بخشی اصلا به نام Text وجود دارد. (دقت کنید زمانی فعال است که متن داخل دکمه شما در حالت انتخاب باشد). متغیر رو که بهش اختصاص بدهید علامت تعجب دیگر رفع زحمت می‌کند و مشکل نیز برطرف خواهد شد.
موفق باشید.
سلام وقتتون بخیر
ببخشید برای رنگ پیشفرض دکمه حتما باید رنگ main “همون رنگی که ازش scale کردیم” باشه یا میتونیم از بین 10 تا رنگ یکی دیگه رو انتخاب کنیم؟این کار اوصولیه؟
اگر رنگ main من خیلی پررنگ باشه یعنی از اون 10 تا رنگ دهمی باشه برای press و hover رنگ کمرنگ تر و انتخاب کنیم این کاردرست و اوصولیه؟
ممنون از زحماتتون.
درود بر شما. وقت بخیر.
در اغلب دیزاین‌سیستم‌ها رنگ اصلی میان رنگ‌های scale شده قرار دارد. مثلا پنجم یا ششم است. گاهی ممکن است در برخی پروژه‌ها البته متفاوت بشود ولی رایج‌تر این است که در میانه باشد. مثلا اگر رنگ میانه روشن است، ممکن است در hover یا press رنگ تیره‌تر شود. اگر هم تیره باشد گاهی رنگ‌های hover و press روشن‌تر از رنگ اصلی خواهد بود.
موفق باشید.
سلام وقتتون بخیر
من واریانت هارو ساختم تاجایی که تغیر سایز بود به مشکل خوردم. سایز دکمه رو که تغیر دادم برای x-small متن دکمه خیلی برای اون سایز بزرگ شد و نمیتونم همرو باهم اندازه متن و بزرگ کنم چیکار باید بکنم؟ البته من سایز نوشته تو local style هام ندارم و دستی اندازه میدم
درود بر شما. وقت بخیر
کمی این مرحله سخت است و اینکه تا این قسمتش اومدید خیلی خوبه. حتی شده چند بار ببینیدش که بهش مسلط بشوید چون موضوع حرفه‌ای و پرکاربردی در ui است. ببینید اینکه سایزها به تناسب بزرگ نمی‌شوند به دلیل AutoLayout نبودن دکمه است. شاید هم Auto Layout باشد و عرض و ارتفاع Fixed گرفته باشد. یا مثلا متن داخل دکمه ممکن است که Auto Width نباشد. این موارد اغلب باعث موضوعی که فرمودید میشود.
موفق باشید.
سلام وقتتون بخیر عذر می خوام زیر مجموعه های قسمت button مثل state /style /… برای من نمایش داده نمیشه امکانش هست در این زمینه راهنمایی بفرمایید
درود بر شما. وقت بخیر
اگر هنوز واریانت را نساختید، روی عنوان کامپوننت اصلی که کلیک کنید، آن موارد (البته به شرطی که آنها را ساخته باشید) دیده خواهند شد. اگر هم واریانت را ساخته‌اید، روی عنوان واریانت (همان باکس بنفش که اطراف دکمه ها اضافه شده) کلیک کنید می‌توانید لیست پراپرتی‌هایی که ساخته‌اید را ببینید. اگر هم قصد دارید اعمال کردن آنها را بررسی کنید باید کامپوننت فرزند را از تب Assets در صفحه بندازید.
موفق باشید.
سلام وقتتون بخیر
ممنون از آموزش‌های خوبتون. من یه سوال داشتم. من واریانت‌ها رو ساختم ولی میخوام سایز آیکون‌ها رو تغییر بدم و سایز تکست‌های داخل واریانت ها رو. چه طور میتونم همه ی سایز آیکون ها و سایز تکست‌های داخل واریانت‌ها رو باهم تغییر بدم؟
درود بر شما. وقت بخیر
وارد منوی کلاسیک فیگما بشوید از بالا سمت چپ صفحه و سپس وارد منوی edit و سپس اواخر این منو گزینه select all with نیز زیرمجموعه‌های مختلفی دارد که با آنها می‌توانید عناصر را با خصوصیت آنها انتخاب کنید. مثلا رنگ متن، رنگ زمینه، پراپرتی یکسان و…
موفق باشید.
سلام و درود وقت شما به خیر سپاس از آموزش های کامل و عالیتون.
بنده یک سوال داشتم. بعد از آپدیت جدید فیگما کمی تغییر ظاهر داشته.
بنده چندین ویدئو در خصوص ساخت کامپوننت دیدم و هچنین ویدئوی شما، اما اصلا موفق نشدم متغیر تغییر متن دکمه رو اعمال کنم. توی قسمت تایپوگرافی اصلا گزینه ای برای اعمال متغیر روی متن به وجود نمیاد.
ممنون میشم من رو راهنمایی کنید.
درود بر شما. وقت بخیر
قصد بروزرسانی دوره را داریم و سال جدید دوره بروز میشود و پروژه آن نیز بروز خواهد شد. اما این تغییرات خیلی هم زیاد نیست. برخی گزینه‌ها در کلیک راست وجود دارد. همچنین از دکمه‌های ترکیبی هم می‌توان استفاده کرد که رفرنس همه آنها با زدن دکمه‌های “ctrl + shift + علامت سوال” باز میشود و قابل مشاهده است. مهمتر اینکه روی منوی شناور مشکی رنگ که در پائین سمت راست صفحه است اگر کلیک کنید می‌توانید برگردید به UI قبلی فیگما. یک نکته مهم دیگر آنکه تمامی مواردی که کمی تغییر کردند همگی در همان منوی سایدباری سمت راست فیگما هستند. مثلا متغیر متن بالاتر رفته. کمی دقت کنید پیدا می‌شوند. اما به‌هرحال ما نیز دوره را بروز خواهیم کرد که این مسائل هم کاملا حل بشود.
موفق باشید.
سلام وقت بخیر
برای دکمه فاصله دو طرف گفتین باید دو برابر فاصله بالا و پایین باشه چرا در حالت اسمال 24 و 16 هست؟
درود بر شما. وقت بخیر
بله به طور کل همین روند هست و پدینگ چپ و راست دو برابر پدینگ بالا و پائین هست. اما گاهی موارد خاص هم وجود دارد. حتی سایز آیکن و متن هم گاهی لازم میشود که تغییر بدهیم.
موفق باشید.
سلام استاد
اولا که تشکر فروان از شما جابت اموزش های بینظیرتون
دوم یه سوال داشتم، در واریانت کردن من اصلا در نوار سمت راسهم گزینه ی layer ندارم و نمیتونم از اونجا بولین بسازم.
و اینکه با روش دیگه برای هر مورد فقط میتونم یه وارینت بسازم نه مثل شما دوتا (هم بولین و هم تکست)
درود بر شما. وقت بخیر
کمی نرم‌افزار فیگما تغییر کرده و ما تا ماه‌های پیش رو، محتوا را بازهم بروز خواهیم کرد. اما خیلی از گزینه‌ها در کلیک راست وجود دارد. مثلا همین گزینه‌ای که فرمودید کمی بالاتر رفته است. در همان سایدبار سمت راست هست.
در مورد روش ساخت واریانت، به طور کل چند روش وجود دارد که من دو مورد را توضیح داده‌ام. مهم نتیجه نهایی هست. اگر نتیجه مطلوب هست، همان روشی را که بیشتر باهاش راحت هستید انجام بدهید و پیش ببرید.
موفق باشید.
سلام استاد گرامی
برای آموزش خوبتون که رایگان در اختیار ما گذاشتید بسیار قدردانتون هستیم. من دارم سعی میکنم گام به گام با شما جلو برم و هر قسمتی رو با آموزش شما اجرا کنم. این قسمت البته سخت بود و کند جلو رفتم:) ضمن اینکه فیگما ظاهرا تغییر کرده با زمانی که شما ویدیو رو ضبط کردید. یه سوال هم داشتم فایل این قسمت رو جایی گذاشین که دانلود کنیم؟ منظورم اون توضیحات واریانت ها هست: State, size ,… که بذاریم داخل باکس اون دکمه ها که ایجاد کردیم؟
و یه سوال دیگه اینکه وقتی دوره رو با شما تموم کردم امکانش هست جایی مثلا به عنوان کاراموز مشغول بشم که هم بیشتر یاد بگیرم و هم مشغول به کار بشم؟
درود بر شما. وقت بخیر
برخی جلسات مانند همین کامپوننت‌ها، Auto Layout و اینترکشن‌ها واقعا تمرین لازم دارند و گاهی لازم است بیش از یک بار ویدئو را مشاهده کنیم. طبیعی هست. تغییرات فیگما طوری نیست که جلوی یادگیری را بگیرد ولی قصد بروزرسانی دوره را هم داریم و شروع کرده‌ایم. روی دکمه علامت سوال در پائین سمت راست کلیک کنید می‌توانید ظاهر قبلی فیگما را هم فعال کنید.
فایل کل پروژه در کامیونیتی فیگما وجود دارد. در گوگل سرچ کنید Pooya creative agency figma. در جلسات آخر دوره در خصوص کارآموزی، ساختن نمونه‌کار، بهبود رزومه و… صحبت کردیم. حتما آنرا مشاهده کنید. در پلتفرم‌هایی مانند jobinja به جز فرصت‌های شغلی متفاوت، کارآموزی هم درج میشود.
موفق باشید.
سلام استاد شبتون بخیر باشه
من داشتم این ویدیو رو مرور میکردم یه سوال برام پیش اومد. اگر بخوایم واریانت چپ و راست بودن آیکن دکمه رو اضافه کنیم باید یک دکمه با کامپوننت جدید اضافه کنیم که آیکن سمت راست قرار گرفته و دوباره سایز و استایل رو براشون تعریف کنم و یه واریانت جدید بسازیم؟
درود بر شما، وقت بخیر
باید به جای ساختن boolian برای نمایش یا عدم نمایش آیکن، از حالت واریانت جدید استفاده کنیم که 3 حالت را پوشش بدهد. سمت راست، سمت چپ و مخفی بودن. چون boolian صرفاً دو حالت را پوشش می‌دهد.
موفق باشید.
سلام وقت بخیر
ممنون بابت وقتی که گذاشتین و آموزش بسیار با کیفیتتون فقط یه سوال
استاد فایل این قسمت رو اگه به اشتراک گذاشتین از کدوم لینک میتونم دانلود کنم؟
ممنون.
درود بر شما. وقت بخیر
سپاس از لطف شما. داخل گوگل سرچ بفرمائید pooya creative agency figma. داخل کامیونیتی فیگما هست.
موفق باشید.
سلام و خدا قوت به شما 🙂 من با این جلسه هم پیش رفتم و این دکمه هارو طراحی کردم. البته با آپدیت فیگما جای بعضی چیزا فرق می‌کرد که پیدا کردم. الان دیدم نوشته بودید که این جلسه سخته و از اینکه با یکم دقت تونستم این جلسه رو هم بدون چالش جدی و خاصی پیش ببرم به خودم امیدوار شدم :))
ممنونم از آموزش واضح و روان شما، من همچنان رو به جلو با آموزشاتون پیش میرم:)
درود بر شما. وقت بخیر
بنده خودم شخصاً قیمه قیمه شدم تا این قسمت رو یاد بگیرم. یکم سخت است و قبول دارم. اما باید یک ویدئو خوب پیدا کنیم. بیفتیم به جانش و چندین بار ببینیم و تمرین کنیم. انقدر انجامش بدهیم تا یاد بگیریم. دقیقا مثل فرمول‌های ریاضی. دلیل اینکه کمی مثال رو در این جلسه پیچیده کردم همین است. باید پارامترهای (واریانت‌های) مختلفی داشته باشد که یادگیری شکل بگیرد. اگر خیلی ساده باشد عملکرد آنها خوب درک نمی‌شود.
موفق باشید.
سلام استاد امیدوارم که تندرست باشید
من وقتی میخوام سایز medium که همون 48 هست رو اعمال کنم روی دکمه ها با وجود اعمال تنظیمات گفته شده در ویدیو، دکمه ها داخل هم میرن از عرض و هرکاری میکنم درست نمیشن. اسکرینش رو براتون میزارم ممنون میشم چک کنید.
درود بر شما. وقت بخیر
اسکرین‌شات رو دیدم. کلا فیگما برای سورت کردن داخل گزینه‌های واریانت یکم باگ داره به نظرم. با تعداد کمتری گزینه‌ها رو select کنید اون موقع اعدادش میاد و میشه تنظیم کرد. من خودم برای اینکه این اتفاق نیفته قبل از اینکه سایزها رو بزرگ کنم (مثلا با زیاد شدن پدینگ و ارتفاع که باعث بزرگ شدن سایز دکمه‌ها می‌شوند) میام قبلش کلا فواصل دکمه هارو یکم بیشتر میکنم که توی یکدیگر نروند. در واقع داخل ویدئو هم، چنین کاری رو انجام دادم.
موفق باشید.
سلام وقتتون به خیر، توی آپدیت جدید فیگما، چطور میتونم instance swap رو برای تغییرات آیکون ایجاد کنم؟
خیلی لطف می‌کنید.
درود بر شما. وقت بخیر
یکم عوض شده فیگما. یک مقدار رفته بالاتر. یعنی سمت راست صفحه بالا. همان جا که واریانت هم وجود دارد. بعداً قطعا ویدئوهارو بروز خواهم کرد. اما علی‌الحساب عرض کنم که اگر گزینه‌ای را نیافتید، ابتدا کلیک راست کنید شاید در کلیک راست باشد. بعد بازم اگر پیدا نکردید آن موضوع را در سرچ گوگل بزنید و در تصاویر بروید. آنجا هم می‌توانید راحت پیدا کنید.
موفق باشید.
عرض احترام خدمت شما
شما فرمودید که padding در ساخت دکمه ها ، باید بالا و پایین نصف چپ و راست باشد اما در سایز small این را رعایت نکردید ایا دلیل خاصی دارد یا صرفاً برای زیبایی این کار را انجام دادید.
درود بر شما. وقت بخیر
تبریک می‌گویم به خاطر دقت شما. همینطور هست. قاعدتاً مقدار پدینگ چپ و راست باید 2 برابر بالا و پائین باشد. اما قوانین طراحی در عین حال که نظم می‌طلبد، استثناء هم دارد. دقیقاً مانند قوانین راهنمایی و رانندگی که مثلا ممکن است مامورین از خط ویژه اتوبوس برای کمتر کردن حجم ترافیک استفاده کنند. در طراحی هم گاهی این استثناءها رخ می‌دهد.
موفق باشید.
سلام من با sticky یه ایکن سبد خرید درست کردم ولی منوی بالای صفحه که fix هست میاد رو ایکن موقعی که صفحه رو پایین میارم چیکار کنم؟
درود بر شما. وقت بخیر
نیازی نیست که عناصر داخل هدر رو Sticky کنیم. به نظرم ابتدا هدر رو کامل طراحی کنید. بعد فریم کلی هدر را Sticky کنید. اینطوری موارد داخل آن هم در اسکرول دیده خواهند شد.
موفق باشید.
سلام استاد وقتتون بخیر باشه
برای من Properties و Variant نشون نمیده گزینه اش رو چیکار کنم؟؟
درود بر شما. وقت بخیر
دو سه نکته عرض کنم شاید کمک‌کننده باشد. مورد اول اینکه کلا برای تغییر و ویرایش کامپوننت و یا واریانت‌های زیرمجموعه آن، باید حتما روی کامپوننت مادر یا Main کلیک بکنید. با کلیک روی فرزندان آن نمیشه آنها را ویرایش کلی کرد. مورد دیگر اینکه اگر واریانت هم دارید، باید حتما روی دیواره بنفش رنگ دور آن کلیک کنید که تنظیمات را ببینید. در نهایت اگر صرفاً می‌خواهید تنظیماتی که انجام دادید را مشاهده کنید، در این حالت اتفاقا باید کامپوننت فرزند را یا با کپی کردن و یا با درج کردن از تب Assets در صفحه بندازید تا گزینه‌های آن را مشاهده کنید.
ارادتمندم. موفق باشید.
سلام استاد خسته نباشید
باز هم تشکر از آموزش های مفید شما که واقعا آموزنده هست.
یک سوال داشتم برای دسته کامپوننت های سایز small که در ویدیو آموزش دادین بهتر نیست پدینگ رو 24 و 12 بزاریم به جای 24 و 16؟ که اون نسبت دو برابر که فرمودین حفظ بشه؟
درود بر شما. وقت شما بخیر.
سپاسگزارم از شما. بله درست فرمودید. البته چون ارتفاع دکمه نیز به صورت دستی از مقادیر نسبت 8 مانند 24 و 32 و 40 و 48 و… استفاده میشود، عملا این مشکل برخی مواقع به این صورت نیز برطرف میشود.
موفق باشید.
سلام
وقتی سایز آیکن و متن داخل دکمه رو کوچک میکنم اندازه دکمه هم کوچک میشود.
چجوری این مشکل حل میشه؟
درود بر شما. وقت بخیر
ببینید این مشکل به حساب نمی‌آید. چون اندازه‌ها کوچکتر می‌شوند، عملا باعث می‌شوند فضای کمتری اشغال بشود. چون شما آن دکمه را Autolayout کردید که البته کار درستی هم کردید. پس پدینگ و مارجین اطراف دکمه، وابسته هستند به محتواهای داخل آن دکمه. پس اگر آیکن و متن دکمه کوچکتر یا بزرگتر بشود، سایز کلی دکمه هم تغییر می‌کند. برای اینکه موقع طراحی مشکل ساز نشود، از سایزهای مشخصی برای ارتفاع استفاده میشود. یعنی مان 32 و 40 و 48 و 56 و 64 و…
موفق باشید.
سلام
زمانی که میخوام واریانت سایز رو درست کنم وقتی ارتفاع رو تغییر میدم سایز دکمه ها تغییر میکنه ولی متن و آیکن ثابت میمونه و اندازشون هیچ تغییری نداره.
لطفا راهنمایی کنید.
درود بر شما. وقت بخیر
درست می فرمائید. همینطوره. در واقع قرار نیست همیشه سایز آیکن و متن را تغییر بدهیم. مثلا وقتی فونت 14 پیکسل هست و ارتفاع 32 پیکسلی قرار است بشود 40 پیکسل، لزوماً احتیاجی نیست که سایز آیکن و متن را هم عوض بکنیم. اما اگر این ارتفاع و پدینگ و مارجین بیشتر بشود، مثلا فرض کنید که 56 یا 64 پیکسل بشود، آنجا این موضوعی که فرمودید می‌تواند رخ بدهد و مثبت است. انجامش هم ساده هست. آنها را Select میکنیم و سایزشان را بزرگتر میکنیم.
موفق باشید.
درود وقت بخیر
ممنون از آموزش های خوبتون
من کامپوننت و واریانت رو ساختم و زمانی که از المان های primary کپی گرفتم تا بتونم واریانت های secondary رو بسازم با یه مشکلی مواجه شدم… نمیتونم داخل محدوده کامپوننت ها (قسمتی که دورش نقطه چین هست) المان هارو بصورت درگ کردن انتخاب کنم و وقتی میخوام چنتا المان مشخص رو درگ و انتخاب کنم کل باکس یا محدوده یکجا جابجا میشه پس به همین خاطر نمیتونم واریانت های secondary ایجاد کنم
درود بر شما. وقت بخیر
نکته خاصی ندارد فقط باید زوم کنیم و با دقت آنها را منتقل کنیم. زوم که بیشتر باشد آسان‌تر میشود. گاهی زوم صفحه که کم باشد این کار کمی دشوار میشود و منم باهاش گاهی مواجه می‌شوم. قبلش با ماوس ابتدا مواردی که می‌خواهید را درگ کنید و در حالت انتخاب قرار بدهید.
موفق باشید.
سلام استاد وقتتون بخیر
ضمن تشکر از زحمات شما به خاطر شیوه عالی تدریستون و دوره‌ای که به صورت رایگان در اختیار ما قرار دادید.
در ویدیوی آموزشی، گفته بودید که مثلا برای ایجاد دکمه padding از دو طرف رو ۱۶ و از بالا و پایین رو ۸ قرار بدیم. ولی وقتی این مقادیر رو وارد میکنم، دکمه من خیلی کوچک به نظر می‌رسه و شبیه به چیزی که در ویدیو نشان داده شده نیست. ممکنه به خاطر تنظیمات صفحه یا تفاوت‌های مقیاسی باشه؟ ممنون میشم راهنمایی کنید
درود بر شما. وقت شما بخیر
ممکن است سایز فونت شما و یا آیکن کنار شما و یا حتی هر دوی آنها خیلی کوچک شده باشند. سایز آیکن رو بنده روی 16 و سایز فونت را هم روی 14 گذاشته بودم. ضمن اینکه تنظیمات تایپوگرافی را نیز طبیعتاً در جلسات قبلی اجرا کرده بودم. این موارد را نیز بررسی بفرمائید.
موفق باشید.
سلام
layer در update جدید figma چجوری میاد؟
درود بر شما. وقت بخیر
جای آن تفاوتی نکرده است. چه در دیزاین قبلی و چه در دیزاین جدید فیگما، لایه‌ها در سمت چپ و زیر صفحات آن پروژه هستند.
موفق باشید.
سلام استاد
وقت بخیر و ممنون بابت آموزش عالیتون
یه سوال دارم برای قسمت سایز بندی وقتی که میخوام سایز small رو ایجاد کنم pading رو در قسمت frame نمایش نمیدهد در صورتی که اگه همه رو انتخاب نکنم فقط چند تا کامپوننت باشه نشون میده نمیشه فاصله همه کامپوننت هارو با هم عوض کنم
درود بر شما. وقت بخیر.
درست می فرمائید. کلا این حالا Autosize فیگما خیلی خوبه. اما داخل واریانت‌ها (خصوصا زمانی که تعداد بالاست) گاهی دقیق کار نمیکنه. بنابراین با تعداد کمتر انتخاب کنید و فواصل بین شون رو مرتب کنید. (منظور من فواصل بین دکمه ها هست).
موفق باشید.
استاد وقتی این کامپوننت هارو میسازیم باید ان را کپی و در صفحه uikit به صورت دستی paste کنیم؟ منظورم اینه بعدا از کجا و چطوری ازشون استفاده کنیم؟ چون دیدم شما توی صفحه ukit خودتون نمونه کامپوننت زیادی دارید ولی برای من خالی میمونه… من خیلی سوال دارم و گیج شدم
درود بر شما. وقت شما بخیر
کلا بهتره که کامپوننت‌ها را در یک صفحه مثلا با نام uikits بسازید. اینطوری همه کامپوننت‌ها یکجا هستند و خیلی سریع می‌توانیم آنها را پیدا و ویرایش کنیم. حتی اگر در صفحه دیگر هم بود می‌توانیم Cut کنیم و در این صفحه Paste کنیم.
این بحث از فیگما خیلی تکرار و تمرین لازم دارد. کمی دشوار هست. حتما ویدئو را دست کم چند بار ببینید و انقدر تمرین کنید که بهش مسلط بشوید. سوالی هم بود بپرسید. مشکلی نداریم اگر حتی زیاد هم باشد. به آنها پاسخ خواهیم داد.
موفق باشید.
یه سوال دیگه استاد
من از کجا میتونم اون button table رو با اون استایل های state size…. پیدا کنم بذارم کنار کامپوننتی که امروز ساختمش
من اون متن اماده ای که از روی اون ساختید رو ندارم متاسفانه .
درود بر شما. وقت بخیر
فایل آماده پروژه توی کامیونیتی فیگما هست. اگر دوست داشتید بردارید. در گوگل یا خود کامیونیتی فیگما سرچ کنید pooya creative agency
موفق باشید.
سلام استاد خسته نباشید
شما فرمودید میتونیم مثلا از این دکمه در قسمت سبد خرید استفاده کنیم و وقتی کارفرما خواست رنگ همشون سبز بشه روی دکمه ی مادر این کار رو انجام بدیم در قسمت uikit. تا روی همه اعمال شه درسته؟ خب مثلا در جایی دیگه از همین دکمه برای 20تا دکمه ی سطل زباله هم استفاده کردیم و بخواهیم مثلا رنگ آن دکمه ی سطل زباله رو نارنجی کنیم. اونوقت دکمه های سبد خرید که قرمز بود هم نارنجی نمیشن؟(یا باید برای سطل زباله با رنگ نارنجی هم جدا کامپوننت بسازیم؟ )
من توی نحوه و کاربرد استفاده ازش مشکل دارم. یعنی چطوری میتونم از همین یدونه دکمه داشبورد که الان با تمام خصوصیات و استایل هاش ساختیم هم در بخش مثلا 50 تایی سبد خرید با رنگ سبز به صورت جداگانه استفاده کنم و هم مثلا برای 30 تا دکمه سطل زباله ازش استفاده کنیم که تغییر روی هرکدوم ختلالی روی هم نذارن
درود بر شما. وقت بخیر
به طرق مختلف می‌توان این کار را کرد. هم می‌توان واریانت برای آیتم رنگ هم ساخت. هم می‌توان طبق چیزی که خودتان هم اشاره فرمودید، یک کامپوننت دیگر ساخت.
موفق باشید.
استاد من یه واریانت فونت سایز هم تعریف کردم که متناسب با سایز، بزرگ بشه. اشتباهه؟ ولی حالا نمیدونم که فونت سایز ها رو باید از کجا مقدار بدم و اینکه فکر میکنم البته به خود واریانت سایز هم باید لینک بشند. ممکنه توضیح بدین؟
درود بر شما. نه اشتباه نیست. ممکن است برخی جاها لازم بشود.
یک راه دیگر هم هست. مثلا شما می‌توانید مبتنی بر device ها هم سایز تغیین کنید. اینطوری هم مشکل حل میشود. مثلا برای دسکتاپ، تبلت و موبابل سایر تعریف کنید و در استایل‌های فیگما اضافه کنید. اینطوری انتخاب آنها نیز آسان است.
موفق باشید.
سلام استاد. چطور موقعی که جدول رو که با نگهداری دکمه های alt+shift+arrowkey جابجا میکنیم، دقیقا به فاصله های constraint ای که میخواهیم برسیم؟ مثلا من میخواستم بالا و چپ هر دو 32 باشند ولی یکی32 میشد و دیگری 30. جطور باید بهش عدد داد غیر از جابجاییِ دستی؟
درود بر شما. عرض ادب
فواصل بین آیتم‌ها را نشان می‌دهد وقتی روی حالت Tidy Up باشد. (شاید منظورتان را خوب متوجه نشده باشم اما زیر مقادیر width و height مقادیر را می‌شناسد و سریع می‌توان تغییر داد با کیبورد و یا با ماوس).
موفق باشید.
سلام ببخشید استاد یاد گرفتن فیگما برای کسی که با وردپرس و المنتورپرو سروکار داره، میتونه کارایی داشته باشه؟ میتونیم بعضی قسمت ها رو با المنتورپرو بسازیم و بعضی بخش ها مثل اسلاید ها رو با فیگما ساخت؟
درود بر شما. وقت بخیر
به شدت! چون خیلی از افراد هستند که برنامه‌نویسی بلدند، موضوعات امنیت و سرعت سایت را خوب می‌دانند. به مسائل سرور و شبکه (دست‌کم مواردی که در وردپرس مورد نیاز هست) تسلط دارند. اما اگر موضوعات uiux رو نشناسند نمی‌توانند سایت خوبی طراحی کنند. بنابراین خیلی می‌تواند کمک‌کننده باشد. این کار باعث میشود پروژه‌های وردپرسی پردرآمدی را بدست بیاوریم.
موفق باشید.
سلام استاد وقتتون بخیر ممنون از آموزش بسیار خوبتون. سوال من این هست که در یک صفحه از سایت وردپرسی می تونیم یک بخشش رو با فیگما کار کنیم و یک بخش دیگر رو با المنتور پرو؟ یا باید کل صفحه با طراحی فیگما باشد یا کل صفحه با المنتور؟
درود بر شما. وقت بخیر
فیگما صرفاً برای طراحی رابط کاربری هست. در واقع خود فیگما مستقیما نمی‌تواند وارد المنتور بشود. فقط در واقع از طرحی که داخل فیگما طراحی شده استفاده می‌کنند و آن را در وردپرس (یا سایر پلتفرم‌ها) پیاده‌سازی می‌کنند.
اگر منظور این هست که “آیا میشود بخشی از طرح فیگما را در وردپرس پیاده سازی کرد؟” اگر سوال این هست باید بگویم که بله میشود. فقط باید قبلش با کارفرما هماهنگ بود که در صورت رضایت کارفرما، پیش برود.
موفق باشید.
استاد من سوالی دارم
توی این قسمت از درس به اونجا رسیدم که
state-style-radius ایجاد شده. حالا میخوام سایز رو ایجاد کنم
ایکس اسمال رو روی همون اولی اعمال می کنم اما درینجای ویدیو شما همه ی محتوای داخل button رو انتخاب و فاطله هارو بیشتر می کنید اما برای من padding و margin توی این بخش نمیاد که این کارو انجام بدم
کپی هم که میگیرم برای ساخت دکمه small چون ابعاد بزرگتر میشه دکمه ها با هم تداخل پیدا میکنن
علتش چی هست که padding و margin برام نمیاد
درود بر شما. وقت بخیر
کمی طراحی خود نرم‌افزار فیگما متفاوت شده. بروز شده و احتمالا این روزها شما نسخه جدید آنرا می‌بینید. البته این تفاوت آنقدری زیاد نیست و قابل تشخیص هست. در واقع در دیزاین جدید فیگما جای پدینگ و مارجین عوض نشده است و در همان منوی سمت راست نرم‌افزار است. نکته مهم دیگر که ممکن است کمک کننده باشد این هست که حتما حتما باید دکمه ها به صورت Autolayout شده باشند. چون اصلا پدینگ و مارجین در این شرایط قابل استفاده است. این قسمت فیگما یکم سخت است و تکرار بیشتری می‌خواهد. اگر به هر دلیل نتیجه نداد رهایش نکنید و بازهم ویدئو را ببینید و تلاش کنید بسازیدش.
موفق باشید.
سلام و عرض خسته نباشید
پیشنهاد شما استفاده از یوآی کیت آماده هست یا صفر تا صد رو خودمون بسازیم؟
درود بر شما. وقت شما بخیر
هر دو خوب هست. به نظرم در قدم اول تلاش کنید که با متریال دیزاین گوگل نسخه جدید کار کنید. بخش‌های مختلف و uikit های مختلف آن را بسازید. بعد آهسته آهسته تجربه خود را در طراحی دیزاین سیستم بیشتر کرده تا اینکه بتوانیم پس از مدتی تمرین و کار با دیزاین‌سیستم‌های آماده، خودمان نیز دیزاین‌سیستم اختصاصی طراحی کنیم.
موفق باشید.
با سلام چرا وقتی instance swap رو میسازم اون گزینه ای که ایکون رو میخام بهش ارجاع بدم ندارم؟
یا حتی مث روش دوم شما اول ایکون رو انتخاب میکنم و بعد میخام instance swap بازم گزینه‌ای ندارم.
—–
جواب سوالم رو پیدا کردم. آیکنی که داخل دکمه گذاشته بودم و آیکنی که انتخاب کرده بودم با هم متفاوت بود.
درود بر شما. وقت بخیر
من خودتان پاسخ رو پیدا کردید دیگه من گفتم سرتون رو درد نیارم. فقط از فرصت استفاده کنم و اینو بگم که: این قسمت فیگما واقعا یکم سخته. فقط و فقط باید تکرارش کرد. سعی گنید چند بار بسازیدش که کاملا بهش مسلط بشوید.
موفق باشید.
سلام وقت شما بخیر
متاسفانه با بروزرسانی هایی که در فیگما در مقایسه با ویدیوها اعمال شده من نتونستم قسمت تغییر آیکون رو پیدا کنم
درود بر شما. وقت شما بخیر
خودم هم با این چالش مواجه شده بودم. در قدم اول تغییرات کمی ممکن است آزاردهنده باشد. اما آنقدر هم زیاد نیستند. فقط جای دکمه ها و برخی تنظیمات صرفاً عوض شده. پیشنهاد میکنم با نسخه دسکتاپ فعلا کار کنید. نسخه دسکتاپ همان ظاهر قبلی را دارد. ویدئوهارو کامل ببینید و تمرین کنید. بعدا یک ویدئو از آپدیت‌های فیگما ببینید همه چیز حل خواهد شد. ما نیز در آینده دوره را بروز خواهیم کرد. چون تازه این تغییرات اعمال شده و هنوز حتی روی خیلی از اکانت ها اعمال نشده و در واقع هنوز ثابت و تکمیل نشدند بروزرسانی های فیگما.
موفق باشید.
من شاید ۲۰ تا فیلم راجب ب دکمه ها و کامپوننت ها دیدم ولی هیچکدام به این خوبی توضیح نداده بودن واقعا لذت بردم از توضیحتون ، تشکرررر
درود بر شما، وقت بخیر
سپاسگزارم از لطف و مهربانی شما.
خوشحالم اگر ثمربخش بوده است. امیدوارم که سایر محتوا و جلسات نیز مفید واقع بشوند.
موفق باشید.
سلام وقت بخیر.
من وقتی دکمه هارو برای واریانت ها درست کردم سایز دکمه اصلا تراز نیست و بهم میریزه
میشه یه سایز دقیقی بهم بگید تا بهتر بشه، و چیز دیگه که هست برای برخی از دکمه ها radius اعمال نمیشد
درود بر شما. وقت بخیر
به طور کل، برای دکمه ها ارتفاع دستی با نسبت 8 وارد می کنند. یعنی 32 و 40 و 48 و 56 و 64 و…
برای عرض هم با توجه به پدینگ و اندازه فونتی که می دهیم، سایز مناسب بدست می آید. (فواصل چپ و راست در پدینگ باید دو برابر فواصل پائین و بالا باشد). برای سهولت بیشتر پیشنهاد میکنم فایل پروژه که در کامیونیتی فیگما هست را مشاهده بفرمائید. برای این منظور، داخل گوگل pooya creative agency را جستجو کنید و در فیگما آنرا باز کرده و دکمه های آنرا ببینید. برای radius نیز، باز در همین فایل، واریانت radius را بررسی کنید (طراحی شده اش را گذاشتم). مقدار radius هم 0 و 4 و 8 و… هستند.
اگر نمونه دیگری هم مدنظر داشتید ببینید مقدار Tida Buttons را در کامیونیتی فیگما یا گوگل سرچ کنید (هم فارسی و انگلیسی هست فایل آن).
موفق باشید.
سلام و خسته نباشید
این ویدیو بسیار کامل و خیلی زیبا آموزش دادید اما
یه مشکلی داره اینکه موقع بزرگ کردن دکمه در 4 سایز
اندازه فونت داخل دکمه بزرگ نشده و همینطور آیکون داخل دکمه
درود بر شما. وقت بخیر
لزوما در همه uikit هایی که برای دکمه‌ها ساخته میشود، سایز دکمه تغییر نمی‌کند.
در برخی تغییر می‌کند و در برخی نیز ثابت هست. مثلا برای همان uikit دکمه که ما ساختیم، دست کم برای 3 سایز کوچکتر، نیازی به تغییر سایز نیست. اما بزرگ‌ترین سایز از نظر فواصل را می‌توان به جای 14 مثلا از 16 استفاده کرد. (باید دقت کنیم که ارتفاع ترجیحاً از حالت زود و نسبت 8 هم خارج نشود و اشکالی ندارد که ارتفاع دکمه به جای Hug روی حالت Fixed باشد).
موفق باشید.
سلام و خدا قوت
ممنون از آموزش هایی که به صورت رایگان در اختیار مخاطبین گذاشتید.
این جلسه زمانی که دارم دکمه ها را با درگ کردن انتخاب میکنم اون علامتی که به صورت خط میاد و میزنیم تمام دکمه ها باهم مرتب میشه و قسمت بالا میتونیم margin برای همه ی دکمه ها به صورت یکجا انتخاب کنیم نمیاد.
ممنون میشم راهنمایی بفرمایید
درود بر شما. وقت شما بخیر
گاهی داخل واریانت ممکنه دقیق نشناسه، میشه اعداد کمتری رو درگ کنید ابتدا و آنها را مرتب کنید. فیگما به زودی چند آپدیت مهم و بزرگ اعمال خواهد کرد و ممکنه این موارد هم بهبود پیدا کنن طراحی شون.
موفق باشید.
یعنی استاد بی نظیر توضیح میدید من واقعا از ورینت ها ترس داشتم ولی با اموزش شما خیلی راحت یاد گرفتم.
درود بر شما دوست گرامی، وقت بخیر
سپاس از لطف و مهربانی شما. خوشحالم که مفید بوده محتوا.
سپاسگزارم. موفق باشید.