สรุปอัปเดต Figma Config 2024

สวัสดีค่ะทุกคน กลับมาอีกแล้วกับบทความสรุปเนื้อหาอัปเดตใหม่สำคัญจาก Figma ประจำปี 2024 ในเดือนมิถุนายน วันนี้นัทมาพร้อมกับสรุปมากมายเกี่ยวกับฟีเจอร์ใหม่ ๆ จาก Figma รวมไปถึงการอัปเดตใหม่ต่าง ๆ ที่จะช่วยให้การออกแบบของคุณง่ายและมีประสิทธิภาพมากยิ่งขึ้น บอกเลยว่าอัปเดตรอบนี้มีของใหม่มาให้ลองเล่นเพียบ ละลานตาเลยทีเดียว

🔨 ฟีเจอร์ใหม่ที่ไม่ควรพลาด

✨ 1. หน้าต่างการใช้งานโปรแกรมใหม่ที่เรียกว่า UI3

หน้าต่างการใช้งานทั้งหมดของโปรแกรม Figma จะเปลี่ยนแปลงไปเพื่อให้รองรับกับฟีเจอร์ใหม่ๆ และจะโฟกัสไปที่การใช้งานของดีไซน์เนอร์มากยิ่งขึ้น โดยการอัปเดตครั้งนี้จะมีการเปลี่ยนแปลงเพียบเลยค่ะ ไม่ว่าจะเป็นการเพิ่ม Toolbar ด้านล่างสุดเข้ามา เพื่อให้ใช้งานได้สะดวกมากยิ่งขึ้น เรียกว่ารองรับกับการออกแบบด้วย AI ไปด้วยในตัว

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

Designil favourite: คิดว่าหน้าต่างที่ออกมาแล้วช่วยทำให้ชีวิตของนัทง่ายขึ้น คือหน้าต่างของ properties ในฝั่งการตั้งค่าของ component บอกเลยว่าง่ายขึ้นเยอะสำหรับคนทำ Design system

ถ้าไม่ชอบ UI ใหม่จะทำยังไง? สามารถกดไปที่รูปเครื่องหมาย (?) ที่ด้านขวาล่างสุดสีดำของหน้าจอ แล้วกดย้อนเวอร์ชันกลับไปของเดิมได้ค่า ด้วยคำว่า “Go back to previous UI”

อ่านการเปรียบเทียบหน้าจอในอดีตกับของใหม่ได้จากบทความนี้เลย Navigating UI3

✨ 2. Figma Slides

สิ่งที่มีแต่คนให้ความสนใจมากที่สุดคือเรื่องของ Figma Slides เป็นฟีเจอร์การทำไฟล์นำเสนอที่ช่วยให้ดีไซน์เนอร์สามารถทำงานได้อย่างรวดเร็วมากยิ่งขึ้น เพราะดีไซน์เนอร์สามารถนำเสนอผลงานตัวเองได้ง่ายโดยการแนบไฟล์ออกแบบที่เป็น Prototype จาก Figma ลากไปใส่ในฝั่งของ Slides ได้เลย

ในตัว Slides เองยังมีการปรับปรุงการนำเสนอให้ดียิ่งขึ้นด้วยการอนุญาตให้ผู้นำเสนอสามารถใส่ข้อความระหว่างพรีเซนต์ได้ เรียกว่าเป็น pain point ของการทำงานสไลด์ใน Figma ก่อนหน้านี้เลยค่ะ เพราะว่าเวลาพรีเซนต์จะมองเห็นข้อความโน้ตของผู้พูดยากมาก

• ออกแบบสไลด์ได้ง่ายและรวดเร็ว – สร้างหน้าสไลด์โดยใช้เทมเพลต, ฟอนต์, สีของเรา สามารถแนบไฟล์ Prototype ที่เราสร้างใน Figma เข้ามาใส่ในสไลด์ได้เลย โดยไม่ต้องลากไปลากมาให้เสียเวลา
• ทำงานพร้อมกันหลายคน – ทำงานร่วมกันกับทีมในการสร้างไสลด์พร้อมกันได้ ผ่านแชท, ระบบเสีย audio หรือจะคอมเมนต์งานด้านใน และยังมีระบบ AI ช่วยเขียนภายในด้วย เช่นการปรับแต่งคำพูดในการนำเสนอ
• เชื่อมต่อสไลด์เข้ากับผู้รับฟัง – ด้วยระบบส่วนเสริมมากมายไม่ว่าจะเป็น Live polls, ระบบโหวต voting และอื่นๆ เพื่อช่วยให้งานของเรานั้นสมบูรณ์แบบ

Figma Slides สามารถใช้งานได้ฟรีในเวอร์ชันเบต้า และในปี 2025 จะเปลี่ยนแผนเป็นแบบชำระเงิน โดยจะเริ่มต้นที่ $3 และ $5 ต่อผู้ใช้งานต่อเดือน อ่านต่อได้ทาง Help Center

✨ 3. Figma AI

