آموزش تخصصی طراحی رابط کاربری UI با Figma
- 3 جلسه
- (30 ساعت)
- پیش نیاز:
معرفی این دوره
فیگما یک برنامه ویرایش گرافیکی و طراحی رابط کاربری مبتنی بر وب است. فیگما یکی از محبوب ترین نرم افزارهای طراحی رابط کاربری بوده و به واسطه کراس پلتفرم بودن و امکانات گسترده در زمینه اجرای پروژه ها به صورت گروهی و همینطور عدم نیاز
به تهیه کردن آن برای بسیاری از امکانات نرم افزار figma از محبوبیت خوبی برخوردار شده است.Figma یک ویرایشگر گرافیک برداری و ابزار نمونه سازی است که اغلب برای طراحی UI استفاده می شود. فیگما )Figma )ابزاری برای طراحی و نمونهسازی
دیجیتال مبتنی بر تکنولوژی ابری )Cloud )است. فیگما روی تمامی سیستم عاملها از قبیل Mac ،Windows ،Linux و …قابل استفاده است. در واقع این نرم افزار قابلیت نصب در سیستم عامل و اجرا در مرورگر را همزمان داراست. ارسال کامنت یکی از
ویژگیهای مفیدی است که امکان ارتباط و ارسال فیدبک را برای طراح، برنامه نویس، مدیر محصول، مالک محصول و دیگر اعضای گروه محصول را فراهم میکند. فیگما از این ویژگی در هر دو حالت طراحی و پروتوتایپ پشتیبانی می کند. همچنین اطالع رسانی
این فعالیت در Slack نیاز پوشش داده میشود.
ابزارهای منحصر به فرد طراحی:
از دیگر ویژگیهای خوب فیگما وجود ابزارهای متعدد طراحی در این نرمافزار میباشد. ابزارهایی نظیر کامپوننت Component ،چیدمان خودکار layout Auto ،کتابخانه library ،پالت رنگ palettes Color ،سبک متن style Text … ، از این نمونه میباشند.
از ویژگی های شاخص فیگما:
• فضای ذخیره سازی بینهایت
• اشتراک گذاری آسان فایل در فیگما
• ارتباط بین تیمی با اسلک Slack
• اشتراک گذاری فایل با برنامه نویس Handoff
• ورژنبندی
• کتابخانه های آماده
• استفاده از چند حساب همزمان
• اشتراک گذاری پروتوتایپ بی درنگ
• پلن رایگان
• کامپوننت
• کلیدهای میانبر
• پالگینهای کاربردی
• آپدیت هفتگی نرم افزار
• کامنت گذاری در حالت طراحی و پروتوتایپ
• مبتنی بر تکنولوژی ابری
سرفصل های این دوره
Section 1:
• Introduction: UI Design course
• Fundamentals of UI Design
• Design Patterns & Trends
• Design Systems
• Prototype
• Limitations & implementation
• Project brief
Section 2:
• Introduction: Web app versus Native App
• Creating New Files & Designing on a Grid
• Importing & Cropping Photos
• Vector Graphics, Colors, Shadows, & More
• Text Styles
Secion 3:
• Components (Reusable Elements)
• Turning a Design into a Clickable Prototype
• Stroke & Effects
• Exporting Assets for Web: SVG, JPEG, & PNG
• Sharing Figma Files: Commenting, Testing, Developers, etc.
Section 4:
• Auto Layout
• lnking Up/Down a Page, Scrollable Areas, & Hyperlinks
• intro to Animation
• Plugins & Explore Community
section5:
• property: Variant, Boolean, Instance swap & Text
• Hovers & Overlays
• Adding Interactions to a Slideshow: Tap, Drag, Keys, etc
• Team Libraries (Shared Libraries)
مخاطبین این دوره
• کسانیکه برنامه نویسی میکنند
• کسانیکه طراحی سایت کار میکنند
• طراحان گرافیک و وب
• طراحان محصول
آنچه در این دوره خواهید آموخت
• تسلط بر اصول طراحی رابط کاربریطراحی راهنمای سبک Guide Style
• طراحی کل پروژه بر اساس layout Auto
• پیاده سازی نمونه اولیه Prototypes
• آشنایی با inspect
• آشنایی به نحوه استفاده از فونت متغییر
• آشنایی با کامپوننت و ویژگیهای آن
• آشنایی با پالگینهای کاربردی در فیگما
• آشنایی با ترفندهای کاربردی و جذاب
درخواست مشاوره رایگان یا رزرو دوره
"*" indicates required fields
