บทช่วยสอนขนาดเล็ก – ใช้ประโยชน์จากฟีเจอร์ของ Figma สำหรับกระบวนการออกแบบทั้งหมด

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

Figma มีศักยภาพที่จะสนับสนุนกระบวนการออกแบบทั้งหมดตั้งแต่ต้นจนจบ สเก็ตช์แรก การรวบรวมคำติชม การทำงานร่วมกัน ต้นแบบที่พร้อมสำหรับการทดสอบ และการส่งมอบให้กับนักพัฒนานั้นอยู่ในความสามารถที่ดี Figma ยังช่วยให้งานของผู้จัดการผลิตภัณฑ์และหัวหน้าฝ่ายออกแบบง่ายขึ้น รวมถึงผู้มีส่วนได้ส่วนเสียอื่นๆ ทั้งหมด

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

พื้นฐานของกระบวนการออกแบบผลิตภัณฑ์ที่ราบรื่นคืออะไร?

แม้ว่าแต่ละทีมและโครงการอาจมีเวิร์กโฟลว์ที่แตกต่างกัน แต่ก็มีฟังก์ชันและขั้นตอนต่าง ๆ ที่เป็นองค์ประกอบสำคัญของการออกแบบและการจัดการผลิตภัณฑ์แม้ว่าจะเป็นความจริง Figma ครอบคลุมแต่ละรายการ

1. การเข้าถึงและการทำงานร่วมกัน ไม่ว่าทีมจะใช้เครื่องมือใด ก็ต้องมีวิธีการทำงานร่วมกัน นำเสนอโครงการ รวบรวมคำติชม และรักษาผู้มีส่วนได้ส่วนเสียในวงเสมอ คุณสมบัติทั้งหมดนี้มีอยู่ใน Figma
2. ความยืดหยุ่นในการทำซ้ำและผลิตผล งาน Figma มีความยืดหยุ่นและสามารถใช้เป็นกระดานไวท์บอร์ดสำหรับการทำงานร่วมกันเพื่อร่างแนวคิดเบื้องต้นและทำซ้ำทุกอย่างตั้งแต่โครงลวดไปจนถึงแบบจำลองที่มีความแม่นยำสูง
3. ความสามารถในการสร้างต้นแบบและการทดสอบ การออกแบบแอพมือถือ? สร้างและเผยแพร่ต้นแบบเชิงโต้ตอบ และทดสอบโดยตรงบนสมาร์ทโฟน ทั้งหมดนี้จาก Figma
4. สร้างแหล่งความจริงเพียงแหล่งเดียว Figma เป็นวิธีที่ยอดเยี่ยมในการกำหนดระบบการออกแบบผลิตภัณฑ์ที่ออนไลน์โดยสมบูรณ์ มันเป็นแหล่งความจริงเพียงแหล่งเดียวโดยปริยาย ไม่สงสัยอีกต่อไปว่า "นี่เป็นเวอร์ชันล่าสุดหรือไม่"
5. แฮนด์ออฟที่ราบรื่น เพียงแชร์ลิงก์กับนักพัฒนา พวกเขาจะสามารถเข้าถึงข้อมูลทั้งหมดที่จำเป็นสำหรับการนำการออกแบบไปใช้ เช่น เส้นสีแดง การวัด และเนื้อหากราฟิกที่พร้อมสำหรับการส่งออก
6. ความเก่งกาจที่จะปรับแต่งและปรับปรุง API ปลั๊กอินของ Figma ช่วยให้ทีมเขียนปลั๊กอินของตนเองหรือเข้าถึงชุมชนผู้ใช้ที่กว้างขึ้นและขยายเครื่องมือด้วยฟังก์ชันการทำงานใหม่

1. การเข้าถึงและการทำงานร่วมกัน

รับทีมบนกระดาน

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

มีสามระดับการเข้าถึงที่มีอยู่ ค่อนข้างอธิบายได้ง่าย แต่โดยปกติแล้ว สิทธิ์ในการแก้ไขจะมอบให้กับทีมออกแบบและดูสิทธิ์ของคนอื่นๆ ซึ่งรวมถึงนักพัฒนาและผู้มีส่วนได้ส่วนเสียอื่นๆ ที่ต้องการสามารถปฏิบัติตามขั้นตอนการออกแบบและให้ข้อเสนอแนะ

ตัวเลือกการแชร์ที่คล้ายกันมีให้ที่ระดับทีม (แสดงด้านบน) ระดับโครงการ และระดับไฟล์ หากไม่มีการระบุระดับการเข้าถึง ระดับการเข้าถึงจะเผยแพร่จากทีมหนึ่งไปยังอีกโครงการหนึ่งและจากโครงการหนึ่งไปยังอีกไฟล์หนึ่ง

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

การฝังไฟล์โครงการ

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

ในการฝังไฟล์โปรเจ็กต์ ให้ตั้งค่าการเปิดเผยไฟล์เป็น ทุกคนที่มีลิงก์ - สามารถดู คัดลอกโค้ดฝังตัว และฝังไฟล์โปรเจ็กต์ในซอฟต์แวร์ของบริษัทอื่นที่รองรับ embed.ly

