برنامه نویسی

طرح‌های تم Material 3 را به کد فلاتر تبدیل کنید

Parabeac – اکنون با تم های Google Material Design 3 سازگار است

https://miro.medium.com/v2/resize:fit:1400/1*lsw0N-VFB_VKg2c8qeDgyA.png

با انتشار جدیدترین سیستم طراحی گوگل، Material Design 3، به روز رسانی در نحوه انتخاب رنگ ها در طرحواره های روشن و تاریک وجود دارد. Parabeac به تازگی پشتیبانی را در Parabeac Cloud و parabeac_core منتشر کرده است: اکنون می‌توانید هنگام تبدیل تم‌ها به کد فلاتر، بین Material Design 3 و Material Design 2 را انتخاب کنید.

به فایل به روز شده Figma Kickstart ما در اینجا نگاهی بیندازید.

تبدیل با Parabeac Cloud

https://miro.medium.com/v2/resize:fit:1400/1*Ib0XqgBE1FEEvsNDGaMp_g.png

برای تبدیل یک تم Material 3 با استفاده از Parabeac Cloud، فرآیند مانند قبل باقی می‌ماند: به سادگی یک Theme Project ایجاد کنید، شاخه GitHub خود را انتخاب کنید، پیوندهایی به فایل Figma ارائه دهید و تبدیل کنید. برای دستورالعمل های دقیق تر، اسناد ما را بررسی کنید.

چه جدید است: پالت رنگ

بر اساس تن های کلیدی، 13 سایه سایه از 0 تا 100 ایجاد می شود. در انتهای طیف 0 سیاه واقعی (#FFFFFF) و 100 سفید سفید واقعی (#00000) است. از میان این زنگ‌های کلیدی، رنگ‌های پالت مشتق انتخاب می‌شوند.

https://miro.medium.com/v2/resize:fit:810/1*pBxxnnVrRlt7mBc9hSBmSQ.png

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

دسترسی و کنتراست

یکی از اهداف اصلی پالت رنگ Google Material 3 بهبود دسترسی است. پالت رنگ جدید برای مطابقت با استاندارد WCAG 2.1 AA برای نسبت کنتراست طراحی شده است. این به این معنی است که متن و سایر عناصر مهم خواناتر هستند و به کاربرانی که دارای اختلالات بینایی هستند، پیمایش و استفاده از رابط را آسان تر می کند.

https://miro.medium.com/v2/resize:fit:1400/1*6406eaFKCcM1KhDqdkBRdw.png

در حالی که مقادیر پیش‌فرض وجود دارد، مانند Primary روی Primary40 و On Primary روی Primary100، کاربر می‌تواند به صورت دستی از پالت تن کلیدی که می‌خواهد از چه سایه‌ای استفاده کند – هر چند به خاطر داشته باشید که حداقل کنتراست خاصی وجود دارد که توسط مواد 3.

به روز رسانی تایپوگرافی

https://miro.medium.com/v2/resize:fit:1400/1*8X2KLjxx4gMh8uhd_zrMFA.png

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

نتیجه

چه در حال حاضر از Material Design 2 یا Material Design 3 استفاده می کنید، امیدواریم از Parabeac برای تبدیل طرح خود از Figma به Flutter Code استفاده کنید! برای کسب اطلاعات بیشتر به parabeac.com یا برای امتحان امروز به app.parabeac.com بروید.

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا