آشنایی با figma (هرچه که برای رابط کاربری نیاز دارید)
در این مقاله ، نرم افزار بسیار کاربردی را به شما معرفی می کنیم که هیچ گرافیستی نیست که آن را نشناسد.
فیگما یکی از بهترین و پر کاربردترین نرم افزارهای طراحی رابط کاربری و تجربه کاربری برای بازی ، اپلیکیشن و سایت می باشد.
قطعا زمانیکه بخش گرافیگی یک پلتفرم دست شما باشد ، در ابتدای کار باید پیش طرح آن را آماده کنید که بدانید قرار است در نسخه ی نهایی چه اتفاقاتی بیوفتد.
یکی از کاربرد ها و استفاده های مهم از فیگما دقیقا در فراهم سازی طرح های لازم برای رابط کاربری پلتفرم مورد نظر است.
تا پایان با ما همراه باشید تا به صورت کامل با این نرم افزار و قابلیت های آن آشنا شویم.
فیگما چیست ؟
Figma یک ابزار طراحی رایگان تحت وب است که به شما امکان میدهد نمونههای تعاملی مورد نظر خود را ایجاد کرده و از آن ها در بخش های مورد نظر استفاده کنید.
این همچنین یک ابزار vector design نیز می باشد ، به این معنی که می توانید تصاویر دقیق را بدون از دست دادن کیفیت ایجاد کنید.
Figma به شما امکان می دهد با استفاده از یک رابط ساده drag و drop ، به سرعت طرحواره هایی از برنامه های وب و تلفن همراه تا بازی ها ایجاد کنید.
این ابزار به شکل به خصوصی برای طراحان رابط کاربری مناسب است ، زیرا میتوانید بدون نوشتن هیچ کدی ، از وایرفریمهای با کیفیت پایین به نمونههای اولیه واکنشگرا و قابل کلیک بروید.
از دیگر قابلیت های فیگما می توان به :
Icons
لوگوها
برنامه ها
وب سایت ها
Presentations
و … اشاره کرد.
Figma دارای بسیاری از ویژگیهای مشابه سایر ابزارهای طراحی محبوب مانند Sketch است ؛ مانند grids و layout .
اما چند مزیت منحصر به فرد وجود دارد که فیگما را متمایز می کند.
قابل ذکر است ، Figma تنها ابزار طراحی است که بر روی هر پلتفرمی کار می کند.
از جمله مک ، ویندوز ، و کروم بوک.
این باعث می شود تا آن را بسیار در دسترس قرار دهد.
Figma همچنین به دلیل ویژگی های همکاری-تبادلی خود شناخته شده است.
طرحها را میتوان بهطور یکپارچه به اشتراک گذاشت ، بررسی کرد و روی آنها (حتی برای کاربران غیر Figma) به صورت گروهی تغییراتی ایجاد کرد.
شروع کار با فیگما
برای شروع کار ابتدا باید یک حساب کاربری Figma داشته باشید.
می توانید یک حساب کاربری رایگان در وب سایت ایجاد کنید و یا برنامه دسکتاپ Figma را دانلود کنید.
پس از ثبت نام ، از شما خواسته می شود بسته به نوع رابطی که طراحی می کنید، یک preset یا قالب را انتخاب کنید.
شما گزینه صفحه گوشی ، دسکتاپ ، wireframing kits یا یک blank canvas را خواهید داشت.
اولین چیزی که هنگام باز کردن Figma برای اولین بار متوجه خواهید شد این است که مانند Photoshop یا Illustrator نیست.
هیچ لایه یا ابزاری در اطراف شناور نیست.
در عوض ، همه چیز در یک صفحه نمایش داده می شود.
این کار ویرایش را آسانتر از همیشه میکند، زیرا میتوانید همه طرحهای خود را بهطور همزمان ببینید و از هر شیئی در طراحی خود استفاده کنید.
بیایید به چهار ناحیه اصلی که رابط Figma را تشکیل می دهند نگاه کنیم :
Menu bar :
در بالای صفحه ، جایی است که همه ویژگیهای اصلی وجود دارد : منوی اصلی ، region tools ، shape tools ، ابزارهای طراحی ، منابع ، نظرات و اشتراکگذاری.
Layers :
در سمت چپ صفحه ، لایههایی قرار دارند که همه عناصر شما در آن فهرست شدهاند.
می توانید این عناصر را گروه بندی کنید و نام آنها را تغییر دهید.
Canvas :
Canvas فضای اصلی در وسط است که می توانید رابط های خود را مشاهده ، ایجاد و طراحی کنید.
Inspector :
Inspector در سمت راست می نشیند و اطلاعات و تنظیمات دقیق را برای هر شی یا عنصری که انتخاب می شود ارائه می دهد.
هر چیزی که برای شروع اضافه کردن به کادر خود نیاز دارید در نوار منو در سمت چپ بالا قرار دارد.
در اینجا ، میتوانید مواردی مانند اشکال و تکست باکس را انتخاب کنید تا Canvas خالی خود را با عناصر پر کنید.
میتوانید با استفاده از نوار Inspector در سمت راست ، هر عنصر را اصلاح و ویرایش کنید.
لازم به ذکر است که شما می توانید از wireframe kits رایگان Figma نیز استفاده کنید.
اینها حاوی عناصر و الگوهای از پیش طراحی شده اولیه هستند که می توانید آنها را بکشید، رها کنید و برای ایجاد طرح های سریع کاستومایز کنید.
کمی آموزش فیگما
خب در این بخش قصد داریم در جهت آشنایی بیشتر شما با بخش های مختلف فیگما یک سری آموزش های مقدماتی از آن را بدهیم.
نحوه ی ساخت یک Frame در فیگما
برای شروع کار ابتداعا ما باید یک Frame ایجاد کنیم.
این همان صفحه است و هر آنچه ما طراحی می کنیم در این بخش می باشد.
شما می توانید بسته به نیاز خود یک Frame را هر طور که می خواهید اندازه بگیرید.
ما در این مثال Desktop Frame را انتخاب میکنیم ؛ اما شما می توانید هر فریم دیگری را انتخاب کنید.
ابزار Frame را از منوی بالا انتخاب کنید.
اندازه فریم را در پنل سمت راست انتخاب کنید.
نحوه اضافه کردن Grid ها و Column ها در فیگما
قبل از شروع طراحی ، میخواهید grid هایی را اضافه کنید که به شما کمک میکنند alignment محتوا را برای صفحه خود ثابت نگه دارید.
می توانید grid ها را به یک فریم اضافه کنید و آنها را سفارشی کنید.
به عنوان مثال ، برای توسعه وب ۱۲ grid مورد استفاده قرار می گیرد.
فریم مورد نظر را برای grid بندی انتخاب کنید.
Layout Grid را در پنل سمت راست انتخاب کنید.
Column ها و 12 واحد را انتخاب کنید.
استفاده از Shape ها و Column ها در فیگما
از اشکال و عناصر موجود در Figma برای ایجاد مربع ، دایره ، خطوط و موارد دیگر استفاده کنید.
اینها اصول اولیه ایجاد طرح در یک صفحه هستند.
افزودن عکس در فیگما
می توانید تصاویر را از یک منبع آنلاین یا محلی به صفحه خود اضافه کنید.
طبق گیف زیر ما یک تصویر را اضافه می کنیم.
افزودن متن در فیگما
برای افزودن متن به طرح ، ابزار متن را انتخاب کرده و در صفحه قرار دهید.
فونت به طور پیش فرض روی Roboto خواهد بود ، اما شما می توانید خانواده فونت ، اندازه و رنگ را در هر مرحله تغییر دهید.
در این مثال از پنل سمت راست برای تغییر رنگ و اندازه فونت و بعداً خانواده فونت استفاده می کنیم.
ابزار Text را انتخاب کنید.
متن “About” را به عنوان شروع پیمایش اضافه کنید.
اطمینان حاصل کنید که اندازه و رنگ 24 و سفید است.
نحوه lable گذاری و ایجاد گروه در figma
کار با لایه های زیاد در Figma می تواند گیج کننده باشد ، بنابراین به محض ایجاد ، همه عناصر خود را لیبل گذاری کنید.
حتی بهتر است که بخش ها و اشکال مختلف را با lable هایی مانند “Hero Background” یا “Navbar” گروه بندی کنید.
المان های خود را انتخاب کنید و برای گروه بندی راست کلیک کنید یا Ctrl + G را فشار دهید.
گروه خود را نامگذاری کنید.
هر بخش از صفحهتان را در داخل گروهها قرار میدهد تا وقتی صفحه شما بزرگ شد، خوانایی را بهبود بخشد.
برای جلوگیری از طولانی شدن مقاله ما تا همینجای کار بسنده خواهیم کرد.
قطعا آموزش فیگما به اینجا خلاصه نشده و شما راه زیادی را تا تکمیل آن دارید.
اما اگر با مفاهیم آشنا باشید و قبلا با نرم افزارهایی مانند فتوشاپ یا illustrator کار کرده باشید ، یادگیری فیگما بسیار ساده و مانند همین آموزش های ابتدایی و اولیه قابل درک است.
۶ ویژگی مهم از فیگما که باید بشناسید
Component Management
Variants یک ماژول مدیریت کامپوننت هوشمند است و به عنوان کتابخانه Figma components شناخته می شود.
شما به راحتی می توانید تغییرات تکراری یک component را از بین ببرید و آنها را برای سازماندهی کتابخانه asset تیم ترکیب کنید.
شما همچنین می توانید یک container واحد برای تمام اجزای مشابه تعریف کنید.
در طول کار مشترک ، Variants برای اعضای تیم آسانتر میشود تا مکان مورد نظر خود را پیدا کنند.
با سفارشی کردن مقادیر و خصوصیات انواع کامپوننت های خود ، حدس و گمان را از سیستم طراحی خود حذف کنید.
Bulleted Lists
با فیگما می توانید لیست های bulleted و شماره گذاری شده را در پروژه های طراحی UI/UX خود بگنجانید.
لیست ها به شما امکان می دهند داده ها را به راحتی سازماندهی کنید و بر اطلاعات مرتبط در طرح های برداری تأکید کنید.
The Revamped Inspect Tab
Code Panel قبلی Figma اکنون تب Inspect است.
این ویژگی به همکاران ، به ویژه توسعه دهندگان ، اجازه می دهد تا مقادیر و کدهای طرح های کسانی را که با آنها کار می کنید، دریافت کنند.
اعضای تیم شما می توانند داده هایی مانند Colors، Variants، Properties، Shadows، Content، Borders و Typography را از این برگه استخراج کنند.
Figma Community Files and Plugins Library
Figma دارای یک پلتفرم اجتماعی با منابع غنی شده است که در آن می توانید پروژه های خود را منتشر کنید تا سایر همکاران شما بتوانند آنها را بررسی ، ویرایش و در نهایت استفاده کنند.
هزاران سازنده وجود دارد ، و شما می توانید منابع زیر را دریافت کنید :
باز کردن illustration library
Remote design sprinting
Material design kit
قالب های Figma
پلاگین های Figma عملکرد بالایی دارند و در عین حال پایدار و ایمن هستند.
در زمان نوشتن بیش از 40 افزونه انحصاری موجود است و تعداد این لیست در حال افزایش است.
Real-Time Updating of the Project
در فرآیند طراحی UI/UX که شامل Figma نمیشود، کل تیم باید از بیش از یک ابزار شخص ثالث برای انتقال بهروزرسانیهای پروژه و مدلهای طراحی استفاده کند.
انتقال چند فایل برای فعال کردن هر یک از اعضای تیم در بالای وضعیت فعلی ضروری است.
با این حال ، از طریق به روز رسانی ریل تایم ، برنامه Figma خود از تبادل نمونه اولیه و به روز رسانی آن در اعضای تیم مراقبت می کند.
انتقال پروژه از طراح به توسعه دهنده واقعاً در Figma ضروری نیست.
این به این دلیل است که وقتی از Confluence برای به اشتراک گذاری مدل های Figma استفاده می کنید، هر تغییری در طراحی به طور خودکار به عنوان فعالیت لایو در فایل پروژه نشان داده می شود.
Intuitive and Straightforward Prototyping
با Figma ، نمونه سازی بسیار آسان و بدون درهم و برهمی است، زیرا شامل انتقال فریم به فریم است.
Figma یک ابزار همه کاره است و شما به ابزار بررسی شخص ثالث مانند Marvel یا InVision نیاز ندارید.
شما می توانید بدون زحمت نمونه های اولیه Figma را با اعضای تیم به اشتراک بگذارید، درست مانند به اشتراک گذاری فایل های طراحی Figma. تنها کاری که باید انجام دهید این است که پیوندی را با مجوزهای ویرایش مربوطه به اشتراک بگذارید.
توسعه دهندگان می توانند به راحتی به گردش کار طراحی پروژه دسترسی داشته باشند، نظرات خود را برای طراح بگذارند و ویژگی ها و اندازه گیری های CSS را دریافت کنند.
مهرسا امینی
برنامه نویس ، انیماتور ، سئوکار
اگر تنها بر موفقیت هایی که کسب کرده اید تکیه کنید ؛ همان چیزی که باعث موفقیت شما بوده است می تواند منجرب به شکست شما شود.