https://virgool.io/feed/@saeedalipoor A 3D Man; Dad, Dreamer, Devigner :) fa 2026-06-07 15:33:12 https://files.virgool.io/upload/users/28/avatar/vNF6Ke.png?height=120&width=120 https://virgool.io/@saeedalipoor https://virgool.io/DivarDesign/%D8%AA%D8%AC%D8%B1%D8%A8%D9%87%D9%94-%D9%85%D9%87%D8%A7%D8%AC%D8%B1%D8%AA-%D8%AA%DB%8C%D9%85%DB%8C-%D8%A8%D9%87-%D9%81%DB%8C%DA%AF%D9%85%D8%A7-pjxuxiwlu9oo الان که این مطلب رو می‌نویسم چند ماهی از مهاجرت کامل به فیگما در چپتر طراحی و مهندسی تجربهٔ کاربر دیوار می‌گذره و دیدیم خوبه در موردش بنویسیم تا شاید به تصمیم‌گیری دیگران هم کمک کنه.اینکه چرا در دو سال گذشته اکثر تیم‌ها و طراحان (حداقل اونایی که در نظرسنجی uxtools.co سال ۲۰۲۱ شرکت کردن) فیگما رو به عنوان ابزار اصلی انتخاب کردن دلایل متفاوتی داره، از امکانات هر یک از ابزارهای مشابه تا نیازمندی‌ها و ترجیحات هر تیم. شاید در یه مطلب دیگه به مقایسهٔ چند رقیب شناخته‌شدهٔ این حوزه از نظر امکانات و فارغ از نیازمندی‌هایی که ما داشتیم بپردازم. اما این مطلب تمرکزش تجربه‌ایه که ما در انتخاب فیگما و مهاجرت به اون داشتیم.در ادامه مروری می‌کنیم بر اینکه «چرا» فیگما به عنوان ابزار اصلی ما برای فرایند طراحی رابط کاربر و انتقالش به تیم توسعه انتخاب شد و «چطور» به سمتش مهاجرت کردیم.چرا؟مشکلات‌مون روی Sketch داشت زیاد می‌شداسکچ مشکلاتی در همگام‌سازی کتابخونه‌ها داشت که از نسخهٔ ۷۰ خیلی جدی‌تر شد. در فایل‌هایی که اجزاشون رو از کتابخونه‌ ارث می‌بردن به صورت عجیبی اتصال بین کامپوننت‌ها و کتابخونه‌شون قطع می‌شد (مشکل معروف Missing Symbol). البته در به‌روزرسانی‌هایی سعی می‌کردن برطرفش کنن، ولی باز هم پیش میومد و هر دفعه باید دوباره همهٔ کامپوننت‌هایی که به مشکل خورده‌ بودن رو دستی به کتابخونه متصل می‌کردیم. در نتیجه انرژی و زمانی که می‌تونست صرف حل مسأله بشه برای این موارد صرف می‌شد. همچنین باعث می‌شد که دقت طرحی که تحویل داده می‌شد تضمین‌شدنی نباشه و گاهی بعضی کامپوننت‌ها یا رنگ و سایر overrideهاشون حذف بشه و هنگام پیاده‌سازی دیده نشه. از طرفی به خاطر ابعاد تیم‌ها و تعداد کسانی که تحت تأثیر این مشکل بودن کارها پیچیده‌تر می‌شد.دسترسی تیم‌های توسعه به طرح‌ها سخت شده بودما از Zeplin برای انتقال طرح‌ها به تیم توسعه و از Overflow برای انتقال جریان‌ها (Flow) استفاده می‌کردیم، و مشکلاتی که هر کدوم داشتن (مثلاً کند بودن Overflow یا مشکلات سمت سرور Zeplin) باعث می‌شد به فکر ابزارهای بهتری باشیم.به علاوه این تعدد ابزار خودش آزاردهنده می‌شد، مخصوصاً که هر بار باید بعد از تغییرات، اطلاعات با ابزارهای ثانویه همگام‌سازی می‌شد و مسائل اون قسمت هم سرعت‌مون رو کم می‌کرد. مثلاً چون Overflow توان همگام‌سازی فایل‌های سنگین رو نداشت مجبور بودیم فایل‌ها رو به چند قسمت تفکیک کنیم یا ممکن بود به خاطر مشکلات زپلین یک روزِ کامل امکان همگام‌سازی اسکچ با زپلین رو نداشته‌باشیم.اسکچ دیگه تنها ابزار نبودتا چند سال پیش اسکچ ابزار اصلی طراحی رابط کاربر بود و بیشتر طراحانی که به تیم ملحق می‌شدن به احتمال زیاد با اسکچ کار کرده بودن، اما این آمار کم‌کم تغییر کرده و طراحانی که اخیراً به تیم پیوستن پیش‌تر با فیگما کار می‌کردن.فیگما به نیازهای ما نزدیک‌تر بوداگرچه اسکچ هم امکاناتی رو برای کار ساده‌تر تیمی اضافه کرد اما این فرایند در فیگما بسیار بهتر و پخته‌تر بود و مشکلاتی هم که پیش‌تر گفته شد وجود نداشت. به علاوه، ابزارهای بیشتری در اختیارمون قرار می‌گرفت و باعث می‌شد هم فرایند طراحی و هم ارتباط با توسعه‌دهنده‌ها ساده‌تر از پیش بشه، مثل variantها، auto layout، جامعهٔ پویاتر و در نتیجه به‌روزرسانی‌های کاربردی‌تر.فیگما برای ما ارزون‌تر تموم می‌شدهزینهٔ‌ فیگما در مقایسه با اسکچ و ابزارهایی که همراهش استفاده می‌کردیممجموع مبلغ به ازای هر نفر ویرایشگر در فیگما کمتر از هزینه‌ای بود که باید برای اسکچ و ابزارهای جانبیش می‌پرداختیم. (ضمن اینکه اورفلو هم تغییر عجیبی توی پرداختش داد که باعث شد عددهای قسمت بالا بیشتر هم بشه.)آیندهٔ روشن‌تری رو برای فیگما می‌دیدیممسیر توسعهٔ فیگما و امکاناتی که ارائه می‌داد، شیب رشدش، جذب نیروهای قوی و ۵ سری جذب سرمایه (اون موقع آخرینش سال ۲۰۲۰ از Andreessen Horowitz بود و بعد از اون هم جذب سرمایه داشت) باعث می‌شد ادامهٔ کار با فیگما رو بهتر ببینیم. خوبه نگاهی به آمار نظرسنجی‌ای که به تازگی از جامعهٔ طراحان منتشر شد بندازیم:نمودارها از نظرسنجی سال ۲۰۲۱ سایت uxtools,co برداشته‌شدهودارهایی زمان و شرایط برای مهاجرت مناسب بوددر لحظه هر تیم یک نمایندهٔ دیزاینِ آشنا به فیگما داشت (باهار قبلاً اینجا در مورد ساختار صنف تجربهٔ کاربر دیوار نوشته). از طرفی چپتر UXE برای کمک به تسریع انتقال فایل‌ها و ساخت ابزار آمادگی داشت. ضمن اینکه به خاطر برنامه‌های جاری مجموعه در اون مدت، زمان لازم برای مهاجرت رو هم داشتیم.البته استفاده از فیگما هم بدون مشکلات نبود اما یا قابل حل بود یا قابل چشم‌پوشی.مشکلاتی مثل عدم پشتیبانی فارسی (که با پلاگین قابل حل بود و وعدهٔ درست‌شدنش رو هم داده بودن) یا نیاز به اینترنت برای باز‌شدن فایل‌ها، یا ریسک بسته‌شدن اکانت (که با بکاپ‌گیری ضرر احتمالیش رو کاهش دادیم)چطور؟خوشبختانه فیگما امکان وارد کردن فایل‌های اسکچ رو داشت، اما متأسفانه نتیجهٔ کارش خیلی عالی نبود. مثلاً کامپوننت‌ها به کتابخونه متصل نبود، یا overrideها به درستی منتقل نمی‌شد، یا به خاطر تفاوت‌هایی که در ساختار استایل‌های رنگ یا متن وجود داشت گاهی اون‌ها هم ناقص وارد می‌شدن، از تعامل‌ها و پروتوتایپ هم باید صرف‌نظر می‌کردیم چون منتقل نمی‌شد.در نتیجه قبل از اینکه همهٔ فایل‌ها رو وارد کنیم، مفصل دنبال ابزاری برای تبدیل فایل‌های اسکچ به فیگما گشتیم و چیزای مختلفی رو تست کردیم اما هر کدوم نواقصی داشتن. می‌شه گفت بهترینشون xd2sketch بود که اخیراً اسمش شده Magicul. این سایت در ازای پرداخت هزینه، فایل‌های مختلف رو به هم تبدیل می‌کرد، ولی باز هم اون چیزی که ما می‌خواستیم نبود. (الان شاید بهتر شده باشه)در نهایت تصمیم گرفتیم که فایل‌های اسکچ رو به خود فیگما بدیم تا وارد پروژه کنه و بعد خودمون به صورت دستی یا با ابزارهایی که می‌یابیم یا می‌سازیم این فرایند رو نهایی کنیم. (مهم‌ترینش جایگزینی اجزای نما‌ها با کامپوننت‌های نظیرشون در کتابخونه بود)ما مسیر مهاجرتمون رو به سه قسمت تقسیم کردیم:واردکردن فایل اسکچ کتابخونهٔ سنّت به فیگما و اصلاحش بر اساس تفاوت‌های فیگما + وارد کردن فایل‌های دیزاین هر تیمفایل کتابخونه رو وارد فیگما کردیم و یه سری تغییرات روش انجام شد. تغییراتی از جنس آماده کردن استایل‌های رنگ و متن و استفاده‌شون در کامپوننت‌ها، تغییر چیدمان‌ها به auto layout در هر جایی که می‌شد، تبدیل کامپوننت‌ها به ورینت در جاهایی که نیاز بود، مرتب‌کردنشون در صفحات مختلف و در ادامه نزدیک کردن هر چه بیشتر جزییات کامپوننت‌ها با کدهای موجود که فرایندی ادامه‌دار خواهد بود.فایل نماها رو هم در ادامه وارد فیگما کردیم و با پلاگینی که ساخته بودیم به کتابخونه متصل کردیم. (جا داره این رو هم بگم که فایل‌ نماهای ما عملاً مجموعه‌ای بود از کامپوننت‌هایی که کنار هم چیده شدند و این خیلی در فرایند مهاجرت به ما کمک کرد، خلاصه که سعی کنید همیشه از کامپوننت‌ها استفاده کنید)اصلاح فایل‌های دیزاین هر تیمحالا نیاز بود تا دیزاینرهای هر تیم فایل‌هاشون رو بررسی کنن تا مشکلات احتمالی رفع بشه.اتصال نماها به هم با استفاده از prototypeدر نهایت هم دیزاینرها با استفاده از پروتوتایپ، نماها رو به هم متصل کردن تا فلوها رو هم در همهٔ فایل‌ها داشته‌ باشیم.مسائل، چالش‌ها و راهکارهایی که براشون داشتیمعدم پشتیبانی فیگما از فارسی و چالش انتقال متن به توسعه‌دهنده‌هایکی از عواملی که باعث تردید در مهاجرت به سمت فیگما می‌شد همین موضوع بود،‌ مخصوصاً که توسعه‌دهنده‌ها در لحظه از زپلین برای کپی متن‌ها استفاده می‌کردن و توی فیگما به خاطر معکوس شدن متن‌ها این امکان براشون وجود نداشت. چند تا راه حل در لحظه به ذهنمون رسید، مثلاً یه خروجی با فرمت JSON که متن‌ها و ارتباطشون با لایه‌ها رو مشخص کنه و یه جورایی بشه فرهنگ واژه‌هامون اما برای این که این راه جواب بده نیاز بود که سمت توسعه‌دهنده هم هزینه بشه و زیرساختی برای به‌روزرسانی متن‌ها باشه، پس در اون لحظه سمتش نرفتیم، راه بعدی توضیح گذاشتن روی کامپوننت‌ها بود یا استفاده از کامنت که باز هم محدودیت‌هایی داشت، در نهایت بهترین راه رو این دیدیم که از قابلیتی که خود فیگما داره ولی به خاطر معکوس بودن متن‌های فارسی بی‌استفاده مونده استفاده کنیم، که نتیجه‌اش انتشار پلاگین RTL PLZ Handoff بود.این پلاگین متن‌های هر لایه‌ رو به صورت یه لایهٔ نامرئی با متن درست و معکوس نشده در همون موقعیت و روی اون لایه قرار می‌ده، در نتیجه وقتی توسعه‌دهنده برای انتخاب متن و کپی کردنش تلاش می‌کنه، اون لایهٔ نامرئی انتخاب می‌شه و متن اصلی رو می‌تونه کپی کنه. ساخت این پلاگین کمی قبل از تصمیم برای مهاجرت کامل به سمت فیگما بود و باعث شد از این نظر نگرانی نداشته باشیم و راحت‌تر تصمیم بگیریم.اتصال اجزای صفحات به Libraryبرای اینکه نیاز نباشه تک‌تک کامپوننت‌ها رو به کتابخونه متصل کنیم نیاز به ابزاری بود که فایل رو مرور کنه و خودکار اجزا رو به کتابخونهٔ کامپوننت‌ها لینک کنه. این شد که پلاگین FigLink رو ساختیم، که در نسخهٔ اول صرفاً لیست کامپوننت‌های کتابخونه رو می‌گرفت و در یک فایل می‌گشت تا هر instance هم‌نامی پیدا می‌کرد با اون جایگزین کنه. در ادامه بهبودش دادیم تا بشه بین کامپوننت‌های کتابخونه جستجو کرد و یک کامپوننت رو با هر چیزی جایگزین کرد و مهمتر از همه متن‌ها رو هم نگه‌داشت. مدتی بعد فیگما امکان سوییچ کتابخونه رو اضافه کرد، البته که اگه زودتر هم اضافه می‌شد برای مورد ما نیاز به این پلاگین بود و هنوز هم کاربرد داره.عملکرد نسخهٔ آخر FigLink و نگه‌داشتن متن لایه‌ها هنگام جایگذاریانتقال فلوها به توسعه‌دهنده‌ها در بستر فیگمادر اون زمان (حوالی تیر ۱۴۰۰) فیگما در نمای توسعه‌دهنده، فلوها رو نمایش نمی‌داد و توسعه‌دهنده نمی‌تونست یک جریان رو دنبال کنه تا منطقش رو پیاده کنه. از طرفی دیگه نمی‌خواستیم ابزار جدیدی از خارج محیط فیگما به فرایندمون اضافه کنیم، بنابراین پلاگین ProToFlow رو توسعه دادیم تا تعامل‌ها رو خودکار تبدیل به بردارهایی بین مبدأ و مقصد کنه و توسعه‌دهنده هم بتونه اون‌ها رو ببینه. شاید در یه مطلب دیگه در مورد جزییاتش بنویسم.البته توی به‌روزرسانی‌های اخیر فیگما توسعه‌دهنده‌ها هم میتونن فلوها رو با زدن Shift+E ببینن و مرورشون کنن، در نتیجه اخیراً این قسمت تبدیل فلوها از چرخهٔ کاری طراحان تیم حذف شد.عملکرد پلاگین ProToFlow برای تبدیل تعامل‌ها به خطوط فلونمایش وضعیت طرح‌ها در فایل‌های پروژه‌های مختلفبرای هم‌سویی تیم‌ها و بازبینی طرح‌ها، به فریم‌ها تگ‌های مختلفی زده می‌شه تا بشه وضعیتشون رو دنبال کرد. پلاگین‌هایی برای این موضوع بودن اما باز هم اونی که ما می‌خواستیم نبود. در نتیجه پلاگین FigTag رو هم توسعه دادیم تا بشه از قابلیت Variant component فیگما برای تگ‌زدن به فریم‌ها استفاده کرد. با این پلاگین شما از یک ورینت کامپوننت به عنوان تگ استفاده می‌کنین و پلاگین همون رو کنار فریم(های) مورد نظر شما قرار می‌ده. هر زمان که نیاز به تغییر وضعیت اون فریم باشه می‌شه بدون باز کردن پلاگین و فقط از طریق تغییر تنظیمات Variant انجامش داد.عملکرد پلاگین FigTag در فیگمااحتمال بسته‌شدن حسابمون در فیگما به لطف تحریم‌هااین هم از چیزایی بود که از ابتدا دغدغه‌ش بود و تا جایی که می‌شد سعی کردیم از فایل‌ها بکاپ داشته‌ باشیم و این اواخر هم یک اسکریپت براش ساختیم تا به صورت خودکار عملیات بکاپ‌گیری از پروژه‌های مورد نظر انجام بشه. این اسکریپت که به صورت یه پکیج روی npm هست و روی گیت‌هاب هم در دسترسه، با گرفتن ایمیل و رمز شما و token فیگما (که باید از تنظیمات پروفایل بسازید) به صورت کاملاً محلی و بدون اتصال به سرور دیگه‌ای یکی یکی فایل‌های فیگمای پروژه‌هایی که بهش بگین رو دانلود می‌کنه. دم مصطفی گرم که خیلی سریع و برق‌آسا این پکیج رو آماده کرد و به صورت منبع‌باز منتشرش کرد.این مسیر برای من تجربهٔ جالبی بود مخصوصاً که هم ظرفیت آموختن درش داشت و هم چالشای فنی و طراحی. نکتهٔ جذاب دیگه برام این بود که از ابتدا به پلاگین‌ها به چشم یک ابزار عمومی نگاه کردیم و طوری توسعه‌شون دادیم که فقط کاربرد داخلی نداشته باشه و طراحان دیگه هم ازش سود ببرند و الان که این مطلب رو می‌نویسم پلاگین‌هایی که در پروفایل دیوار روی فیگما منتشر شدند مجموعاً بیش از ۳۰هزار بار نصب شدن و با بازخوردهایی که گرفتیم و نیازمندی‌هایی که داشتیم بهبودشون دادیم.در آخر باید بگم اگه هنوز هم برای مهاجرت به فیگما تردید دارید، به عنوان کاربری که تقریباً از اوایل ورود فیگما به بازار ابزارهای طراحی پیگیرشه می‌گم که فیگما انتخاب خوبیه و حتماً امتحانش کنید.راستی اگه شما هم به چالش‌هایی از این جنس علاقه دارید، اهل زیر و رو کردن ابزارهای طراحی هستید، یا به ساختار فایل‌های طراحی و جریان کار تیم طراحی حساسید و می‌خواید بهترش کنید و کمی هم با پیاده‌سازی و تبدیل طرح‌ها به کد هم آشنایی دارید، جاتون توی چپتر مهندسی تجربهٔ کاربر دیوار خالیه. از همینجا می‌تونید برای حضورتون اعلام آمادگی کنید. Saeed Alipoor Saeed Alipoor Wed, 23 Feb 2022 18:08:52 +0330 https://virgool.io/@saeedalipoor/how-much-vpbdexvpqxn6 Take my moneyاوایل که شروع کرده‌بودم پروژه‌های کوچک گرفتن تا یاد بگیرم و تجربه‌ام بیشتر بشه، از یه دوست با تجربه در مورد قیمت‌گذاری پرسیدم، انتظار داشتم بیاد یه سری مقدمه‌چینی کنه و بهم متغیرهایی رو معرفی کنه و یه فرمول بده و در نهایت بگه مثلاً این سه بستهٔ پیشنهادی رو به کارفرما ارائه بده تا انتخاب کنه، اما همهٔ این‌ها خلاصه شد در همین عبارت:هر چی تیغت می‌بُره.در لحظه یه حس منفی از این جمله گرفتم، من که نمی‌خواستم کسی رو تیغ بزنم! اما هر چی پیش‌رفتم و یادگرفتم ابعاد این جمله برام روشن‌تر شد انگار که توی داستان معروف فیل همون اول یکی بگه دوستان این موجودی که در تلاش برای شناختنش هستید حضرت فیله و بعد آروم آروم اتاق روشن بشه یا خودت اندام‌های مختلف فیل رو لمس کنی? و بفهمی که با فیل طرفی. می‌شه یه کتاب با عنوان «هر چی تیغت می‌بُره» نوشت و توش با کلی مثال مفهوم عرضه و تقاضا رو بیان کرد و هر چی تیغ اسم نویسنده و تبلیغات می‌بُره قیمت‌گذاری بشه.خلاصهٔ حرف همینه، توی مذاکره سر استخدام در یک شرکت یا پذیرفتن یه پروژه به صورت آزاد همه دارن از همین فرمول استفاده می‌کنن و هر چقدر تیغشون می‌بره پول می‌گیرن.بذارید اول سر مفهوم تیغ به توافق برسیم تا شما مثل منِ سال‌ها پیش دچار اون حس منفی نشید، قرار نیست جیب کسی رو تیغ بزنیم، اصلاً شما به جای تیغ بگو طناب، و اون جملهٔ قصار رو به این تغییر بده، هر چی طنابِت می‌کشه. از اینجا به بعد هم با طناب می‌ریم جلو که بشه رشته‌هاش رو گسست.به عنوان کارجو قراره یک رابطه رو شروع کنید که به احتمال بالا بنیادی‌ترین دلیلش کسب درآمده و به عنوان کارفرما هم اینکه کاری که نتیجه‌اش براتون مهمه (توسعه و رشد محصول و کسب درآمد بیشتر، کمک به موجودات دیگر، تولید یک محصول برای شستشوی پول‌های ورودی از جای دیگه، گرفتن بودجهٔ کلان از بالا و ...) انجام بشه و باز به خاطر همون دلیل بنیادی مجبورید به کارجو پرداخت داشته‌باشید (پول یا اعتبار). اینجاست که طناب‌های شما وارد عمل می‌شه و اون عدد نهایی که در موردش توافق می‌کنید رو تعیین می‌کنه. بیاید به طناب های کارجو و کارفرما نگاهی بندازیم:طناب‌های کارجوتخصص (طنابش رو می‌شه به رشته‌هایی مثل گسترهٔ مهارت‌ها، تحصیلات، سابقهٔ مؤثر و ... گسست).برند (نام نیک که از رضایت کارفرماهای قبلی، فعالیت مفید در جماعت‌های مرتبط و شبکه‌سازی می‌تونه حاصل بشه).طناب‌های کارفرمابستهٔ پیشنهادی (خالص پرداختی، جبران هزینه‌های درمان، هزینهٔ آموزش، قول سهام و ...)برند کارفرمایی (چهره‌ و اعتبار شرکت، جذابیت و ارزش‌مند بودن خود محصول، هم‌تیمی‌ها و ....)حالا وقت طناب‌کشیه، کارجوها با هم و کارفرماها با هم برای به دست آوردن یا حفظ موقعیت بهتر رقابت می‌کنن. این مسابقه یه جورایی همواره در حال برگزاریه، از بسته‌های خوش‌آمدگویی و پست‌های فریبنده? و اینستاگرامی کسب و کارها تا کارگرهایی که صبح‌ها منتظرن برای یک کار روزمزد و روی عدد یک روز کارشون و کارهایی که بلدن با کسی که به دنبال کارگره چونه بزنن.بریده‌ای از پست اینستاگرام یک برند احتمالاً در تلاش برای ساخت برند کارفرماییدر نهایت این کارجو و کارفرما هستن که با توجه به موقعیت خودشون پیشنهاد می‌دن و مذاکره می‌کنن تا به توافق برسن، که بسته به نوع کار سطح این مذاکرات می‌تونه متفاوت باشه.حالا سؤالای مختلفی پیش میاد، یکیش که اخیراً دوباره بهش برخوردم این بود که آیا یک نفر که در یک شهر گران زندگی می‌کنه با یک نفر که در شهری با هزینه‌های کمتر زندگی می‌کنه باید حقوق برابری داشته‌باشن؟ به نظر من اینم رشته‌ای از طناب‌های کارجو برای به دست‌آوردن یک جایگاه شغلیه. چطور؟ کارجویی که در شهر ارزان‌تر ساکن هست ابتکار عمل رو برای اینکه عدد پایین‌تری رو قبول کنه داره و از طرفی کارجویی که در شهر گران‌تر ساکنه که اتفاقاً شهری هست که دفتر اصلی شرکت اونجاست اولویت استخدام شدن رو به خاطر نزدیک‌بودنش به شرکت داره. خلاصه همه در تلاشن که سود کنن یا حداقل ضرر نکنن یا حداقل کمتر ضرر کنن. اکثر سؤالات دیگه رو هم با این مدل میشه بهش پرداخت.البته از نقش نهادهای اجتماعی و صنفی برای اینکه آگاه‌سازی کنن یا مثلاً یه حداقل تعرفه‌ای تعیین کنن برای کارها نمیشه غافل شد اما در نهایت قرارداد و توافقی که بین کارجو و کارفرما منعقد می‌شه تعیین‌کننده هست.حرف زیاده ولی من حرفم رو با این داستان که به پیکاسو نسبتش می‌دن با اندکی تصرف تمام می‌کنم:پیکاسو توی یه کافه‌ای بعد از تموم‌کردن قهوه‌اش روی دستمالی کثیفی خط‌خطی‌هایی کرد و بعد دستمال رو مچاله کرد و بلند شد که بره، فردی که نزدیکش بود و می‌دونست الان این دستمال چقدر می‌ارزه، رفت جلو و بهش گفت این دستمال رو ازت می‌خرم و پیکاسو گفت:«البته! این لینک پروفایل من رو داشته‌باش امشب همین رو NFT می‌ذارم با قیمت پایهٔ ۲۰ اتر و می‌تونی بید بذاری. فعلاً خداحافظ!» Saeed Alipoor Saeed Alipoor Mon, 20 Dec 2021 16:11:30 +0330 https://virgool.io/@saeedalipoor/figma-limited-link-xjbljptpwuck برای کسانی که از فیگما استفاده می‌کنن یکی از پرسش‌های بنیادین که به مرور زمان پیش میاد اینه که چطور فقط یه قسمتی از فایل رو به اشتراک بذاریم بدون اینکه دارندهٔ لینک بتونه به بقیهٔ جاها س بزنه یا فایل رو کپی کنه.راهکار قطعی که خیالتون راحت باشه اینه که به فیگما پول پرداخت کنید تا موقع اشتراک‌گذاری بتونید جلوی کپی شدن فایل رو بگیرید.چون راهکاری که در نهایت می‌گم ۱۰۰٪ نیست این عکس رو انتخاب کردم برای پستیکی از راه‌هایی که خیلی وقته می‌شه استفاده کرد اینه که فایل یا پروتوتایپ فیگما رو توی یه صفحهٔ دیگه به نمایش بگذاریم. Embed کنیم به اصطلاح.از پنجرهٔ share می‌شه از این قسمت کد embed رو گرفتمثلاً این صفحه روی نوشن رو ببینید. این‌جوری دیگه فقط همون قسمتی که لینکش رو ساختیم نمایش داده‌میشه و دسترسی به لایه‌ها و قسمت‌های دیگه نخواهد‌بود، اما مشکل اینجاست که پایین همون فریم لینک فایل قرار داره که شخص می‌تونه روش کلیک کنه و وارد فایل بشه، یا مثلاً توی حالت پروتوتایپ فلوهای دیگه رو هم می‌تونه ببینه. برای همین یه صفحه ساختم که یه جورایی جلوی این موضوع رو بگیریم.کافیه آدرسی که از فیگما گرفتید (مثل شکل پایین) رو داخل این صفحه وارد کنید و یه آدرس جدید (مثل این) که بهتون داده‌میشه رو به اشتراک بگذارید. البته که این راه هم ۱۰۰٪ نیست ولی تا حد خوبی دارندهٔ لینک رو محدود می‌کنه به همون قسمتی که باش به اشتراک‌گذاشته‌شده.تا بعد :) Saeed Alipoor Saeed Alipoor Sat, 02 Oct 2021 15:48:10 +0330 https://virgool.io/@saeedalipoor/writing-in-figma-adwysjmseevc صرفاً جهت کاور، چون در ویرگول به صورت جدا نمی‌شه کاور برای پست آپلود کردمدت زیادیه منتظر فرصتم تا یه مجموعه پست و ویدیو آماده کنم برای افزایش سرعت کار در فیگما، مثل معرفی پلاگین، ترفندهای جالب، میونبرهای به درد بخور و ...اگه نمی‌دونید فیگما چیه، باید بگم که یه ابزار طراحیه که دیر اومده اما زود داره می‌ره جلو.تو این مطلب قراره به نوشتن در فیگما بپردازیم.اگه آموزش به صورت ویدیویی رو ترجیح می‌دی می‌تونی این ویدیو رو ببینی. https://youtu.be/yGJ1IX4gAAo https://www.aparat.com/v/wiIgC در فیگما هم با فشردن کلید T صفحه‌کلید و هم با کلیک روی T در نوار ابزار می‌تونید نوشتن رو شروع کنیدبعد از فعال کردن ابزار نوشتن، سه تا کار می‌شه کرد:کلیک روی متن‌هایی که قبلاً نوشتید برای ویرایش یا انتخاب بخشی از اون‌ها برای حذف یا ویرایش.کلیک روی هر جای صفحه و ایجاد یه کادر با عرض و ارتفاع آزاد برای نوشتن. این کادر هر چقدر که بنویسید ابعادش بزرگ می‌شه و خطوط رو نمی‌شکنه مگر اینکه خودتون برید به خط بعد.کلیک و کشیدن یک کادر، در این حالت ابعاد کادر ثابت خواهد بود و خطوط متن شکسته می‌شه تا در عرض کادر جا بشه، اگر تعداد خطوط هم از ارتفاع کادر زیادتر باشه، از کادر بیرون خواهد‌زد، اگه بخواید این اتفاق نیفته باید از نوار ابزار سمت راست مقدار تنظیم ابعاد رو بگذارید روی Auto Height، مثل تصویری که در ادامه می بینید.ابزار نوشتن رو معمولاً برای یکی از این کارها انتخاب می‌کنیدتنظیمات لازم برای تایپوگرافی رو هم از همون نوار سمت راست دارید و الان خیلی وارد جزییاتش نمی‌شیم.اولین شوکی که خیلیا دفعهٔ اول کار با فیگما باش مواجه میشن اینه که فارسی تایپ می‌کنن اما چیزی نمی‌بینن، دلیلش اینه که تو فیگما اگر فونتی گلیف فارسی نداشته‌باشه فیگما چیزی نشون نمی‌ده در صفحه، پس قدم اول اینه که هر وقت خواستید فارسی بنویسید یه فونت فارسی انتخاب کنید. البته مسأله همینجا تموم نمیشه...یه نکته هم اینکه اگه خواستید از نسخهٔ وب فیگما استفاده کنید و فونت‌های روی کامپیوترتون رو هم بتونید استفاده کنید، باید از این صفحه Font Installer رو نصب کنید.یه راهش هم اینه که پلن Organization بخرید و فونت‌ها رو بگذارید روی سرور فیگما تا همهٔ اعضای تیمتون بهش دسترسی داشته‌باشند که خب خیلی گرون می‌شه?کلاً فیگما در حال حاضر پشتیبانی خوبی از زبان‌های راست به چپ نداره، قولش رو داده که درستش می‌کنه، اما الان که اردیبهشت ۱۴۰۰ هست هنوز اتفاق جدیدی در این مورد نیفتاده.تا قبل از اینکه امکان پلاگین به فیگما اضافه بشه یه پلاگین کوچک شخصی رو کروم داشتم تا متن رو معکوس کنه یا متنی که روی صفحات وب هست رو به صورت معکوس کپی کنه و بعد متن رو وارد پروژه می‌کردم، که بعد از اضافه شدن امکان پلاگین، پلاگین خودم رو ساختم برای نوشتن فارسی در فیگما. به غیر از اون از نرم‌افزارهای فارسی‌نویس هم می‌شد استفاده کرد.پلاگین RTL PLZ رو از اینجا می‌تونید نصب کنیدچند تا روش برای دسترسی به پلاگین‌ در فیگمااین پلاگین چهار تا فرمان اصلی در منوی خودش داره:Editorاین گزینه باعث می‌شه پنجرهٔ ویرایشگر پلاگین باز بشه و بتونید از امکاناتش استفاده‌کنید ه در ادامه توضیح می‌دم.Reverseبا اجرا کردن این گزینه هر لایه‌ای که انتخاب کرده‌باشید چه خودش چه لایه‌های داخلیش اگر متن داشته‌باشن، متنشون معکوس میشه. برای وقتایی که یه فایل از اسکچ ایمپورت کردید به فیگما یا میخواید کلمه رو مستقیم بنویسید و بعد معکوسش کنید به کار میاد.Rewrapاین گزینه برای وقتایی مناسبه که یه متنی رو توی کادری با عرض ثابت نوشتید و حالا ابعاد کادر رو تغییر دادید و دیگه نمی‌خواید ویرایشگر رو باز کنید، کافیه یه بار بعد از اینکه ابعاد کادر رو تغییر دادید این گزینه رو اجرا کنید.Resetفیگما از یه جایی به بعد این امکان رو به پلاگین‌ها داد تا بشه اطلاعات اضافی روی لایه‌ها و فایل ذخیره کنند، منم از این امکان استفاده کردم و متن اصلی رو در اطلاعات لایه نگه‌ می‌دارم، تا اگه یه روز فیگما پشتیبانی زبان‌های راست به چپ اضافه کرد کل لایه‌ها رو انتخاب کنید و این گزینه رو اجرا کنید تا متن‌های اصلی جایگزین بشه.خب بریم سراغ پنجرهٔ ویرایشگر پلاگین. داخل پنجرهٔ پلاگین دو تا تب برای ویرایش متن وجود داره:Editorتوی این تب کافیه یک یا چند لایه رو انتخاب کنید و شروع به نوشتن کنید، متنی که می‌نویسید روی همهٔ لایه‌هایی که انتخاب کردید اعمال می شه.Batch Editorاین تب برای ویرایش دسته‌جمعیه ولی به صورت جدا جدا، یعنی به جای اینکه هر لایه رو انتخاب کنید و بعد بیاین تو ادیتور، همهٔ لایه‌‌هایی که می‌خواید یا گروهشون رو یا فریمشون رو انتخاب کنید و لیست لایه‌های متنی رو توی Batch Editor ببینید و هر کدوم رو ویرایش کنید. می‌تونید با زدن کلید تب بین ردیف های مختلف پیمایش کنید تا سرعتتون بیشتر بشه. من به شخصه از این تب برای ویرایش متن‌های انگلیسی هم استفاده می‌کنم چون دیگه نیاز نیست هر لایه رو جدا انتخاب کنم.میونبرهاتوی فیگما هر بار که یک پلاگین رو از روش‌هایی که بالاتر گفته‌شد اجرا کنید، در صورت نیاز می‌تونید با زدن کلیدهای ترکیبی ctrl+alt+P در ویندوز و command+option+P در مک اون رو تکرار کنید.وقتی یک لایه رو با پلاگین RTL PLZ ویرایش کنید به سایدبار سمت راست دو تا میونبر برای Editor و Rewrap داده‌میشه تا دسترسی سریع‌تری داشته‌باشید. نکته‌ٔ جالب اینه که این دو تا میونبر تأثیری روی اون میونبر قبلی ندارن، یعنی اگر از اینا استفاده کردین با ctrl+alt+P نمی‌شه تکرارش کنید.انتقال به توسعه‌دهندهیکی از مشکلاتی که فارسی‌نوشتن به این روش داره، اینه که توسعه‌دهنده‌ها و حتی بعضی پلاگین‌ها که از متن لایه استفاده می‌کنن (مثل anima) به مشکل می خورن برای خوندن و استفاده از متن لایه، چون متن‌ها معکوس شدن. فعلاً برای توسعه‌دهنده‌ها یه راهکار وجود داره و اون اینه که طراح قبل از اینکه طرح رو به توسعه‌دهنده تحویل بده، یک بار از پلاگین RTL PLZ Handoff استفاده کنه تا با ترفندی که پلاگین به کار می‌بره باعث بشه توسعه‌دهنده بتونه از پنل inspector متن درست رو کپی کنه. روش کار هم ساده‌هست، بعد از اینکه کار طراحیتون تموم شد، هر تعداد فریم که می‌خواید رو انتخاب کنید و پلاگین رو اجرا کنید و منتظر بمونید تا کارش تموم بشه :) Saeed Alipoor Saeed Alipoor Mon, 03 May 2021 18:23:43 +0430 https://virgool.io/@saeedalipoor/%D9%81%DB%8C%DA%AF%D9%85%D8%A7-%D8%AF%DB%8C%DA%AF%D9%87-%D8%B1%D8%A7%DB%8C%DA%AF%D8%A7%D9%86-%D9%86%DB%8C%D8%B3%D8%AA-z9zygyoxtbn9 جواب کوتاه: اگه به صورت مشارکتی روی پروژه‌ای کار نمی‌کنید و استفاده‌تون کاملاً شخصیه، با خیال راحت مثل سابق ادامه بدین.dribbble.com/shots/13532757-Figma-3D-Icon-for-Mac-OS-Big-Surمدتی هست که فیگما با روش‌های مختلف (ایمیل، اعلان داخل برنامه و ...) داره از تغییر سیاست‌هاش برای پلن Starter برای تیم‌ها صحبت می‌کنه. کلاً در حال حاضر توی فیگما پلن‌ها برای تیم‌ها تعریف شده و ربطی به فضای شخصی نداره. شما همچنان می‌تونید تو فضای شخصیتون بی‌نهایت فایل بدون محدودیت حجم بسازید و پاک هم نمی‌شه، فقط تاریخچهٔ تغییراتشون مثل سابق تا سی روز در دسترسه.حالا قراره چی بشه؟از اول اردیبهشت دیگه فایل‌های شخصی رو نمیشه با دسترسی ویرایش با کسی به اشتراک گذاشت و این امکان فقط برای فایل‌هایی که در یک تیم هستند وجود خواهد‌داشت.از اول اردیبهشت گزینهٔ can edit رو برای فایل‌های شخصی نداریمقبل از اینکه ادامه بدم این رو بگم که کسایی که تا قبل از تاریخی که گفتم به فایل‌های شخصی دیگران دسترسی داشتن همچنان دسترسیشون پابرجا خواهدبود.یعنی اونایی که تیمی دارن استفاده می‌کنن از فیگما، این چند روز فرصت این رو دارن که تا می‌تونن فایل به draf‌t اضافه کنن و همدیگه رو با دسترسی ویرایش به فایل‌هاشون دعوت کنن.در مورد تیم‌هاتا پیش از اول اردیبهشت ۱۴۰۰ روی هر فایل می‌شد فقط دو کاربر ویرایشگر داشت، اما این محدودیت قراره برداشته‌بشه (چه فایده ?)تعداد فایل‌هایی که draft نیستن برای تیم‌های با پلن رایگان، قراره محدود بشه به ۳ تا فایل و تو اون سه تا فایل هم نهایتاً سه تا صفحه می‌شه داشت.هر چند که به شخصه ناراحت شدم از این تغییر اما خب حرکتی هوشمندانه از فیگما بود تا تیم‌هایی که خیلی جدی و ساختاریافته دارن ازش به صورت رایگان استفاده می‌کنن بهش پول بدن.توضیحات فیگما در مورد این به‌روزرسانیخوب باشید و طرحاتون زیبا ? Saeed Alipoor Saeed Alipoor Wed, 14 Apr 2021 13:31:23 +0430 https://virgool.io/@saeedalipoor/virgool-cover-sizes-ubu4zjqcxvn9 مخلص کلام: من ابعاد مختلف کاور پست‌ها در پیش‌نمایش‌های ویرگول رو بررسی کردم و این فایل فیگما رو ساختم برای سنجش مناسب بودن کاور پست.همین الان که ۱۰ آذر ۹۹ هست، اگر یه چرخی توی ویرگول بزنید و نگاهی به تصاویر پیش‌نمایش یا همون کاور بندازید، می‌بینید که خیلی از کاورها پیام مشخصی منتقل نمی‌کنند و به درستی برش نخوردن. مثلاً من این تصویر رو الان از صفحهٔ پست‌های انتخابی سردبیر گرفتم. می‌بینید که بعضی از کاورها که کم هم نیست این مشکل رو دارن.در مرکز راهنمای ویرگول هم در حال حاضر صرفاً روش قراردادن تصویر در پست توضیح داده‌شده و البته این نکته که به صورت خودکار اولین تصویر پست به عنوان کاور انتخاب می‌شه، (البته قبل از انتشار می‌تونید تصویر دلخواه انتخاب کنید).ویرگول تصاویر کاور رو توی ابعاد مختلف صفحه نمایش به صورت متفاوت نشون می‌ده، اما از شما فقط یک تصویر قبول می‌کنه، بنابراین براش فرقی نداره ابعاد تصویر شما چقدر باشه، تصویر رو در قابی که مد نظرش هست برش و نمایش می‌ده. داخل سایت ویرگول زیاد مهم نیست ابعاد تصویر چقدر باشه و مهم اون منطقهٔ امن هست(پایین‌تر توضیح می‌دم)، اما برای اینکه تو پیش‌نمایش‌ پلتفرم‌های دیگه به خوبی دیده بشه بهتره یه نسبت ۱۶:۹ یا ۴:۳ داشته‌باشه تصویر.برای اینکه خیالمون راحت باشه که پیام اصلی که در کاور می‌خوایم منتقل کنیم دیده‌میشه، یا قسمت جذابی از تصویر دیده‌میشه، باید کاورهای ویرگول رو در جاهای مختلف ببینیم و اشتراک اونها می‌شه منطقهٔ امن کاور ما. مشابه تصویری که اول همین پست گذاشتم.من تا اونجا که تونستم یه گشتی تو صفحات مختلف ویرگول زدم و حاصلش شد این فایل فیگما که می‌تونید ازش برای سنجیدن کاور خودتون استفاده کنید. https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FoMDTk0cHGdBkBFBxWNR3GH%2FVirgool-Cover-Sizes%3Fnode-id%3D1%253A166 امیدوارم از این به بعد پیش‌نمایش پست‌هاتون جذاب تر بشه :) Saeed Alipoor Saeed Alipoor Mon, 30 Nov 2020 18:46:42 +0330 https://virgool.io/@saeedalipoor/virtualized-list-and-usability-jessknl6o88n توی یک صفحه وب بودم و می‌خواستم از توی یک لیست طولانی چیزی رو پیدا کنم، طبق عادت Ctrl + F رو زدم تا سریع پیدا کنم یا خیالم راحت بشه که اونجا پیدا نمیشه(البته مطمئن بودم که اونجاست فقط باید پیداش می‌کردم)، اما جستجو ثمری نداشت. چرا؟اگر توسعه‌دهندهٔ سمت کاربر باشید (فرقی نداره وب‌اپلیکیشن یا اپ‌های موبایل) به احتمال زیاد با لیست‌های مجازی آشنایی دارید. مقالهٔ بهبود تجربه اسکرول کردن در لیستهای خیلی بلند خیلی مفصل در مورد پیاده‌سازیش روی وب با vuejs پرداخته و پیشنهاد می‌کنم بخونیدش. ساده‌اش میشه این که برای بهبود سرعت صفحه‌ای که یه لیست طولانی داره فقط مواردی که در قسمت قابل دیدن صفحه یا همون view-port هستند در صفحه پردازش بشه.لیست‌های مجازی برای بهبود سرعت صفحات در بسیاری از اپ‌هایی که لیست‌های طولانی دارند استفاده می‌شوند تصویر بالا به طور خلاصه مشکلی که من توی جستجوی اون صفحه باهاش مواجه شدم رو نشون می‌ده. اون صفحه داشت برای بهبود سرعت صفحه از اسکرول مجازی استفاده می‌کرد و اون دسته از کاربرانی که با جستجو در صفحه می‌خواستن به چیزی برسن رو قلم گرفته (شاید فعلاً).این مطلب رو بیشتر برای این نوشتم که در جریان چنین رفتاری از کاربران مرورگرها (مخصوصاً دسکتاپ و لپ‌تاپ) باشیم، اما اگه بخوام راه‌حلی هم براش بگم میشه به این‌ها اشاره کرد:یه فرم جستجو برای لیست‌های این‌چنینی به کاربر ارائه بدید تا بتونه بین اون موارد جستجو کنه. گاهی بسته به نوع جستجو و اولویتش در صفحه می‌شه فوکوس خودکار گذاشت روش یا به کاربر یه میونبر معرفی کرد.یه راه دیگه که توسعه‌اش کمی هزینه‌ٔ بیشتری داره، این که اون متن‌ها رو در محلی که کامپوننت اصلی می‌خواد رندر بشه نمایش بدین تا توسط جستجوی خود مرورگر پیدا بشه در محل خودش و بعد از اسکرول به صورت کامل رندر بشه. Saeed Alipoor Saeed Alipoor Wed, 10 Jun 2020 19:53:17 +0430 https://virgool.io/@saeedalipoor/lovely-sms-ue3kxwjgxuuy Photo by chuttersnap on Unsplashسرعت!همون چیزی هست که این روزها خیلی براش هزینه می‌شه و خب گزینهٔ مهمیه در انتخاب‌ها. و کلی کسب و کار هم از همین نیاز شکل گرفتن و رشد کردن. اما این پیشرفت و امکاناتی که برامون داره، یه سایه هم داره و اون سایه همونجاییه که عده‌ای ازش سوءِاستفاده می‌کنند و معمولاً بهشون می‌گیم کلاهبردار.تو این سال‌ها یکی از سرویس‌های خوبی که برای سرعت بخشیدن به «فروختن چیزایی که نمیخوایم و پیدا کردن و خریدن چیزایی که می‌خوایم و یه عده دیگه نمیخوان و کلاً خرید و فروش بدون واسطه‌ » شناخته‌شد دیوار بود.خب سرویس‌هایی مثل دیوار فقط نقش ارتباط‌دهندهٔ خریدار و فروشنده رو دارن و خودشون رو در پرداخت تحویل کالا یا سرویس دخیل نمی‌کنن. خب خوبه چون دیگه درگیر کارمزد و تصفیه حساب و این موارد نمی‌شی و پولت رو مستقیم می‌گیری، اما عده‌ای هستند که از همین موضوع برای کلاهبرداری استفاده می‌کنن و خوبه که خودمون و اطرافیانمون نسبت بهش آگاه باشیم.توی معاملاتی که از این طریق انجام می‌شه شما یا خریدار هستید یا فروشنده.اگر خریدار هستید:ممکنه از شما خواسته بشه که پول رو پرداخت کنید تا کالا رو با پیک ارسال می‌کنیم براتون. درسته که شماره کارت رو دارید و قابل پیگیری هست اما قبل از واریز تا جای ممکن از ارائه‌دهنده مطمئن شوید. چون پول رفته به این راحتی‌ها به حساب بر نمی‌گرده. یه ایده اینه که یه پیک باشه که پول رو ببره و کالارو بیاره، که باز هم تو حالاتی که نیاز به تست هست یه کم چالش وجود خواهد داشت.ممکنه فروشنده به شما کارتخوان ارائه بده، که حتماً رمز رو خودتون وارد کنید، و سعی کنید همهٔ ارقام رو لمس کنید موقع وارد کردن رمز.اگر فروشنده هستید:به احتمال زیاد خریدار به شما می‌گه: «می‌زنم به کارتت». خیلی عالیه فقط حتماً از واریز شدن پول به حسابتون مطمئن بشید. و فقط با اومدن یه پیامک که توش مبلغ و اسم شما هست کالا رو تحویل ندید. مهمترین ویژگی شبکه شتاب اینه که وقتی پولی درست انتقال داده بشه بلافاصله در حساب مقصد مشخص می‌شه. پس وقتی اعلام می‌شه که واریز کردم به حسابت، همون موقع موجودی حساب رو بررسی کنید. یا مثل حامد جزییات پیامکی که نشونتون می‌ده رو بررسی کنید. https://twitter.com/theham3d/status/1133444583160000512 یادمه یه ماجرایی بود که یکی شماره موبایل قربانی رو گذاشته بود رو حساب خودش و بعد مبلغ رو به حساب خودش ریخته بود، قربانی هم فقط به پیامک واریز که اتفاقا از شمارهٔ درست هم اومده بود اعتماد کرد و دیگه جزییاتش رو چک نکرد. البته الان بانک‌ها معمولاً وقتی شماره رو موقع افتتاح حساب می‌دی یه پیامک تأیید می‌فرستن تا مطمئن بشن شماره خودته.یا مثل ماجرای دوستمون گول پیامک واریز رو از اپلیکیشن تقلبی انتقال پول نخورید: https://twitter.com/saeednitrate/status/1054621656952528899 اگر حضوری قرار می‌ذارید، جایی باشه که شما تعیین می‌کنید، دوربین هست، تنها نیستید و امکان فرار سخته. مثلاً طلافروشی بابای دوستتون ، یا یه شعبه از بانک، یا مغازهٔ محلتون.امیدوارم هیچ‌وقت لازم نشه ولی سعی کنید تو قرارهای حضوری جزییات رو به خاطر بسپارید، شماره پلاک ماشین،مدل، رنگ، ظاهر خود شخص.ممکنه حس بدی به آدم بده که همیشه باید حواسش به همه چی باشه، بله این حس به منم دست می‌ده ولی ظاهراً چاره‌ای نیست، و ترجیح می‌دم محترمانه همه چیز رو چک کنم، تا مجبور نشم در ادامه وقتم رو در خدمت پلیس و آگاهی بگذرونم برای ثبت و پیگیری شکایت.معمولاً اونایی که ریگی به کفششون هست در این موارد کمی چاشنی عجله داشتن و دیرم شده و این‌ها دارن، شما کاملاً با صبر و حوصله برخورد کنید و تا از همه چیز مطمئن نشدید کالا رو تحویل کسی ندید.و نکتهٔ آخر اینکه این ‌آگهی و ارتباط ایجاد شده نه فقط از طریق دیوار، بلکه از طریق نیازمندی‌های همشهری یا هر واسط دیگه‌ای باشه و به نظرم درست نیست انگشت اتهام به سمت واسطه‌ها گرفت، اما شاید بد نباشه که یه سرویس تأیید هویت امن وجود داشته باشه تا کمی با اطمینان بیشتری داد و ستد کنیم ولی خب الان که نیست باید خودمون بیشتر مراقب باشیم.اگه شما تجربیات یا نکاتی در ذهنتون هست در قسمت نظرات ارسال کنید تا بقیه هم بخونن.ممنون از وقتی که برای مطالعه گذاشتید، امیدوارم داد و ستدهای امن و پرپولی داشته باشید :) Saeed Alipoor Saeed Alipoor Wed, 29 May 2019 15:47:48 +0430 https://virgool.io/@saeedalipoor/xd-october-2018-updates-amccdlb4rdhn چند روزی از کنفرانس Adobe MAX و معرفی محصولات جدید ادوبی و امکانات جدید برای محصولات موجود می‌گذره. در این مطلب یک نگاه سریع به چند تا از امکاناتی که به Xd اضافه شده می‌کنیم.اگه زیاد با Xd آشنایی ندارین خوندن این مطلب مفصل بهنام در مورد امکاناتش رو توصیه می‌کنم، البته برای تقریباً یک سال پیش هست ولی همچنان می‌تونه مفید باشه.چند وقت پیش بود که Adobe صفحه‌ای رو برای معرفی APIهای Xd به توسعه‌دهنده‌ها معرفی کرد، که خبر از امکان نصب پلاگین در نسخه‌های بعدی داشت. از این به بعد می‌شه براش افزونه نوشت و افزونه‌های موجود رو نصب کرد. صفحهٔ دانلود و نصب افزونه‌ها در Xdبرای نمونه می‌تونید افزونهٔ Google sheets رو نصب کنید و از یه فایل روی گوگل درایو یا یه فایل csv برای پر کردن محتوای طرحتون استفاده کنید. یا افزونه‌های دیگه که برای integration با سایر سرویس‌هایی که ممکنه ازشون استفاده کنید موجود هستند.مورد مهم بعدی در این آپدیت تغییرات قسمت prototype بوده و اولین چیزی که نظرم رو جلب کرد قابلیت Auto-Animate بود که به شما این امکان رو می‌ده که بدون تنظیمات پیچیده المان‌های بین دو آرت‌بورد رو انیمیت کنید. مثلاً تنظیم کنید که با کلیک روی یک دکمه سایز اون دکمه تغییر کنه و فلان کادر هم جاش عوض بشه. بذارید با رسم شکل ببینیم.چند نمونه از auto animate در Xdالبته هنوز کاستی‌هایی داره ولی به خوبی از این وظیفه بر میاد و بعضی از اون کاستی‌ها رو هم با کمی خلاقیت می‌تونید برطرف کنید.چند تا از محدودیت‌هایی که بهشون رسیدم موقع استفاده و داخل تصویر هم می‌بینید اینا هستن:این انیمیشن روی رنگ‌ها اعمال نمی‌شه، یعنی شما اگر نیاز به انیمیت کردن رنگ پس زمینه یا حاشیه (Border) دارین، باید به یه روش دیگه بهش برسید. (مثلاً استفاده از Opacity)این محدودیت برای Background/Object Blur هم برقرار هست و نمی‌شه کاریش کرد.در مورد حاشیه‌ها فعلاً فقط ضخامتشون انیمیت می‌شه، و اگه بخواین از انیمیت کردن خط‌چین یا رنگ استفاده کنید، فعلاً ناامیدتون می‌کنه.می‌شه گفت تا حد خوبی از انیمیت کردن بین Path ها بر اومده و تبدیل‌های خوبی می‌شه ساخت اما،‌ تو این قسمت هم باز بعضی وقتا گیر می‌افتید. مثلا اون کادر مستطیل که در تصویر تبدیل می‌شه به دو تا مثلث، حتماً باید از حالت rectangle در بیاد و به shape تبدیل بشه. (کافیه یکی از نقطه‌هاش رو یک مقدار جابجا کنید و برگردونید سر جاش)سایه‌ها هم انیمیت نمی‌شن :(اما خبرهای خوبسایز نوشته‌ها انیمیت می‌شن حتی اگه فارسی باشن :)چرخش‌(Rotate)، شفافیت (Opacity) و گردی (Radius) به خوبی انیمیت می‌شن.تغییر Path انیمیت می‌شه.وقتی ماسک تعیین می‌کنید برای لایه‌ای، هم خود ماسک و هم اون لایه رو می‌تونید به صورت مجزا انیمیت کنید.به gestureهای قسمت prototype، کشیدن (Drag) هم اضافه شده و قسمت جالب اینکه اگه بین دو تا حالت که می‌خواید انیمیت کنید یه حالت میانی بذارید، می‌تونید با استفاده از timed transition انیمیشن پیچیده‌تر که وابسته به اون رویداد باشن هم بسازید. نمونه‌اش همون دایره‌های پایین تصویر.فایل نمونه رو هم ضمیمه کنم تا اگر دوست داشتید خودتون هم کمی تغییر بدین و داستان دستتون بیاد.دانلود فایل نمونهیه اتفاق جالب و دوست‌داشتنی دیگه این که می‌شه از انیمیشن‌ها خروجی گرفت برای After effects که اونجا با امکانات بیشتر و حرفه‌ای تر ویرایشش کرد.در کل راضی‌کننده بود در این بخش و من یه نمونه انیمیشن که با ترکیب اسکچ و Flinto ساخته‌بودم رو خیلی سریع تونستم توی Xd بسازمش، هر چند خروجی ویدیویی Flinto حرفه‌ای‌تر نشون می‌ده.اتفاق جالب دیگه این هست که Xd یک قدم خوب برای ساختن Design system و انجام طراحی به صورت Atomic برداشته که بهش Linked Symbols میگه. یعنی شما می‌تونید یک فایل متشکل از Symbol‌های عمومیتون داشته‌باشید و اون‌ها رو در هر فایلی کپی کنید و هر وقت اون فایل اصلی Symbol‌ها رو تغییر دادین، توی تمام فایل‌ها یه علامت آپدیت و پیش‌نمایش از اون Symbol آپدیت شده ببینید و به نسخه آخر آپدیت کنید. یا اینکه هر وقت خواستید دیگه اون رو مستقل کنید تا کاری به نسخهٔ اصلی نداشته باشه. اما به نظرم هنوز به خوبی Sketch این موضوع رو مدیریت نکرده. و کلاً override ها خیلی محدودن، مخصوصاً اگر از کاربرای Sketch هم باشید و عادت داشته باشید همه چیز رو Symbol داشته باشید.کپی کردن Symbol و استفاده در فایل‌های دیگردر جمع‌بندی باید بگم به نظر میاد Xd مسیر خوبی رو داره می‌ره و انتظار می‌ره که تو آپدیت‌های بعدی حتماً به قسمت symbol ها و تغییراتشون بیشتر توجه کنه تا از رقبا عقب نمونه. اکثر امکانات فعلیش رو می‌شه روی ابزارهای دیگر هم با کارکرد بهتر داشت.من بسته به نوع کارم بین ابزارهای موجود انتخاب می‌کنم، معمولاً انتخاب اولم روی مک همچنان Sketch هست البته نیم‌نگاهی هم به Studio دارم?، اما اگر همهٔ اعضای تیم مک نداشته‌باشند یا فقط روی لپ‌تاپ خودم و به صورت فردی بخوام کار رو انجام بدم،با توجه به پروژه بین Xd یا Figma انتخاب می‌کنم. Saeed Alipoor Saeed Alipoor Sat, 20 Oct 2018 16:23:13 +0330 https://virgool.io/pullrequest/%D8%AC%D8%AF%D8%A7%D9%84-%D8%A8%D8%A7-%D9%BE%D8%B3-%D8%B2%D9%85%DB%8C%D9%86%D9%87%DB%8C-%D8%B2%D8%B1%D8%AF-%DB%8C%D8%A7-%DA%86%D8%B7%D9%88%D8%B1-%D8%B1%D9%86%DA%AF-%D9%BE%D8%B3%D8%B2%D9%85%DB%8C%D9%86%D9%87%D9%94-%D8%B2%D8%B1%D8%AF-%DA%A9%D8%B1%D9%88%D9%85-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%88%D8%B1%D9%88%D8%AF%DB%8C%D9%87%D8%A7%DB%8C-autocomplete-%D8%B1%D8%A7-%D8%A7%D8%B2-%D8%A8%DB%8C%D9%86-%D8%A8%D8%A8%D8%B1%DB%8C%D9%85-ohxptvqstdxb مدت زیادی می‌گذره از زمانی‌که گوگل کروم این قابلیت رو اضافه کرد. منظورم هایلایت کردن ورودی‌هایی هست که کاربر از قابلیت autocomplete مرورگر استفاده می‌کنه.به احتمال زیاد تا حالا این حالت رو دیدین:هایلایت شدن ورودی‌های که با autocomplete پر میشهمن معمولاً حذف این جور چیزها رو پیشنهاد نمی‌کنم، چون کاربران اون مرورگر به اون ویژگی عادت می‌کنند و وقتی شما تغییرش می‌دین ممکنه دچار سردرگمی بشن در اون قسمت. عمداً هم از فرم ورود گوگل تصویر گذاشتم تا ببینید خود گوگل هم به این حالت پایبند هست. (البته شاید طراح مخالف بوده باشه :D).اما خب خیلی وقتا پیش میاد که طرح به هیچ وجه اون رنگ زرد رو پذیرا نیست. یه جستجوی ساده تو گوگل نشون می‌ده که خیلیا خواستن این رنگ زرد تو طرحشون وجود نداشته باشه.راه حلخوشبختانه کروم برای ورودی‌هایی که به صورت خودکار پر می‌شن شبه‌انتخابگر (pseudo-selector) -webkit-autofill رو در اختیارمون قرار داده که میشه ازش برای استایل دادن به اون ورودی‌ها استفاده کرد.و متأسفانه اون رنگ زرد رو به راحتیِ تغییر پس‌زمینه با استایل نمی‌ تونید تغییر بدید. :Dبه دو روش می‌شه از اون پس زمینه‌ٔ زرد خلاص شد:یه راه اینه که بهش یه سایه داخلی خیلی بزرگ بدین که روی اون پس‌زمینه بیفته:input:-webkit-autofill{ -webkit-box-shadow: inset 0 0 0 1000px #fff; }تو این حالت اگر بخواین پس‌زمینه ورودی شفاف باشه، دستتون بسته هست و از این راه نمی‌شه کاریش کرد.پس برای داشتن پس‌زمینهٔ شفاف می‌ریم سراغ راه دوم:input:-webkit-autofill{ transition: background-color 0s cubic-bezier(1, 0, 1, 0) 1000s; }تو این روش به خاطر اینکه اون ورودی بعد از پرشدن، پس‌زمینه رو می‌گیره، ما یه transition برای این تغییر پس‌زمینه نوشتیم و تأخیر شروع انیمیشن رو یه عدد بزرگ گذاشتیم، در نتیجه به احتمال بالا تا زمانی که کاربر با اون فرم کار داره اون پس زمینهٔ زرد دیده نخواهد شد.نکته‌ای که باید تو این روش بهش توجه داشته باشید اینه که اگر transition های دیگری هم برای اون ورودی تعریف کرده بودید، باید دوباره تعریف کنید مثلا:input.border-animate:-webkit-autofill{ transition: background-color 0s cubic-bezier(1, 0, 1, 0) 1000s, color 0.5s; }اگه روش‌های دیگه‌ای هم سراغ دارین، خوشحال می‌شم بگین تا یاد بگیریم :) Saeed Alipoor Saeed Alipoor Mon, 24 Apr 2017 14:11:14 +0430