ความสม่ำเสมอคือกุญแจสำคัญ – วิธีสร้างระบบการออกแบบ Figma

เป็นความรู้ทั่วไปในหมู่นักออกแบบว่าระบบการออกแบบที่ดีสามารถส่งผลกระทบอย่างใหญ่หลวงต่อคุณภาพของผลิตภัณฑ์ที่เราจัดส่งและความเร็วที่เราสามารถพัฒนาได้ เนื่องจากกรณีสำหรับการสร้างระบบการออกแบบที่ครอบคลุมมีความชัดเจนหลายครั้ง โดยบริษัทต่างๆ เช่น Google, GitHub, IBM และอื่นๆ ใช้สิ่งเหล่านี้เพื่อสร้างผลิตภัณฑ์ที่ดีขึ้นอย่างรวดเร็ว คำถามจึงเปลี่ยนจาก "ทำไมเราถึงต้องมีการออกแบบ ระบบ?" กับ “เราจะสร้างระบบการออกแบบที่ยอดเยี่ยมได้อย่างไร”

ดังนั้นระบบการออกแบบที่แม่นยำคืออะไร? Will Fanguy ให้คำจำกัดความว่าเป็น "ชุดของส่วนประกอบที่นำกลับมาใช้ใหม่ได้ ซึ่งได้รับคำแนะนำจากมาตรฐานที่ชัดเจน ซึ่งสามารถประกอบเพื่อสร้างแอปพลิเคชันจำนวนเท่าใดก็ได้" ระบบการออกแบบอาจไม่เพียงแต่รวมไลบรารีส่วนประกอบ UI และไลบรารีรูปแบบเท่านั้น แต่ยังรวมถึงคู่มือสไตล์ แนวทางปฏิบัติที่ดีที่สุด โค้ด และอื่นๆ เช่นเดียวกับพิมพ์เขียวของสถาปนิกสำหรับอาคาร ระบบการออกแบบยังทำหน้าที่เป็น "แหล่งความจริงเดียว" สำหรับทีมผลิตภัณฑ์ในขณะที่สร้างผลิตภัณฑ์ ตลอดจนช่วยรักษาความสม่ำเสมอ

GitHub ไปไกลถึงขนาดแบ่งปันไลบรารีส่วนประกอบ Figma ซึ่งเป็นตัวอย่างที่ดีของระบบการออกแบบที่ใช้ Figma เครื่องมือที่ครอบคลุมมากขึ้น เช่น Storybook และ Component-Driven Development ยังเป็นแหล่งข้อมูลที่มีประโยชน์อย่างมากสำหรับการนำไปใช้และจัดทำเอกสารระบบการออกแบบ

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

สำหรับนักออกแบบที่ทำงานกับ Figma มาดูว่าการสร้างไลบรารีส่วนประกอบใน Figma สามารถเป็นส่วนสำคัญของระบบการออกแบบที่ครอบคลุมได้อย่างไร

พลังของไลบรารีส่วนประกอบ

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

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

ระบบการออกแบบเป็นชุดเครื่องมือหลัก

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

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

Figma เพิ่งเปิดตัวการวิเคราะห์ระบบการออกแบบสำหรับองค์กร ซึ่งทีมสามารถดูว่าส่วนต่างๆ ของระบบการออกแบบมีประสิทธิภาพเพียงใดและช่วยเพิ่มประสิทธิภาพ

เหตุใด Figma จึงยอดเยี่ยมสำหรับการสร้างไลบรารีคอมโพเนนต์

Figma เป็นเครื่องมือออกแบบที่ทรงพลังพร้อมคุณสมบัติที่ยอดเยี่ยมมากมาย แต่มีองค์ประกอบย่อยที่เป็นประโยชน์อย่างยิ่งเมื่อออกแบบผลิตภัณฑ์ที่ซับซ้อน: Styles , Components และ Library Files คุณสมบัติเหล่านี้ช่วยให้ระบบการออกแบบทันสมัยอยู่เสมอ ช่วยรักษาความสม่ำเสมอระหว่างการออกแบบ และให้ทางลัดสำหรับการอัปเดตการออกแบบที่หลากหลายจากตำแหน่งศูนย์กลาง

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

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

