آموزش طراحی رابط و تجربه کاربری وب‌سایت با فیگما 2026 | هوش مصنوعی و پروژه‌های بزرگ - آخرین آپدیت

سرفصل ها و درس ها

مقدمه Introduction

• دانلود منابع Download the materials

• نحوه گذراندن دوره How to take the course

• نکته سریع Quick note

مبانی فیگما Figma Basics

• ابعاد یک وب‌سایت چقدر است What are the dimensions of a website

• ایجاد فریم وب‌سایت Creating a website frame

• راهنمای گرید (Grid Guide) چیست What is a grid guide

• تفاوت Stretch و Center در گرید Stretch vs Center Grid Guide

• مبانی کار با اشکال، تصاویر و لایه‌ها Basics of working with Shapes \ Images \ Layers

• مبانی کار با متن Basics of working with text

• نکته‌ای درباره ویژگی‌های پولی A note on paid features

• گروه‌بندی لایه‌ها در فریم‌ها Grouping layers into frames

• حالت Presentation و چند کلید میانبر Presentation mode and a couple of hotkeys

• نحوه ذخیره و به اشتراک‌گذاری فایل‌های فیگما How to save and share Figma files

• تفاوت بین UX و UI The difference between UX and UI

کار با رنگ‌ها Working with Color

• استخراج رنگ از تصاویر Picking colors from images

• تمرین ۱ – انتخاب رنگ از تصویر PRACTICE #1 – Pick a color from an image

• مدل HSB چیست؟ تنظیم دقیق رنگ What is HSB? Fine-tuning color

• ابزارهای انتخاب رنگ برای پروژه Tools for choosing project colors

• نحوه کار با گرادینت‌ها How to work with gradients

• قانون تناسب رنگ ۶۰/۳۰/۱۰ The 60/30/10 color proportion rule

• تمرین ۲ – انتخاب رنگ برای وب‌سایت PRACTICE #2 – Pick colors for a website

کار با تصاویر Working with Images

• تفاوت گرافیک رستر و وکتور The difference between raster and vector graphics

• نحوه انتخاب تصاویر با کیفیت بالا How to choose high-quality images

• نحوه تیره کردن تصاویر How to darken images

• نحوه تغییر تناژ رنگ تصاویر How to tone images

• تمرین ۳ – تغییر تناژ تصویر PRACTICE #3 – Tone the image

• تکنیک برش شدید (Extreme Cropping) Extreme cropping technique

• تمرین ۴ – برش شدید PRACTICE #4 – Extreme cropping

• تکنیک برش نرم (Soft Cropping) Soft cropping technique

• تمرین ۵ – برش نرم PRACTICE #5 – Soft cropping

• درباره آیکون‌ها About icons

• نحوه ساخت آیکون اختصاصی How to create your own icon

• نحوه کار با استروک‌ها (Strokes) How to work with strokes

• ویژگی‌های هوش مصنوعی برای تصاویر در فیگما (نسخه پولی) AI features for images in Figma (paid version of Figma)

• قابلیت‌های AI تصویر در فیگما (نسخه پولی) AI image features in Figma (paid version)

مبانی اتولایوت (AutoLayout) AutoLayout Basics

• مبانی کار با AutoLayout Basics of working with AutoLayout

• تمرین ۶ – اتولایوت PRACTICE #6 – AutoLayout

کار پیشرفته با اشکال Advanced Shape Work

• نحوه کار با ابزار Pen Tool How the Pen Tool works

• تکنیک‌های پیشرفته Pen Tool Advanced Pen Tool techniques

• تمرین ۷ – Pen Tool PRACTICE #7 – Pen Tool

• نحوه ایجاد الگوها (Patterns) How to create patterns

• متن در مسیر و استایل‌های براش Text along a path and brush styles

• تفاوت بین فریم‌ها و گروه‌ها Difference between Frames and Groups

• طراحی بخش بعدی وب‌سایت Creating the next section of the website

فاصله‌گذاری در طراحی وب Spacing in Web Design

• قوانین فاصله‌گذاری در طراحی وب Spacing rules in web design

• تمرین ۸ – فاصله‌گذاری در وب PRACTICE #8 – Spacing in web design

• جمع‌بندی اصول فاصله‌گذاری Wrapping up spacing principles

افکت‌ها و استایل‌ها Effects and Styles

• نحوه عملکرد استایل‌ها How styles work

• طراحی بخش بعدی وب‌سایت Creating the next section of the website

• نحوه عملکرد افکت‌ها How effects work

ماسک‌ها و پلاگین‌ها Masks and Plugins

• نحوه عملکرد ماسک‌ها How masks work

• تمرین تکمیلی ماسک‌ها Extra practice on masks

• طراحی بخش بعدی Creating the next section

• نحوه عملکرد پلاگین‌ها How plugins work

• جامعه فیگما (Figma Community) چیست What is Figma Community

• طراحی فوتر وب‌سایت Creating a website footer

• نهایی کردن وب‌سایت Finalizing the website

کار با فونت‌ها Working with Fonts

• اهمیت فونت‌ها The importance of fonts

• انواع فونت‌ها Types of fonts

