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

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

کافیه آدرس فایلی که از فیگما گرفتید رو داخل این صفحه وارد کنید و یه آدرس جدید (مثل این) که بهتون داده‌میشه رو به اشتراک بگذارید. البته که این راه هم ۱۰۰٪ نیست ولی تا حد خوبی دارندهٔ لینک رو محدود می‌کنه به همون قسمتی که باش به اشتراک‌گذاشته‌شده.

Telegraph: https://kutt.it/figlim
Virgool: https://vrgl.ir/dkm3n

واسه اونایی که جا کم دارن
اونایی که نمایشگر ۱۳ اینچ و سبک‌بار بودن رو ترجیح می‌دن و رو میزشون غیر از ماگ قهوه و لپ‌تاپشون چیز دیگه‌ای نیست.
اگه گزینهٔ auto hide رو در قسمت تنظیمات پلاگین RTL PLZ فعال کنید، پنجرهٔ پلاگین وقتایی که لازمش ندارید و متنی رو انتخاب نکردید پنهان می‌مونه تا فضای کمتری رو بگیره.
اگه علاقمندید به ترفند‌های فیگما یا دونستن در مورد پلاگین‌های مفیدی که می‌بینیم یا خودمون توسعه می‌دیم، کافیه هشتگ #figmatips رو در این کانال دنبال کنید.

🔗 https://kutt.it/RTLPLZ

@designdivar

خیلی وقتا نیازه که یه نشونه‌ای کنار صفحاتی که در فیگما طراحی می‌کنیم بذاریم تا بعداً راحت بشه پیداشون کرد، یا توی یه نمای کلی در صفحاتی که فریم‌های زیادی دارن بشه اطلاعات خوبی به دست آورد.
برای برچسب‌زدن به فریم‌ها، پلاگین‌های متنوعی وجود داره اما هر کدوم از اون‌ها برای برآورده کردن نیاز ما چیزی کم داشتن. این شد که پلاگین FigTag رو ساختیم.
شما می‌تونید یه Variant Component رو به‌عنوان تگ به این پلاگین بدید و ازش برای تگ زدن استفاده کنید. اما این همهٔ ماجرا نیست، بعد از اینکه تگ رو به کامپوننت دادید می‌تونید بدون باز کردن پلاگین اون رو از ساید بار سمت راست تغییر بدید یا اینکه با استفاده از پلاگین و براساس تگ‌ها، فریم‌ها رو فیلتر کنید. ضمن اینکه اگه پلاگین باز باشه و فریم‌ها رو جابجا کنید، تگ‌ها هم همراه‌شون جابه‌جا می‌شن.
خوشحال می‌شیم اگه از این پلاگین استفاده کردید نظر و پینشهادتون رو بدونیم.

#figmatips #figmaplugins

🔗 https://kutt.it/figtag

@designdivar

توی فیگما می‌شه با زدن کلید K به ابزار Scale دسترسی داشت و اندازهٔ هر چیزی رو با حفظ تناسب تغییر داد.
اما اگه می‌خوایم فقط اندازهٔ یک یا چند لایهٔ متنی رو تغییر بدیم و صحیح بودن عدد اندازهٔ فونت‌ها برامون مهمه، بهتره از Scale استفاده نکنیم و به‌جاش از میونبرهای مخصوص تغییر اندازهٔ فونت که توی تصویر می‌بینیم استفاده کنیم. به این ترتیب با هربار فشار دادن این کلید‌های ترکیبی اندازهٔ فونت یک واحد کم یا زیاد می‌شه.
✦ این میونبرها روی لایه‌های متنی که از چند اندازه فونت تشکیل شدن هم کار می‌کنه و به‌درستی تغییرشون می‌ده.
✦ وقتی این میونبر رو بزنید هر تعداد لایهٔ متنی که به صورت مستقیم یا از طریق والدش انتخاب شده‌باشه اندازهٔ متنش تغییر می‌کنه.