การสร้างไฟล์ไลบรารี

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

มีข้อดีหลักสองสามข้อ:

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

องค์กร

เมื่อสร้างระบบการออกแบบใน Figma จะมีประโยชน์ในการวาดแนวขนานระหว่างเครื่องมือและทฤษฎี ตัวอย่างเช่น Styles ใน Figma ถือได้ว่าเป็นระดับพื้นฐานที่สุด แม้กระทั่งพื้นฐานมากกว่า Atoms ในแบบจำลอง Atomic Design ของ Brad Frost สิ่งเหล่านี้คือสีและแบบอักษรที่ช่วยเสริมความสวยงามของผลิตภัณฑ์

ส่วนประกอบ Figma อย่างง่ายจะถือเป็น อะตอม ในแบบจำลอง Atomic Design เช่น ปุ่ม ส่วนประกอบ Figma ที่ซับซ้อนมากขึ้นจะถือเป็น โมเลกุล หรือ สิ่งมีชีวิต ซึ่งใช้ในการสร้าง เทมเพลต และ เพจต่างๆ

สิ่งที่มีประโยชน์มากที่สุดในไลบรารีคอมโพเนนต์คือ:

• สี
• แบบอักษร
• ทรัพย์สินตราสินค้า โลโก้ ฯลฯ
• การนำทาง
• ปุ่ม
• การแจ้งเตือน
• Modals
• องค์ประกอบของแบบฟอร์มและการตรวจสอบความถูกต้อง

การสร้างระบบการออกแบบใน Figma – การเริ่มต้นใช้งาน

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

อันดับแรก ให้นึกถึงส่วนประกอบและรูปแบบที่มีแนวโน้มว่าจะใช้ซ้ำได้จากแบบฟอร์มนี้ มีการ์ดที่มีโลโก้ ช่องแบบฟอร์ม และปุ่ม นอกจากนี้ยังมีแบบอักษรสามแบบและสีและเอฟเฟกต์ต่างๆ ที่อาจเป็นประโยชน์

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

สร้างไฟล์ไลบรารี Figma

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

ขณะนี้ คุณสามารถสร้างสไตล์และส่วนประกอบในไฟล์ไลบรารีและใช้ในไฟล์อื่นๆ และอัปเดตจากไฟล์ไลบรารีส่วนกลางได้

วิธีสร้างสไตล์ Figma

การสร้างสไตล์จะเหมือนกันในไฟล์ไลบรารีเหมือนกับในไฟล์อื่นๆ ซึ่งอธิบายไว้ในขั้นตอนด้านล่าง

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

• นี่จะแสดงเป็นกิริยาช่วยเพื่อตั้งชื่อสไตล์ การใช้ชื่อเชิงความหมายมักเป็นประโยชน์มากกว่าชื่อการนำเสนอ เช่น “Primary Color” แทน “Green” เพื่อให้ชัดเจนขึ้นว่าสไตล์มีไว้เพื่ออะไร
• เผยแพร่สไตล์ไปยังไลบรารีของทีมโดยใช้ป๊อปอัปที่ปรากฏที่ด้านล่างขวาของหน้าจอ หรือทำซ้ำขั้นตอนที่ดำเนินการเพื่อเผยแพร่ไลบรารีในอินสแตนซ์แรก

นี่คือบทช่วยสอนของ Figma เกี่ยวกับ วิธีสร้างสไตล์

วิธีสร้างส่วนประกอบ Figma

การสร้างส่วนประกอบก็ง่ายมากเช่นกัน เพียงเลือกวัตถุที่คุณต้องการสร้างส่วนประกอบ จากนั้นคลิกขวาแล้วเลือก "สร้างส่วนประกอบ"

คอมโพเนนต์จะเผยแพร่ไปยังไลบรารีของทีมในลักษณะเดียวกับสไตล์

นี่คือบทช่วยสอนของ Figma เกี่ยวกับ วิธีสร้างส่วนประกอบ

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

การใช้ห้องสมุด Figma

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

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

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

นอกเหนือจากการสร้างไลบรารีส่วนประกอบในFigma

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

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

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

• • •

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

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