مقدمه ای بر Figma (دوره رایگان مبتدیان)

در این آموزش رایگان، همه چیزهایی را که برای شروع استفاده از Figma باید بدانید، یاد خواهید گرفت.

پس از تکمیل درس ها، درک خوبی از ابزارها و ویژگی های موجود در Figma و همچنین نحوه ایجاد فرم ثبت نام از ابتدا خواهید داشت. با زمان کمتر از دو ساعت، ما به سرعت وارد کار می شویم، بنابراین اگر برای یادگیری آماده هستید، به خواندن ادامه دهید!

مقدمه ای بر Figma

1. به دوره خوش آمدید

درس تصویری را تماشا کنید [0:00] ↗

در این درس مقدماتی، نگاهی به این خواهیم داشت که این دوره به طور کلی چه چیزی را پوشش می دهد. فوراً برای شما روشن خواهد شد که Figma شباهت هایی با سایر ابزارهای طراحی محبوب مانند Adobe XD و Sketch دارد، اما مجموعه ای از ویژگی های منحصر به فرد خود را دارد که به تنهایی ارزش دیدن دارند.

ما چهار حوزه کلیدی را بررسی خواهیم کرد:

• معرفی کلی Figma و چیستی آن
• مروری بر نحوه شروع، از جمله بحث در مورد رابط و ویژگی های موجود
• آموزش راهنمایی برای استفاده از Figma به عنوان یک طراح
• آموزش راهنمایی برای استفاده از Figma به عنوان یک توسعه دهنده

2. فیگما چیست؟

درس تصویری را تماشا کنید [01:31] ↗

Figma یک ابزار طراحی است و با آن می توانید هر چیزی را که می خواهید برای وب ایجاد کنید، از رابط های کاربری گرفته تا تصاویر گرفته تا آیکون ها. بنابراین، می‌توانید از آن برای ایجاد یک فروشگاه آنلاین کامل، یک برنامه ساعت هوشمند و هر چیز دیگری استفاده کنید.

چیزی که Figma را بسیار خاص می کند این است که مبتنی بر برداری و مبتنی بر مرورگر است، بنابراین شما می توانید تقریباً هر چیزی را تقریباً از هر جایی ایجاد کنید. و از همه بهتر؟ برای شروع رایگان است.

از اینجا، نحوه نصب و راه اندازی Figma را برای حرکت به جلو با آموزش مورد بحث قرار می دهیم.

شروع کار با Figma

3. کار با پروژه ها، فایل ها و صفحات در Figma

درس تصویری را تماشا کنید [06:16] ↗

بسیار خوب، با نصب و راه اندازی Figma، وقت آن است که دستمان را کثیف کنیم! ما دقیقاً با این درس وارد می شویم و در مورد همه راه های مختلف سازماندهی کار شما بحث می کنیم. ما در مورد نحوه ایجاد پروژه ها، فایل های جدید و صفحات در Figma صحبت می کنیم. ما همچنین در مورد نحوه دسترسی به فایل های خود صحبت می کنیم.

4. با استفاده از رابط کاربری Figma

درس تصویری را تماشا کنید [11:44] ↗

قبل از اینکه بتوانید واقعاً به تجارت بپردازید، باید درک کاملی از نحوه استفاده از هر دکمه در رابط کاربری Figma داشته باشید. ما در اینجا به جزئیات می پردازیم تا بتوانید با خیال راحت بقیه آموزش را طی کنید. رابط کاربری به صورت زیر تنظیم شده است:

• صفحه اصلی: هنگام باز کردن Figma از چه چیزی استقبال می کنید. این امکان دسترسی به تیم‌ها، پروژه‌ها و گزینه‌هایی را برای جستجوی فایل‌ها، مشاهده فایل‌های اخیر، افزونه‌ها و پیش‌نویس‌ها فراهم می‌کند.
• تیم: تمام پروژه های محول شده به این تیم را نشان می دهد.
• پروژه: لیستی از تمام فایل های مرتبط با پروژه.
• نوار کناری سمت راست: گزینه های بیشتر مربوط به صفحه نمایشی که مشاهده می کنید را نشان می دهد.
• نوار ناوبری بالا: نام فایل، گزینه های اشتراک گذاری، زوم، منو، مکان نما، اشکال و ابزارهای دیگر را نمایش می دهد.
• نوار سمت چپ: لایه های درون یک فایل را به طور پیش فرض نشان می دهد.

5. کار با فریم ها، شکل ها و متن در Figma

درس تصویری را تماشا کنید [20:47] ↗

شروع کار با فریم‌ها در Figma با یک مقایسه شروع می‌شود: آنها دقیقاً مانند آرت‌بوردهایی هستند که در Adobe XD با آن‌ها مواجه می‌شوید. فریم ها نقطه شروع خوبی را در هنگام کار بر روی یک پروژه به شما می دهند و تعداد زیادی در Figma برای چیزهایی مانند گوشی های هوشمند، مرورگرها، سایت های رسانه های اجتماعی و موارد دیگر تعبیه شده است.

همچنین می توانید از ابزار Shape در Figma برای ایجاد طرح های سفارشی استفاده کنید. اگر در گذشته از نرم‌افزار طراحی دیگری استفاده کرده‌اید، این ابزار باید کاملاً آشنا باشد، زیرا مستطیل‌ها، دایره‌ها، خطوط و غیره را انتخاب می‌کنید و کنترل کاملی بر ضخامت، اندازه و خط آنها دارید.

