آموزش جامع فیگما برای UI/UX: تسلط بر طراحی وب با Figma - آخرین آپدیت

مقدمه‌ای بر دوره Introduction to the Course

• مقدمه Introduction

• فیگما چیست و آیا از سایر برنامه‌های طراحی بهتر است؟ What is Figma and is it better than other design programs?

• اولین طراحی وب‌سایت شما Your first website design

• حل تمرین اولین طراحی وب‌سایت Solving your first website design

• چگونه سریع کمک بگیریم How to get help fast

• صفحه خوش‌آمدگویی در فیگما The welcome screen in Figma

• شروع کار با فیگما Getting started with Figma

• بهترین روش‌های جابجایی در محیط فیگما Best ways to move around in Figma

• تمرین: نحوه جابجایی عناصر Exercise: how to move elements around

• تمرین: نحوه جابجایی عناصر Exercise: How to move elements around

• حل تمرین و چند نکته حرفه‌ای Solving the exercise and a few pro tips

• بررسی رابط کاربری فیگما و دلیل استفاده حرفه‌ای‌ها از آن Discover Figma's interface & why professionals use it

• مسابقه ۱: طراحی مینی وب‌سایت شخصی Contest 1: Your own mini website

• ویرایش آیکون‌ها: رنگ‌ها و اندازه Editing icons: Colors & size

• دلیل تسلیم شدن بسیاری از مبتدیان Here's why so many beginners give up

• نتیجه‌گیری Conclusions

کشف مهم‌ترین نکات درباره فیگما Discover the Most important Things about Figma

• مقدمه Introduction

• بزرگترین تفاوت فیگما با سایر برنامه‌ها The biggest difference in Figma versus other programs

• نحوه ساخت دکمه‌ها در فیگما Here's how you create buttons in Figma

• اصول اولیه کار با رنگ‌ها The basics of working with color

• چگونه مانند یک حرفه‌ای با رنگ‌ها کار کنیم How to work with color like a pro

• نحوه افزودن تصاویر: فریم‌ها در مقابل مستطیل‌ها How to add images: frames vs rectangles

• ساخت گالری یا کلاژ در فیگما Create a gallery / collage in Figma

• بررسی سه نوع متن در فیگما Here are the 3 types of text in Figma

• کشف ویژگی‌های لایه‌های متنی Discover the properties of text layers

• نحوه کار با متن مانند یک حرفه‌ای How to work with text like a pro

• افکت‌ها در فیگما: Blur، سایه‌ها و موارد دیگر Effects in Figma: Blur, shadows & more

• هر آنچه باید درباره گریدها (Grids) بدانید Everything you need to know about grids

• مروری بر کامپوننت‌ها An overview of components

• نحوه ماسک کردن در فیگما How to mask in Figma

• چه چیزی شما را به یک طراح وب خوب تبدیل می‌کند Here's what makes you a good web designer

• نتیجه‌گیری Conclusions

اولین پروژه طراحی وب First Web Design Project

• مقدمه Introduction

• تنظیم صحیح نسخه دسکتاپ Set up the desktop version the correct way

• ساخت هدر (Header) Create the header

• ساخت منوی اصلی Create the main menu

• تنظیم باکس جستجو Set up the search box

• ساخت منوی کشویی (Dropdown) Create a dropdown menu

• ساخت مهم‌ترین عنصر: کارت (Card) Create the most important item – the card

• چگونه کارت‌ها را بهبود ببخشیم How to improve the cards

• تنظیم ناوبری ثانویه Set up the secondary navigation

• ساخت صفحه‌بندی (Pagination) Create the pagination

• ایجاد زیربنای فوتر (Footer) Create the foundation for the footer

• افزودن محتوا به فوتر Adding content in the footer

• نحوه مدیریت نقص‌های بصری How to handle visual imperfections

• نکاتی که باید به خاطر بسپارید Here's what you need to remember

• مسابقه ۲: طراحی وبلاگ شخصی شما Contest 2: Your own blog design

فریلنسینگ و کسب درآمد Freelancing

• کشف حقیقت واقعی درباره فریلنسینگ Discover what freelancing is REALLY all about

• بدون این مهارت نمی‌توانید موفق شوید! Without this skill, you can't succeed!

• بهترین و بدترین روش‌های شروع فریلنسری Best and worst way to get started as a freelancer

• نحوه تنظیم پروفایل فریلنسری How to set up your freelancing profile

