دانلود، نصب و آشنایی اولیه با محیط برنامه
شروع طراحی رابط کاربری همیشه با اولین قدم است: دانلود فیگما. قبل از اینکه بتوانید صفحات وب یا اپلیکیشنها را طراحی کنید، باید نرمافزار را نصب کرده و با محیط آن آشنا شوید. این مرحله برای هر کاربر تازهکار اهمیت زیادی دارد، زیرا اگر محیط برنامه را نشناسید، ادامه آموزش و طراحی میتواند گیجکننده شود. در این جلسه، قدمبهقدم با روش دانلود، نصب و ورود به فیگما آشنا میشویم تا آماده شروع اولین پروژه خود باشید.
چگونه به این برنامه دسترسی داشته باشیم؟
برای استفاده از فیگما، شما دو راه اصلی دارید:
- نسخه تحت وب
- نسخه دسکتاپ
1- نسخه وب این امکان را به شما میدهد که بدون نصب هیچ نرمافزاری و فقط با مرورگر خود، وارد محیط برنامه شوید. این روش سریع و آسان است و برای کسانی که تازه میخواهند فیگما را امتحان کنند یا گاهی نیاز به طراحی دارند، کاملاً کافی است.
2- اما اگر بخواهید به تمام ابزارها و امکانات پیشرفته فیگما دسترسی داشته باشید، نسخه دسکتاپ گزینه مناسبتری است. این نسخه برای ویندوز و مک طراحی شده و برخلاف نسخه وب، سرعت بارگذاری بالاتر و پاسخگویی بهتری دارد، به خصوص زمانی که روی پروژههای بزرگ یا چندین لایه پیچیده کار میکنید. همچنین برخی امکانات پیشرفته مانند پلاگینها، مدیریت فونتها و استفاده آفلاین، در نسخه دسکتاپ راحتتر و کاملتر در دسترس هستند
جمع بندی: در نتیجه، نسخه وب برای شروع سریع و کارهای سبک عالی است، ولی اگر قصد دارید پروژههای جدی و حرفهای طراحی کنید، نصب نسخه دسکتاپ تجربه بهینهتر و کاملتری به شما میدهد. هر دو نسخه به یک حساب کاربری متصل میشوند و تغییرات شما به صورت همزمان ذخیره و همگامسازی میشوند، بنابراین میتوانید بین نسخه وب و دسکتاپ آزادانه جابهجا شوید.
دانلود برنامه
نسبت به سیستم عامل دستگاهتون میتونید دانلود و نصب کنید.
دانلود فیگما روی موبایل
فیگما فقط روی مرورگر یا دسکتاپ محدود نمیشود؛ اپلیکیشن موبایل آن برای iOS و اندروید هم در دسترس است. این نسخه به شما اجازه میدهد پروژههایی که روی وب یا دسکتاپ ساختهاید را مشاهده، ویرایش جزئی یا بررسی کنید. بنابراین حتی وقتی خارج از خانه یا محل کار هستید، میتوانید طراحیها را ببینید و تغییرات کوچک اعمال کنید، بازخورد دریافت کنید یا جلسههای تیمی را دنبال کنید.
نسخه موبایل بیشتر برای مرور پروژه و ویرایشهای سبک مناسب است و ابزارهای کامل طراحی که روی دسکتاپ موجود هستند، در آن محدودترند. به همین دلیل، تجربه طراحی پیچیده یا ایجاد پروژههای بزرگ روی موبایل توصیه نمیشود، اما به عنوان یک ابزار همراه برای بررسی و تعامل با پروژهها بسیار مفید است.
نصب برنامه
بعد از اینکه برنامه را دانلود و نصب کردید، آن را اجرا کنید. 😁
در این مرحله میتوانید از طریق ایمیل خود وارد حساب کاربری فیگما شوید. معمولاً برای ورود، یک صفحه مرورگر باز میشود و پس از وارد کردن اطلاعات حساب، به صورت خودکار به برنامه متصل و ریدایرکت میشوید. به این ترتیب بدون نیاز به مراحل اضافی، به محیط اصلی فیگما دسترسی خواهید داشت.
آشنایی با محیط فیگما و بخشهای اصلی
وقتی فیگما را باز میکنید، اولین چیزی که میبینید داشبورد برنامه است. این صفحه حکم میز کار شما را دارد و همه پروژههایی که قبلاً ساختهاید یا با شما به اشتراک گذاشته شدهاند، در اینجا قابل مشاهده هستند. حتی اگر هنوز پروژهای نساخته باشید، داشبورد خالی هم ساده و قابل فهم است و با چند کلیک میتوانید اولین فایل طراحی خود را ایجاد کنید.
با کلیک روی “Design” وارد محیط اصلی طراحی میشوید. این محیط در نگاه اول ممکن است کمی بزرگ به نظر برسد، اما همه چیز قابل فهم است و هر بخش کاربرد مشخص خود را دارد. در سمت چپ، نوار ابزار اصلی قرار دارد که شامل ابزارهایی برای کشیدن شکلها، رسم مستطیل، دایره، خط و حتی اضافه کردن متن است. با این ابزارها میتوانید پایه یک طراحی ساده را بسازید، مثلاً یک کارت پروفایل یا یک دکمه ساده برای وبسایت.
در صفحه Home روی گزینه Design در بالا سمت راست بزنید یا از مسیر File > New Design وارد محیط طراحی شوید.
اگر طبق تصویر زیر وارد صفحه Design شده باشید برای باز کردن یک صفحه جدید میتونید از سمت چب روی ایکون Figma بزنید سپس New Design یک صفحه جدید باز کنید.
فریم در فیگما چیست و چرا اهمیت دارد؟
فریم در فیگما مثل یک بوم طراحی عمل میکند که همه عناصر و اجزای پروژه داخل آن قرار میگیرند. شما میتوانید اندازه فریم را بر اساس نیاز خود تعیین کنید، مثلاً برای طراحی یک صفحه موبایل، دسکتاپ یا تبلت. وجود فریم باعث میشود طراحی شما ساختار مشخص داشته باشد و مرتب باقی بماند.
اهمیت فریم
اگر بدون فریم طراحی کنید، المانها در فضای نامحدود قرار میگیرند و هیچ ساختار مشخصی ندارند. این یعنی هنگام نمایش روی دستگاههای مختلف یا هنگام تحویل به برنامهنویس، طراحی بههمریخته و غیرقابل استفاده خواهد شد. در نتیجه، داشتن فریم نه تنها نظم پروژه را حفظ میکند بلکه همکاری تیمی و خروجی نهایی را هم سادهتر میسازد.
خب طبق تصویر زیر از بخش Toolbar باید یک فریم ایجاد کنیم.
روی آیکون Frame کلیک کنید و قالبهای آماده را در سمت راست صفحه ببینید. سپس بسته به نیازتان، مثل موبایل یا دسکتاپ، یکی از آنها را انتخاب کنید.
بعد از کلیک روی اندازه مورد نظر شما با همچین صحنه ای روبه رو خواهید شد.
به این روش میتونید یک فریم بسازید.در آموزش بعدی با بخش toolbar آشنا خواهید شد.
