آموزش Figma for Mobile App Design: Ultimate Edition

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

معرفی Introduction

• منابع را دانلود کنید Download the resources

• اولین صفحه برنامه خود را طراحی کنید Design your first app screen

• مهمترین چیز در مورد طراحی اپلیکیشن ها The most important thing about designing apps

• Figma vs Adobe XD vs Sketch vs Photoshop Figma vs Adobe XD vs Sketch vs Photoshop

• دو مهارت اساسی برای داشتن در Figma Two fundamental skills to have in Figma

• نظر صادقانه من در مورد انیمیشن و بدون کد My honest opinion about animations and no-code

• بیایید سرعت خود را افزایش دهیم Let’s improve our speed

• در اینجا نحوه عملکرد برنامه ها و آنچه شما باید ارائه دهید، آمده است Here’s how apps work and what you need to provide

• هیچ اپلیکیشن موبایلی را بدون این طراحی نکنید! Don’t design any mobile app without this!

• این طراحی اپلیکیشن موبایل را اصلاح کنید Fix this mobile app design

• چقدر دلار باید شارژ کنید؟ How much $ should you charge?

• رابط Figma را کشف کنید و چرا حرفه ای ها از آن استفاده می کنند Discover Figma’s interface & why professionals use it

• اندروید در مقابل iOS – آیا باید اهمیت دهید؟ Android vs iOS – should you care?

پروژه طراحی اپلیکیشن پرچمدار - قسمت 1 Flagship App Design Project - Part 1

• معرفی این بخش Introduction to this section

• بررسی مختصر Exploring the brief

• تجزیه و تحلیل رقبای برنامه - قسمت 1 Analyze the app’s competitors – Part 1

• تجزیه و تحلیل رقبای برنامه - قسمت 2 Analyze the app’s competitors – Part 2

• طرح بندی صفحه اول را ایجاد کنید Create the layout for the first screen

• پایه را برای صفحه اصلی تنظیم کنید Set up the foundation for the home screen

• صفحه جزئیات رستوران را ترسیم کنید Sketch out the restaurant details screen

• چگونه انتخاب های طراحی عالی داشته باشیم How to make great design choices

• مفاهیم طراحی برای صفحه نمایش مکان (1) Design concepts for the location screen (1)

• مفاهیم طراحی برای لیست رستوران (2) Design concepts for the restaurant listing (2)

• نوار وضعیت و نوار اقدام را تنظیم کنید Set up the status bar and the action bar

• جایگزین های فهرست رستوران (2) Restaurant listing alternatives (2)

• تغییرات بیشتر برای کارت More variations for the card

• تغییرات فهرست نهایی رستوران (2) Final restaurant listing variations (2)

• ایجاد گزینه هایی برای نوار اقدام Creating options for the action bar

• مفاهیم طراحی برای صفحه نمایش جزئیات رستوران (3). Design concepts for the restaurant details (3) screen

• تنوع برای جزئیات رستوران Variation for the restaurant details

• انتخاب بهترین نوع فونت Choosing the best typeface

• ظاهر برنامه ما را با سبک ها تعریف و اصلاح کنید Define and refine our app’s look with styles

• سرعت خود را تمرین کنید Practice your speed

• صفحه اول را تمام کنید Finish the first screen

• یک سبک جدید از دکمه برای داشتن یک جریان عالی A new style of button to have a great flow

• نمای کلی بخش Section overview

آنچه باید درباره Google Material Design 2&3 بدانید What you need to know about Google Material Design 2&3

• این طراحی متریال است This is Material Design

• نمای کلی اجزای رابط اندروید Android interface components overview

• در اینجا بهترین اندازه تخته هنری برای برنامه های شما آورده شده است Here's the best artboard size for your apps

• اندازه بر حسب پیکسل: دلیل بحث مردم اینجاست Size in pixels: here’s why people argue

• آموزش طراحی نوار اکشن (نوار بالا) Learn to design the action bar (top bar)

• هر آنچه که باید در مورد تب ها بدانید Everything you need to know about tabs

• نمایش محتوا در کارت Displaying content in cards

• دکمه های زیبا و موثر در اندروید Beautiful and effective buttons on Android

• مانند یک حرفه ای با متن کار کنید Work with text like a pro

