تبدیل طرح Figma به رابط کاربری چطور انجام می‌شود؟

تبدیل طرح Figma به رابط کاربری واقعی یکی از حیاتی‌ترین مراحل در فرآیند توسعه‌ی وب مدرن است که مستقیماً بر کیفیت خروجی، سرعت پیاده‌سازی و هزینه‌ی نگهداری اثر می‌گذارد. Figma (فیگما) به‌عنوان ابزار طراحی، خروجی‌هایی ارائه می‌دهد که می‌توانند به‌صورت مستقیم به کد تبدیل شوند: Design Tokens، Component Properties، Auto Layout و Dev Mode. اما تبدیل مؤثر، نیازمند فرآیندی مهندسی‌شده است که از تحلیل Design System شروع و به استقرار Componentها می‌رسد. در این راهنما، فرآیند تبدیل طرح Figma به رابط کاربری، از نگاشت Design Tokens تا پیاده‌سازی Componentها و استقرار، به‌صورت مهندسی بررسی می‌شود.

در یکی از پروژه‌های سازمانی، تیمی بدون نگاشت Design Tokens شروع به پیاده‌سازی کرد. نتیجه این بود که رنگ‌ها در ۵۰ نقطه‌ی مختلف کد تکرار شدند و تغییر Theme به یک پروژه‌ی چندروزه تبدیل شد. تجربه نشان داد که نگاشت منظم Tokens، سرمایه‌گذاری است، نه هزینه.

گردش کار تبدیل Figma به کد

گردش کار تبدیل شامل چند مرحله‌ی مهندسی است:

1. تحلیل Design System: شناسایی Tokens، Componentها و Layoutها.
2. نگاشت Design Tokens: تبدیل Variables به CSS Variables یا Theme Config.
3. ساختاردهی Componentها: تبدیل Componentهای Figma به کامپوننت‌های کد.
4. پیاده‌سازی Layout: تبدیل Auto Layout به Flexbox یا Grid.
5. مدیریت Assets: Export SVG، WebP، Icons.
6. پیاده‌سازی Responsive: تبدیل Breakpointها.
7. دسترس‌پذیری: افزودن ARIA، Focus State، Keyboard Navigation.
8. تست: Visual Regression، Accessibility، Cross-Browser.
9. استقرار: انتشار در محیط Production.

نگاشت Design Tokens به CSS Variables

Design Tokens در Figma با Variables تعریف می‌شوند. این Tokens باید به CSS Variables یا Theme Config نگاشت شوند.

Figma Variables

Color/Primary/500: #3B82F6
Color/Neutral/900: #111827
Spacing/md: 16
Radius/md: 8

CSS Variables

:root {
  --color-primary-500: #3B82F6;
  --color-neutral-900: #111827;
  --spacing-md: 16px;
  --radius-md: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-neutral-900: #F9FAFB;
    --color-neutral-100: #111827;
  }
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          500: "var(--color-primary-500)",
        },
        neutral: {
          900: "var(--color-neutral-900)",
        },
      },
      spacing: {
        md: "var(--spacing-md)",
      },
      borderRadius: {
        md: "var(--radius-md)",
      },
    },
  },
};

استفاده از CSS Variables به‌جای مقادیر ثابت، تغییر Theme را به یک تغییر متمرکز تبدیل می‌کند.

نگاشت Componentهای Figma

هر Component در Figma باید به یک Component در کد نگاشت شود. جدول نگاشت:

مثال: تبدیل Button از Figma به React

// Button.tsx
import { ReactNode, ButtonHTMLAttributes } from "react";

type Variant = "primary" | "secondary" | "ghost" | "danger";
type Size = "sm" | "md" | "lg";

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: Variant;
  size?: Size;
  iconLeft?: ReactNode;
  iconRight?: ReactNode;
  loading?: boolean;
}

