โปรแกรม figma คือ

Figma คืออะไร

Figma UI/UX Design Tool Browser Real-time Collaboration Component Auto Layout Prototype Dev Mode Plugin Design System

Core Features

/* === Figma CSS Export Example === */

/* Button Component - Primary */
.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  gap: 8px;
  
  background: #3B82F6;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  
  /* Text */
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #FFFFFF;
  
  /* Hover State */
  transition: background 0.2s ease;
}

.btn-primary:hover {
  background: #2563EB;
}

/* Card Component */
.card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  gap: 16px;
  
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}

/* Auto Layout = CSS Flexbox */
/* Frame with Auto Layout → display: flex */
/* Direction: Horizontal → flex-direction: row */
/* Direction: Vertical → flex-direction: column */
/* Gap: 16 → gap: 16px */
/* Padding: 24 → padding: 24px */
/* Hug Contents → width: fit-content */
/* Fill Container → width: 100% (flex: 1) */

/* Design Tokens */
:root {
  /* Colors */
  --color-primary: #3B82F6;
  --color-primary-hover: #2563EB;
  --color-secondary: #6B7280;
  --color-success: #10B981;
  --color-error: #EF4444;
  --color-background: #F9FAFB;
  --color-surface: #FFFFFF;
  --color-text: #111827;
  --color-text-secondary: #6B7280;
  
  /* Typography */
  --font-family: 'Inter', sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  
  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
}

Design System

# === Design System Structure ===

from dataclasses import dataclass

@dataclass
class FigmaComponent:
    name: str
    variants: str
    properties: str
    usage: str
    auto_layout: str

components = [
    FigmaComponent("Button",
        "Primary, Secondary, Ghost, Danger",
        "Size (S/M/L), Icon (Left/Right/None), Disabled (T/F)",
        "CTA, Form Submit, Navigation, Action",
        "Horizontal, Gap 8px, Padding 12-24px, Hug"),
    FigmaComponent("Input Field",
        "Default, Focus, Error, Disabled",
        "Label (T/F), Helper Text (T/F), Icon (T/F)",
        "Form Input, Search, Filter",
        "Vertical, Gap 4px, Fill Container"),
    FigmaComponent("Card",
        "Default, Elevated, Outlined",
        "Image (T/F), Action (T/F), Badge (T/F)",
        "Content Display, Product, Article",
        "Vertical, Gap 16px, Padding 24px, Fill"),
    FigmaComponent("Navigation Bar",
        "Top Bar, Side Bar, Bottom Tab",
        "Logo (T/F), Search (T/F), Avatar (T/F)",
        "App Navigation, Page Header",
        "Horizontal, Space Between, Padding 16px, Fill"),
    FigmaComponent("Modal / Dialog",
        "Default, Confirmation, Form",
        "Title, Description, Actions (1-3 buttons)",
        "Confirm Action, Form Input, Alert",
        "Vertical, Gap 24px, Padding 32px, Fixed Width"),
    FigmaComponent("Table Row",
        "Default, Selected, Hover",
        "Checkbox (T/F), Actions (T/F), Status Badge (T/F)",
        "Data Display, List, Dashboard",
        "Horizontal, Gap 16px, Padding 12-16px, Fill"),
]

print("=== Design System Components ===")
for c in components:
    print(f"  [{c.name}]")
    print(f"    Variants: {c.variants}")
    print(f"    Properties: {c.properties}")
    print(f"    Usage: {c.usage}")
    print(f"    Auto Layout: {c.auto_layout}")

Workflow & Plugins

# === Figma Workflow & Essential Plugins ===

@dataclass
class FigmaPlugin:
    plugin: str
    category: str
    use_case: str
    free: bool

plugins = [
    FigmaPlugin("Iconify",
        "Icons",
        "ค้นหา Icon จาก 100+ Icon Sets ใส่ใน Design",
        True),
    FigmaPlugin("Unsplash",
        "Images",
        "ใส่รูป Stock Photo ฟรีจาก Unsplash",
        True),
    FigmaPlugin("Content Reel",
        "Content",
        "ใส่ข้อมูลจำลอง ชื่อ ที่อยู่ รูปโปรไฟล์",
        True),
    FigmaPlugin("Stark",
        "Accessibility",
        "ตรวจ Color Contrast WCAG AA/AAA Compliance",
        True),
    FigmaPlugin("Figmotion",
        "Animation",
        "สร้าง Animation ใน Figma Export CSS/Lottie",
        True),
    FigmaPlugin("Tokens Studio",
        "Design Tokens",
        "จัดการ Design Tokens Sync กับ Code",
        True),
    FigmaPlugin("Autoflow",
        "User Flow",
        "สร้าง Flow Diagram เชื่อม Frame อัตโนมัติ",
        True),
    FigmaPlugin("Figma เป็นเครื่องมือออกแบบ UI/UX ที่ทำงานบนเว็บเบราว์เซอร์ รองรับการทำงานร่วมกันแบบ Real-time เหมาะสำหรับทีมออกแบบและพัฒนาซอฟต์แวร์

เคล็ดลับ

• Auto Layout: ใช้ Auto Layout ทุก Frame ปรับขนาดอัตโนมัติ Responsive
• Component: สร้าง Component ตั้งแต่เริ่ม ใช้ Variants Properties ครบ
• Naming: ตั้งชื่อ Layer เป็นระเบียบ ใช้ / แบ่งกลุ่ม เช่น Button/Primary/Large
• Style: สร้าง Color Text Effect Style ใช้ทั้ง Project ไม่ Hardcode
• Plugin: ติดตั้ง Iconify Unsplash Stark เป็นอย่างน้อย

Best Practices สำหรับนักพัฒนา

การเขียนโค้ดที่ดีไม่ใช่แค่ทำให้โปรแกรมทำงานได้ แต่ต้องเขียนให้อ่านง่าย ดูแลรักษาง่าย และ Scale ได้ หลัก SOLID Principles เป็นพื้นฐานสำคัญที่นักพัฒนาทุกู้คืนควรเข้าใจ ได้แก่ Single Responsibility ที่แต่ละ Class ทำหน้าที่เดียว Open-Closed ที่เปิดให้ขยายแต่ปิดการแก้ไข Liskov Substitution ที่ Subclass ต้องใช้แทน Parent ได้ Interface Segregation ที่แยก Interface ให้เล็ก และ Dependency Inversion ที่พึ่งพา Abstraction ไม่ใช่ Implementation

เรื่อง Testing ก็ขาดไม่ได้ ควรเขียน Unit Test ครอบคลุมอย่างน้อย 80% ของ Code Base ใช้ Integration Test ทดสอบการทำงานร่วมกันของ Module ต่างๆ และ E2E Test สำหรับ Critical User Flow เครื่องมือยอดนิยมเช่น Jest, Pytest, JUnit ช่วยให้การเขียน Test เป็นเรื่องง่าย

เรื่อง Version Control ด้วย Git ใช้ Branch Strategy ที่เหมาะกับทีม เช่น Git Flow สำหรับโปรเจคใหญ่ หรือ Trunk-Based Development สำหรับทีมที่ Deploy บ่อย ทำ Code Review ทุก Pull Request และใช้ CI/CD Pipeline ทำ Automated Testing และ Deployment

สรุป

Figma UI/UX Design Browser Collaboration Component Auto Layout Prototype Dev Mode Plugin Design System Wireframe Handoff มาตรฐานอุตสาหกรรม