วิธีการจัดระเบียบไฟล์ Figma ของคุณสำหรับระบบการออกแบบ

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

วิธีที่ดีที่สุดในการจัดระเบียบไฟล์ Figma ของคุณคืออะไร?

แนวปฏิบัติที่ดีที่สุดสำหรับ Figma คืออะไร?

คุณควรจัดการกับการจัดระเบียบหน้าจอยังไง?

คุณจะจัดการทีม/แพลตฟอร์ม/ผลิตภัณฑ์ต่างๆ ของคุณด้วยวิธีที่มีความสม่ำเสมอได้อย่างไร?

สุดท้ายนี้ คุณต้องทำอะไรเพื่อให้ Figma ทำงานร่วมกับ zeroheight อย่างราบรื่น?

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

ทำความเข้าใจสิ่งที่คุณมีใน Figma

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

เริ่มต้นจากวิธีการจัดระเบียบไฟล์ มาดูที่จุดเริ่มต้นกันก่อน:

- Organization – นี่คือเลเยอร์ที่อยู่บนสุดและมองเห็นได้และจัดการได้ในแผน Organization เท่านั้น

- Teams – นี่คือกลุ่มของโปรเจคและเป็นที่ที่ไลบรารีทำงานในระดับเริ่มต้น

- Projects – นี่คือกลุ่มของไฟล์

- Files – นี่คือไฟล์ Figma หรือ Figjam ที่คุณทำงานส่วนใหญ่ของคุณ

- Pages – นี่คือสิ่งที่คุณสามารถมีในไฟล์ของคุณเพื่อแยกความแตกต่างระหว่างพื้นที่ สถานะ หรือโหมดการทำงานต่างๆ

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

ต่อไปนี้เป็นองค์ประกอบหลักที่ประกอบขึ้นเป็นไฟล์ระบบการออกแบบของคุณ:

- Libraries – นี่คือประเภทของไฟล์ Figma ที่มีการทำงานพื้นฐานสำหรับการเผยแพร่ที่ช่วยให้สามารถใช้สไตล์และคอมโพเนนต์ที่แชร์ได้

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

- Styles – สไตล์คือสมบัติที่กำหนดไว้ล่วงหน้า รวมถึงสี การเติม การตีเส้น ข้อความ เอฟเฟ็กต์ และกริดเค้าโครง

การจัดระเบียบไฟล์ออกแบบของคุณ – Teams และ Projects

การเลือกแผนที่เหมาะสม

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

วิธีที่ Spotify จัดระเบียบการทำงานใน Figma เพื่อปรับปรุงการทำงานร่วมกัน

แผน Organization

หากคุณอยู่ในแผน Organization ผมชอบวิธีที่ Spotify จัดระเบียบไฟล์ออกแบบของพวกเขามาก นั่นคือพวกเขาใช้คุณสมบัติ Teams เพื่อแยกพื้นที่ผลิตภัณฑ์หรือทีมต่างๆ ภายใน Spotify

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

ส่วนตัวแล้ว ผมคิดว่าวิธีนี้ทำงานได้ดีมากถ้าคุณมีมากกว่า 5 หรือ 6 ทีมที่ทำงานในผลิตภัณฑ์ของคุณ

แผน Professional

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

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

แผน Starter

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

การตั้งค่าที่ถูกต้องที่เหมาะสำหรับคุณและทีมออกแบบของคุณ

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

การกำหนดค่าโปรดักต์

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

การกำหนดค่าของบริษัท

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

การกำหนดค่าเอเจนซี

แน่นอนว่าเรารู้ว่ามีเอเจนซีที่ใช้ Figma เราแนะนำให้ใช้ Teams เพื่อจัดระเบียบลูกค้าที่แตกต่างกันทั้งหมดของคุณ การเรียกดูลูกค้าโดยตรงจะทำให้ง่ายขึ้นในการค้นหาโปรเจค ใช้คุณลักษณะ Projects เพื่อจัดระเบียบโปรเจคของลูกค้าที่แตกต่างกัน และหากคุณรู้สึกว่าคุณขาดลำดับชั้นบางอย่าง อาจจะเป็นเวลาที่ลูกค้าของคุณต้องการแผน Organization ของตัวเองและหยุดใช้แผนของคุณ

หลายแพลตฟอร์ม

หากคุณมีหลายแพลตฟอร์ม (เว็บ iOS Android) คุณอาจพิจารณาใช้ Projects เพื่อระบุแต่ละแพลตฟอร์มและเพิ่ม WIP อยู่ในระหว่างการพัฒนาและการผลิตโดยตรงในชื่อไฟล์ คุณยังสามารถแยกทีมโดยแพลตฟอร์ม (Product A – iOS Product A – Web...) หากมันช่วยคุณ ใช้แนวปฏิบัติที่ดีที่สุดเหล่านี้เป็นแนวทางและปรับปรุงการจัดระเบียบและการทำงานของคุณเองจากนั้น

การจัดระเบียบไลบรารีของคุณสำหรับทีมออกแบบของคุณ

ขนาดไฟล์เล็กพร้อมกับไลบรารีแบบเรียงซ้อน

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

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

สถานะของคอมโพเนนต์และไลบรารี

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

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

หน้าต่อคอมโพเนนต์

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

การจัดระเบียบไฟล์ออกแบบของคุณสำหรับทีมออกแบบของคุณ

อีโมจิสำหรับการใช้งานสั้น

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

- การออกแบบเสร็จและพร้อมส่ง: ✅ ☑️

- การแก้ไขหรืองานที่กำลังดำเนินการ: ✏️ ✒️

- ถูกเก็บถาวร: ⌛ ⛔️ ❌

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

รูปย่อ

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

- Better File Thumbnail

- Quick Thumbnail

- Autocover

- Cover Status

หากไม่มี จงสร้างมันขึ้นมา

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

อ่านเพิ่มเติม ได้จาก Link นี้ 🔗 : https://zeroheight.com/blog/how-to-organize-your-figma-files-for-your-design-system/