เริ่มใช้ Figma สำหรับมือใหม่ออกแบบ

หลายคนที่อยากเริ่มออกแบบ UI มักสะดุดอยู่ที่คำถามเดียวกันว่า "ใช้โปรแกรมอะไรดี?" — คำตอบที่ได้ยินบ่อยที่สุดในวงการออกแบบคือ Figma บทความนี้จะพาคุณเดินทีละขั้นตั้งแต่เปิดโปรแกรมครั้งแรก ทำความรู้จักอินเทอร์เฟซ สร้างเฟรม ใช้คอมโพเนนต์ จนถึงสร้างต้นแบบที่คลิกได้จริง โดยไม่ต้องมีพื้นฐานออกแบบมาก่อน

ทำไม Figma ถึงเป็นตัวเลือกแรกของมือใหม่

Figma เป็นเครื่องมือออกแบบที่ทำงานบนเบราว์เซอร์และมีแอปติดตั้งบน Windows กับ Mac ด้วย จุดเด่นที่ทำให้มือใหม่หันมาใช้คือไม่ต้องตั้งค่าซับซ้อน มีแพลนฟรีให้เริ่มได้เลย และเป็นมาตรฐานที่ทีม UI/UX มืออาชีพทั่วโลกใช้งานจริง

ข้อดีสำคัญที่ทำให้ Figma โดดเด่นเมื่อเทียบกับเครื่องมืออื่น:

• ทำงานออนไลน์ได้เลย ไม่ต้องติดตั้งอะไรเพิ่ม
• ทำงานร่วมกันแบบเรียลไทม์ คนในทีมเปิดไฟล์เดียวกันพร้อมกันได้
• ส่งออก (Export) ง่าย นักพัฒนาเปิดดูขนาด สี และ Asset ได้โดยตรงจากไฟล์
• Community เทมเพลตฟรี มีไฟล์ตัวอย่างให้ฝึกแกะโครงสร้างได้ทันที

ถ้าอยากเข้าใจหลักการออกแบบที่ดีก่อนลงมือจับเครื่องมือ แนะนำให้อ่าน UI/UX Design พื้นฐาน: ออกแบบให้คนใช้ง่าย ควบคู่กันไปด้วย

ทำความรู้จักอินเทอร์เฟซ Figma

เมื่อเปิดไฟล์ใหม่ คุณจะเจอพื้นที่ทำงาน 3 ส่วนหลักที่ต้องรู้จักก่อน:

แถบเครื่องมือบนสุดมีเครื่องมือที่ใช้บ่อยที่สุดในงานออกแบบ UI:

• V — Move Tool ใช้เลือกและเคลื่อนย้ายออบเจกต์
• F — Frame Tool สร้างหน้าหรือส่วนประกอบ
• R — Rectangle วาดสี่เหลี่ยม
• T — Text พิมพ์ข้อความ
• P — Pen Tool วาดเส้นและรูปทรงอิสระ

จำ Keyboard Shortcut เหล่านี้ไว้ตั้งแต่ต้น จะช่วยให้ทำงานเร็วขึ้นอย่างเห็นได้ชัดและลดการหยุดหยิบเมาส์ไปคลิกที่แถบเครื่องมือ

เฟรม (Frame) รากฐานของทุกงานออกแบบ

ใน Figma แทนที่จะวาดออบเจกต์ลอยบน Canvas เปล่า เราสร้าง Frame เป็นภาชนะก่อนเสมอ เพราะ Frame คือหน่วยพื้นฐานที่กำหนดขนาดหน้าจอ เป็น Container ของออบเจกต์ต่าง ๆ และเป็นหน่วยที่ Prototype ใช้นำทางระหว่างหน้า

วิธีสร้าง Frame:

1. กด F หรือเลือก Frame Tool จากแถบเครื่องมือ
2. ลากบน Canvas เพื่อกำหนดขนาดเอง หรือเลือกขนาดสำเร็จรูปจากพาเนลขวา เช่น iPhone 14 (390×844), Desktop 1440, หรือ Tablet
3. ตั้งชื่อ Frame ให้สื่อความหมาย เช่น "Home Screen", "Cart Page" — ชื่อนี้จะปรากฏเป็น Flow ใน Prototype

ข้อควรระวังที่มือใหม่มักทำพลาด: อย่าออกแบบลอยบน Canvas โดยไม่มี Frame ครอบ เพราะจะทำให้ Export, Dev Handoff และการทำ Prototype ยุ่งยากในภายหลัง นิสัยนี้สร้างตั้งแต่วันแรกดีที่สุด

คอมโพเนนต์ (Component) หัวใจของงานออกแบบที่สม่ำเสมอ

หนึ่งในฟีเจอร์ที่ทรงพลังที่สุดและทำให้ Figma ต่างจากการวาดรูปธรรมดาคือ Component ซึ่งคือออบเจกต์ต้นแบบที่เมื่อแก้ครั้งเดียว ทุกสำเนา (Instance) จะอัปเดตตามโดยอัตโนมัติ

วิธีสร้างและใช้งาน Component:

• เลือกออบเจกต์ที่ต้องการทำเป็น Component แล้วกด Ctrl/Cmd + Alt + K
• สำเนา Component ออกมาใช้ได้โดย Copy-Paste หรือลากจากพาเนล Assets ทางซ้าย
• เมื่อแก้ไข Component ต้นแบบ ทุก Instance ที่ใช้ในไฟล์จะเปลี่ยนตามทันที
• แต่ละ Instance ยังสามารถปรับสีหรือข้อความได้อิสระโดยไม่กระทบ Component หลัก

