Figma → Vue / Vuetify 3

📐 1. Sizing Modes۱. Sizing Modes — اندازه‌گذاری

Figma offers three dimension modes for width and height. Each maps to a different CSS pattern.

فیگما سه حالت برای عرض و ارتفاع دارد. هر کدام به یک الگوی CSS متفاوت تبدیل می‌شوند.

⬡ 2. Auto Layout۲. Auto Layout — چیدمان خودکار

Auto Layout in Figma is Flexbox in CSS. Direction, gap, padding, and alignment map 1-to-1.

Auto Layout در فیگما معادل Flexbox در CSS است. direction، gap، padding و alignment به صورت مستقیم ترجمه می‌شوند.

<!-- Figma: Auto Layout parent + child with "Absolute position" --><!-- فیگما: parent با Auto Layout + فرزند Absolute -->
<div class="position-relative d-flex flex-column ga-4">
  <div>item 1</div>
  <div>item 2</div>
  <!-- absolute child --><!-- فرزند absolute -->
  <div class="position-absolute" style="top:8px;right:8px">badge</div>
</div>

⊞ 3. Grid Layout۳. Grid Layout — شبکه ستونی

<!-- Mobile: 12col | Tablet: 6col | Desktop: 4col --><!-- موبایل: کامل | تبلت: نصف | دسکتاپ: یک‌سوم -->
<v-container>
  <v-row>
    <v-col cols="12" sm="6" md="4">content</v-col>
  </v-row>
</v-container>

<v-row no-gutters>  <!-- no gutter --><!-- بدون gutter -->
<v-row class="ga-4">    <!-- custom gap --><!-- gap سفارشی -->

□ 4. Stroke → Border۴. Stroke → Border

Figma strokes have three positions, each with a different CSS approach.

Stroke در فیگما سه position دارد که هر کدام رویکرد CSS متفاوتی دارند.

◌ 5. Border Radius۵. Border Radius — گوشه‌های گرد

Vuetify 3 provides a predefined rounded scale. All Figma border-radius values should map to one of these.

Vuetify 3 یک مقیاس از پیش تعریف‌شده دارد. تمام مقادیر border-radius فیگما باید به یکی از این‌ها تبدیل شوند.

🎨 6. Fill → Background / Color۶. Fill → Background / Color

✦ 7. Effects → Shadow۷. Effects → سایه و افکت

/* Figma: X=0, Y=4, Blur=8, Spread=0, #000 at 20% *//* فیگما: X=0, Y=4, Blur=8, Spread=0, #000 با ۲۰% شفافیت */
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.20);

/* Inner Shadow *//* سایه داخلی */
box-shadow: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.15);

/* Multiple shadows *//* چند سایه */
box-shadow:
  0px 2px 4px rgba(0,0,0,0.10),
  0px 8px 16px rgba(0,0,0,0.08);

◎ 8. Opacity۸. Opacity — شفافیت

⊕ 9. Blend Modes۹. Blend Modes

Aa 10. Typography۱۰. Typography — تایپوگرافی

↔ 11. Spacing System۱۱. Spacing System — سیستم فاصله

Vuetify uses 4px as the base unit. All Figma spacing values must be multiples of 4.

Vuetify از 4px به عنوان واحد پایه استفاده می‌کند. تمام فاصله‌های فیگما باید مضرب ۴ باشند.

/* margin *//* margin */
ma-{n}  mx-{n}  my-{n}  mt-{n}  mr-{n}  mb-{n}  ml-{n}
/* padding *//* padding */
pa-{n}  px-{n}  py-{n}  pt-{n}  pr-{n}  pb-{n}  pl-{n}
/* gap *//* gap */
ga-{n}  ga-x-{n}  ga-y-{n}
/* center a block *//* وسط‌چین block */
mx-auto

⊞ 12. Constraints → Positioning۱۲. Constraints → Positioning

Constraints apply only inside non-Auto-Layout frames. Inside Auto Layout, use flexbox alignment instead.

Constraints فقط در Frame‌های non-Auto-Layout معنی دارند. درون Auto Layout از flexbox alignment استفاده کنید.

◈ 13. Component Structure۱۳. ساختار کامپوننت

◎ 14. Component States۱۴. Component States

📱 15. Responsive / Breakpoints۱۵. Responsive / Breakpoints

<!-- Mobile only --><!-- فقط موبایل -->
<div class="d-flex d-sm-none">