export function Button({
  variant = "primary",
  size = "md",
  iconLeft,
  iconRight,
  loading,
  children,
  ...rest
}: ButtonProps) {
  const classes = [
    "btn",
    `btn-${variant}`,
    `btn-${size}`,
    loading ? "btn-loading" : "",
  ].join(" ");

  return (
    <button className={classes} disabled={loading} {...rest}>
      {iconLeft}
      {children}
      {iconRight}
    </button>
  );
}

مثال: تبدیل Card از Figma به Vue

<!-- ProductCard.vue -->
<template>
  <article class="product-card">
    <img :src="product.image" :alt="product.name" loading="lazy" />
    <h3>{{ product.name }}</h3>
    <p>{{ product.price }}</p>
    <Button variant="primary" @click="$emit('add-to-cart', product)">
      افزودن به سبد
    </Button>
  </article>
</template>

<script setup>
defineProps(["product"]);
defineEmits(["add-to-cart"]);
</script>

تبدیل Auto Layout به Flexbox و Grid

Auto Layout در Figma مشابه Flexbox است و تبدیل آن به کد نسبتاً مستقیم است:

مثال: تبدیل Header

// Figma Auto Layout: Horizontal, Space Between, Padding 16, Gap 24
<header class="header">
  <Logo />
  <nav>...</nav>
  <Button>ورود</Button>
</header>

<style>
.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  gap: 24px;
}
</style>

مدیریت Assets و Icons

Export Assets از Figma:

• SVG: Icons، Logos (Vector).
• WebP: Photos، Hero Images.
• PNG: Complex Graphics.
• AVIF: Modern Format (به‌عنوان جایگزین WebP).

بهینه‌سازی SVG

# با SVGO
svgo icon.svg --config svgo.config.js

# svgo.config.js
module.exports = {
  plugins: [
    "preset-default",
    "removeViewBox",
    "removeDimensions",
  ],
};

برای مطالعه‌ی بیشتر، پست‌های بهترین فرمت تصویر برای وب کدام است و کدام برای سرعت سایت بهتر است، WebP یا JPEG مفید هستند.

پیاده‌ implementation Responsive

Breakpointهای Figma باید به Media Queries نگاشت شوند:

// Figma Breakpoints
Mobile: 375px
Tablet: 768px
Desktop: 1024px
Wide: 1440px

// CSS Media Queries
@media (min-width: 375px) { /* Mobile */ }
@media (min-width: 768px) { /* Tablet */ }
@media (min-width: 1024px) { /* Desktop */ }
@media (min-width: 1440px) { /* Wide */ }

رویکرد Mobile-First توصیه می‌شود:

.card {
  /* Mobile styles */
  padding: 16px;
}

@media (min-width: 768px) {
  .card {
    padding: 24px;
  }
}

@media (min-width: 1024px) {
  .card {
    padding: 32px;
  }
}

دسترس‌پذیری در پیاده‌سازی

دسترس‌پذیری باید از Figma تا کد حفظ شود:

• ARIA Labels: برای عناصر تعاملی.
• Semantic HTML: استفاده از تگ‌های معنایی.
• Focus State: طراحی واضح برای Focus.
• Keyboard Navigation: پشتیبانی از Tab و Enter.
• Alt Text: توصیف تصاویر.
• Contrast: حفظ کنتراست طراحی‌شده.

<button
  type="button"
  aria-label="بستن مدال"
  aria-pressed="false"
  class="btn-close"
>
  <CloseIcon aria-hidden="true" />
</button>

برای مطالعه‌ی بیشتر، پست‌های استانداردهای دسترس‌پذیری وب و چرا وب استانداردها مهم هستند مفید هستند.

خودکارسازی با Plugins و Tools

ابزارهای خودکارسازی تبدیل Figma به کد:

• Anima: تبدیل Figma به HTML/CSS/React.
• Locofy: تبدیل به React، Next.js، React Native.
• Builder.io: تبدیل به Componentهای Framework.
• Figma to Code: Plugin برای Export کد.
• Design Tokens: Plugin برای Export Tokens.
• Storybook Connect: اتصال Figma به Storybook.

نکته‌ی مهم: خودکارسازی، جایگزین درک مهندسی نیست. خروجی ابزارها باید بازبینی و بهینه شود.

