Design Tokens: زبان مشترک طراح و توسعه‌دهنده

Design Tokens مقادیر طراحی (رنگ، فاصله، فونت) را به فرمت قابل‌استفاده در کد تبدیل می‌کنند.

Design Tokens چیست؟

متغیرهای طراحی: --color-primary: #3b82f6. در Figma تعریف و در کد استفاده می‌شوند.

• رنگ: --color-primary
• فاصله: --spacing-4
• فونت: --font-heading

ابزارها

Figma Tokens plugin، Style Dictionary و Token Studio.

جمع‌بندی

Design Tokens پل بین Figma و کد هستند.