#FigmaTips
#FigmaShortcuts

@designdivar

گاهی نیازه که همهٔ تب‌هایی که در اپلیکیشن فیگما باز هستن رو ریلود کنیم. یه راهش اینه که پشت سر هم command + w بزنیم تا همهٔ تب‌ها باز بشه و بعد با command + shift + t تب‌های بسته‌شده رو باز کنیم.
یه راهشم اینه که کلاً یه بار اپلیکیشن رو ببندیم و دوباره باز کنیم.
اما یه راه ساده‌تر اینه که یه بار روی گزینهٔ check for updates بزنیم و در صورتی‌که آپدیتی در کار نباشه، فیگما یه دیالوگ نشونمون می‌ده که یکی از گزینه‌هاش ریلود کردن تب‌هاست.

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

https://www.figma.com/community/plugin/1113405479314386806/Reset-Background

کلی کامپوننت و تمپلیت رایگان که تا حد خوبی گروه‌بندی و تگ‌گذاری شدن اینجاست، که می‌شه از روی سایت کپی کرد و توی فیگما پیست کرد.
figmacomponents.com

احتمالاً با میونبر \+⌘ یا .+⌘ برای پنهان کردن پنل‌های رابط کاربر فیگما آشنا باشید. (روی ویندوز به جای ⌘ باید ctrl رو بزنید)
الان می‌تونید با اضافه کردن شیفت به میونبر اولی، یعنی زدن \+shift+⌘ ، فقط پنل سمت چپ (لایه‌ها و کامپوننت‌ها) رو پنهان کنید. برای وقتایی که با لیست لایه‌ها کاری ندارید خیلی مفیده.

می‌دونستید آیکون بالای تب فایل فیگما و فیگ‌جم رو می‌تونید تغییر بدین؟
کافیه ابتدای اسم فایلتون ایموجی بذارید تا فیگما به جای آیکون‌های پیش‌فرضش اون رو توی تب فایل نشون بده.
✦ یه نکتهٔ کوچیک هم در مورد اینکه رنگ آیکون بعضی فایل‌های فیگما آبیه و بعضی خاکستری. آبی که رنگ پیش‌فرض فایل‌های فیگماس و خاکستری یعنی این فایل به عنوان لایبرری داخل تیم منتشر شده.

@figm4

فکر کنم از اولین باری که Penpot رو دیدم، بیشتر از دو سال بگذره، یه ابزار دیزاین open source که امکانات قابل قبولی داشت ولی هنوز خیلی کار داشت تا بتونه جایگزین ابزار دیزاین تیم‌ها بشه.
این مدت حسابی روش کار شد و پیشرفت کرد و بالاخره دیروز انتشار رسمیش رو اعلام کرد و احتمالاً از اینجا به بعد اتفاقای جالبی رو براش شاهد باشیم.
اما صرف نظر از امکانات بیشتری که در بعضی از قسمتا نسبت به فیگما داره، به نظر من پررنگ‌ترین تفاوتی که در پن‌پات خودنمایی می‌کنه به نظر من اینه که منبع‌بازه و می‌تونه روی سرور اختصاصی بیاد بالا و این می‌تونه بازی رو عوض کنه.

اگه می‌خواین کنار کامپوننت‌ها و دیزایناتون توضیحات مربوط به هر قسمت رو داشته‌باشید تا با خیال کمی آسوده فایل رو به دست توسعه‌دهنده‌ها یا افراد دیگری که می‌خوان ازش استفاده کنن بگذارید، پلاگین EightShapes Specs می‌تونه بهتون کمک کنه.

فعلاً تنظیمات خاصی نداره و کافیه فریم یا کامپوننتی که می‌خواید رو انتخاب کنید ، پلاگین رو اجرا کنید و منتظر بمونید تا یه سری فریم به صفحهٔ شما اضافه کنه.

