راهنمای فارسی Figma در LearnUIX
Figma چیست؟ از اولین فایل تا طراحی UI/UX
Figma ابزاری است که طراحها با آن رابط سایت و اپ، Prototype و اجزای قابل استفاده مجدد را میسازند و با تیم به اشتراک میگذارند.
اگر تازه شروع کردهاید، این راهنما قدمبهقدم نشان میدهد Figma را از کجا باز کنید، چه چیزهایی را اول یاد بگیرید و بعد چطور وارد مسیر حرفهای UI/UX شوید.
نمای رسمی محیط Figma Design
چرا Figma؟
Figma چه کمکی به یک طراح میکند؟
در یک پروژه واقعی فقط صفحه طراحی نمیکنید؛ باید نظر بگیرید، Prototype بسازید، تغییرات را مدیریت کنید و طرح را به برنامهنویس تحویل بدهید. Figma کمک میکند بیشتر این کارها در همان فایل و کنار هم انجام شوند.
همهچیز در یک فایل
از Wireframe تا طراحی نهایی و Componentها را میتوانید در همان فایل نگه دارید؛ بنابراین خودتان و بقیه تیم همیشه به نسخه بهروز دسترسی دارید.
قبل از کدنویسی، طرح را امتحان کنید
با Prototype صفحهها را به هم وصل میکنید و قبل از اینکه برنامهنویسی شروع شود، میبینید کاربر چطور در محصول حرکت میکند.
طراح و برنامهنویس هماهنگتر کار میکنند
کامنتها، Library، Design System و Dev Mode کمک میکنند طراح و برنامهنویس روی یک منبع مشترک کار کنند و جزئیات کمتری بین طراحی و اجرا گم شود.
دانلود Figma
نسخه مناسب Figma را انتخاب کنید
اگر میخواهید برنامه Figma را نصب کنید، نسخه متناسب با سیستمعاملتان را انتخاب کنید. لینکهای دانلود این بخش مستقیما به فایلهای رسمی Figma وصل هستند.
WINDOWS
فیگما برای ویندوز
اگر لپتاپ یا کامپیوتر ویندوزی معمولی دارید، معمولا همین نسخه مناسب شماست.
MAC
فیگما برای مک
اگر از Mac استفاده میکنید، نسخه رسمی Figma Desktop برای macOS را نصب کنید.
وب یا دسکتاپ؟
نسخه وب یا دسکتاپ؛ کدام را انتخاب کنم؟
برای شروع لازم نیست چیزی نصب کنید؛ نسخه وب Figma برای یادگیری و بیشتر کارهای روزمره کافی است. اگر هر روز با Figma کار میکنید یا برنامه مستقل را ترجیح میدهید، نسخه دسکتاپ انتخاب راحتتری است.
اول اینها را یاد بگیرید
۶ قابلیت Figma که برای شروع مهمترند
لازم نیست از روز اول همه قابلیتهای Figma را بلد باشید. اگر این ۶ مورد را در یک پروژه واقعی تمرین کنید، بخش مهمی از کار روزمره طراحی UI را یاد میگیرید.
Auto Layout
با Auto Layout لازم نیست بعد از هر تغییر متن یا اندازه، فاصلهها را دستی جابهجا کنید. برای ساخت Button، Card و صفحههای Responsive یکی از مهمترین قابلیتهای Figma است.
Components
اگر یک دکمه، کارت یا ورودی در چند جای طراحی تکرار میشود، آن را یکبار بهصورت Component میسازید و بعد نسخههای آن را در صفحههای مختلف استفاده میکنید.
Variables
Variables یعنی مقدارهایی مثل رنگ، عدد یا بعضی حالتها را یکجا تعریف کنید تا تغییر و مدیریتشان در کل طراحی سادهتر شود؛ مخصوصا وقتی پروژه بزرگتر میشود.
Prototype
با Prototype صفحهها و Interactionها را به هم وصل میکنید تا قبل از کدنویسی، مسیر کاربر را قابل کلیک و قابل تست کنید.
Design System
وقتی پروژه بزرگتر میشود، Design System کمک میکند Componentها، Styleها، Variables و Libraryها نظم مشخصی داشته باشند و ظاهر محصول در صفحههای مختلف یکدست بماند.
Dev Mode
Dev Mode مرحله تحویل طراحی به برنامهنویس را سادهتر میکند؛ برنامهنویس میتواند اندازهها، فاصلهها، رنگها و اطلاعات لازم برای پیادهسازی را از همان فایل بررسی کند.
کار تیمی
طراحی، نظرها و تحویل به برنامهنویس در یک فایل
در Figma میتوانید همان فایل را با بقیه تیم به اشتراک بگذارید، روی خود طرح کامنت بگیرید و بدون فرستادن چند نسخه مختلف، همه روی آخرین تغییرات کار کنند.
وقتی طراحی آماده اجرا شد، Dev Mode به برنامهنویس کمک میکند اندازهها، فاصلهها، رنگها و جزئیات موردنیاز را از همان فایل بررسی کند. این یعنی رفتوبرگشت کمتر و تحویل منظمتر.
ابزارهای Figma
اگر تازهکارید، اول Figma Design را یاد بگیرید
Figma امروز فقط یک ابزار طراحی صفحه نیست، اما اگر تازه شروع کردهاید لازم نیست همه محصولاتش را با هم یاد بگیرید. Figma Design همان بخشی است که برای یادگیری UI/UX باید اول روی آن تمرکز کنید.
ساخت سریع با AI
Figma Make
با Figma Make میتوانید از یک توضیح متنی یا طرح موجود، نمونه تعاملی بسازید و ایده را سریعتر امتحان کنید.
Figma Slides
Figma Slides برای ساخت ارائه است؛ مخصوصا وقتی میخواهید طرحها و Prototypeهای Figma را مستقیم داخل ارائه استفاده کنید.
Figma Sites
Figma Sites برای طراحی، Prototype و انتشار وبسایت در همان اکوسیستم Figma ساخته شده است و فعلا در نسخه Beta قرار دارد.
FigJam
FigJam یک وایتبرد آنلاین برای ایدهپردازی، تحقیق، User Flow، Workshop و کارهای گروهی قبل و حین طراحی است.
Figma و AI
AI سرعت میدهد؛ تصمیم طراحی هنوز با شماست
AI میتواند شروع بعضی کارها را سریعتر کند؛ مثلا برای ایده گرفتن، ساخت یک نمونه اولیه یا امتحان کردن یک راهحل. Figma Make هم کمک میکند با Prompt و طراحی موجود، نمونههای تعاملی را سریعتر بسازید.
اما ابزار نمیتواند بهجای شما تشخیص بدهد چه چیزی برای کاربر مناسب است. کیفیت نهایی هنوز به شناخت مسئله، Layout، تایپوگرافی، UX و تصمیمهای درست طراحی بستگی دارد.
پلنهای Figma
برای شروع، پلن رایگان Figma کافی است
اگر تازه Figma را یاد میگیرید یا روی پروژه شخصی کار میکنید، با پلن Starter میتوانید شروع کنید. وقتی به امکانات تیمی، Libraryهای مشترک یا قابلیتهای حرفهایتر نیاز پیدا کردید، آن وقت سراغ پلن پولی بروید.
STARTER
رایگان برای شروع
برای یادگیری Figma، تمرین و پروژههای شخصی گزینه مناسبی است.
مناسب برای: تازهکارها و استفاده شخصی
PROFESSIONAL
برای کار حرفهای
برای طراحها و تیمهای کوچک که فایلهای بیشتر، Library تیمی، Prototype پیشرفتهتر و تحویل بهتر به توسعه میخواهند.
مناسب برای: فریلنسرها، طراحهای حرفهای و تیمهای کوچک
ORGANIZATION
برای شرکتها
برای شرکتهایی که چند تیم دارند و به مدیریت متمرکزتر، Libraryهای مشترک و کنترل دسترسی بیشتری نیاز دارند.
مناسب برای: شرکتها و تیمهای چندگانه
مسیر یادگیری
اگر تازهکارید، Figma را با این ترتیب یاد بگیرید
لازم نیست منوها و ابزارهای Figma را حفظ کنید. بهتر است قدمبهقدم جلو بروید و هر قابلیت را همان وقتی یاد بگیرید که در یک پروژه واقعی به آن نیاز دارید.
اول محیط Figma را بشناسید
اول یاد بگیرید فایل کجا ساخته میشود، ابزارها کجا هستند و از کجا ویژگیهای هر عنصر را تغییر میدهید. بعد با Canvas، Toolbar، Layers و Properties راحتتر کار میکنید.
با Frame یک صفحه واقعی بسازید
بهجای تمرین ابزارها بهصورت جدا، یک صفحه ساده را با Frame، Text و Shape از ابتدا بسازید تا کاربرد هرکدام را در عمل ببینید.
Auto Layout
بعد Auto Layout را روی همان طراحی تمرین کنید تا فاصلهها، اندازهها و رفتار اجزا با تغییر محتوا یا اندازه صفحه منظم بماند.
Component و Instance را یاد بگیرید
وقتی یک دکمه یا کارت در چند جا تکرار میشود، آن را به Component تبدیل کنید و با Instanceها دوباره استفاده کنید.
Prototype
چند صفحه را به هم وصل کنید و یک Flow واقعی بسازید تا قبل از توسعه ببینید مسیر کاربر قابل فهم است یا نه.
اگر هدفتان طراح شدن است، فقط Figma کافی نیست
Figma ابزار اجرای طراحی است. برای اینکه بتوانید یک رابط خوب طراحی کنید، باید در کنار ابزار، اصول UI، UX، Layout، تایپوگرافی، رنگ، Responsive Design و Design System را هم یاد بگیرید.
برای طراحی رابط
UI Design
اگر میخواهید ظاهر سایت و اپ را اصولی طراحی کنید، مسیر UI Design روی Layout، تایپوگرافی، رنگ، اجزای رابط و Responsive Design تمرکز دارد.
برای فهم کاربر
UX Design
اگر میخواهید بفهمید کاربر چه میخواهد، مسیر درست محصول را پیدا کنید و ایدهها را قبل از طراحی نهایی تست کنید، مسیر UX Design برای شماست.
مسیر جامع UI + UX + Design System
Product Design
اگر میخواهید UI، UX و Design System را در یک مسیر یکپارچه یاد بگیرید و برای فعالیت بهعنوان Product Designer آماده شوید، دوره Product Design کاملترین مسیر LearnUIX برای این هدف است.
سوالهای رایج
قبل از شروع Figma، این سوالها طبیعی است
جواب کوتاه و ساده به سوالهایی که معمولا موقع شروع کار با Figma پیش میآید.
قدم بعدی در LearnUIX
Figma را یاد بگیرید؛ بعد روی مهارت طراحی سرمایهگذاری کنید
اگر هدفتان فقط کار کردن با یک ابزار نیست و میخواهید برای پروژه واقعی و بازار کار آماده شوید، قدم بعدی یادگیری اصول طراحی و تمرین آنها روی پروژههای واقعی است.
لینکهای مطمئن
لینکهای رسمی و مستقیم Figma
برای ورود، دانلود یا خواندن مستندات، از لینکهای رسمی خود Figma استفاده کنید تا همیشه به نسخه و اطلاعات بهروز دسترسی داشته باشید.
Figma نام تجاری Figma, Inc. است. LearnUIX وابسته یا نماینده رسمی Figma نیست و این صفحه یک راهنمای آموزشی مستقل است.