هر آنچه که توسعه دهندگان باید درباره Figma بدانند

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

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

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

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

توسعه دهنده Handoff 

برای درک تبلیغات پیرامون Figma و اینکه چرا ناگهان نیاز به یادگیری نحوه کار ابزارهای طراحی به عنوان یک توسعه دهنده دارید، مفید است که به روند انتقال برنامه نویس قبل از ظهور Figma نگاهی بیاندازید، زیرا به طور قابل توجهی تغییر کرده است.

تیم‌های طراحی معمولاً یک ایمیل با ده‌ها پیوست حاوی تصاویر ثابت طرح، دارایی‌های صادر شده و حتی اسناد word با کپی صفحه به تیم توسعه ارسال می‌کردند. توسعه‌دهندگان معمولاً به فایل‌های طراحی کامل دسترسی نداشتند، زیرا مجوزهای نرم‌افزار طراحی گران بوده و کاملاً ضروری نیستند. ارتباطات و بازخورد در ایمیل، ابزارهای مدیریت پروژه و یادداشت های جلسه پراکنده بود. همه با پیگیری تغییرات طراحی مشکل داشتند. هر بار که طرح به‌روزرسانی می‌شد، باید برای همه افراد درگیر ارسال می‌شد – باز هم.

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

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

اگر می خواهید این مقاله را دنبال کنید (یا فقط با Figma بازی کنید)، من از این فایل برای توضیح همه چیز در این آموزش استفاده خواهم کرد:

اصول اولیه

وقتی به عنوان یک همکار در یک طرح Figma اضافه می‌شوید، می‌توانید انتخاب کنید که آن را در مرورگر باز کنید یا می‌توانید برنامه دسکتاپ (موجود در Windows و macOS) را دانلود کنید. عملکرد مرورگر و نسخه دسکتاپ تا حد زیادی یکسان است. برنامه دسکتاپ دارای پشتیبانی داخلی برای استفاده از فونت های محلی است در حالی که نسخه مرورگر قبل از استفاده از فونت های محلی نیاز به نصب Figma Font Helper دارد.

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

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

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

کلید های میانبر در تصویر زیر مشخص هستند و در صورت نیاز میتوانید از آنها استفاده کنید.

استایل پروژه

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

توجه داشته باشید که سبک های پروژه تنها در صورتی نمایش داده می شوند که هیچ عنصری انتخاب نشده باشد. اگر می‌خواهید انتخاب خود را لغو کنید و سبک‌های پروژه را مشاهده کنید، کافی است در جایی از صفحه خالی کلیک کنید یا از Esc استفاده کنید.

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

انتخاب عناصر

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

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

برای انتخاب یک لایه خاص، باید هنگام کلیک کردن،Ctrl را نگه دارید یا می‌توانید روی یک عنصر کلیک راست کنید تا منویی از تمام لایه‌های تودرتو باز شود و لایه درست را انتخاب کنید.

اگر روی یک عنصر دوبار کلیک کنید، هر بار که دوبار کلیک کنید، یک سطح تودرتو پایین‌تر را انتخاب می‌کند. این یک راه عالی برای بررسی یک عنصر است تا زمانی که به انتخاب مورد نظر برسید.

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

هنگامی که یک عنصر را انتخاب کردید، می توانید روی تب Code در نوار کناری سمت راست کلیک کنید تا تمام اطلاعات CSS در مورد آن عنصر نمایش داده شود.

توجه به این نکته مهم است که CSS به طور خودکار تولید می شود و به خصوص برای عناصر موقعیت یابی کامل نیست. تمام CSS 1-to-1 را در پروژه خود کپی نکنید، بلکه از آن به عنوان راهنما و راهی سریع برای دریافت اطلاعات در مورد عناصر استفاده کنید.

ابعاد و اندازه گیری

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

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

استخراج داده ها

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

آماده شدن برای استخراج

اولین کاری که باید انجام دهید اگر می خواهید یک سند را استخراج کنید این است که باید آن را به عنوان قابل خروجی علامت گذاری کنید. این کار را با انتخاب عنصری که می‌خواهید خارج کنید و روی نماد مثبت در نوار کناری سمت راست در کنار عنوان Export کلیک کنید .

بسته به نوع فایلی که استخراج میکنید ، تنظیمات متفاوتی وجود دارد که می توانید آن را تغییر دهید. تصاویر فقط دارای یک ضرب مقیاس هستند و می توانید نوع فایل (PNG، JPG، SVG یا PDF) را انتخاب کنید. Figma از نام لایه به عنوان نام فایل استفاده می کند اما می توانید پسوند نام فایل را اضافه کنید. سپس می توانید عنصر انتخاب شده را با استفاده از دکمه Export استخراج کنید.

نکته سریع: همچنین می‌توانید یک سند را با کلیک راست، نگه داشتن ماوس روی Copy/Paste و کپی کردن تصویر یا کد SVG به سرعت خروجی بگیرید. اگر نیازی به تنظیمات خروجی سفارشی ندارید و فقط به یک کپی سریع از یک عنصر نیاز دارید، این کار مفید است.

استخراج همه فایل ها

می‌توانید هر فایلها را با انتخاب آن و کلیک کردن روی دکمه Export خروجی بگیرید، اما همچنین می‌توانید همه فایلهایی را که قابل استخراج هستند به یکباره استخراج کنید.

اگر می‌خواهید تمام فایلهای طرح را به یکباره استخراج کنید، می‌توانید به منوی اصلی بروید و روی Export در زیر منوی File کلیک کنید.

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

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

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

User Flow و انیمیشن ها

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

برای مشاهده اطلاعات مربوط به یک انیمیشن، تب Prototype را در نوار کناری سمت راست انتخاب کنید و User flow را در فلش های آبی رنگ در صفحه مشاهده خواهید کرد.

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

این انیمیشن ساده منوی همبرگر را باز می کند. می‌توانید ببینید که نماد همبرگر دارای یک حرکت On Tap است ، پس از فعال شدن، به صفحه‌ای که منوی تلفن همراه در حالت باز است، هدایت می‌شود. نوع انتقال یک انتقال متحرک هوشمند است که به این معنی است که Figma به طور خودکار بین این دو حالت درون یابی می کند. این کار را با استفاده از عملکرد انیمیشن Ease Out با مدت زمان 300 میلی ثانیه انجام می دهد .

این اطلاعات برای تکرار دقیق انیمیشن ها در CSS ضروری است، اما برخلاف سایر اطلاعات عناصر، انیمیشن ها را نمی توان در تب Code پیدا کرد!

ارتباط

اگر چیزی واضح نیست و مایلید از شخص دیگری که در پروژه همراه شماست سوال بپرسید یا نکته ای وجود دارد که متوجه آنا نشده اید، تنها کاری که باید انجام دهید این است که روی نماد Comment در نوار ابزار بالا کلیک کنید یا کلید C را فشار دهید تا به ابزار Comment بروید.

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

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

نتیجه

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

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