شروع
پلاگین فیگما
کل کاشی را با یک کلیک در فایل فیگمای خودتان بسازید و با هر نسخهٔ جدید به‌روزش کنید.
کل دیزاین‌سیستم کاشی، با یک کلیک در فیگما
پلاگین Kashi UI Kit رنگ‌ها، فونت، فاصله‌ها و همهٔ کامپوننت‌ها را مستقیم از روی کد کاشی می‌سازد؛ آنچه طراح در فیگما می‌بیند همان است که برنامه‌نویس در کد می‌سازد.
- متغیر
- ۲۷۲
- کامپوننت
- ۷۳
- حالت (variant)
- ۷۳۳
- آیکون
- ۲٬۲۴۹
چه چیزهایی می‌گیرید
- همه‌چیز Variable
رنگ، فاصله، گردی، فونت و حتی هر لایهٔ سایه متغیر است؛ بدون حتی یک Style. یک متغیر را عوض کنید، کل کیت عوض می‌شود.
- هر کامپوننت، یک صفحه
بیش از ۷۰ کامپوننت، هر کدام با همهٔ حالت‌هایش در جدولی مرتب با برچسب ردیف و ستون.
- پیکسل‌به‌پیکسل با کد
بیش از ۱۷۰۰ بخش با CSS واقعی کاشی اندازه‌گیری شده‌اند؛ صفر اختلاف، و تست خودکار نمی‌گذارد فاصله بگیرند.
- فارسی از روز اول
راست‌به‌چپ کامل، کارت بانکی با لوگوی ۵۰ بانک، شبا، کد ملی، پلاک، مبلغ و تقویم شمسی با تعطیلات.
- ۲٬۲۴۹ آیکون
در ۶۸ دسته و پوشه‌بندی‌شده در پنل Assets؛ همان آیکون‌هایی که در کد هست، با همان شکل.
- به‌روزرسانی درجا
نسخهٔ جدید را در همان فایل اجرا کنید؛ کامپوننت‌ها درجا به‌روز می‌شوند و instance های طرح‌هایتان وصل می‌مانند.
نصب و اجرا
نصب فقط یک بار لازم است. پلاگین در اپ دسکتاپ فیگما اجرا می‌شود.
- ۱دانلود
فایل zip پلاگین را دانلود و از حالت فشرده خارج کنید.
kashi-figma-plugin.zip - ۲وارد کردن در فیگما
در فیگما از منوی بالا بروید به:
Plugins›Development›Import plugin from manifest…
و فایل
manifest.jsonرا از پوشهٔ دانلودشده انتخاب کنید. - ۳ساخت کیت
از Plugins › Development › Kashi UI Kit پلاگین را باز کنید، تم و فونت را انتخاب کنید و «ساخت کیت» را بزنید.
برای استفاده در فایل‌های دیگر تیم، فایل را از پنل Assets فیگما Publish کنید تا کتابخانهٔ کاشی همه‌جا در دسترس باشد.
به‌روزرسانی با نسخه‌های جدید
برای هر نسخهٔ جدید فایل تازه نسازید: پلاگین جدید را دانلود کنید و در همان فایل اجرا کنید. پنل پلاگین نسخهٔ نصب‌شده را نشان می‌دهد و در پایان می‌گوید چند مورد اضافه و چند مورد به‌روز شد.
- صفحهٔ سبد خریدپرداخت امن
- صفحهٔ کیف پولپرداخت امن
- صفحهٔ اشتراکپرداخت امن
- کامپوننت‌های تازه صفحهٔ خودشان را می‌گیرند و سر جایشان در فهرست صفحه‌ها می‌نشینند.
- کامپوننت‌هایی که در کد بهتر شده‌اند درجا عوض می‌شوند؛ instance ها وصل می‌مانند و تغییر را خودکار می‌گیرند.
- متن‌هایی که از پنل Properties عوض کرده‌اید (مثل متن دکمه) حفظ می‌شوند.
- صفحه‌های خودتان دست نمی‌خورند و صفحهٔ کیتی که پاک شده باشد دوباره ساخته می‌شود.
فقط رنگ یا فونت را می‌خواهید به‌روز کنید؟ تیک «صفحه‌های کامپوننت» را بردارید تا فقط متغیرها در چند ثانیه به‌روز شوند.
سفارشی‌سازی
یک فریم یا کل صفحه را انتخاب کنید و در بخش Appearance، مجموعهٔ Kashi · Theme را روی Dark یا Light بگذارید.
در Kashi · Primitives متغیرهای color/brand/* را به رنگ دیگری از پالت وصل کنید؛ دکمه‌ها، فیلدها و فوکوس‌ها با هم عوض می‌شوند.
نام فونت نصب‌شده را در پنل پلاگین بنویسید یا font/family/sans را عوض کنید. اگر پیدا نشود، وزیرمتن جایش می‌نشیند.
گردی گوشه‌ها از Sharp تا Round، تراکم Compact و Comfortable و اندازهٔ متن، هر کدام یک mode در مجموعهٔ خودش؛ همان پیچ‌هایی که در CSS کاشی هست.
ساختار فایل
صفحه‌ها در فیگما گروه‌بندی شده‌اند و بین هر گروه یک جداکننده است. آیکون‌ها در پنل Assets هم بر اساس ۶۸ دسته پوشه‌بندی شده‌اند.
- 📕Kashi UI Kit
- 🎨Colors · Typography · Spacing · Radius · Shadows
- 🧩Icons · Bank logos
- 🔘Button · Icon button · Button group · …
- 📝Input · Select · Checkbox · Date picker · …
- 🇮🇷Card number · IBAN · Plate · Receipt · …
- 💬Alert · Toast · Dialog · Tooltip · …
- 📊Badge · Avatar · Card · Table · …
- 🧭Tabs · Breadcrumb · Pagination · …
از فیگما تا کد
نام کامپوننت‌ها و ویژگی‌ها همان prop های React است و هر کامپوننت در فیگما لینک Documentation به صفحهٔ خودش در همین سایت دارد.
| فیگما | کد |
|---|---|
| Button → Variant=Primary, Size=md | <Button variant="primary" size="md"> |
| Badge → Tone=Success, Variant=Soft | <Badge tone="success" variant="soft"> |
| Input → Size=lg, State=Error | <Input size="lg" error="…"> |
| Icon / بانک و پرداخت / credit-card | <IconCreditCard /> |
| bg/brand (Variable) | var(--k-bg-brand) |
| space/4 (Variable) | var(--k-space-4) |
پرسش‌های رایج
در نسخهٔ مرورگر فیگما کار می‌کند؟
نه. فیگما پلاگین‌هایی را که روی کامپیوتر خودتان هستند فقط در اپ دسکتاپ اجرا می‌کند. فایلی که ساخته می‌شود را بعداً در مرورگر هم باز کنید، مشکلی ندارد.
با پلن رایگان فیگما چه فرقی دارد؟
پلن رایگان برای هر مجموعهٔ متغیر فقط یک mode اجازه می‌دهد. پلاگین در این حالت فقط تمی را که انتخاب کرده‌اید (تیره یا روشن) می‌سازد و بقیهٔ mode ها را رد می‌کند؛ همه‌چیز دیگر کامل است.
فونت پولی خودم را می‌توانم بگذارم؟
بله. نام فونتی را که روی سیستم نصب است در پنل پلاگین بنویسید، یا متغیر font/family/sans را عوض کنید. وزن‌هایی که فونت ندارد به نزدیک‌ترین وزن می‌افتند.
اگر یک صفحهٔ کیت را پاک کنم یا صفحهٔ خودم را اضافه کنم؟
صفحه‌های خودتان دست نمی‌خورند و بعد از صفحه‌های کیت می‌مانند. صفحهٔ کیتی که پاک شده باشد، در اجرای بعدی دوباره ساخته می‌شود.
برای همهٔ تیم چطور در دسترس بگذارم؟
فایل را از پنل Assets فیگما Publish کنید تا کتابخانهٔ کاشی در همهٔ فایل‌های تیم باشد. با هر نسخهٔ جدید، پلاگین را در همان فایل اجرا و دوباره Publish کنید.
آمادهٔ شروع هستید؟
پلاگین رایگان است و کدش در GitHub باز است. پیشنهاد و گزارش مشکل را هم همان‌جا بنویسید.