• کجا فونت‌های جدید پیدا کنیم Where to find new fonts

• نحوه انتخاب فونت How to choose fonts

• تمرین ۹ – انتخاب فونت مناسب PRACTICE #9 – Pick the right fonts

• تنظیمات فونت Font settings

• تمرین ۱۰ – تنظیمات فونت PRACTICE #10 – Adjusting font settings

آماده‌سازی برای پروژه جدید Preparing for a New Project

• نحوه ساخت کاور پروژه How to create a project cover

• بریف‌نویسی برای مشتری Client briefing

• تمرین ۱۱ – پروژه سفر PRACTICE #11 – Travel Project

• نحوه ساخت مودبورد (Mood Board) How to create a mood board

• وایر‌فریم وب‌سایت چیست What is a website wireframe

• مروری بر ویژگی‌های AI در فیگما (نسخه پولی) Overview of AI features in Figma (paid version of Figma)

سیستم طراحی (Design System) Design System

• آیا طراح به فتوشاپ نیاز دارد؟ Does a designer need Photoshop?

• سیستم طراحی (Design System) چیست What is a design system

• ساخت استایل شیت (Style Sheet) Creating a style sheet

• رفع مشکلات جزئی استایل‌ها Fixing a minor issue with styles

• تمرین ۱۲ – ساخت سیستم طراحی شخصی PRACTICE #12 – Create your own design system

کامپوننت‌ها و واریانت‌ها در فیگما Components and Variants in Figma

• طراحی بخش بعدی وب‌سایت Creating the next section of the website

• نحوه عملکرد کامپوننت‌ها How components work

• نحوه عملکرد واریانت‌ها How variants work

• جمع‌بندی: واریانت‌ها Wrapping up: Variants

• تمرین ۱۳ – ساخت واریانت‌های شخصی PRACTICE #13 – Create your own variants

کار پیشرفته با اتولایوت Advanced Work with AutoLayout

• طراحی بخش بعدی وب‌سایت Creating the next section of the website

• نحوه عملکرد GRID AutoLayout How GRID AutoLayout works

• نسخه حرفه‌ای اتولایوت AutoLayout Pro version

• طراحی بخش بعدی وب‌سایت Creating the next section of the website

• طراحی صفحه وبلاگ Creating a blog page

• طراحی کارت وبلاگ Creating a blog card

• نحوه عملکرد حداقل و حداکثر عرض (Min/Max Width) How Min width / Max Width work

• ساخت واریانت‌های کارت وبلاگ Creating blog card variants

• تمرین ۱۴ – طراحی یک وب‌سایت PRACTICE #14 – Create a website design

طراحی ریسپانسیو (واکنش‌گرا) Responsive Design

• مبانی محدودیت‌ها (Constraints) Constraints basics

• نحوه کار Constraints با Grid Layout How constraints work with Grid Layout

• تمرین ۱۵ – محدودیت‌ها PRACTICE #15 – Constraints

• طراحی ریسپانسیو چیست What is responsive design

• DPI و PPI چیست What are DPI and PPI

• تطبیق صفحه اول وب‌سایت Adapting the first page of the website

• تمرین ۱۶ – ریسپانسیو کردن طرح PRACTICE #16 – Make your design responsive

افزایش سرعت گردش کار Speeding Up Your Workflow

• میان‌برهای کاربردی کیبورد Useful keyboard shortcuts

پروتوتایپینگ (نمونه‌سازی) Prototyping

• مقدمه بخش پروتوتایپ Introduction to the section

• حالت ارائه (Presentation mode) Presentation mode

• تنظیمات پیشرفته پروتوتایپ Advanced prototype settings

• انیمیشن‌های پایه در فیگما Basic animation in Figma

• نحوه عملکرد منحنی‌های بزیه (Bézier) How Bézier curves work

• استفاده از Open Overlay و Scroll To Using open overlay & scroll to

• نحوه عملکرد Swap Overlay How swap overlay works

• نحوه عملکرد After Delay How After Delay works

• نحوه عملکرد Smart Animate How Smart Animate works

• انیمیت کردن منوی وب‌سایت Animating a website menu

• پروتوتایپینگ کامپوننت‌ها Prototyping components

• بازنشانی موقعیت و وضعیت کامپوننت Reset Position & Component State

• جمع‌بندی بخش پروتوتایپینگ Conclusion of the prototyping section

فیگما رایگان یا پولی؟ Paid or Free Figma?

• تفاوت‌های فیگما رایگان و پولی Differences between paid and free Figma

خروجی گرفتن (Export) Export

• خروجی گرفتن از تصاویر Exporting images

• نحوه همکاری تیمی How to collaborate in a team

هوش مصنوعی و ابزارهای جدید فیگما AI & Buzz & Sites & Slides

• مروری بر Figma Make Overview of Figma Make

• مروری بر Figma Site Overview of Figma Site

• مروری بر Figma Buzz Overview of Figma Buzz

• مروری بر Figma Slides Overview of Figma Slides

• مروری بر Figma Jam Overview of Figma Jam

گام‌های بعدی چیست؟ What’s next?

• خداحافظی! Goodbye!