การออกแบบตามขนาด: หนึ่งปีกับ Figma

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

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

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

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

เวิร์กโฟลว์การออกแบบของเราประมาณปี 2015

เครื่องมือหลักของเราในปี 2558 คือ Sketch และนั่นเป็นจุดที่ความธรรมดาสามัญหยุดลง เราทุกคนต่างมีวิธีการสร้างต้นแบบ ส่งออก และแชร์การออกแบบที่แตกต่างกันกับผู้มีส่วนได้ส่วนเสีย (InVision, Axure, Marvel, Google Slides และแม้แต่ Adobe PDF รุ่นเก่า) และนักพัฒนา (Avocode, Zeplin, ปลั๊กอินที่ไม่มีแอปแบบสแตนด์อโลน เช่น Measure) ในโอกาสที่ไม่ค่อยเกิดขึ้น เราสามารถส่งไฟล์โดยตรงไปยังวิศวกรที่โชคดีพอที่จะมี MacBook และใบอนุญาต Sketch ที่หายาก

เมื่อ InVision เปิดตัวปลั๊กอิน Craft เรารู้สึกยินดีเป็นอย่างยิ่ง — ความสามารถในการสร้างต้นแบบและอัปโหลดหน้าจอจาก Sketch ไปยัง InVision แบ่งปันส่วนประกอบและสไตล์ในไลบรารี nascent ในไฟล์ต่างๆ — มันคือความฝันของนักออกแบบที่เป็นจริง

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

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

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

กระบวนการ

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

ภายในปี 2017 เรามีนักออกแบบสองสามคนที่ใช้มันสำหรับงานส่วนใหญ่ของพวกเขา และหนึ่งในนักออกแบบ Lexicon (ระบบการออกแบบของ Liferay), Emiliano Cicero ได้กลายเป็นผู้เผยแพร่ศาสนาอย่างรวดเร็ว ซึ่งกลายเป็นปัจจัยสำคัญในการโน้มน้าวใจคนอื่นๆ ทีมงานเพื่อทำการเปลี่ยน

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

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

จุดเริ่มต้นเล็กๆ

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

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

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

การสร้างโครงสร้าง Figma ที่มั่นคง

ขั้นตอนแรกขั้นตอนแรกคือการกำหนดแนวทางคร่าวๆ สำหรับโครงการ ไฟล์ และการจัดองค์ประกอบ รากฐานสำหรับสิ่งเหล่านี้เริ่มต้นโดยนักออกแบบรุ่นเยาว์สองคน (ในขณะนั้น) คือ Abel Hancock และ Naoki Hisamoto ซึ่งไม่เคยพัฒนานิสัยการตั้งชื่อเลเยอร์ที่ไม่ดีซึ่งดูเหมือนจะมาจากนักออกแบบที่ฟันใน Photoshop วิธีการสำหรับองค์กรนี้ ประกอบกับใช้เวลาหนึ่งปีในการพัฒนาไลบรารีส่วนประกอบขนาดเล็กสำหรับคุณสมบัติของ Liferay.com มีความสำคัญอย่างยิ่งต่อการตั้งค่าทีมที่เหลือทั่วโลกเพื่อความสำเร็จ

การปรับปรุงองค์กรในช่วงแรกๆ ที่สร้างขึ้นโดยหนึ่งในนักออกแบบ Liferay.com ของเรา ซึ่งได้รับแรงบันดาลใจจากทวีตของ Ben คือ ระบบปกของ เรา

เราได้ทำให้ไฟล์นี้ใช้งานได้หากคุณต้องการคัดลอก มิฉะนั้นจะเป็นการแฮ็กที่ค่อนข้างตรงไปตรงมา:

1. สร้างเฟรมเดียวในหน้าแรกของไฟล์ขนาด 620×320
2. เพิ่มการออกแบบของคุณ หากคุณมีข้อความ เราพบว่าขนาดต่ำสุดคือ ~24 ชื่อในตัวอย่างของเราตั้งไว้ที่ 48
3. สนุก!

หมายเหตุ: จะมีระยะขอบเล็กน้อยรอบๆ ปกของคุณเสมอ แต่ถ้าคุณตั้งค่าผ้าใบหน้าให้เป็นสีเดียวกับการ์ด มันจะลดลักษณะที่ปรากฏของระยะขอบนี้

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

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

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

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

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

คำแนะนำบางประการที่ควรคำนึงถึงเมื่อสร้างส่วนประกอบ:

1. การใช้การแทนที่และต้นแบบสำหรับส่วนประกอบฐานที่มีประสิทธิภาพ (เพิ่มเติมเกี่ยวกับที่นี่);
2. สร้างรูปแบบการตั้งชื่อที่สอดคล้องกัน (เราใช้แบบจำลองอะตอม)
3. จัดทำเอกสารและติดป้ายกำกับทุกอย่าง — โดยเฉพาะเลเยอร์

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

