จาก Figma สู่โค้ด

เปิดดีไซน์ที่คุณสร้างใน Figma มาดูกัน สิ่งที่คุณเห็นคือชุดของ frames, text layers และ shapes ที่ซ้อนกัน ทุกอย่างมีคู่เทียบโดยตรงใน HTML และ CSS การแปลนั้นเป็นเรื่องของกลไกมากกว่าความคิดสร้างสรรค์ — เมื่อคุณรู้การแมปแล้ว จะเร็วมาก

อ่านดีไซน์ทีละ layer

ลองดูการ์ดโปรไฟล์ง่ายๆ: รูปภาพ ชื่อ bio สั้นๆ และปุ่ม “View Work” ใน Figma อาจมีหน้าตาแบบนี้ใน layers panel:

flowchart TD
  Card["Card (Frame, white fill, rounded corners, shadow)"]
  Card --> Avatar["Avatar (Rectangle or Image, circle clip)"]
  Card --> Name["Name (Text, bold, 20px)"]
  Card --> Bio["Bio (Text, regular, 14px, grey)"]
  Card --> View["View Work (Frame, purple fill, white text)"]

Figma layer tree for a profile card

การแปลเป็น HTML นั้นตรงไปตรงมา:

Card frame → <div class="card">
Avatar → <img src="..." alt="...">
Name text → <h3>
Bio text → <p>
Button frame → <a class="btn" href="#">

การใช้ Figma Dev Mode

สลับไปที่ Dev Mode (ไอคอน </> ที่มุมขวาบนของ Figma) คลิกที่ card frame คุณจะเห็น:

Width/height — แมปกับ CSS width/height หรือปล่อยให้เนื้อหากำหนดความสูง
Fill — แมปกับ background-color
Corner radius — แมปกับ border-radius
Effect (shadow) — แมปกับ box-shadow
Padding — แมปกับ CSS padding
Gap (auto-layout) — แมปกับ CSS gap ใน flex container

คลิก Name text layer คุณจะเห็น font-size, font-weight, line-height, color คัดลอกค่าเหล่านั้นไปใส่ใน CSS ของคุณโดยตรง Dev Mode ขจัดการเดา

การ์ดในโค้ด

นี่คือดีไซน์การ์ดที่แปลงเป็น HTML และ CSS แล้ว คลิกข้างในและทดลอง — ลองเปลี่ยนชื่อ ข้อความ bio หรือสีปุ่ม

<div class="card">
  <img
    class="avatar"
    src="https://i.pravatar.cc/80?img=47"
    alt="Profile photo of Alex Chen"
  />
  <h3 class="name">Alex Chen</h3>
  <p class="bio">Product designer crafting clean, accessible interfaces for fintech and healthtech.</p>
  <a class="btn" href="#">View Work</a>
</div>

ลองแก้ไขการ์ด: เปลี่ยน border-radius: 12px เป็น border-radius: 0 เพื่อดูเวอร์ชันมุมแหลม เปลี่ยน #7C3AED เป็น #059669 สำหรับปุ่มสีเขียว นี่คือค่าที่แน่นอนที่คุณจะพบใน Figma Dev Mode

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

ส่งไฟล์ Figma ที่มี layer ตั้งชื่อไม่เป็นระบบ (“Rectangle 47”, “Group 12”) ทำให้ developer อ่าน intent ไม่ออก
ลืม detach/organize component ก่อนส่งงาน handoff

มุมมองของ developer

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

Designer เห็น “ไฟล์ Figma ที่สวย” แต่ developer ต้องแปลทุก layer, spacing, สี เป็น code จริง — ยิ่ง layer ตั้งชื่อดีเท่าไร แปลงานยิ่งเร็วและถูกต้องเท่านั้น

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

ทีม design ที่ Vercel ตั้งชื่อ layer/component ให้ตรงกับชื่อ component จริงในโค้ด (เช่น “Button/Primary”) ทำให้ developer handoff เร็วขึ้นมาก