tl;dr: การสร้างระบบการออกแบบของตัวเอง ตรวจสอบงานของฉันในGithubและFigma !

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

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

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

มูลนิธิ

ขณะวางแผนระบบการออกแบบ ฉันได้ตัดสินใจเลือกคุณสมบัติหลักบางอย่างที่ฉันต้องการรวมไว้ การวิจัยและทดสอบระบบการออกแบบอื่นๆ ทำให้ฉันได้แนวคิดว่าฉันต้องการรวมหลักการเหล่านี้อย่างไร

ส่งเสียงถึงผู้คนในช่องDesign System Slack ที่ให้ตัวอย่างที่เป็นประโยชน์และคำอธิบายเกี่ยวกับสถาปัตยกรรมระบบการออกแบบของทีมพวกเขา

หลักการสำคัญบางอย่างที่ฉันลงเอยด้วย ได้แก่:

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

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

เอกสารประกอบที่แข็งแกร่ง:สุดท้ายนี้ ฉันต้องการให้แน่ใจว่าฉันสามารถสร้างและรักษาเอกสารที่ดีได้ ฉันวางแผนที่จะใช้Zeroheightเพื่อบันทึกระบบ ฉันสามารถเชื่อมต่อZeroheightกับFigmaและStorybookเพื่อการสื่อสารที่ชัดเจนกับทั้งนักออกแบบและนักพัฒนา

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

นี่ไม่ใช่แผนเดียว และแผนสามารถเปลี่ยนแปลงได้เสมอ แต่ก็ดีที่จะยึดมั่นในแผนนี้!

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

เอาชนะตัวเอง!

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

ตรวจสอบ squilpSystem github repo ที่นี่

ตรวจสอบไฟล์ squilpSystem Figma ที่นี่

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

ก้าวไปข้างหน้า

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