• راهنمای اندازه رایگان برای اجزای اندروید FREE size guide for Android components

تایپوگرافی برای برنامه های موبایل زیبا Typography for Beautiful Mobile Apps

• اصول تایپوگرافی اندروید Android typography fundamentals

• 7 قانون برای خواندن آسان متن 7 rules for easy-to-read text

• این چیزی است که بزرگترین برنامه ها انجام می دهند Here's what the biggest apps are doing

• چگونه بسیاری از متن ها را عالی جلوه دهیم How to make lots of text look great

• نحوه ترکیب صحیح فونت ها How to combine fonts correctly

از رنگ ها برای برنامه های موبایل زیبا استفاده کنید Use colors for beautiful mobile apps

• اصول استفاده از رنگ را کشف کنید Discover the principles of color use

• نحوه استفاده مناسب از رنگ How to use color appropriately

• اصل تضاد رنگ The principle of color contrast

• بهترین طرح های رنگی از برنامه های برتر The best color schemes from top apps

• ابزارهایی برای طرح های رنگی عالی Tools for awesome color schemes

بهترین روش‌های iOS را که نتایج قابل قبولی ایجاد می‌کنند، کشف کنید! Discover iOS best practices that produce solid results!

• برنامه های iOS - نمای کلی iOS apps – Overview

• 1x، 2x، 3x، PPI، ناچ؟! راهنمای اندازه آرتبرد iOS 1x, 2x, 3x, PPI, notch?! iOS artboard size guide

• مقایسه طراحی اپلیکیشن: iOS در مقابل اندروید App design comparison: iOS vs Android

• کیت رسمی UI - خوب یا بد؟ Official UI Kit - good or bad?

• نوار وضعیت iOS (با بریدگی/وو) iOS status bar (with/wo Notch)

• نوار ناوبری iOS iOS Navigation bar

• نوار تب iOS iOS Tab bar

• فیلدهای متنی iOS iOS Text Fields

• کنترل‌های iOS iOS Controls

• اجرای برنامه های اندروید در سیستم عامل مک Running Android apps on Mac OS

• حروف رسمی iOS – آیا باید از آن استفاده کنید؟ The official iOS typeface – should you use it?

• نتیجه گیری iOS iOS conclusions

پروژه طراحی اپلیکیشن پرچمدار - قسمت 2 - ویژگی های پیشرفته Figma Flagship App Design Project - Part 2 - Advanced Figma Features

• منابع این بخش را دانلود کنید Download the resources for this section

• صفحه های ورود و ثبت نام را ایجاد کنید Create the login and register screens

• استفاده از اجزا - راهنمای گام به گام Using components – step by step guide

• برای تغییر سریع نمادها از تعویض نمونه استفاده کنید Use instance swap to quickly change icons

• روی سرعت خود تمرکز کنید Focus on your speed

• از ویژگی های جزء استفاده کنید - مانند یک حرفه ای! Use component properties – like a professional!

• این روشی است که شما از انواع مختلف استفاده می کنید This is how you use variants

• افزایش سرعت Gain speed

• استفاده از فیلدها به روش صحیح Using fields the right way

• منوی سمت چپ را ایجاد کنید Create the left menu

• چک باکس های تعاملی ایجاد کنید Create interactive checkboxes

• سوئیچ های ضامن ایجاد کنید Create toggle switches

• طراحی کارت با اجزا Design cards with components

• در اینجا نحوه ساخت یک صفحه کارت اعتباری زیبا آورده شده است Here’s how you can make a beautiful credit card screen

• یک صفحه نظرات زیبا طراحی کنید Design a beautiful reviews page

• نحوه استایل دادن به کارت نقد How to style a review card

• نظر من در مورد رفتن مایل بیشتر My take on going the extra mile

• صفحه پرداخت را ایجاد کنید - مرحله 1 Create the checkout screen – step 1

• صفحه پرداخت را ایجاد کنید - مرحله 2 Create the checkout screen – step 2

• استفاده از انواع در صفحه پرداخت Using variants in the checkout screen

• از قبل برای نمونه اولیه فکر کنید Think ahead for the prototype

• نظرات نهایی در مورد پروژه Final thoughts about the project

• جلسه زنده: آزمایش با ظاهرهای مختلف Live session: Experimenting with different looks