فگیما - نرم افزار طراحی واسط کاربری (1)
Why use Figma?
تنها چند سال پیش، در سال 2016، Figma به عنوان اولین ابزار طراحی ظاهر شد که از قدرت و قابلیت دسترسی وب استفاده کرد و در عین حال همان ویژگی های قدرتمندی را که از یک برنامه بومی انتظار داشتید را نوید داد. آنها با ویژگی همکاری بلادرنگ خود همه را شگفت زده کردند. طراحان از اینکه بالاخره توانستند طرح های خود را با اصطکاک صفر با همکاران و مشتریان خود به اشتراک بگذارند و نشانگرهای متعدد ماوس را که به طور همزمان شکل ها را ترسیم می کنند، به وجد آمدند. مثل جادو بود . ما از آن زمان راه زیادی را پیموده ایم Figma با بهبود مستمر و پیادهسازی ویژگیهای جدید، نوار را در بالاترین سطح قرار داده است. امروزه همه چیز در وب وجود دارد و Figma با کنار هم قرار دادن همه چیز برای طراحان و توسعه دهندگان از آن استفاده کامل می کند.
بیایید به برخی از ویژگی های خاص که فیگما را متمایز می کند نگاهی بیندازیم.
VECTOR NETWORK
فیگما یک راه قدرتمند جدید برای طراحی بردارها معرفی کرد. به جای اتصال مسیرها یک به یک، می توانید اتصالات وب مانند ایجاد کنید و کل فرآیند ایجاد اشکال را انعطاف پذیرتر کنید.
STYLES
در Figma ، بیشتر عناصر پایه درStyles قرار می گیرند که شامل رنگ ها (شامل گرادیان ها و تصاویر)، متن و حتی افکت ها است. شما می توانید آنها را به راحتی به عنوان یک کتابخانه در دسترس قرار دهید. همانطور که طراحی می کنید، می توانید این سبک ها را برای مواردی مانند Text، Fill، Stroke و Effects در Inspector خود تنظیم کنید.
COMPONENTS
کامپوننت ها بلوک های سازنده هر پروژه طراحی هستند. تزها مجموعهای از عناصر هستند که به روشی قابل استفاده مجدد در کنار هم قرار میگیرند، مانند دکمهها، فرمها، پیمایشها، کارتها، سلولها و روکشها. عناصر جزء مانند محتوای متن، رنگ ها و تصاویر را می توان در Inspector سفارشی کرد. یک جزء دکمه را می توان بارها با محتوا و سبک های مختلف کپی کرد. علاوه بر این، میتوانید کامپوننتهایی را در داخل مؤلفهها داشته باشید که به شما امکان میدهد حتی پیچیدهترین گروههای عناصر مانند نمادها، حالتها و تمهای پیچیده را سفارشی کنید. در Figma، اضافه کردن عناصر مختلف طراحی به عنوان Component و انتشار آنها به عنوان دارایی های طراحی قابل تنظیم بسیار آسان است.
TEAM LIBRARY
حال Abstract، Google Docs و Sketch را در یک ابزار مجزا، بعنوان یک تجربه ی منسجم تر و روان تر را تصور کنید. این فیگما است. کتابخانه های تیم به شما امکان می دهند اجزا، سبک ها و دارایی های خود را در کل تیم خود به اشتراک بگذارید. میتوانید هر زمان که خواستید با کلیک کردن بر روی کلید ON/OFF این کتابخانهها را فعال و غیرفعال کنید.
CONSTRAINTS
محدودیت ها در Figma مانندSketch هستند. آنها به شما امکان می دهند فاصله ها را از ظرف والد تعیین کنید. همچنین به شما امکان می دهد عناصر را مقیاس یا تراز کنید.
REAL-TIME COLLABORATION
فیگما واقعاً سند ابزارهای طراحی گوگل است. هنگامی که شروع به همکاری با طراحان، توسعه دهندگان و مشتریان در زمان واقعی در یک پروژه طراحی کردید، هرگز نمی خواهید به عقب برگردید. شما می توانید طرح خود را با هر کسی به اشتراک بگذارید و آنها می توانند پیشرفت شما را تماشا کنند، نظر بدهند، و حتی در هنگام زنده کردن پیکسل های خود شرکت کنند.
VERSION CONTROL
در Figma هر کاری که انجام می دهید به صورت خودکار در تاریخچه به صورت رایگان ذخیره می شود. همچنین میتوانید نسخههای(Command + Option + S) را به صورت دستی متعهد کنید تا موارد را در یک جدول زمانی منظم نگه دارید. لازم نیست به شاخهها فکر کنید زیرا همکاری بلادرنگ به شما این امکان را میدهد که مطمئن شوید هیچکس روی انگشتان یکدیگر قدم نمیگذارد. مقایسه نکردن این موضوع با Git در واقع مایه آرامش است زیرا Figma کل فرآیند را بسیار پیچیده تر از Git کرده است.
LIVE EMBEDS
با دریافت کد HTML iFrames می توانیدFigma Frames خود را در وب سایت خود جاسازی کنید. این به شما امکان می دهد به طرح های خود دسترسی زنده داشته باشید.
INSPECT
هر سندی در Figma را می توان با هر کسی به اشتراک گذاشت. مهمتر از آن، توسعه دهندگان می توانند وارد شوند و عناصر طراحی را بررسی کنند تا ویژگی های رنگ، اندازه ها و فواصل را بدست آورند. آنها می توانند هر دارایی را انتخاب کرده و با استفاده از Swift، Java یا CSS آن را به PNG، SVG یا کد صادر کنند. به طور کلی تر، می توان به افراد دعوت شده اجازه مشاهده یا ویرایش را داد. این بدان معنی است که شما می توانید تقریباً هر کسی را در تیم خود بگنجانید، از جمله مدیران محصول، مشتریان و هر شخصی از طریق یک پیوند.
KEYBOARD SHORTCUTS
میانبرهای موجود در Figma بسیار شبیه به Sketch هستند. برخی از تفاوت های کلیدی که دانستن آنها بسیار مهم است:
(یک) Command + Option + G یک Frame برای عناصر انتخاب شده ایجاد می کند. یک قاب مانند یک تخته هنری است. (دو) Grid Control + G برای فعال/غیرفعال کردن. (سه) K for Scale، که به شما امکان می دهد عناصر را در لحظه مقیاس بندی کنید. (چهار) C برای اظهار نظر. نظرات به جای اینکه از فضای متفاوتی عبور کنند، مستقیماً در Figma تعبیه می شوند.
میتوانید میانبرهای صفحهکلیدFigma را با کلیک کردن روی نوار منو باز کنید، سپس به Help and Account > Keyboard Shortcuts بروید یا میتوانید میانبرCtrl+Shift+ را از روی صفحه کلید فشار دهید.
PERFORMANCE
When you work 8 hours a day on a tool, every second you save counts.
در حالی که امروزه اکثر ابزارها بر روی ویژگیهای ویژه و جدید تمرکز میکنند، Figma به سادگی بر روی یک گردش کار قوی با عملکردی بینظیر تمرکز میکند. این یکی از دلایل اصلی تغییر من از فتوشاپ در وهله اول است. برای من، Figma به همان سرعتی است که می توانید در یک ابزار طراحی استفاده کنید. هر بار کشیدن یک دکمه و هر ویرایش متن با سرعت 60 فریم در ثانیه بسیار نرم صورت می گیرد و بزرگنمایی در آن بدون تاخیر است.
CROSS-PLATFORM
چیزی که فیگما را متمایز می کند، ماهیت مشارکتی و همیشه در دسترس آن است. موانعی مانند نیاز به مک یا دانلود یک برنامه بزرگ در فیگما چیزی از مد گذشته است! به لطف این، هر کسی می تواند طراحی کند و هر کسی می تواند طراحی شما را در حالی که مشغول طراحی هستید مشاهده کند. دیگر تیم شما به ابزار شخص ثالث یا مجموعهای از افزونههای پیچیده و تکه تکه تکیه نمیکند، Figma به سادگی همه چیز را از ابتدا دارد. از آنجایی که بسیاری از توسعه دهندگان روی ماشین های ویندوز کار می کنند، این برای همگام نگه داشتن تیم شما واقعا ضروری است. در فیگما هر توسعهدهندهای میتواند پیوندی از شما دریافت کند، طرح را بررسی کند و رنگها، فونتها و حتی کدهای CSS، Swift و SVG را دریافت کند.
Sketch VS Figma
امروزه ابزارهای طراحی تفاوت زیادی با یکدیگر ندارند. طرحبندی مشابه است و شما همان ویژگیهای ضروری مانند کامپوننتها، کتابخانهها و انتقال برنامهنویس را خواهید یافت. در حالی که Sketch دارای افزونه هایی مانند Craft، Abstract وZeplin است، Figma همه آن ابزارها را در ابتدا در آن جاسازی کرده است. علاوه بر این، در حالی که Sketch بهmacOS نیاز دارد، Figma به طور یکپارچه با دستگاههای مک، ویندوز و لینوکس کار میکند. همچنین، می توانید ویرایشگر Figma را مستقیماً در مرورگر خود اجرا کنید.
IMPORTING FROM SKETCH
فیگما با فایل های Sketch شما به عنوان شهروندان درجه یک رفتار می کند. در واردات آنقدر خوب است که حتی یک فایل کتابخانه پیچیده و عظیم مانند Angle را می توان با دقت 95 درصد وارد کرد. تمام لایه ها و نمادها دست نخورده نگه داشته می شوند.
Getting Started
می توانید از Figma مستقیماً از مرورگر خود استفاده کنید یا می توانید برنامه دسکتاپ را از صفحه دانلودها دانلود کنید. یکی از تخصص های Figma که قبلاً می دانید Cross-Platform است. با مک، ویندوز و همچنین دستگاه های لینوکس کار می کند. برنامه Figma را بر اساس سیستم عامل خود دانلود کنید.
Conclusion
بیان خلاقیت و مهارت های طراحی خود به هیچ ابزار ثابتی نیاز ندارد. شما یک ابزار را برای کار خود انتخاب می کنید، برخی از دوستان دیگر شما ابزارهای دیگری را انتخاب می کنند. اما وقتی در یک تیم هستید و همه اعضای تیم شما میتوانند در یک صفحه کار کنند، در مجموع این عالی است. Figma با چندین ویژگی و منابع که به سرعت بخشیدن به گردش کار شما کمک می کند یک انتخاب عالی برای تیم شما و حتی برای استفاده شخصی شما خواهد بود.
مطلبی دیگر در همین موضوع
فونت «چند رنگ» چیست و چطور خودمان یکی طراحی کنیم؟
مطلبی دیگر در همین موضوع
آشنایی با styled-components
بر اساس علایق شما
دولدور دولدور دولدور دولدور دولدوووور میهانچی!