invision design system manager web app

Invision DSM สร้างระบบ Design system ให้ใช้งานง่ายและรวดเร็ว

Invision DSM ( Invision Design System Manager ) เป็นเครื่องมือที่เหมาะสำหรับองค์กรที่กำลังมองหาระบบ Design system หรือกำลังมองหา Tool มาใช้จัดการงานดีไซน์ทั้งหมดของเรา แบบที่ไม่ต้องเขียนโปรแกรมขึ้นมาทำระบบเอง แค่ใช้ Invision DSM ท่านก็จะสามารถเสก Library ง่ายๆขึ้นมาได้อย่างรวดเร็ว พร้อมแชร์ให้ทีมอื่นดึงไปใช้งานไม่ว่าจะเป็นตัวดีไซน์หรือชุดโค้ด API ก็สามารถแชร์ได้อย่างง่ายดาย

นอกจากนี้ยังมีระบบ Design version control เพื่อควบคุมเวอร์ชั่นล่าสุดของงานดีไซน์ของทีมให้ออกมาในทิศทางเดียวกันอีกด้วย

ข้อดีของการใช้งาน Design System Manager จาก Invision

ประสบการณ์การใช้งานระบบ Design System Manager จากองค์กรขนาดใหญ่

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

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

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

ตัวอย่างระบบ Design System Manager สามารถดูได้ในวีดิโอด้านล่างนี้เลยค่ะ

Invision Design System Manager รองรับโปรแกรมอะไร ?

ปัจจุบันตัว Design System Manager นั้นรองรับเพียงแค่
โปรแกรม Sketch และปลั๊กอิน Craft ที่มากับ Invision

1. ฟีเจอร์ในปัจจุบันของ Invision DSM

  • ถ้าคุณใช้ระบบ enterprise จะ automatically sync ดีไซน์ทั้งหมดจาก cloud ลงมาที่ไฟล์ sketch ของเราได้ เช่นพวก symbol, color, text style ต่างๆ
  • สามารถแชร์ code, svg และอื่นๆได้ด้วยเหมาะสำหรับทีมขนาดใหญ่
  • ระบบรองรับ privacy setting ตั้งให้โปรเจคเป็น private ได้สำหรับโปรเจคที่มีขนาดใหญ่และต้องการใช้เพียงแค่ในองค์กร

เพิ่มเติมสำหรับคนที่อยากใช้งานฟรี มาดูลิสต์ฟีเจอร์ที่ใช้ได้ทั้งหมดด้านล่างนี้เลยค่า
What are the differences in the Design system manager plans?
*ราคา Enterprise สามารถสอบถามกับทีม Invision ได้โดยตรงเลยค่ะ ^0^

เปรียบเทียบฟีเจอร์แบบฟรีและเสียเงินสำหรับองค์กรขนาดใหญ่
ตัวอย่างการดึง element ใน design system system จาก cloud ลงมาใช้ใน sketch
ตัวอย่างการแชร์ชุดโค้ด snippets รองรับหลากหลายภาษา
การตั้งค่าผู้ใช้งานที่จะสามารถ sync ไฟล์ไปทับต้นฉบับหรืออัพเดทต้นฉบับได้

2. ปัญหาและฟีเจอร์ที่จะตามมาในอนาคต

ปัจจุบันตัว DSM ก็ยังมีข้อจำกัดมากมาย ตัวอย่างเช่น:

เรื่อง Redundant Style หรือเรื่อง Style ซ้ำๆ ตัวอย่างเช่น ดีไซน์เนอร์สองคนทำงานไฟล์เดียวกัน แต่มีการตั้งชื่อ Style ที่ซ้ำกันสองอันทั้งๆที่เป็นเหมือนกัน พอกด sync ขึ้นไปใน cloud ของ DSM ทำให้เกิดการ duplicate ไปเรื่อยๆ ในอนาคตอาจจะมีตัวอัพเดทมาแก้ไขปัญหาตรงนี้ ปัจจุบันยังต้องตั้งชื่อ Style / Symbol ไม่ให้ซ้ำกันไปก่อนค่า

ส่วนฟีเจอร์ในอนาคตนั้นคือ:

1. จะสามารถแบ่ง folder ซ้อนได้หลาย tier ใน library ทำให้ไม่ต้องมาปวดหัวสร้างหลายๆ library ยกตัวอย่าง Design System ของเรามีหลาย sub category ก็จะสามารถเพิ่มเข้าไปได้หลายโฟลเดอร์มากยิ่งขึ้น

ตัวอย่างหน้าตา Library ใน Invision DSM

3. Invision Design System Manager เหมาะกับใคร?

DSM นี้เหมาะสำหรับทีมที่อยากมี design system + design version control ที่ใช้งานภายในองค์กรและแชร์ให้กับทีมอื่นได้ดึง Design system ตัวนี้ไปใช้ได้ด้วย

ความเห็นส่วนตัวพวกเรื่อง version control ยังทำงานได้ดีไม่เท่า abstract แต่คิดว่าจะดีขึ้นไปเรื่อย ๆ ในทุกเวอร์ชั่นค่า

สนใจใช้งาน DSM ศึกษาเพิ่มเติมได้ที่ไหน?

สำหรับใครที่ยังไม่เคลียร์ว่า Design System คืออะไร และดียังไง เราเคยเขียนบทความไว้ที่ Design System คืออะไร? สามารถเข้าไปอ่านได้เลยนะคะ

สำหรับผู้ที่ต้องการศึกษาเพิ่มเติมเกี่ยวกับ DSM และอยากได้ข้อมูลตัวอย่างการใช้งานต่าง ๆ สามารถดูได้ที่เว็บไซต์ด้านล่างนี้ค่ะ

DSM Learn Hub 
www.invisionapp.com/design-system-manager/learn

DSM Example Library 
https://dsmexample.invisionapp.com/…/in-vi…/example-library


Design Systems Handbook 
https://www.designbetter.co/design-systems-handbook

ถ้าใครสนใจเรื่องเกี่ยวกับ UI/UX, Design System, และ Front-end Web Development สามารถติดตามเรื่องราวใหม่ ๆ ได้ทางเพจ Designil ของเราเช่นเดิมนะคะ




There are no comments

Add yours