Component เหมาะมากสำหรับปุ่ม, การ์ด, แถบนำทาง (Navbar), ไอคอน หรือชิ้นส่วนใดก็ตามที่ใช้ซ้ำในหลายหน้า นี่คือวิธีที่ทีมออกแบบมืออาชีพรักษาความสม่ำเสมอของ Design System

ถ้าเคยใช้ ใช้ Canva ออกแบบกราฟิกสวยใน 30 นาที มาก่อน จะเห็นความต่างชัดเจนว่า Figma เน้นโครงสร้างและการนำชิ้นส่วนกลับมาใช้ใหม่มากกว่าการสร้างงานชิ้นเดียวจบ

Auto Layout: จัดวางอัตโนมัติแบบโปรแกรมเมอร์

Auto Layout คือฟีเจอร์ที่ทำให้ชิ้นส่วนใน Frame จัดเรียงตัวเองโดยอัตโนมัติเมื่อเนื้อหาเปลี่ยน คล้ายกับการทำงานของ Flexbox ใน CSS มากจนนักพัฒนาเห็นแล้วรู้สึกคุ้นเคย

วิธีเปิดใช้: เลือกออบเจกต์หลาย ๆ ชิ้น แล้วกด Shift + A จากนั้นปรับค่าได้จาก Properties Panel:

• Direction — แนวนอน (Horizontal) หรือแนวตั้ง (Vertical)
• Gap — ระยะห่างระหว่างชิ้นส่วน
• Padding — ระยะขอบด้านในของ Frame

ประโยชน์ที่เห็นได้ชัด: เมื่อข้อความในปุ่มยาวขึ้น ปุ่มจะขยายขนาดเองโดยไม่ต้องลากปรับมือ ทำให้ชิ้นงานตอบสนองเนื้อหาจริงได้ดีกว่าการกำหนดขนาดตายตัว

ทำต้นแบบ (Prototype) ที่คลิกได้โดยไม่ต้องเขียนโค้ด

เมื่อออกแบบหน้าต่าง ๆ ครบแล้ว Figma ช่วยให้คุณเชื่อมหน้าเหล่านั้นเป็น Flow ที่ผู้ใช้คลิกนำทางได้ โดยไม่ต้องเขียนโค้ดแม้แต่บรรทัดเดียว:

1. สลับไปแท็บ Prototype บนพาเนลขวามือ
2. เลือกออบเจกต์ที่จะเป็นจุดคลิก เช่น ปุ่ม "เข้าสู่ระบบ" หรือ "สั่งซื้อ"
3. ลากลูกศรที่ปรากฏขึ้นมาเชื่อมไปยัง Frame ปลายทาง
4. กำหนด Trigger และ Action เช่น On Click → Navigate To → เลือก Frame ที่ต้องการ
5. กด Play ที่มุมบนขวา เพื่อดูตัวอย่าง หรือแชร์ลิงก์ให้ลูกค้าและทีมดูบนอุปกรณ์จริง

สิ่งที่ต้องรู้ก่อนทำ Prototype: ตั้งชื่อ Frame ให้อ่านออกและวางบน Canvas อย่างเป็นระเบียบ เพราะลำดับ Frame ใน Layers มีผลต่อ Starting Frame ของการเล่น Prototype

เริ่มฝึกจริง: ทำอะไรก่อนดี

สำหรับมือใหม่ที่เพิ่งเปิด Figma ครั้งแรก แนะนำเส้นทางนี้:

1. สร้าง Frame ขนาด Mobile แล้ววาดหน้าล็อกอินง่าย ๆ ที่มีช่องกรอกข้อมูลและปุ่ม
2. ทำปุ่มเป็น Component แล้วลองเพิ่มสำเนาในหน้าอื่น ทดสอบแก้แล้วดูว่าเปลี่ยนพร้อมกันจริงหรือไม่
3. เพิ่ม Auto Layout ให้ปุ่มนั้น แล้วลองเปลี่ยนข้อความดูว่าปุ่มปรับขนาดเองได้ไหม
4. เชื่อมหน้าด้วย Prototype เช่น คลิกปุ่มล็อกอินแล้วไปหน้า Home

ทำแค่ 4 ขั้นนี้จะช่วยให้จับหลักการทำงานของ Figma ได้ครบทั้ง Frame, Component, Auto Layout และ Prototype ในโปรเจกต์เดียว

สำรวจคอร์สออกแบบและเครื่องมือเพิ่มเติม

Figma เป็นเพียงจุดเริ่มต้น เมื่อคุ้นเคยแล้ว ขั้นต่อไปคือเรียนรู้หลักการออกแบบที่ดี เช่น Typography, ระบบสี, Grid และ Spacing ที่จะยกระดับงานของคุณจากหน้าตา "ดูออกว่า AI ทำ" ไปสู่งานที่ดูเป็นมืออาชีพจริง

สำรวจ เครื่องมือหมวดดีไซน์ ที่รวบรวม Plugin, Asset และเครื่องมือเสริมสำหรับนักออกแบบไว้ครบ หรือถ้าอยากเรียนรู้อย่างมีโครงสร้างตั้งแต่ต้น เลือกเรียน คอร์สออกแบบ ที่คัดสรรสำหรับผู้เริ่มต้นโดยเฉพาะ — ทั้งฟรีและเสียเงิน ดูได้ที่หน้า เรียกดูคอร์สทั้งหมด