انتخاب Framework و معماری

انتخاب Framework بر فرآیند تبدیل اثر می‌گذارد:

برای مطالعه‌ی بیشتر، پست‌های چه امکاناتی Figma را برای طراحی وب ضروری کرده است و چرا Figma معماری UI Design را بازتعریف کرد مفید هستند.

تست و اعتبارسنجی

پس از پیاده‌سازی، تست‌های زیر ضروری هستند:

• Visual Regression: مقایسه‌ی خروجی با طراحی.
• Accessibility: با axe، Lighthouse یا Pa11y.
• Cross-Browser: Chrome، Firefox، Safari، Edge.
• Responsive: تست در Breakpointهای مختلف.
• Performance: با Lighthouse، WebPageTest.
• Interaction: تست تعاملات و Animationها.

# Visual Regression با Playwright
npx playwright test --project=chromium --update-snapshots

# Accessibility با axe
npx axe https://localhost:3000 --exit

پرسش‌های پرتکرار

آیا ابزارهای خودکارسازی Figma به کد قابل اعتماد هستند؟

ابزارها برای شروع مناسب هستند، اما خروجی نیازمند بازبینی و بهینه‌سازی مهندسی است.

چگونه Design Tokens را همگام نگه داریم؟

با استفاده از Pluginهایی مانند Design Tokens یا Tokens Studio، و ادغام با CI/CD.

آیا باید از Tailwind استفاده کنیم؟

بستگی به پروژه دارد. Tailwind برای پروژه‌های Component-based و Utility-first مناسب است.

چگونه Responsive را از Figma استخراج کنیم؟

با نگاشت Breakpointها و استفاده از Auto Layout به‌عنوان راهنمای Flexbox.

آیا Figma Dev Mode جایگزین Handoff دستی است؟

Dev Mode فرآیند Handoff را تسریع می‌کند، اما هماهنگی تیم طراحی و توسعه همچنان ضروری است.

چگونه از تناقض Design و Code جلوگیری کنیم؟

با Visual Regression Testing و Storybook به‌عنوان Source of Truth.

اشتباهات رایج

ملاحظات پیشرفته

در سطح معماری، تبدیل Figma به کد نیازمند یک استراتژی جامع است:

۱. Single Source of Truth: Figma یا Storybook به‌عنوان مرجع طراحی.

۲. Design Tokens Pipeline: خودکارسازی Sync بین Figma و Code.

۳. Component Library: کتابخانه‌ی مشترک بین تیم‌ها.

۴. Visual Regression: تست خودکار در CI/CD.

۵. Accessibility Automation: بررسی خودکار در هر Build.

۶. Performance Budget: تعریف محدودیت اندازه و زمان بارگذاری.

۷. Theming: پشتیبانی از Dark Mode و Multi-brand.

۸. Localization: RTL و LTR.

برای مطالعه‌ی بیشتر، پست‌های چگونه یک سیستم طراحی بسازیم، چگونه سیستم طراحی را در تیم پیاده کنیم و کدام ابزارها برای ساخت Design System ضروری هستند مراجع کاملی هستند.

تبدیل Figma به کد یک فرآیند مهندسی است، نه یک ترجمه‌ی ساده. هرچه این فرآیند دقیق‌تر باشد، کیفیت خروجی بالاتر است.

💡 اگر تجربه‌ای در تبدیل Figma به کد داشته‌اید، برای ما جالب است بدانیم کدام مرحله بیشترین چالش را ایجاد کرد: نگاشت Tokens، Component Mapping یا Responsive. تجربه‌ی خودتان را در دیدگاه‌ها بنویسید.

در پایان، تبدیل Figma به رابط کاربری واقعی یک فرآیند چندمرحله‌ای است که با نگاشت دقیق Design Tokens، Componentها و Layout انجام می‌شود. موفقیت در این حوزه، نتیجه‌ی هماهنگی بین تیم طراحی، تیم توسعه و ابزارهای مدرن است.