ณ วันนี้ นักออกแบบผลิตภัณฑ์ส่วนใหญ่ใช้แค่ Figma เท่านั้น ยังมีนักออกแบบสองสามคนที่ทำงานในระบบเดิมที่มีต้นแบบ Sketch ที่ซับซ้อนและมีอยู่มากมายซึ่งไม่คุ้มที่จะนำเข้ามาที่ Figma ข้อยกเว้นอีกประการหนึ่งคือนักออกแบบบางคนที่ใช้แอพอย่างหลักการหรือ Adobe After Effects ในบางครั้งสำหรับแอนิเมชั่นขั้นสูงที่ไม่สมเหตุสมผลที่จะทำใน Figma เรายังมีนักออกแบบสองสามคนที่สำรวจ Framer X สำหรับต้นแบบที่แข็งแกร่งยิ่งขึ้น โดยเฉพาะอย่างยิ่งกับงานที่ต้องใช้ข้อมูลทุกประเภทตามขนาด แม้ว่าจะมีนักออกแบบบางคนที่ใช้เครื่องมือหลายอย่างแบบกึ่งปกติ แต่ 80% ของผู้ออกแบบผลิตภัณฑ์ของเราใช้ Figma สำหรับงานออกแบบและการสร้างต้นแบบทั้งหมด

การปรับปรุงอย่างต่อเนื่อง

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

ขณะนี้ เรากำลังใช้ระบบการนับในไฟล์ โดยที่หน้าบนสุดคือสิ่งที่ส่งถึงนักพัฒนา ขั้นต่อไปที่เรากำลังพูดถึงในปัจจุบันคือการทำให้เวอร์ชันมีความหมายมากขึ้นด้วยป้ายกำกับที่ชัดเจน (wireframes, mockups, breakpoints ฯลฯ ) และการใช้เวอร์ชันในตัวของ Figma ให้ดียิ่งขึ้น สร้างแนวทางปฏิบัติที่ดีที่สุดสำหรับเวลาและวิธีบันทึกเวอร์ชันต่างๆ

Final_Final_Last_2 — ไม่มีอีกแล้ว!

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

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

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

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

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

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

เราพบว่าวิธีที่ดีในการทำงานในระบบที่มีเวอร์ชันนี้คือการใช้ประวัติไฟล์ของคุณในลักษณะที่คล้ายกับวิธีที่นักพัฒนาซอฟต์แวร์ใช้ git โดยให้นึกถึงเวอร์ชัน Figma เป็นคำยืนยันหรือคำขอดึง และตั้งชื่อและใส่คำอธิบายประกอบเป็น เช่น. สำหรับความคิดที่ชาญฉลาดกว่านี้ ฉันขอแนะนำความ มุ่งมั่นของ Seth Robertson บ่อยครั้ง สมบูรณ์แบบภายหลัง เผยแพร่ครั้งเดียว: Git Best Practices ซึ่งเป็นปรัชญาทั่วไปที่ดีเกี่ยวกับวิธีการทำงานในระบบนิเวศที่ควบคุมเวอร์ชัน นอกจากนี้ Chris Beams's How to Write a Git Commit Message ยังเป็นแนวทางที่ดีในการเขียนบันทึกที่มีความหมายและมีประโยชน์ในขณะที่คุณทำงาน

เราได้ค้นพบเคล็ดลับที่เป็นประโยชน์บางประการ:

1. ตั้ง ชื่อเรื่องให้มีอักขระไม่เกิน 25 ตัว
   ชื่อที่ยาวขึ้นจะถูกตัดออก และคุณต้องดับเบิลคลิกที่บันทึกย่อในประวัติเวอร์ชันเพื่อเปิดโมดอล 'แก้ไขข้อมูลเวอร์ชัน' เพื่ออ่าน
2. ให้คำอธิบายของคุณมีความยาวไม่เกิน 140 อักขระ
   คำอธิบายแบบเต็มจะแสดงอยู่เสมอ ดังนั้นการรักษาให้ตรงประเด็นจะช่วยให้สามารถอ่านประวัติได้
3. ใช้อารมณ์ที่จำเป็นสำหรับชื่อเรื่อง
   ซึ่งจะทำให้อนาคตคุณมองเห็นได้ชัดเจนยิ่งขึ้นว่าจะเกิดอะไรขึ้นเมื่อคุณคลิกที่ช่วงเวลานั้น เช่น "การเปลี่ยนสีของปุ่มเป็นสีน้ำเงิน" กับ "เปลี่ยนปุ่มเป็นสีน้ำเงิน"