เป็นการพัฒนากันมาอย่างต่อเนื่องกับการทำงานให้ง่ายขึ้นด้วย AI ที่ตอนนี้เราสามารถเริ่มสร้างงานออกแบบเว็บและแอปของเราด้วยคำสั่ง prompt แบบง่าย ๆ ได้แล้ว เพียงแค่สั่ง ฉันจะดีไซน์ให้เธอทันที นอกจากนี้ยังรองรับการทำงานกับการเขียนคำ copy ด้วย AI หรือการทำงานอื่นที่ช่วยทำให้ดีไซน์เนอร์ไม่ต้องปวดหัวในการตามหาของในองค์กรอีก

และนี่คือคำถามที่จะหายไปในการทำงานในอนาคตค่ะ 😂

• แกๆ ออกแบบหน้านี้ไปยังวะ?
• แกๆ ใครทำดีไซน์หน้านี้?
• แกๆ ดีไซน์นี้มีหรือยัง ชื่ออะไร?
• แกๆ ดีไซน์นี้อยู่ที่ไหน?
• ใครไม่ตั้งชื่อเลเยอร์ เดี๋ยวจะทุบนะ
• ใครเขียน copy ยาว UI แหกหมดแล้ว…

• สร้างงานออกแบบ: สามารถใส่คำสั่งให้สร้างแอป หรือเว็บ mockup แบบง่าย ๆ ด้วยคำสั่งตัวหนังสือที่เราต้องการ
• สร้างรูปภาพ: สร้างภาพไม่ซ้ำใครในงาน UI ด้วยการใส่คำสั่งตัวหนังสือ
• สร้าง Prototype: ทำให้งาน Prototype ที่นิ่ง ๆ ให้เคลื่อนไหวได้ด้วยคำสั่ง AI
• แก้ไขชื่อ Layer: เปลี่ยนชื่อ Layer ในไฟล์และจัดเรียงทั้งหมดพร้อมกันได้ด้วยคำสั่ง AI
• ลบภาพพื้นหลัง: เปลี่ยนภาพสินค้าให้ดูโดดเด้ง ด้วยระบบการลบภาพพื้นหลังในตัว Figma ไม่ต้องเปลี่ยนโปรแกรมไปมา
• แก้ไขข้อความให้สมจริง: สร้างข้อความ copy ในหน้าเว็บและแอปให้เสมือนงานจริง แบบไม่ต้องใช้ Lorem ipsum อีกต่อไปด้วย AI
• ย่อข้อความ, แก้ไข, แปลข้อความ: เขียนข้อความ copy แบบให้สั้นลงเพื่อให้พอดีกับ UI, เขียนข้อความใหม่, แปลภาษาง่าย ๆ เพียงแค่เลือกจากตัวเลือก ในปัจจุบันรองรับการทำงานได้ 10 ภาษา
• ค้นหาของตามรูปภาพที่เราต้องการ: ค้นหาดีไซน์ทั้งหมดในองค์กร ในไฟล์ต่าง ๆ ด้วยของที่เราต้องการ ไม่ว่าจะตามหาของจาก UI ใน Frame, image, screenshot
  ใช้งานได้แค่แผน Professional, Organization, และ Enterprise
• ระบบช่วยค้นหา Asset: ค้นหา assets ที่ต้องการได้ หากเราไม่รู้จักชื่อของสิ่งนี้
  ใช้งานได้แค่แผน Professional, Organization, และ Enterprise

ปัจจุบัน Figma AI ใช้งานได้แค่ในระบบ Beta และจะทะยอยปล่อยให้ทุกคนใช้งานได้ฟรี (แต่ติดลิมิตนะ) ในอนาคตจะมีการอัปเดตแผนราคาเพิ่มเติมของฟีเจอร์นี้ ติดตามได้จาก Help Center.

✨ 4. Dev mode หน้าตาใหม่

หลังจาก Dev mode ได้ออกจากโปรแกรมเบต้า มาเป็นระบบแบบเสียเงิน ทำให้หลาย ๆ คนบ่นกันระนาวเพราะเป็นการเพิ่มค่าใช้จ่ายรายปีให้กับองค์กรแบบไม่มีที่สิ้นสุด Figma เองก็พยายามอย่างไม่หยุดยั้งเพื่อพัฒนาให้ระบบนี้สามารถใช้งานร่วมกันได้ระหว่าง Designer กับ Developer อย่างไร้ที่ติ (ก่อนหน้านี้เหมือนจะมีประโยชน์บ้างและไม่มีประโยชน์บ้าง) มาดูกันเลยว่า Dev mode จากงาน Figma Config 2024 มีอะไรอัปเดตบ้าง

• ส่งมอบงานแบบง่ายยิ่งขึ้น (Design handoff): ช่วยให้ขั้นตอนการส่งงานระหว่างดีไซน์เนอร์กับ dev เป็นไปได้อย่างราบรื่น
  • Design Status: ปรับสถานะของงานออกแบบให้เป็น Ready to build, changed, และ completed
    (ซึ่งในอดีตจะมีแค่สถานะเดียว)
  • หน้าต่าง Ready for Dev: สามารถกดดูงานออกแบบที่มีสถานะ ready for dev ช่วยติดตามการอัปเดตได้อย่างรวดเร็วในที่เดียว
  • โฟกัสหน้าจอให้ชัดเจน: ช่วยให้ dev สามารถโฟกัสไปที่หน้าจองานที่ตัวเองเลือกได้ ทำให้ดูโค้ดได้ง่ายดายมากยิ่งขึ้น
  • ระบบ Notifications: ช่วยติดตามโนติฟิเคชัน และจะมีแจ้งเตือนหากดีไซน์มีการเปลี่ยนแปลงเป็นสถานะ “ready for dev.
