💡 เคล็ดลับจัดระเบียบไฟล์ Figma จากทีม Doctolib: ต้องมีระเบียบแค่ไหนถึงจะไม่หลงในโฟลเดอร์! 📂✨

เคล็ดลับการจัดระเบียบไฟล์ Figma จากทีม Doctolib 📘

หนึ่งข้อเท็จจริง: Figma คือเครื่องมือออกแบบที่ทีมออกแบบของ Doctolib ใช้มากว่าหนึ่งปีแล้ว

สองข้อเท็จจริง: ทีมของเราเพิ่มขึ้นจาก 11 นักออกแบบใน Q1 2020 ปัจจุบันมีนักออกแบบ 27 คน

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

มีสามแง่มุมที่ต้องพิจารณาเพื่อให้มั่นใจในความแข็งแกร่งของไฟล์ Figma ของเรา:

1. สถาปัตยกรรมของพื้นที่ทีมใน Figma

2. รูปร่างของไฟล์

3. บทบาทของผู้ใช้: การเข้าถึงและสิทธิ์

สถาปัตยกรรมของพื้นที่ทีม

บริบทเล็กน้อย

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

ตัวอย่างเช่น เรามีโดเมนหนึ่งที่ดูแลเรื่อง B2C ทั้งหมด โดเมนหนึ่งดูแลไฟล์ผู้ป่วยและการให้คำปรึกษา โดเมนหนึ่งดูแลปฏิทิน (การให้คำปรึกษาทางวิดีโอ…) และโดเมนอื่นๆ ทั้งหมดมีประมาณ 30 ถึง 35 ทีมคุณสมบัติในตอนนี้

โครงสร้างทีมผลิตภัณฑ์

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

ความชัดเจนในพริบตา

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

ตัวอย่างพื้นที่โดเมน พร้อมภาพขนาดย่อของคุณสมบัติ

รูปร่างของไฟล์

แม่แบบ

เพื่อรักษามาตรฐานและอำนวยความสะดวกในการสร้างไฟล์ใดๆ สำหรับนักออกแบบ แม่แบบเป็นเครื่องมือที่ดี มีแม่แบบสามประเภท: ไฟล์งาน, โปรโตไทป์, และไฟล์เก็บถาวร

แม่แบบสามประเภทของเรา (ไฟล์งาน, เก็บถาวร, โปรโตไทป์) พร้อมให้คัดลอก

โครงสร้างเลเยอร์

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

ส่วนประกอบในการจัดระเบียบ

นอกจากเลเยอร์แล้ว เรายังใช้ส่วนประกอบที่เพิ่มเข้ากับระบบการออกแบบของเราชื่อ Oxygen

ส่วนประกอบเหล่านี้ประกอบด้วย:

- แบนเนอร์สถานะ: มีสามรูปแบบ: กำลังดำเนินการ, อยู่ระหว่างตรวจสอบ, หรือเสร็จสมบูรณ์ แสดงวันที่อัปเดตล่าสุดและชื่อนักออกแบบ

- ส่วนหัวรอง: ใช้สร้างส่วน

- ชื่อหน้าจอ: อ่านง่ายกว่าชื่อเฟรม

- Sticky Notes: มีสี่สีเพื่ออำนวยความสะดวกในการตั้งหมายเหตุหน้าจอ

กระบวนการของคุณสมบัติ

เมื่อสร้างคุณสมบัติและเริ่มต้นกับผู้มีส่วนได้เสียที่เกี่ยวข้อง นักออกแบบต้อง:

1. สร้างไฟล์โดยการคัดลอกแม่แบบไฟล์งาน (ถ้าคุณสมบัติไม่ใช่การปรับปรุงของคุณสมบัติที่มีอยู่)

2. ถ้าจำเป็น สร้างโปรโตไทป์โดยใช้แม่แบบโปรโตไทป์

เมื่อคุณสมบัติได้รับการยืนยัน:

1. เปลี่ยนสถานะของเลเยอร์จาก 🛠 เป็น ✅ และย้ายไปด้านบนกับคุณสมบัติที่ยืนยันแล้วอื่นๆ

2. ปรับปรุงรูปแบบของส่วนหัวรองเพื่อแสดงเวอร์ชันที่ยืนยันแล้ว

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

บทบาทของผู้ใช้: การเข้าถึงและสิทธิ์

กฎสองข้อ: ไม่ให้สิทธิ์แก้ไขนอกทีมออกแบบ และไม่เลือก "Anyone with the link" โดยค่าเริ่มต้น ยกเว้นโปรโตไทป์

ค่าเริ่มต้นสำหรับแม่แบบทั้งหมดคือ:

- การเข้าถึง: “Anyone at Doctolib with the link” (SSO/SAML logged)

- สิทธิ์: 👀 “Can view”

สำหรับผู้ใช้ที่ได้รับเชิญ:

- สมาชิกทีมออกแบบ: ✏️“Can edit”

- ทุกคนที่ Doctolib: 👀 “Can view”

- บุคคลที่สาม: 👀 “Can view” จากนั้น ⛔️ “No access” เมื่อไม่ต้องการอีกต่อไป

ทฤษฎีเทียบกับชีวิตจริง

ชีวิตจริงไม่ใช่แม่น้ำที่ไหลเรียบเสมอไป ทุกอย่างไม่ง่ายอย่างที่คิด

มีปัญหาเกี่ยวกับขนาดของคุณสมบัติและวิธีการจัดการกับคุณสมบัติที่ข้ามโดเมน เราอาจต้องหาวิธีที่สามารถปรับตัวได้อย่างเหมาะสม

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

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

#Figma #UXDesign #DesignSystems #Doctolib

อ่านเพิ่มเติม ได้จาก Link นี้ 🔗 : https://medium.com/doctolib/figma-files-organizations-tips-from-the-doctolib-team-a8eee7aec170