Figma → Project token mapping
نگاشت توکنهای خروجی get_variable_defs فیگما به متغیرهای واقعی این پروژه.
منبع حقیقت: assets/admin/styles.css (بلاک :root). هرگز hex هاردکد نکن — همیشه var(--token).
Colors — brand
| نقش فیگما (نمونه نامها) |
متغیر پروژه |
مقدار |
| Primary / Brand / Indigo 500 |
--primary |
#5559CE |
| Primary hover / 600 |
--primary-600 |
#494CB3 |
| Primary pressed / 700 |
--primary-700 |
#3E41A0 |
| Primary tint / subtle bg |
--primary-soft |
#ecedfb |
| Primary tint 2 |
--primary-soft2 |
#d9dbf6 |
| On-primary / text on brand |
--on-primary |
#ffffff |
| Accent / Orange (CTA ثانویه، آواتار) |
--accent |
#f0682a |
| Accent hover |
--accent-600 |
#db5a1f |
| Accent tint |
--accent-bg |
#fdeee4 |
Colors — surface / text / border
| نقش فیگما |
متغیر پروژه |
مقدار |
| Page background |
--bg |
#fafafa |
| Alt background |
--bg-2 |
#f2f2f5 |
| Card / surface |
--surface |
#ffffff |
| Surface raised 2 |
--surface-2 |
#f6f8fc |
| Surface raised 3 |
--surface-3 |
#eef2f8 |
| Border default |
--border |
#e4e9f1 |
| Border strong |
--border-2 |
#d6dde8 |
| Text primary |
--text |
#0f1b2e |
| Text secondary |
--text-2 |
#56657c |
| Text muted / placeholder |
--text-3 |
#8a98ad |
| Focus ring |
--ring |
rgba(85,89,206,.32) |
Colors — status
| نقش |
fg |
bg |
| Success |
--success #15a35a |
--success-bg #e6f6ed |
| Warning |
--warning #d98a09 |
--warning-bg #fcf2df |
| Danger / Error |
--danger #e0394a |
--danger-bg #fdebed |
| Info |
--info #2b86d8 |
--info-bg #e7f1fb |
| Violet |
--violet #7c5cf0 |
--violet-bg #efeafe |
Colors — dashboard stat cards
| رنگ |
bg |
fg |
| Amber |
--stat-amber-bg |
--stat-amber-fg #FFC051 |
| Violet |
--stat-violet-bg |
--stat-violet-fg #5559CE |
| Green |
--stat-green-bg |
--stat-green-fg #009D79 |
| Pink |
--stat-pink-bg |
--stat-pink-fg #F17732 |
Typography
| فیگما |
پروژه |
| Font family (fa + latin) |
--font-sans = "Vazirmatn", ui-sans-serif, system-ui, sans-serif |
| منبع فونت |
@fontsource/vazirmatn/{300,400,500,600,700,800}.css (در styles.css) |
اوزان موجود: 300 / 400 / 500 / 600 / 700 / 800. اندازه/line-height فیگما → کلاسهای Tailwind (text-sm, text-lg, …).
Radius
| فیگما |
پروژه |
مقدار |
| xs (chip داخلی) |
--r-xs |
7px |
| sm (badge, input کوچک) |
--r-sm |
8px |
| md (input, button, card عادی) |
--r |
14px |
| lg (card بزرگ) |
--r-lg |
18px |
| xl (modal) |
--r-xl |
24px |
| full (avatar, pill, toggle) |
--r-pill |
999px |
Shadow / elevation
| فیگما |
پروژه |
| Elevation 1 (card) |
--shadow-sm |
| Elevation 2 (dropdown/hover) |
--shadow |
| Elevation 3 (modal/popover) |
--shadow-lg |
Spacing & layout dimensions
| نقش |
پروژه |
مقدار |
| Grid gap |
--gap |
20px (compact: 14px) |
| Card padding |
--card-pad |
22px (compact: 16px) |
| Table row height |
--row-h |
56px (compact: 46px) |
| Sidebar width |
--sidebar-w |
243px |
| Sidebar collapsed |
--collapsed-w |
90px |
| Topbar height |
--topbar-h |
64px |
| Motion easing |
--ease |
cubic-bezier(.22,.61,.36,1) |
اسپیسینگ آزاد (margin/padding داخل اجزا) → مقیاس Tailwind (p-4, gap-2, …)؛ برای ابعاد ساختاری بالا از متغیرها استفاده کن.
Theming
- Dark mode: بازتعریف متغیرها زیر
[data-theme="dark"] در styles.css. رنگ خام دارک ننویس؛ همان var(--token) خودکار سوییچ میشود.
- Density:
[data-density="compact"] مقادیر --gap / --card-pad / --row-h را کم میکند.
- RTL: کل پنل
dir="rtl"؛ در نگاشت left/right فیگما را به start/end منطقی تبدیل کن.
Component mapping (فیگما → کامپوننت موجود پروژه)
قبل از ساخت، از assets/admin/components/ui/ reuse کن:
| المان فیگما |
کامپوننت پروژه (assets/admin/components/ui/) |
| Table / list با ستون |
DataTable.tsx (sort، search، skeleton، empty، bulk) |
| Modal / dialog |
Modal.tsx |
| Delete/confirm dialog |
ConfirmDialog.tsx |
| Page title + breadcrumb + action |
PageHeader.tsx |
| Stat / KPI card |
StatCard.tsx |
| Status pill / badge |
StatusBadge.tsx |
| Pagination bar |
Pagination.tsx |
| Searchable / async select |
SearchableSelect.tsx |
| Appointment status control |
AppointmentStatusDropdown.tsx |
| Mobile number input |
MobileInput.tsx |
| Price / amount input |
PriceInput.tsx |
| Jalali date input/picker/calendar |
PersianDateInput.tsx / PersianDatePicker.tsx / PersianCalendar.tsx |
| Overlay/portal مبنا |
Portal.tsx |
| Feature-flag gate |
FeatureGate.tsx |
| Captcha |
Altcha.tsx |
کامپوننتهای ترکیبی فیچرمحور (نه generic) → assets/admin/components/*.tsx.
آیکونها → @heroicons/react/24/outline (اول موجودها؛ فقط اگر نبود از download_assets فیگما).
قواعد نگاشت
- هر توکن فیگما را به نزدیکترین متغیر بالا map کن. اگر معادل نبود → توقف و بپرس، توکن جدید خودسر به
styles.css اضافه نکن.
- رنگ/فاصله/شعاع خام (hex/px) در کامپوننت ممنوع؛ فقط
var(--token) یا کلاس Tailwind.
- اختلاف جزئی رنگ فیگما با پالت پروژه → پالت پروژه برنده است (تطبیق با design system، نه عین فیگما).
- منبع مقادیر همیشه
assets/admin/styles.css است؛ این فایل خلاصهی نگاشت است، نه منبع مستقل — هنگام تغییر styles.css این را هم بهروز کن.
