آموزش راهنمای No Bull برای حرفه ای شدن Figma در سال 2023 و UX/UI/Product Professional
The No Bull guide to become a Figma pro in 2023, and UX/UI/Product Professional
آیا به دنبال حرفه ای شدن در طراحی UX/UI/محصول در سال 2023 هستید؟ به دوره آموزشی No Bull Guide برای Figma نگاه نکنید! در این دوره، همه چیزهایی را که باید در مورد Figma بدانید، از اصول اولیه تا تکنیک های پیشرفته، به روشی که به راحتی قابل درک و دنبال کردن باشد، یاد خواهید گرفت. با رویکرد "بدون گاو نر"، من کرک را از بین می برم و دقیقاً به قلب آنچه باید بدانید می پردازم.
این دوره برای همه سطوح مناسب است— مبتدیان به سرعت بالا می روند و حتی کاربران پیشرفته نیز می توانند یک یا دو ترفند جدید بیاموزند.
من اینجا هستم تا بهترین شانس ممکن را برای موفقیت به شما بدهم، صادقانه بگویم.
آنچه می‌توانید به دست آورید
با استفاده از تکنیک های من، در اینجا یک پروژه قبلی برای نشان دادن آنچه ممکن است وجود دارد:
برنامه درسی دوره
این دوره به هشت ماژول تقسیم می‌شود که هر کدام جنبه متفاوتی از طراحی Figma را پوشش می‌دهند. در اینجا خلاصه ای از چیزهایی است که یاد خواهید گرفت:
ماژول 1 - جهت یابی به پنجره Figma: اصول اولیه رابط Figma، از جمله بوم، لایه ها و نوار ابزار را بیاموزید.
ماژول 2 - شکل‌ها، شعاع حاشیه، و ویرایش اشکال: بر ابزارهای مختلف شکل تسلط داشته باشید و نحوه تنظیم ویژگی‌های آنها، از جمله شعاع حاشیه و رنگ را بیاموزید.
ماژول 3 - سبک‌های رنگ و تایپوگرافی: با تسلط بر تنظیمات سبک‌ها قبل از شروع طراحی، خود را برای موفقیت آماده کنید.
ماژول 4 - گروه‌ها، قاب‌ها، بخش‌ها: نحوه گروه‌بندی و سازماندهی طرح‌های خود را با استفاده از قاب‌ها و بخش‌ها بیاموزید و از انتخاب‌های هوشمند برای انجام ویرایش‌ها سریع‌تر استفاده کنید.
ماژول 5 - چیدمان خودکار، تراز، تغییر اندازه و فاصله: با نحوه ایجاد طرح‌های واکنشگرا با استفاده از تکنیک‌های طرح‌بندی، تراز و فاصله‌گذاری خودکار بیاموزید.
ماژول 6 - مؤلفه‌ها، نمونه‌ها و ویژگی‌ها: با نحوه ایجاد و استفاده مجدد از مؤلفه‌های قابل استفاده مجدد در Figma و نحوه تنظیم ویژگی‌های آنها مطابق با طرح‌های خود آشنا شوید.
ماژول 7 - اجزای پاسخگو: در هنر ایجاد اجزای پاسخگو که با اندازه های مختلف صفحه نمایش تطابق دارند، تسلط داشته باشید.
ماژول 8 - نمونه‌سازی، تعاملات، جریان‌ها و پیوندهای اشتراک‌گذاری: ابزارهای نمونه‌سازی Figma را کشف کنید و یاد بگیرید که چگونه تعاملات و جریان‌ها را در طرح‌های خود ایجاد کنید.
نتایج دوره
انتظار داشته باشید که به‌روزرسانی‌های منظم، درس‌های جدید و منابع اضافی به دوره اضافه شود، بنابراین حتماً مرتباً بررسی کنید. با این دوره جامع، مهارت ها و دانش لازم برای ایجاد طرح ها و نمونه های اولیه خیره کننده با استفاده از Figma، همکاری موثر با اعضای تیم و تحت تاثیر قرار دادن مشتریان یا کارفرمایان خود را خواهید داشت.
چرا می توانید به من اعتماد کنید
- بیش از 8 سال تجربه با رشد بالا در صنعت فناوری
- من هم به عنوان طراح محصول و هم مهندس نرم افزار کار کرده ام
- مکان های کاری قبلی عبارتند از: جگوار لندرور، بانک تعاونی، و کیک سولوشز - یک شرکت استریم دیزنی
- من یک مقام رسمی هستم
- My بیش از 300 هزار بازدید دارد (و بیش از 3000 دنبال کننده!)
بنابراین، بیایید وارد شویم و مهارت های طراحی خود را به سطح بعدی ببریم!
پروژه کلاس: طراحی یک وب سایت 3 صفحه ای واکنش گرا برای یک محصول یا خدمات خیالی
برای پروژه کلاس، یک صفحه فرود پاسخگو برای محصول یا خدمات خیالی انتخابی خود با استفاده از Figma طراحی خواهید کرد.
علاوه بر صفحه فرود، دو صفحه دیگر نیز ایجاد خواهید کرد، مانند
- یک صفحه تماس
- صفحه ویژگی های محصول.
در پایان این پروژه، شما یک وب سایت کاملا واکنشگرا و تعاملی خواهید داشت که مهارت های طراحی و دانش Figma شما را به نمایش می گذارد.
شرایط مورد نیاز پروژه، و به دنبال آن نکات و منابع اضافی در اینجا آمده است:
- یک محصول یا خدمات را انتخاب کنید — یک محصول یا خدمات خیالی را انتخاب کنید که می خواهید صفحه فرود برای آن ایجاد کنید. این محصول یا خدمات باید هدف مشخص و مشخصی داشته باشد.
- ترسیم برخی از وایرفریم‌ها — با استفاده از ابزارهای Frames و shapes Figma، از طرح‌بندی صفحه فرود خود فریم‌های سیمی ایجاد کنید. از سرقت از سایت های مورد علاقه خود نترسید. به یاد داشته باشید: ایجاد مهارت های خود در اینجا مهم ترین است!
- یک مجموعه پایه از Styles ایجاد کنید — تنها چیزی که نیاز دارید یک مقیاس تایپوگرافی اولیه و چند سایه است. در حال حاضر می توانیم از پالت رنگی پیش فرض Figma استفاده کنیم.
- مجموعه‌ای از مؤلفه‌ها ایجاد کنید — مطمئن شوید که لایه‌های خود را نام‌گذاری کرده‌اید و از Frames برای سازماندهی و پاسخ‌دهی اجزای خود استفاده کنید.
- صفحات خود را طراحی کنید — از ابزارهای طراحی Figma برای ایجاد یک صفحه فرود از نظر بصری جذاب و منسجم استفاده کنید. این شامل ایجاد یک طرح رنگ، تایپوگرافی، تصاویر و نمادهایی است که متناسب با محصول یا خدمات شما باشد.
- واکنش‌پذیری را بررسی کنید — از ویژگی‌های طرح‌بندی خودکار و اجزای واکنشگرا Figma استفاده کنید تا صفحه فرود خود را با تغییر اندازه یا ویرایش محتوا کاملاً پاسخگو کنید.
- فعل و انفعالات را اضافه کنید — از ابزارهای نمونه سازی Figma برای افزودن عناصر تعاملی به صفحه فرود خود استفاده کنید، مانند جلوه های شناور یا تعامل دکمه.
- پروژه خود را به اشتراک بگذارید — وب سایت تکمیل شده خود را با ارسال پیوندی به پروژه Figma خود در بخش بحث کلاس با کلاس به اشتراک بگذارید. اطمینان حاصل کنید که شرح کوتاهی از وب‌سایت خود، از جمله محصول یا خدماتی که انتخاب کرده‌اید و هر گونه ملاحظات طراحی که انجام داده‌اید، درج کنید.
اگر گیر کردید
اشکالی ندارد، نترسید، به سادگی راهنمای من در مورد 7 مشکل رایج در Figma و نحوه حل آنها را بررسی کنید:
محصولات و خدمات نمونه
در اینجا 3 مثال آورده شده است که می توانید استفاده کنید و انرژی خلاقانه خود را برای صفحات وب ذخیره کنید :).
- یک برنامه مدیتیشن که از مدیتیشن‌های هدایت‌شونده صوتی و مناظر صوتی آرام‌بخش برای کمک به آرامش و کاهش استرس کاربران استفاده می‌کند.
- یک پلتفرم یادگیری زبان که درس‌های تعاملی، تمرین مکالمه بی‌درنگ با سخنرانان بومی و بازخورد شخصی‌شده برای کمک به کاربران برای بهبود مهارت‌های زبانی خود ارائه می‌دهد.
- یک سرویس تحویل وعده غذایی که برنامه‌های غذایی سفارشی‌شده را بر اساس اولویت‌ها و محدودیت‌های غذایی، با تمرکز بر مواد اولیه سالم و محلی ارائه می‌دهد.
با تکمیل این پروژه کلاسی، یک وب سایت کاملا واکنشگرا و تعاملی خواهید داشت که مهارت های طراحی شما را به نمایش می گذارد و مهارت شما در Figma را نشان می دهد. همچنین مجموعه ای از صفحات فرود و صفحات اضافی برای افزودن به نمونه کار طراحی خود خواهید داشت.
بنابراین، بیایید شروع کنیم و چیزی شگفت انگیز ایجاد کنیم!
منابع کلاس و مطالعه بیشتر
در اینجا پیوندهایی به فایل‌های انجمن Figma، تمرین‌ها و مطالعه بیشتر وجود دارد که می‌تواند به تقویت مجدد محتوای کلاس کمک کند.
سبک های رنگ
- مواد 2 رنگ:
- رنگ‌های پیش‌فرض Figma:
سبک های تایپوگرافی
- تایپوگرافی ماده 2:
گروه‌ها و قاب‌ها
- آیا باید از یک گروه یا قاب استفاده کنم؟
- ایجاد پیوند لنگر، به روش قدیمی:
- ایجاد همپوشانی قابل پیمایش:
طرح بندی خودکار
- صفحات وب مقیاس پذیر:
مولفه‌ها، نمونه‌ها و انواع
- Masterclass در مدل سازی اجزا:
اجزای پاسخگو
- Mastering Frame nesting:
- اجزای پاسخگو:
طراحی وب واکنشگرا
- سیستم کانتینر:
- سیستم ستون:
نمونه های اولیه
- نحوه اشتراک گذاری فایل Figma با شخصی بدون حساب:
درس ها Lessons
-
سبک های تایپوگرافی Typography Styles
-
جریان های متعدد Multiple flows
-
اجزاء: کارشناسی ارشد و نمونه Components: Masters and Instances
-
پاسخگو برای طراحان Responsive for designers
-
ترفندهایی با شعاع مرزی Tricks with Border Radius
-
ایست بازرسی 1: نفس بکش Checkpoint 1: take a breath
-
بهترین روش ها برای نام صفحات و صفحه Pages and page name best practices
-
ایست بازرسی 3: طرح خودکار، قهرمان من Checkpoint 3: Auto layout, my hero
-
فریم 1 از 2 Frames 1 of 2
-
تودرتوی اجزا Component nesting
-
طراحی وب سایت واکنش گرا Responsive web design
-
آیا باید از گروه ها یا فریم ها استفاده کنم؟ Should I use Groups or Frames
-
ابزارها و میانبرهای صفحه کلید آنها Tools and their keyboard shortcuts
-
حالت‌های Hug، Fill و ثابت تغییر اندازه Hug, Fill, and Fixed resizing modes
-
انواع و خواص Variants and Properties
-
سبک های رنگی Colour Styles
-
ایست بازرسی 2: هنوز نفس می کشی؟ Checkpoint 2: still breathing?
-
معرفی و تریلر Introduction and trailer
-
نکاتی برای مدل سازی اجزا Tips for modelling components
-
فعل و انفعالات نمونه اولیه Prototype interactions
-
گروه ها Groups
-
روش های مدل سازی پاسخگو Responsive modelling methods
-
حالت های فاصله و فاصله طرح خودکار Spacing and spacing modes of Auto layout
-
تراز و ترتیب اقلام با طرح‌بندی خودکار Alignment and item order with Auto layout
-
بخش هایی برای فایل های سازماندهی شده Sections for organised files
-
اشکال، شعاع حاشیه، و ویرایش شکل Shapes, border radius, and shape editing
-
فریم 2 از 2 Frames 2 of 2
-
تغییر اندازه افقی/عمودی و اصول اولیه فاصله Horizontal/Vertical resizing, and spacing basics
-
خطوط و فلش ها Lines and arrows
-
نقطه بازرسی: اجزای پاسخگو Checkpoint: responsive components
-
پنجره، پانل ها و صحنه اصلی Window, panels, and the main stage
-
به اشتراک گذاری نمونه های اولیه Sharing prototypes
https://donyad.com/d/8952f2
Chuck
Figma and Design Systems Wizard
سلام! من یک طراح محصول فنی هستم و علاقه دارم به دیگران یاد بدهم چگونه در Figma واقعاً خوب شوند.
من تصمیم گرفتم بیش از 350000 بازدید و بیش از 3400 دنبال کننده خود را در Medium به دوره های Skill Share تبدیل کنم تا مهارت های Figma شما را ارتقا دهم:
دلایلی که می توانید به من اعتماد کنید
تشخیص اینکه چه کسی می‌تواند محتوای با بهترین کیفیت را ارائه دهد و می‌داند چگونه پیاده‌روی کند، دشوار است.
در اینجا چند مورد وجود دارد:
- من یک مدافع رسمی انجمن در Figma برای منچستر هستم
- کاربر Figma از سال 2018—این 5 سال تجربه Figma است
- کارشناسی علوم کامپیوتر و کارشناسی ارشد تعامل انسان و کامپیوتر
- قبلاً مهندس Full-stack، رهبر DevOps، رهبر فناوری، و رهبر UX
در اینجا چند مورد عمومی وجود دارد که من ارائه کرده یا طراحی کرده ام:
- (Figma)
- (Figma، Webflow)
علاوه بر این، در اینجا نگاهی اجمالی به افرادی که برای آنها و با آنها کار کرده ام وجود دارد:
- جگوار لندرور
- بانک تعاون
- Cake Solutions - یک شرکت استریم دیزنی
- ، راه اندازی Y-combinator
- ، راه اندازی PropTech با بیش از 20 هزار خانه
- ، راه اندازی FitTech
نمایش نظرات