آموزش FIGMA برای مبتدیان: طراحی وب و طراحی برنامه تلفن همراه - آخرین آپدیت

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

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

• مفهوم طراحی وب و طراحی برنامه موبایل (UI/UX) The Concept of Web Design and Mobile App Design (UI/UX)

• ابزارهایی برای طراحی محصول (UI/UX) Tools for Product Designs (UI/UX)

• آشنایی با ابزار طراحی FIGMA Introduction to Figma Design Tool

• چرا فیگما؟ Why Figma?

• بارگیری FIGMA در رایانه Download Figma on PC

تسلط بر رابط FIGMA Mastering the Figma Interface

• نمای کلی رابط FIGMA Figma Interface Overview

• پرونده FIGMA: صفحات طراحی و لایه های طراحی Figma File: Design Pages and Design Layers

• حرکت و تغییر اندازه در FIGMA: دست ، حرکت و مقیاس Movement and Resizing in Figma: Hand, Move and Scale

• قاب های طراحی Design Frames

• بخش های طراحی Design Sections

• ابزارهای برش فیگما Figma Slice Tools

• ابزار شکل Shape Tool

• ابزار قلم و مداد Pen and Pencil Tool

• ابزار متنی Text Tool

• نظرات FIGMA Figma Comments

• اقدامات FIGMA Figma Actions

• میانبرهای صفحه کلید برای طراحی سریعتر Keyboard Shortcuts for Faster Design

• حالت توسعه دهنده FIGMA Figma Developer's Mode

طراحی FIGMA Figma Design

• طراحی کنوانسیون نامگذاری پروژه Design Project Naming Convention

• رنگ ها و انتخاب های رنگ Colours and Colour Pickers

• شبکه چیدمان روی فیگما Layout Grid on Figma

• تراز و موقعیت Alignment and Position

• سبک ها و متغیرهای محلی Local Styles and Variables

• اثرات طراحی Design Effects

• سطح بزرگنمایی و تنظیمات دیگر Zoom Levels and Other Settings

• صادرات و پیش نمایش را طراحی کنید Design Export and Preview

افزونه های فیگما ، دارایی های FIGMA و FIGJAM Figma Plugins, Figma Assets and Figjam

• افزونه ها چیست؟ What are Plugins?

• نصب و استفاده از افزونه های FIGMA Installing and Using Figma Plug-ins

• افزونه های محبوب برای طرح ها Popular Plug-ins for Designs

• دارایی ها و کتابخانه های فیگما چیست What are Figma Assets and Libraries

• نحوه استفاده از کتابخانه های FIGMA How to use the Figma Libraries

• Figjam از موارد استفاده می کند Figjam Use Cases

• فیجام: تخته سفید فیگما Figjam: Figma's Whiteboard

سیم کشی با فیگما Wireframing with Figma

• آشنایی با سیم های سیم Introduction to Wireframes

• انواع خطوط سیم Types of Wireframes

• طراحی یک قاب سیم وب سایت Designing a Website Wireframe

• طراحی یک برنامه موبایل موبایل Designing a Mobile App Wireframe

• عناصر سیم کاغذ Elements of Paper Wireframes

• طراحی یک قاب سیم کاغذ Sketching a Paper wireframe

طراحی بصری: وب سایت با وفاداری بالا با FIGMA Visual Design: High-Fidelity Website with Figma

• آشنایی با رابط کاربری (طراحی بصری) Introduction to User Interface (Visual Design)

• طراحی آرم مارک Brand Logo Design

• برای طراحی وب سبک های محلی ایجاد کنید Create Local Styles for Web Design

• طراحی ناوبری وب سایت Design Website Navigation

• بخش قهرمان را طراحی کنید Design The Hero Section

• بخش های دیگر را طراحی کنید Design Other Sections

• پاورقی را طراحی کنید Design the Footer

• یک صفحه درباره ما طراحی کنید Design an About Us Page

• طراحی یک صفحه خدمات Design a Service Page

• یک صفحه وبلاگ با هوش مصنوعی تولید کنید Design a Blog Page with Generative AI

• دستورالعمل های اساسی طراحی: پالایش و یکنواختی راهنمای راهنمای سبک Basic Design Guidelines: Style Guide Refinement and Uniformity

• تصاویر و طرح های فیگما Figma Visuals and Designs

طراحی بصری: برنامه تلفن همراه با وفاداری بالا با FIGMA Visual Design: High-Fidelity Mobile App with Figma

• سبک های جهانی: آشنایی با طراحی مواد Global Styles: Introduction to Material Design

• تولید برنامه تلفن همراه Lofi با AI مولد (به طور چشمگیری) Generating The Mobile App Lofi with Generative AI (Visily)

• یک صفحه نمایش چلپ چلوپ طراحی کنید Design a Splash Screen

• یک علامت را در صفحه طراحی کنید Design a Sign In Screen

• صفحه اصلی را طراحی کنید Design the Homepage

• مؤلفه ناوبری برنامه را طراحی کنید Design the App Navigation Component

• صفحه درباره ما را به طراحی برنامه موبایل تبدیل کنید Convert Web About Us Page to Mobile App Design

• صفحه سرویس وب را به طراحی برنامه تلفن همراه تبدیل کنید Convert the Web Service Page to Mobile App Design

• صفحه وبلاگ وب را به طراحی برنامه تلفن همراه تبدیل کنید Convert the Web Blog Page to Mobile App Design

تست قابلیت استفاده (تجربه کاربر) و نمونه سازی با FIGMA Usability Testing (User Experience) and Prototyping with Figma

• آشنایی با تجربه کاربر Introduction to User Experience

• نمونه های اولیه چیست؟ What are Prototypes?

• نمونه سازی وب سایت Prototyping the Website

• نمونه سازی برنامه تلفن همراه Prototyping the Mobile Application

پروژه های FIGMA Figma Projects

• صادر کردن طرح ها و Mockup Exporting Designs and Mockups

• چالش روزانه UI/UX Daily UI/UX Challenge

• مفهوم چیدمان خودکار برای پاسخگویی The Concept of Auto Layout for Responsiveness

• طراحی اجزای پاسخگو با چیدمان خودکار Designing Responsive Components with Auto Layouts

• ایده های پروژه طراحی وب Web Design Project Ideas

• ایده های پروژه طراحی برنامه تلفن همراه Mobile App Design Project Ideas

• الگوهای جامعه FIGMA و نمونه کارها Figma Community and Portfolio Templates

• منابع ایجاد نمونه کارها Portfolio Creation Resources

دوره نتیجه گیری Course Conclusion

• مهارت های مکمل به بعد Complementary Skills Onwards

• تبریک Congratulations