Components

ใน Figma component คือ UI ที่คุณกำหนดครั้งเดียวและนำไปใช้ซ้ำทุกที่ เปลี่ยนเนื้อหา คง style ไว้ ใน HTML และ CSS คุณทำสิ่งเดียวกันด้วย classes กำหนด class .btn ครั้งเดียว แล้วนำไปใช้กับทุกปุ่มบนเพจ ทุกปุ่มจะดูสอดคล้องกัน — และเมื่อคุณเปลี่ยน .btn ทุกปุ่มจะอัปเดต

Figma components → CSS classes

Figma	CSS
Component ชื่อ `Button/Primary`	Class `.btn.btn--primary`
Component ชื่อ `Button/Secondary`	Class `.btn.btn--secondary`
Component ชื่อ `Card`	Class `.card`
Instance ของ Card	`<div class="card">...</div>`
Component property (variant)	Modifier class `.btn--large`

Convention การตั้งชื่อที่นักพัฒนาส่วนใหญ่ใช้คือ BEM — Block, Element, Modifier รูปแบบ:

Block: component เอง → .card
Element: ส่วนประกอบของตัวเอง → .card__title, .card__body
Modifier: variant → .btn--primary, .btn--secondary

คุณไม่จำเป็นต้องจำ BEM สิ่งสำคัญคือแนวคิด: ตั้งชื่อ class ตามสิ่งที่ element นั้น เป็น ไม่ใช่ตามหน้าตา .card ดีกว่า .white-rounded-box .btn--primary ดีกว่า .purple-button

สร้าง components ที่ใช้ซ้ำได้

ด้านล่างคือ button สองแบบและ card สองอัน — ทั้งหมดสร้างจาก CSS classes เดียวกัน คลิกในโค้ดและเพิ่ม card ที่สามหรือปุ่มที่สาม

<section class="demo">
  <div class="button-row">
    <a href="#" class="btn btn--primary">Get started</a>
    <a href="#" class="btn btn--secondary">Learn more</a>
  </div>
  <div class="card-row">
    <div class="card">
      <h3 class="card__title">Brand Identity</h3>
      <p class="card__body">Logo systems, color palettes, and typography guidelines for modern brands.</p>
      <a href="#" class="btn btn--primary">View project</a>
    </div>
    <div class="card">
      <h3 class="card__title">Mobile App Design</h3>
      <p class="card__body">End-to-end product design for iOS and Android with a focus on accessibility.</p>
      <a href="#" class="btn btn--secondary">View project</a>
    </div>
  </div>
</section>

สังเกตว่าทั้งสองการ์ดใช้ classes .card, .card__title และ .card__body เดียวกัน — เนื้อหาเท่านั้นที่ต่างกัน นี่คือ component model ใน HTML และ CSS

ข้อผิดพลาดที่นักออกแบบเจอบ่อย

สร้าง component ใน Figma โดยไม่คิดถึง state ที่จำเป็น (hover, disabled, loading, error)
เปลี่ยน component หลักแต่ไม่ update instance ทั้งหมดให้ตรงกัน — developer ก็เจอปัญหาเดียวกันกับ shared component ในโค้ด

มุมมองของ developer

👨‍💻 สิ่งที่ developer เห็นจริง ๆ

Designer เห็น “1 component, หลาย variant” แต่ developer เห็น component เดียวกันที่ต้องเขียน code ให้ครอบคลุมทุก state ที่อาจเกิดขึ้นจริง ไม่ใช่แค่ state ที่ design ไว้

💡 ตัวอย่างจากของจริง

Design system ของ Atlassian มี component ที่กำหนด state ไว้ครบ (default/hover/active/disabled/loading) ตรงกับ code component จริงทุกตัว