و همچنین با ابزار Text آشنا خواهید شد.

6. ایجاد شبکه های برداری با ابزار Pen

درس تصویری را تماشا کنید [31:44] ↗

شبکه های برداری احتمالاً منحصر به فرد ترین ویژگی در Figma هستند. به این دلیل که اکثر ابزارهای طراحی به ابزار قلم به صورت زیر عمل می کنند: شما کلیک می کنید و چندین نقطه ایجاد می کنید و سپس به نقطه شروع خود باز می گردید تا مسیر را ببندید. اما در Figma به این شکل کار نمی کند.

در عوض، Figma مسیرهای باز را حفظ می‌کند، که ایجاد اشکال پیچیده‌تر را بسیار آسان‌تر می‌کند. در این درس، نحوه استفاده از ابزار قلم و شبکه های برداری منحصر به فرد Figma را به تفصیل بررسی می کنیم.

7. کار با گریدها در Figma

درس تصویری را تماشا کنید [40:16] ↗

در Figma، شبکه‌ها برای ایجاد طراحی رابط بسیار مفید هستند، اما می‌توان از آنها برای ساخت آیکون‌ها نیز به راحتی استفاده کرد. شما کنترل کاملی بر نحوه نمایش شبکه ها، اندازه جعبه، رنگ و موارد دیگر دارید.

8. استفاده از پلاگین های Figma

درس تصویری را تماشا کنید [46:21] ↗

پلاگین ها طیف گسترده ای از ویژگی های اضافی را به تجربه Figma شما اضافه می کنند. و در این درس، ما عمیقاً به انواع پلاگین های موجود در دسترس شما می پردازیم.

و همچنین به شما نشان می‌دهیم که چگونه پلاگین‌ها را نصب کنید، آنها را راه‌اندازی کنید و آنها را در جریان کاری خود قرار دهید.

نحوه استفاده از Figma به عنوان یک طراح

9. بیایید یک فرم ثبت نام در Figma طراحی کنیم

درس تصویری را تماشا کنید [51:00] ↗

Figma ایجاد طیف گسترده ای از برنامه ها و انواع وب سایت ها را آسان می کند. و در این درس، نحوه ایجاد فرم ثبت نام برای یک برنامه تلفن همراه را با استفاده از تمام دانشی که تاکنون جمع آوری کرده اید، توضیح خواهیم داد. با این حال، ما همچنین در مورد ویژگی‌های جدیدی که هنوز در مورد آنها صحبت نشده است، مانند اجزا، طرح‌بندی، رنگ و سبک‌ها نیز به عمق خواهیم پرداخت.

10. بیایید یک نمونه اولیه ایجاد کنیم

درس تصویری را تماشا کنید [01:25:55] ↗

Figma همچنین می تواند برای ایجاد نمونه های اولیه استفاده شود. این کار را در این درس با استفاده از دو صفحه ایجاد شده در درس قبل انجام می دهیم. در این مورد، ما یک نمونه اولیه برای اتصال این دو صفحه نمایش زمانی که دکمه های خاصی کلیک می شوند ایجاد می کنیم.

11. به اشتراک گذاری کار و گرفتن بازخورد

درس تصویری را تماشا کنید [01:30:02] ↗

بخش اساسی کار بر روی یک طرح، همکاری با دیگران و گرفتن بازخورد دیگران است. انجام این کار در Figma آسان است، در واقع، در هر نقطه از گردش کار خود، می توانید پروژه را با دیگران به اشتراک بگذارید و بازخورد خود را درخواست کنید. در صورت تمایل می توانید مجوزهای ویرایش را نیز ارائه دهید.

نحوه استفاده از Figma به عنوان یک توسعه دهنده

12. بررسی یک فایل طراحی در Figma

درس تصویری را تماشا کنید [01:41:39] ↗

اگر یک توسعه دهنده هستید و به فایل Figma دسترسی فقط مشاهده داده شده است، این درس برای شما مناسب است. در اینجا، همه چیزهایی را که باید در مورد دسترسی برنامه‌نویس به فایل‌های Figma بدانید و اینکه چگونه می‌توانید یک پروژه بگیرید و آن را به یک برنامه، وب‌سایت یا سایر محصولات زنده و تعاملی تبدیل کنید، بررسی می‌کنیم.

13. صادرات دارایی

درس تصویری را تماشا کنید [01:46:48] ↗

در آخرین درس از این آموزش، نحوه صادرات دارایی در Figma را یاد خواهید گرفت. انجام آن بسیار ساده است و هم در حالت فقط مشاهده و هم در حالت ویرایش کار می کند. بنابراین هنگامی که کار روی پروژه خود را تمام کردید، می توانید آن را به راحتی صادر کنید و به کار بعدی خود بروید.

درباره نحوه استفاده از Figma بیشتر بیاموزید

اگر می‌خواهید دانش Figma خود را بیش از این گسترش دهید، برخی از مقالاتی را که در گذشته در مورد این موضوع نوشته‌ایم بررسی کنید. در اینجا، آموزش های اضافی، خلاصه الگوها، و نکات و ترفندهایی را خواهید یافت تا به شما در ارتقاء سطح مهارت های Figma کمک کنند.