Figma Sync
วิธี sync Figma Variables เข้า StackUI CSS อัตโนมัติ
StackUI ใช้ Figma Variables เป็น single source of truth สำหรับ design tokens ทั้งหมด ทุกครั้งที่แก้ design ใน Figma สามารถ sync เข้า CSS ได้ด้วยคำสั่งเดียว
Flow
Figma Variables
↓ export (plugin)
Variables_Figma/*.json
↓ bun run sync:figma
packages/design-tokens/*.css
↓ @import
stackui.css (CDN / build)ขั้นตอน
1. Export จาก Figma
เปิดไฟล์ Figma แล้วใช้ plugin "Variables to JSON" export 3 collections:
| Figma Collection | Export เป็น |
|---|---|
color pallete | Variables_Figma/color pallete.json |
elements | Variables_Figma/elements.json |
typography | Variables_Figma/typography.json |
2. รัน Sync Script
# จาก root ของ stackuibun run sync:figma3. ผลลัพธ์
Script จะ generate CSS 3 ไฟล์:
| ไฟล์ | เนื้อหา |
|---|---|
packages/design-tokens/colors.css | 240 สี (22 กลุ่ม × 11 shades) + semantic colors |
packages/design-tokens/base.css | font families, 16 sizes, 9 weights |
packages/design-tokens/spacing.css | 15 spacing, 19 radius, 6 border widths |
Figma Variable Collections
Color Palette
22 กลุ่มสี แบบ Tailwind — แต่ละกลุ่มมี shades 50–950:
amber blue cyan emerald fuchsia gray green indigo lime neutral orange pink purple red rose sky slate stone teal violet yellow zinc
Elements
| ประเภท | ค่า |
|---|---|
| Spacing | 0, 2, 4, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64, 72px + negative (-8, -16) |
| Corner Radius | 0–72px + Full (999px) รวม 19 ค่า |
| Border Width | 1, 2, 4, 8, 12, 16px |
Typography
| ประเภท | ค่า |
|---|---|
| Font Families | Inter (Primary), IBM Plex Sans Thai (Secondary), Sarabun (Tertiary) |
| Font Sizes | 10–72px (16 ระดับ) |
| Font Weights | Thin (100) – Black (900) ครบ 9 ระดับ |
แก้ Semantic Mapping
Semantic colors (primary, secondary, success ฯลฯ) ถูก map ไว้ใน script ถ้าต้องเปลี่ยนให้แก้ที่:
// ใน function generateColorsCss()// แก้ mapping ตรงนี้:lines.push(" --stk-primary: var(--stk-blue-700);");lines.push(" --stk-secondary: var(--stk-amber-400);");lines.push(" --stk-accent: var(--stk-emerald-500);");// ...หมายเหตุ
- ไฟล์ CSS ที่ generate มีคอมเมนต์
DO NOT EDIT MANUALLY— ถ้าต้องแก้ให้แก้ที่ Figma แล้ว re-export - Script จะ skip variable ที่ชื่อไม่ standard (มีช่องว่าง, shade ไม่ใช่ตัวเลข) อัตโนมัติ
- Brand presets ยังคง override semantic colors ได้ตามปกติ