نحوه طراحی و متحرک سازی یک نوار کناری تاشو در Figma
How to Design and Animate a Collapsible Sidebar in Figma
در این کلاس به شما نشان خواهم داد که چگونه یک نوار کناری جمع شونده را در Figma طراحی و متحرک کنید.
چرا در این کلاس شرکت کنید
این یک کلاس بسیار کاربردی است و به شما یاد می دهد که چگونه از Figma برای طراحی چیزی که قطعا در حرفه طراحی خود با آن مواجه خواهید شد استفاده کنید. و من بهترین ابزارها و تکنیک هایی را که می توانید برای ایجاد سریع و کارآمد آن استفاده کنید، به شما نشان خواهم داد.
نمای کلی کلاس
در این کلاس با برخی از قدرتمندترین ویژگی‌های Figma آشنا خواهید شد. من به شما نشان خواهم داد که چگونه از طرح‌بندی خودکار استفاده کنید تا همه چیز را کاملاً در یک راستا نگه دارید، چگونه با متغیرها و سبک‌های لایه در زمان صرفه‌جویی کنید، و چگونه گردش کار خود را با ساده کنید. اجزا و انواع . به‌علاوه، ما به برخی از تکنیک‌های نمونه‌سازی پیشرفته می‌پردازیم تا بتوانید به آرامی نوار کناری را بین حالت‌های جمع‌شده و گسترش‌یافته، متحرک کنید .
آنچه خواهید آموخت
- نحوه انتخاب نمادهای برای پروژه طراحی
- نحوه کار با متغیرها و سبک های لایه برای صرفه جویی در زمان
- نحوه انتخاب رنگ های مناسب و طراحی چیزی مطابق با دستورالعمل های برند
- نحوه کار با طرح خودکار Figma
- نحوه ایجاد اجزای با انواع مختلف
- چگونه به آرامی یک نمونه اولیه را متحرک کنیم
پروژه کلاس
این کلاس فقط در مورد تئوری نیست. شما می توانید از میان 3 فریم سیمی و 3 دارایی برند خیالی انتخاب کنید. بر اساس آنها، نوار کناری جمع شونده خود را طراحی خواهید کرد.
می توانید با دریافت یک کپی از فایل زیر، فایل پروژه کلاس را دانلود کنید:
آیا این کلاس برای شماست؟
مطمئنا! این کلاس برای مجموع مبتدیان ارزشمند خواهد بود، اما همچنین برای طراحان باتجربه نیز ارزشمند خواهد بود. شما به تجربه گسترده Figma نیاز ندارید، اما آشنایی خاص با رابط کاربری Figma باعث می‌شود که کلاس راحت‌تر دنبال شود.
این کلاس تماماً در مورد تمرین و طراحی در Figma است، بدون توجه به سطح مهارت شما.
آنچه شما نیاز دارید
ما به طور انحصاری از Figma برای کار خود استفاده خواهیم کرد، بنابراین تنها چیزی که نیاز دارید یک مرورگر و یک حساب رایگان Figma است. چه از لپ‌تاپ یا رایانه رومیزی استفاده کنید، از Mac، Windows یا Linux استفاده کنید، همه آماده هستید که وارد آن شوید.
منابعی که استفاده کردم
برای طرحی که در کلاس می بینید، از منابع زیر استفاده کردم:
بیایید شروع کنیم
آیا آماده طراحی یک نوار کناری تاشو در Figma هستید؟ سپس به من بپیوندید و شما را در کلاس !
می بینم
شما همچنین ممکن است این کلاس ها را دوست داشته باشید
درس ها Lessons
-
متحرک سازی نوار کناری Animating the Sidebar
-
طراحی دو ستون کناری Designing the Two Sidebars
-
نتیجه گیری و اندیشه های نهایی Conclusion and Final Thoughts
-
پروژه کلاس The Class Project
-
طراحی آیتم های منو Designing the Menu Items
-
انتخاب نمادها Choosing Icons
-
به کلاس خوش آمدید Welcome to the Class
https://donyad.com/d/e1189c
Adi Purdila
طراح و توسعه دهنده وب
من Adi هستم و یک طراح وب از رومانی هستم.
از زمانی که چشمم به کامپیوتر افتاد (فکر می‌کنم حدود 8 ساله بودم)، طراحی، رابط‌های کاربری و رنگ‌ها را داشتم. و بازی های ویدیویی بعدها در زندگی، من این فرصت را پیدا کردم که از علاقه خود به خوبی استفاده کنم و شروع به ایجاد لوگو و وب سایت های ساده کردم. چندین سال به جلو بروید و من این فرصت را دارم تا دانش و اشتیاق خود را برای طراحی وب با شما به اشتراک بگذارم.
من اکنون بیش از یک دهه است که به عنوان یک طراح وب کار می کنم، چند سالی است که تدریس می کنم و می خواهم این کار را برای آینده قابل پیش بینی ادامه دهم. من می‌خواهم دوره‌هایی ایجاد کنم که دنبال کردن آنها آسان باشد و ارزش زیادی برای دانش‌آموزان ارائه دهد.
من متاهل هستم و 2 فرزند دارم. خوب، اگر 9 سگ و 10 گربه را هم حساب کنید، در واقع 21 بچه.
در اوقات فراغت خود دوست دارم در باغ خود کار کنم، به جوجه ها رسیدگی کنم و همچنین کمی نجاری انجام دهم. من در آن مرحله آخر خیلی خوب نیستم، اما تا کنون فقط یک بار موفق به مصدومیت شدم بنابراین فکر می کنم در مسیر درستی هستم.
هدف من کمک به شما برای تبدیل شدن به یک طراح و توسعه دهنده وب بهتر است، بنابراین از اینکه در این تلاش به من ملحق شدید متشکرم.
آدریان جورج پوردیلا
"معلم عالی. در تئوری طراحی کمک کرد. امیدوارم کلاس های بیشتری در مورد طراحی وب و چیدمان رابط کاربری برگزار کند. متشکرم"
Pala Otz - طراحی با Figma: صفحه فرود برای برنامه موبایل
"پیگیری آسان، کلاس بسیار مفید با دستورالعمل های واضح و نکات و ترفندهای حرفه ای. واقعاً از آن لذت بردم، متشکرم ادی!"
Keresztes Kriszta Kincső - طراحی با Figma: صفحه فرود برای برنامه موبایل
"این به سادگی یک تجربه عالی بود. من کاملاً در فیگما تازه کار نبودم، اما چیزهای زیادی برای یادگیری با این دوره وجود داشت. سبک تدریس آرام و منظم آدی واقعاً هنگام پیگیری به من کمک زیادی کرد. او مانند استاد ذن است. Figma. متشکرم Adi. BTW، اگر تصمیم گرفتید یک دوره آموزشی در وب‌فلو برگزار کنید، من را در آن حساب کنید!"
Jochen Baum - طراحی با Figma: صفحه فرود برای برنامه موبایل
"دوره عالی و معلم جذاب واقعاً چیزهای زیادی یاد گرفت، نکات از معدن طلا بود"
آنتونی یائو - طراحی با Figma: صفحه فرود برای برنامه موبایل
"این کلاس نه تنها Figma را پوشش می‌دهد، بلکه نکات جالب UX/UI/Designer را نیز پوشش می‌دهد که من هرگز در مورد آنها نمی‌دانستم. قبلاً برخی از Figma را می‌شناختم که وارد این کلاس می‌شوند، اما پس از اتمام این کلاس، صادقانه می‌توانم بگویم من حتی با Figma راحت تر هستم. به طور کلی، از ساختار و گردش کار این کلاس لذت بردم. با تشکر Adi!"
کوین ویزکوند - طراحی با Figma: صفحه فرود برای برنامه موبایل
"متشکرم آدی، آموزش شما عالی است!"
آندرس لوپز - طراحی با Figma: صفحه فرود برای برنامه موبایل
"دوره فوق العاده و مربی عالی! با تشکر. من چیزهای زیادی یاد گرفتم و مشتاقانه منتظر دوره های اضافی در مورد Figma توسط آدی پوردیلا هستم."
Pawan Vora - طراحی با Figma: صفحه فرود برای برنامه موبایل
"این کلاس شگفت انگیز است! آدی پوردیلا یکی از کارآمدترین معلمانی است که من دیده ام. روش تدریس او به من انگیزه می دهد تا هر روز طراحی UI را مطالعه کنم. من دوست دارم کلاس های بیشتری از این قبیل ببینم!"
Aybike Anaçali - طراحی با Figma: صفحه فرود برای برنامه موبایل
"این کلاس برای مبتدیان در طراحی Figma و UI عالی است. Adi Purdila دروس را به شیوه ای واضح و جذاب می گذراند که برای مبتدیان منطقی است. کلاس های او ساختار خوبی دارند و پر از اطلاعات هستند بدون اینکه خیلی زیاد باشد. او همچنین پاسخگوی سوالات دانش آموزان در مورد درس است که برای یادگیری بسیار مفید است. :)"
جاش خاویر - طراحی با Figma: صفحه فرود برای برنامه موبایل
نمایش نظرات