Workflow — ภาพรวม
คุณใช้เวลาหลายชั่วโมงใน Figma เพื่อทำให้เลย์เอาต์สมบูรณ์แบบ — ระยะห่างที่ถูกต้อง ขนาดตัวอักษรที่เหมาะสม และสีที่พอดี แล้วต่อจากนั้นล่ะ? ดีไซน์นั้นกลายมาเป็นเว็บเพจที่ผู้ใช้เปิดใน browser ได้จริงๆ ได้อย่างไร?
เส้นทางนี้ประกอบด้วยสี่ขั้นตอน และการเข้าใจแต่ละขั้นตอนจะเปลี่ยนวิธีที่คุณออกแบบไปตลอดกาล
จาก Figma สู่ browser
หัวข้อที่มีชื่อว่า “จาก Figma สู่ browser”ขั้นตอนที่ 1 — HTML (โครงสร้าง): นักพัฒนาอ่านดีไซน์ของคุณและเขียน HTML ที่เป็นโครงกระดูกของเพจ ทุก frame, group และ text layer ใน Figma มีองค์ประกอบ HTML ที่ตรงกัน หัวข้อกลายเป็น <h1> การ์ดกลายเป็น <div> แถบนำทางกลายเป็น <nav> HTML ไม่มีสี ไม่มีฟอนต์ — มีแค่โครงสร้าง
ขั้นตอนที่ 2 — CSS (ดีไซน์ภาพ): CSS ถูกนำมาทับ HTML เพื่อเพิ่มคุณสมบัติภาพทั้งหมดที่คุณกำหนดไว้: สี ฟอนต์ ระยะห่าง border-radius และเงา Color Styles ของ Figma กลายเป็น CSS custom properties ตารางระยะห่างกลายเป็นค่า margin และ padding นี่คือที่ที่ดีไซน์ของคุณมีชีวิตในโค้ด
ขั้นตอนที่ 3 — JavaScript (การโต้ตอบ): แอนิเมชัน ดรอปดาวน์ การตรวจสอบฟอร์ม เนื้อหาแบบไดนามิก — JavaScript เพิ่มพฤติกรรม ในฐานะดีไซเนอร์ คุณกำหนดว่าการโต้ตอบ ควรมีหน้าตาอย่างไร นักพัฒนาเขียนโค้ดที่ทำให้เกิดขึ้นจริง
ขั้นตอนที่ 4 — browser เรนเดอร์: browser อ่านไฟล์ทั้งสามแล้วแสดงผลเพจสุดท้าย ทุกพิกเซลที่คุณเห็นมาจากห่วงโซ่นั้น: โครงสร้าง HTML → สไตล์ CSS → พฤติกรรม JavaScript
บทบาทของคุณในกระบวนการ
หัวข้อที่มีชื่อว่า “บทบาทของคุณในกระบวนการ”ในฐานะดีไซเนอร์ คุณเป็นเจ้าของ สัญญาภาพ — แหล่งความจริงที่เป็นสิทธิ์ขาดว่าผลิตภัณฑ์ควรมีหน้าตาและพฤติกรรมอย่างไร นักพัฒนาทำตามสัญญานั้น ไม่ใช่เดาเอา
ยิ่งดีไซน์ของคุณมีรายละเอียดชัดเจน (layer ที่มีชื่อ สไตล์ที่ใช้ token การ state ที่ documented ครบ) ยิ่งมีความประหลาดใจน้อยลงระหว่างการพัฒนา ความคลุมเครือในดีไซน์กลายเป็น bug ในโค้ด
Figma Dev Mode คือสะพานเชื่อม เมื่อคุณเสร็จสิ้นดีไซน์ นักพัฒนาเปลี่ยนไปใช้ Dev Mode เพื่อตรวจสอบระยะห่างที่แน่นอน สี คุณสมบัติฟอนต์ และ assets ที่ export — โดยไม่รบกวนไฟล์ดีไซน์ของคุณ คิดว่าเป็นเลเยอร์ handoff ที่ฝังอยู่ใน Figma
สิ่งที่คุณจะเรียนในโมดูลนี้
หัวข้อที่มีชื่อว่า “สิ่งที่คุณจะเรียนในโมดูลนี้”| บทเรียน | สิ่งที่คุณจะทำได้ |
|---|---|
| Figma สู่โค้ด | แมป design layers เป็น HTML + CSS ด้วย Dev Mode |
| Design Tokens | ใช้ CSS custom properties แทน Figma variables |
| Scales | แสดง 4/8px grid และ type scale เป็น tokens ที่ใช้ซ้ำได้ |
| Components | สร้าง HTML+CSS ที่ใช้ซ้ำได้ เหมือน Figma components |
| Accessibility | ทำให้ดีไซน์ของคุณใช้งานได้สำหรับทุกคน |
| Handoff & ขั้นตอนต่อไป | ส่งงานที่พร้อมพัฒนาและรู้ว่าจะเรียนรู้ต่อได้ที่ไหน |
เมื่อจบโมดูลนี้ คุณจะสามารถเปิดดีไซน์ Figma แปลงเป็น HTML และ CSS ที่ถูกต้อง และส่งมอบให้นักพัฒนา — หรือทำเองได้