• Code Connect: ระบบเชื่อมต่อกับ Code connect ที่ช่วยในการทำงานของการสร้าง design system ทำให้ทีม dev สามารถเชื่อมต่อ design system จากโค้ดมาใส่ชุดโค้ดลงใน Figma แบบ UI Kit ในหน้า devmodeได้อย่างรวดเร็ว ทำให้เพิ่ม adoption rate ให้กับทีมได้ เพราะสุดท้าย dev จะเริ่มดูดีไซน์จาก Figma ก่อน code documentation เรียกว่าช่วยให้ประหยัดเวลาสำหรับ dev ท่านอื่น ๆ ในองค์กรนั่นเอง
  ปัจจุบันฟีเจอร์นี้ใช้ได้แค่ React หรือ SwiftUI และยังใช้งานได้ในแผนเบต้า สำหรับ Organization และ Enterprise เท่านั้น

อ่านเพิ่มเติมได้ทาง Help Center.

✨ 5. ปรับปรุงระบบของเก่าให้ใช้ง่าย

นอกจากฟีเจอร์ใหม่สุดคูลแล้ว ยังมีการปรับปรุงฟีเจอร์ของเดิมให้ล้ำไปมากยิ่งกว่าเดิม ไม่ว่าจะเป็น

• Auto Layout: จะมีฟีเจอร์ใหม่ที่จะช่วย suggest autolayout ให้กับเรา เวลาที่เราออกแบบโดยใช้ Frame ซ้อนกันหลายอัน ระบบจะช่วยเปลี่ยน Frame เป็น auto layout ให้อัตโนมัติ ทำให้เราเลือกได้ว่าอันไหนจะจัดวางแบบไหน ช่วยให้ลดการทำงานแบบ manual ลงไปได้
  ถ้าเราตอนนี้ต้องไม่เห็นภาพแน่ ๆ มาดูภาพต่อกันได้ในนี้เลย  Learn more.
• ช่วยดูหน้าจอ Responsive: เราสามารถกดดูหน้าจอการออกแบบของเราในหลากหลายรูปแบบได้ในโหมด prototype ที่จะมีฟีเจอร์เพิ่มเข้ามาให้ดูงานแบบ responsive ได้ง่ายมากยิ่งขึ้น Learn more.
• UI kits: ระบบ UI Kits ที่ดึงไฟล์จาก library มาใช้ใน Figma ได้โดยไม่ต้อง duplicate ไฟล์เองอีกต่อไป ปัจจุบัน Figma ได้พาร์ตเนอร์กับ Apple และ Google บอกเลยว่าทำงานง่ายขึ้นเยอะ Learn more.
• สร้าง Pages ใน FigJam: สร้างหน้าเพิ่ม (Pages) ใน Figjam ได้แล้วจ้า Learn more.

สรุปวิดีโอ Talk ที่สนุก ๆ เหมาะสำหรับดีไซน์เนอร์ UI/UX

อย่างที่รู้กันว่าการจัดงาน Config ในแต่ละปี นอกจากจะมีประกาศฟีเจอร์ใหม่ๆ ให้เราลองไปใช้งานกันแล้ว ยังมี talk ย้อนหลังสนุก ๆ ให้เราฟังอีกมากมาย ที่จะช่วยเสริมสร้างไอเดียการออกแบบ จุดประกายให้ทุกคนกลับไปออกแบบได้อย่างมีพลัง วันนี้นัทเลยจะมาสรุปวิดีโอที่น่าสนใจที่นัทได้ดูแล้วบางส่วนไว้ด้านล่างนี้ [กำลังเขียน]

ดูวิดีโอทั้งหมดได้ทาง Config 2024 youtube

• ขออนุญาตมาเขียนเพิ่มให้เร็วๆนี้ ขอแอดนัทไปทำสรุปก่อน อิอิ

จบกันไปแล้วกับรีวิว Figma แบบละเอียดจากแอดนัทคนเดิม ติดตามเนื้อหาแบบนี้ได้ทาง Designil.com เลยนะคะ เดี๋ยวเรากลับมาเจอกันใหม่ในบทความหน้าแบบสนุกๆ ค่า ^_^

บทความที่เกี่ยวข้อง

• Figma variables 2024 รองรับ Fonts อัปเดตใหม่!
• อัปเดตสรุปราคา Figma 2024 กับฟีเจอร์ Dev mode
• Figma Config 2023 มาดูฟีเจอร์ใหม่จาก Figma แบบละเอียดกันเถอะ
• 10 ข้อผิดพลาดในการสร้าง Design system บน Figma
• [วิดีโอ] สรุปงาน Figma Schema 2022 ภาษาไทยเข้าใจง่าย