ข้อเสนอแนะและการแก้ไข

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

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

เพื่อให้ทีมมีความสอดคล้องกัน มีการบูรณาการที่ดีที่สามารถเผยแพร่การสนทนาจากไฟล์ Figma ในช่อง Slack ที่กำหนด

การทำงานร่วมกันแบบเรียลไทม์

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

อาจต้องใช้เวลาพอสมควรกว่าจะเข้าใจความหมายในทางปฏิบัติ แม้ว่านักออกแบบจะไม่ใช้ผู้เล่นหลายคนเพื่อทำงานในส่วนเดียวกันของไฟล์ไปพร้อม ๆ กัน แต่ก็รู้สึกสบายใจอย่างเหลือเชื่อที่ไม่ต้องกังวลเกี่ยวกับความขัดแย้งของเวอร์ชันไฟล์ โดยเฉพาะอย่างยิ่งสำหรับทีมที่มีการกระจายขนาดใหญ่

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

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

2. ความยืดหยุ่นในการทำซ้ำและผลิตสิ่งที่ส่งมอบ

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

3. ความสามารถในการสร้างต้นแบบและการทดสอบ

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

เมื่อเลือกองค์ประกอบในโหมดต้นแบบแล้ว วงกลมเล็กๆ จะปรากฏขึ้นที่ด้านข้าง เมื่อลาก เส้นสีน้ำเงินจะปรากฏขึ้น และสามารถวางลงบนหน้าจอหรือสถานะเพื่อแสดงผลลัพธ์ของการโต้ตอบได้

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

การทดสอบผู้ใช้

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

การทดสอบบนมือถือ

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

4. การสร้างแหล่งความจริงเพียงแหล่งเดียว

ประวัติเวอร์ชัน

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

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

ระบบการออกแบบและไลบรารีส่วนประกอบ

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

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

ความสามารถในการตัดสินใจว่าจะแจกจ่ายไลบรารีอย่างไร รวมกับตัวเลือกในการสลับการมองเห็นหรือการซ่อนองค์ประกอบของไลบรารี ทำให้ประสบการณ์ทั้งหมดราบรื่นและมีประสิทธิภาพ

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

5. แฮนด์ออฟที่ราบรื่น

นักพัฒนา Handoff

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

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

6. ความเก่งกาจที่จะปรับแต่งและปรับปรุง

Figma APIs และปลั๊กอินแบบกำหนดเอง

ระบบ API และปลั๊กอินของ Figma ช่วยให้ทีมออกแบบและสาขาวิชาต่างๆ สามารถปรับแต่งโปรแกรมตามความต้องการเฉพาะของกระบวนการได้อย่างง่ายดาย ความยืดหยุ่นของ Figma ทำให้ผู้ใช้สามารถโต้ตอบกับแพลตฟอร์มได้โดยทางโปรแกรม ตัวอย่างบางส่วน:

การใช้ข้อมูลจริง

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

ปลั๊กอินชื่อ Google Sheets Sync เป็นตัวอย่างที่ดีของสิ่งที่สามารถทำได้ ปลั๊กอินนี้ทำให้ง่ายต่อการรวม Google ชีตเป็นแหล่งที่มาเพื่อเติมและซิงค์เนื้อหาของส่วนประกอบในไฟล์ Figma

เวิร์กโฟลว์ขั้นสูง

ความสามารถในการจัดวางระบบการออกแบบภายในโปรแกรมออกแบบ UI จะมีประโยชน์ก็ต่อเมื่อระบบมีการใช้งานอย่างต่อเนื่องในหน้าจอที่ลูกค้าต้องเผชิญ โชคดีที่มี Figma API, ปลั๊กอิน และการรวมระบบที่สามารถช่วยได้

ส่วนเสริม Storybook จะซิงค์ไฟล์ Figma และแสดงส่วนประกอบการออกแบบ Figma ในแผงควบคุมควบคู่ไปกับส่วนประกอบที่ใช้งาน กรณีการใช้งานที่น่าสนใจอีกกรณีหนึ่งคือ Figma to React Converter ซึ่งเป็นการปรับปรุงเวิร์กโฟลว์ที่แปลงส่วนประกอบ Figma เป็นโค้ด

คุณสมบัติของ Figma เหมาะอย่างยิ่งสำหรับกระบวนการออกแบบทั้งหมด

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

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

• • •

อ่านเพิ่มเติมเกี่ยวกับบล็อก Toptal Design:

• พลังของ Figma เป็นเครื่องมือออกแบบ
• Figma vs. Sketch vs. Axure – การตรวจสอบตามงาน
• บทช่วยสอนขนาดเล็ก – การทำงานกับส่วนประกอบปุ่ม Figma
• ฝึกฝนฝีมือของคุณด้วยเครื่องมือ UX ยอดนิยมเหล่านี้
• การออกแบบที่มีความแม่นยำ – Adobe XD Review