<!-- Hidden on mobile --><!-- پنهان در موبایل -->
<div class="d-none d-sm-flex">

<!-- Responsive columns --><!-- ستون responsive -->
<v-col cols="12" sm="6" md="4">

✂ 16. Clip Content & Z-index۱۶. Clip و Z-index

🖼 17. Images & Icons۱۷. تصویر و آیکون

<!-- Cover (Figma: Fill) --><!-- کاور (فیگما: Fill) -->
<v-img :src="url" cover :aspect-ratio="16/9" />

<!-- Contain (Figma: Fit) --><!-- Contain (فیگما: Fit) -->
<v-img :src="url" contain />

<!-- With placeholder --><!-- با placeholder -->
<v-img :src="url" cover>
  <template #placeholder>
    <v-skeleton-loader type="image" />
  </template>
</v-img>

<!-- Icon — always MDI --><!-- آیکون — همیشه MDI -->
<v-icon size="24" color="primary">mdi-check-circle</v-icon>

◉ 18. Color System۱۸. سیستم رنگ

/* Theme color with opacity *//* رنگ theme با opacity */
background: rgb(var(--v-theme-primary), 0.1);
color: rgb(var(--v-theme-on-surface));

⚑ 19. Special Cases & Common Pitfalls۱۹. موارد خاص و دام‌های رایج

<div class="d-flex flex-row">
  <div style="width:48px">icon</div>
  <div class="flex-grow-1">  <!-- Fill --><!-- Fill -->
    content
  </div>
</div>

  Figma:
  outer (Vertical, gap=16, padding=24)
    └─ inner (Horizontal, gap=8, align=center)
         ├─ icon (Fixed 24×24)
         └─ label (Fill)

<div class="d-flex flex-column ga-4 pa-6">
  <div class="d-flex flex-row ga-2 align-center">
    <v-icon size="24">mdi-check</v-icon>
    <span class="flex-grow-1">label</span>
  </div>
</div>

css_angle = (figma_angle + 90) % 360

Figma 0°   → CSS 180deg  (top → bottom)(بالا → پایین)
Figma 90°  → CSS 90deg   (left → right)(چپ → راست)
Figma 180° → CSS 0deg    (bottom → top)(پایین → بالا)
Figma 270° → CSS 270deg  (right → left)(راست → چپ)

<v-img :src="url" :aspect-ratio="16/9" cover />

<!-- Or CSS --><!-- یا CSS -->
<div style="aspect-ratio:16/9; overflow:hidden">
  <img style="width:100%;height:100%;object-fit:cover">
</div>

✓ Handoff Checklistچک‌لیست Handoff

Before sending a design to the Tech team, verify all items below.

قبل از ارسال طراحی به تیم Tech، همه موارد زیر را بررسی کنید.

• ✓All spacing values are multiples of 4pxتمام فاصله‌ها مضرب ۴px هستند
• ✓Font sizes match the Vuetify type scaleاندازه‌های فونت با Vuetify type scale تطابق دارند
• ✓Colors reference design tokens — not raw hex valuesرنگ‌ها به design token اشاره می‌کنند، نه hex مستقیم
• ✓Auto Layout direction (H/V) and gap are clearly annotateddirection و gap در Auto Layout مشخص شده‌اند
• ✓Padding is explicitly set on every framePadding روی هر فریم به صراحت تنظیم شده
• ✓Responsive frames exist (mobile / tablet / desktop)فریم‌های responsive وجود دارند (موبایل / تبلت / دسکتاپ)
• ✓All states are designed: hover / disabled / error / loadingهمه states طراحی شده‌اند: hover / disabled / error / loading
• ✓Stroke position is specified: inside / outside / centerموقعیت Stroke مشخص است: inside / outside / center
• ✓Image fill mode is specified: cover / contain / cropحالت image fill مشخص است: cover / contain / crop
• ✓Component variants map to Vue propsVariant‌های کامپوننت به Vue props تبدیل شده‌اند
• ✓Icons are from MDI or their names are specifiedآیکون‌ها از MDI هستند یا نامشان مشخص شده
• ✓Border radius values match Vuetify scaleمقادیر border-radius با مقیاس Vuetify تطابق دارند
• ✓Elevation matches Vuetify scale (0/2/4/8/12/16/24)Elevation با مقیاس Vuetify تطابق دارد
• ✓Clip content is set on frames with overflowClip content روی فریم‌های overflow تنظیم شده