• حقیقت درباره پلتفرم‌های فریلنسینگ: Upwork, Freelancer, Fiverr The truth about freelancing platforms: Upwork, Freelancer, Fiverr

• بررسی کرودسورسینگ: مزایا و معایب Crowdsourcing revealed: The pros and cons

• نظرسنجی: اهداف شما چیست؟ Poll: What are your goals?

• قبل از مشاهده این ویدیو به 99designs نروید! Don't go on 99designs before you watch this!

• مقایسه: کدنویسی و فتوشاپ در مقابل Adobe XD و Figma Revealed: Coding and Photoshop vs Adobe XD vs Figma

• نحوه شروع پورتفولیو و جذب مشتری Here's how to start a portfolio and get clients

• اهمیت طرز فکر (Mindset) The importance of your mindset

• آیا رقابت در 99designs بیش از حد سخت است؟ Is the competition too difficult on 99designs?

• ۹ ابزار برای کار طولانی‌تر: رفع درد چشم، کمر و گردن 9 tools for working longer: Fix eye, back, neck pain

• بهبود خلق و خو و تمرکز Improve your mood & concentration

پروتوتایپ برای پروژه‌های واقعی Prototype for real world projects

• آنچه هیچ‌کس درباره پروتوتایپینگ به شما نمی‌گوید What Nobody Tells You About Prototyping

• تصویر مرجع ۲۰۲۶ Reference Image 2026 Bun

• پروتوتایپینگ ضروری است اما یک نقص بزرگ دارد Prototyping Is Essential but Has One Major Flaw

• استفاده از پروتوتایپ برای یافتن اشتباهات و نقص‌ها Use Prototyping to Find Mistakes and Flaws

• استفاده از Overlayها در پروتوتایپ (پاپ‌آپ‌ها) Overlays in Your Prototypes (Pop Ups)

• تایمرها در پروتوتایپ Timers in Prototypes

• اسکرول در پروتوتایپ Scrolling in Prototypes

• پروتوتایپ هوشمندتر با این روش Prototype Smarter with This Method

• ساخت یک منوی کشویی تعاملی Making an Interactive Dropdown

• تمرین نهایی: ساخت یک پروتوتایپ کامل Final Exercise - Make a Complete Prototype

کلید دوم برای طراحی وب عالی The Second Key to Great Web Design

• مقدمه Introduction

• هدف از وب‌سایت چیست؟ What's the Point of the Website?

• کاربر در مقابل مالک کسب‌وکار The User Versus the Business Owner

• تحلیل‌ها (Analytics) در طراحی وب Analytics in Web Design

• قالب‌ها و سایت‌سازها: مرگ طراح وب؟ Templates and Website Builders – The Web Designer's Death?

• مطالعه موردی: چهار نسخه از یک وب‌سایت Case Study: Four Versions of the Same Website

• چیدمان صفحه اصلی تجارت الکترونیک Ecommerce Homepage Layout

• جزئیات محصول در تجارت الکترونیک Ecommerce Product Details

• مراحل پرداخت (Checkout) در تجارت الکترونیک Ecommerce Checkout

• چرا وب‌سایت‌ها کامل نیستند؟ Why Aren't Websites Perfect?

• مطالعات موردی: نیازهای مشتری Case Studies: The Client's Needs

• لندینگ پیج (Landing Page) در مقابل وب‌سایت Landing Page Versus a Website

• جذب لید (Lead Generation) در لندینگ پیج‌ها Lead Generation in Landing Pages

• چرا لندینگ پیج‌ها شهرت بدی دارند Why Landing Pages Have a Bad Reputation

• لندینگ پیج برای محصولات دیجیتال Digital Product Landing Page

• تست لندینگ پیج‌ها Testing Landing Pages

• مطالعه موردی: لندینگ پیج من Case Study: My Landing Page

• نکات نهایی درباره نیازهای مشتری Final Thoughts about the Client's Needs

کلید سوم برای طراحی وب عالی The Third Key to Great Web Design

• مقدمه Introduction

• تجربه کاربری (UX) چیست؟ What's UX?

• بهترین نمونه از UX خوب و دقت به جزئیات The Best Example of Good UX and Attention to Detail

• بهبود فرآیند پرداخت برای دو برابر کردن فروش Improve the Checkout Process to Double Sales

• بهبود نسخه موبایل برای دو برابر کردن فروش Improve the Mobile Version to Double Sales

• هفت تغییر کوچک در وب‌سایت که نشان‌دهنده دقت به جزئیات است Seven Website Tweaks that Show Attention to Detail