4. ใช้คำอธิบายเพื่ออธิบายว่า 'อะไร' และ 'ทำไม' กับ 'อย่างไร'
   คำตอบว่า 'ทำไม' เป็นส่วนสำคัญของงานนักออกแบบ ดังนั้นสิ่งนี้จะช่วยให้คุณจดจ่อกับสิ่งที่สำคัญในขณะที่คุณกำลังทำงาน รวมทั้งให้ข้อมูลที่ดีขึ้นสำหรับคุณในอนาคต

ทำงานออฟไลน์

ข้อจำกัดความรับผิดชอบ: สิ่งนี้ขึ้นอยู่กับประสบการณ์ของเราเอง และส่วนมากจะเป็นการคาดเดาที่ดีที่สุดของเราเกี่ยวกับวิธีการทำงาน

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

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

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

“F” คืออนาคต

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

ด้านการปรับปรุงที่ใหญ่ที่สุดที่ทีมของเรามีประสบการณ์คือ:

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

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

เติบโตและดีขึ้น

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

1. ไม่มีปลั๊กอินระบบนิเวศ
   ความสามารถในการขยายของ Sketch เป็นปัจจัยสำคัญที่ทำให้การเปลี่ยนจาก Photoshop เป็นเรื่องง่าย Figma มีเว็บ API แต่ปัจจุบันไม่มีฟังก์ชัน 'เขียน' สำหรับตอนนี้ Sketch ยังคงเป็นผู้นำตลาดด้วยชุมชนส่วนขยายและปลั๊กอินที่มีชีวิตชีวา (แน่นอนว่าสิ่งต่าง ๆ อาจเปลี่ยนแปลงได้ในอนาคตในกรณีที่ Figma เปิดเวทีสำหรับการพัฒนาปลั๊กอินด้วย)
2. การนำเข้าเว็บหรือข้อมูล JSON ในต้นแบบ
   มันจะง่ายกว่ามากสำหรับเราในการออกแบบด้วยข้อมูลจริง Sketch เพิ่งเปิดตัวคุณลักษณะ "ข้อมูล" ใน v.52 ปลั๊กอิน InVision Craft ยังคงเป็นมาตรฐานทองคำอย่างมาก เมื่อพูดถึงการเพิ่มข้อมูลที่แตกต่างกันจำนวนมากอย่างง่ายดาย และสำหรับตอนนี้ เรากำลังติดขัดในการเติมฟิลด์ข้อความด้วยตนเอง
3. เคลื่อนไหว มากขึ้น
   การรวมหลักการนั้นดี (ถ้าคุณมีหลักการ) แต่การมีแอนิเมชั่นพื้นฐานและคุณสมบัติการสร้างต้นแบบขั้นสูงใน Figma จะดีกว่ามาก
4. ประสบการณ์ออฟไลน์ที่ราบรื่นยิ่งขึ้น
   ดังที่ได้กล่าวไว้ก่อนหน้านี้ ตราบใดที่คุณเปิดไฟล์ Figma ก่อนออฟไลน์ คุณก็ไม่เป็นไร นี่อาจเป็นเรื่องปกติสำหรับคนส่วนใหญ่ แต่ถ้าคุณชอบที่จะปิดเครื่องคอมพิวเตอร์ของคุณทุกคืน มันอาจจะเจ็บปวดเมื่อคุณเปิดมันในตอนเช้าบนรถไฟหรือเครื่องบินและรู้ว่าคุณลืมเปิด Figma ทิ้งไว้

การออกแบบโอเพ่นซอร์ส

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

หากต้องการเข้าถึงไฟล์เหล่านี้ โปรดดูที่ liferay.design/resources/figma และคอยติดตามในขณะที่เราเติบโตและแบ่งปันมากขึ้น!

อ่านเพิ่มเติม

• “6 เดือนแรกของเรากับ Figma” Danny Saltaren
• “กำลังรอสัญญาณเพื่อเริ่มสร้างไลบรารีคอมโพเนนต์ของทีมออกแบบใช่หรือไม่” วิลเลียม นิวตัน
• “วิธีปรับปรุงเวิร์กโฟลว์ UI/UX ของคุณด้วย Figma” Nicole Saidy
• “การเริ่มต้นกับทีมในองค์กร Figma” Thomas Lowry
• “5 วิธีในการจัดโครงสร้างเวิร์กโฟลว์ของคุณด้วยเพจใน Figma” Josh Dunsterville
• “แนวทางปฏิบัติที่ดีที่สุด: ส่วนประกอบ สไตล์ และไลบรารีที่ใช้ร่วมกัน” Thomas Lowry
• “Figma: แนวทางการออกแบบของไหลและโมดูลาร์สำหรับการพิมพ์ด้วยส่วนประกอบ” Mirko Santangelo

แหล่งข้อมูลอื่นๆ

• ชุมชน Figma บนสเปกตรัม
• คู่มือการออกแบบ Figma โดย David Ukauwa