چند تا نکته:
بعد از تموم شدن کار پلاگین، خروجی در راست‌ترین قسمت اون صفحه قرار می‌گیره. یعنی اگه کنار کامپوننت شما فریم‌های دیگری هم هست، به راست برید تا نتیجهٔ کار رو ببینید.
رنگ‌هایی که استفاده شده رو در قالب استایل به فایلتون اضافه می کنه و از این طریق می تونید رنگ‌ها رو تغییر بدین.
در لحظه محتوای خروجی این پلاگین در سه بخش
◆ ساختار (Anatomy)
◆ ویژگی‌ها (Props)
◆ چیدمان و فاصله‌ها (Layout & Spacing)
تقسیم می‌شه.
توی قسمت آناتومی لیست آیتم‌ها دقیقاً بر اساس نام لایه‌ها نوشته‌می‌شه، پس بهتره قبل از اجرا کردن پلاگین حواستون به لایه‌های متنی باشه که براشون اسم گذاشته‌باشید.

شما هم اگه نکته‌ای دیدید کامنت بذارید.

شمام از این مهارتا دارین؟
مثلاً کد رنگ رو، خودِ رنگ ببینی.
یا مثلاً متنای فارسی رو توی جاهایی که پشتیبانی نمی‌شه برعکس بخونی یا حتی تایپ کنی.
یکی از خفناش هم اینه که مسیرهای SVG رو هم موقع خوندن متصور بشی.
خیلی وقتا برای رفع مشکل یا موقع ساخت یا رفع ایراد انیمیت‌های کوچیک و ساده کمک می‌کنه و از ابزار بی‌نیازت می‌کنه.
خلاصه که خوبه موارد پایه‌ایش رو بدونین که اون مقداری که توی ویژگیِ d در تگ path میاد معنیش چیه و چجوری داره باعث رسم یه مسیر میشه.
اگه بهش علاقمندید توی این صفحه به صورت تعاملی می‌تونید باش پیش برید و یاد بگیرید.

از وقتی جستجو به صفحهٔ New file فیگما اضافه شد، خیلی کمتر می‌رم به صفحهٔ لیست فایل‌ها.
هر فایلی بخوام باز کنم، کارم command + T و جستجوی فایل با اسمشه.

تازه تو همین صفحه فایل‌های ستاره‌دارتون رو هم لیست می‌کنه برای دسترسی سریع.

برای ساخت فایل جدید هم از command + N استفاده می‌کنم.

گویا مبارزه با انحصارطلبی جواب داد و ماجرای خرید فیگما به انتها رسید.
یه میلیارد دلار هم نوش جان فیگما 😄

الان که دیگه مجبوریم همهٔ فایل‌ها رو ببریم داخل تیم‌ها و محدودیت تعداد صفحات روی فایلای رایگان بیشتر شاخمون می‌زنه.
این پلاگین new page احتمالاً به کار بیاد براتون
البته بعید نیست که فیگما همین روزا جلوی این رو هم بگیره، ولی فعلاً که نگرفته.

پ.ن: البته همون طور که از توضیحاتش هم پیداست اون موقعی که داشتم می‌ساختمش اصلاً به فکر دور زدن این موضوع نبودم. بعداً که منتشر شد دیدم این حفره وجود داره و هنوز هم بسته نشده 😄

این مشکل رو شاید شما هم داشته‌باشید که در رابط کاربری Google Docs دکمه‌ای برای کپی کردن لینک به قسمتی از سند رو ندارین.
فعلاً برای این منظور می‌تونید به اولین هدینگ اون قسمت لینک بدین یا یه Heading در اون قسمت اضافه کنید و بهش لینک بدین.
روی Heading کلیک کنید و بعد می‌بینید که آدرس صفحه عوض شده، حالا اون آدرس رو کپی کنید و بفرستید.
هر چند که احتمالاً منشن کردن فرد مورد نظر در اون قسمت داک کار ساده‌تری باشه 😁

این فونت flow هم برای اینکه خیلی سریع متنا رو تبدیل به اسکلتون کنید گزینهٔ خوبیست.