• ارتقای صفحه محصول در موبایل Upgrading the Mobile Product Page

• برگزاری جلسات یک‌به‌یک با برنامه‌نویس Doing 1-on-1 Sessions with a Coder

• نکاتی که باید به خاطر بسپارید Here's What You Need to Remember

بازطراحی یک کسب‌وکار تجارت الکترونیک Redesign an Ecommerce Business

• مهم‌ترین سوال هنگام شروع یک پروژه جدید The Most Important Question When Starting a New Project

• نحوه تحقیق و یافتن الهام برای پروژه شما How to Research/Find Inspiration for Your Project

• ایجاد زیربنای پروژه Set Up the Foundation of the Project

• ساخت نوار بالایی (Top Bar) Create the Top Bar

• تنظیم هدر Set Up the Header

• تصمیم‌گیری درباره استایل هدر Decide on a Styling for the Header

• ساخت مهم‌ترین بخش: ناحیه Hero Create the Most Important Part – The Hero Area

• ساخت ناوبری ثانویه: دسته‌بندی محصولات Create the Secondary Navigation – Product Categories

• جایی که فروش اتفاق می‌افتد... یا نمی‌افتد! Here's Where Sales Are Made…Or Not!

• ساخت اولین نسخه از کارت Create the First Version of the Card

• تعیین استایل کارت Set the Style for the Card

• لمس‌های نهایی برای طراحی کارت Finishing Touches for the Card Design

• این جزئیات مهم را فراموش نکنید! Don't Forget about This Important Detail!

• ساخت بخش سوالات متداول (FAQ) Create the FAQ Section

• چرا Auto Layout فوق‌العاده است Here's Why Auto-Layout Is Awesome

• ساخت فرم ثبت‌نام خبرنامه Create a Newsletter Sign Up Form

• تنظیم زیربنای فوتر Set Up the Footer's Foundation

• تکمیل فوتر Finishing the Footer

• بررسی جایگزین‌ها و بهبود طراحی Explore Variations and Improve Your Design

• نحوه برخورد با صفحات داخلی How to Approach the Interior Pages

• تنظیم ناحیه بالایی صفحه محصول Set the Top Area for the Product's Page

• افزودن محتوا به صفحه محصول Adding Content to the Product's Page

• نحوه افزودن فراخوان‌های اقدام (CTA) واضح برای بازدیدکنندگان How to Add Clear Calls to Action for Visitors

• ناحیه محتوای اصلی Main Content Area

• ساخت جدول برای سایدبار Create a Table for the Sidebar

• نتیجه‌گیری Conclusions

طراحی ریسپانسیو: از دسکتاپ تا موبایل Responsive Design: From Desktop to Mobile

• مقدمه‌ای بر نسخه موبایل Introduction to the Mobile Version

• نحوه شروع نسخه موبایل برای صفحه اصلی How to Start the Mobile Version for the Homepage

• ساخت هدر برای نسخه موبایل Create the Header for the Mobile Version

• نحوه بازچیدمان ناحیه Hero How to Rearrange the Hero Area

• تنظیم کارت برای گرید محصولات Set Up the Card for the Grid of Products

• هنگام ساخت کارت محصول این مرحله را نادیده نگیرید Don't Skip This Step When Creating Product Cards

• چیدمان بخش سوالات متداول برای نسخه موبایل Arrange the FAQ Section for the Mobile Version

• بازسازی خبرنامه در فضای محدود Recreate the Newsletter in a Narrow Space

• ساخت فوتر برای نسخه موبایل Create the Footer for the Mobile Version

• نتیجه‌گیری Conclusions

بررسی تبدیل طراحی به نسخه زنده وب‌سایت Discover How the Design Gets Transformed to the Live Version

• آماده‌سازی طراحی برای کدنویسی Preparing the Design for Coding

• Zeplin: حلقه گمشده! Zeplin - The Missing Link!

• نحوه تنظیم پروژه برای برنامه‌نویس یا مشتری How to Set Up the Project for the Coder/Client

• محتوای سمت سرور و گرافیک‌های چندلایه Server-Side Content and Multi-Layer Graphics

• آنچه توسعه‌دهندگان از طراحی شما می‌خواهند Here's What Developers Want from Your Design

• چرا تحویل موارد مورد نیاز ضروری است Here's Why It's Essential You Deliver What's Needed

• نکات نهایی و گام‌های بعدی Final Thoughts and What's Next