JSON + Sketch symbol อีกทางเลือกสำหรับคนชอบดีเทล

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

โดยส่วนตัวแล้วค่อนข้างชอบเวลาที่ทำ Prototype แล้วรู้สึกว่าเหมือนของจริง คิดว่าการเลือกใช้ข้อมูลจริงๆ ก็เป็นส่วนหนึ่งที่ทำให้รู้สึกแบบนั้นด้วย

ทั้งหมดนี้จริงๆก็สามารถทำจาก Sketch symbol อย่างเดียวได้เลย แต่สำหรับ symbol ที่มีรายละเอียดเยอะ ก็จะแลกมาด้วยการ Overrides ที่มากขึ้นเช่นกัน

ตัวอย่าง Symbol ที่มีรายละเอียดเพิ่มขึ้น ก็จะมี field มากขึ้น

ในตัวอย่างก็จะมีส่วนที่นอกเหนือจากข้อความก็คือเปลี่ยนแปลงสกุลเงิน(Currency) และ Jitta Line ที่ถ้าค่าเป็น Below อยากให้เป็นสีเขียว ส่วน Above เป็นสีแดงและก็กราฟที่ใช้เป็นรูปภาพ

สมมติอยากทำหน้าที่มีส่วนประกอบของ Symbol ตัวนี้เรียงกันอยู่เยอะๆ

ก็จะวาง Symbol ไปจนครบ 9 อันแล้วค่อยๆแก้ Overrides ของแต่ละตัวไปเรื่อยๆจนครบ แต่ปัญหาจะอยู่ที่ว่าบางครั้งเราก็อาจสับสนเรื่องของข้อมูลว่าแต่ละตัวถูกต้องรึเปล่า ใส่สลับกันรึเปล่า ส่วนช่อง input ก็แสนเล็ก บางค่าที่ยาวๆนี้ตกลงหายไปเลย

จริงๆเคยลองพยายามหาเครื่องมือที่มาช่วยแล้ว แต่ก็ยังไม่ค่อยเจอที่ถูกใจ หรือถ้าเจอก็เหมือนยังไม่ support ของที่เป็น Nested symbol ในลักษณะที่ตัวเองชอบ แวะไปดู sketch-data-populator อีกรอบ ตอนนี้ทำได้แล้ว (หรืออาจจะได้ตั้งนานแล้วใช้ไม่เป็นเอง ฮ่าๆ)

sketch-data-populator ช่วยอะไรได้บ้าง?

ช่วย Duplicate ตัว Symbol พร้อมกับเอาข้อมูลจาก JSON ไปใส่ใน overrides ให้ สุ่มข้อมูลได้ แถมยังทำเงื่อนไขเล็กๆน้อยได้ด้วย (อ่านเต็มๆได้ที่ sketch-data-populator) มาลองดูว่าจะเป็นยังไงบ้าง!

เริ่มจากลองเขียน JSON ดูก่อนว่าจะมี Field อะไรบ้าง ซึ่งจะครอบคลุมค่า Overrides ทั้งหมด ได้มาประมาณนี้

JSON ที่ลองเขียนออกมา

จากนั้นก็เปลี่ยนชื่อ Layer ต่างๆ ให้ตรงตามกับที่เราตั้งไว้ใน JSON โดยใช้รูปแบบ {valuable} จะกลายเป็นแบบนี้

ลองเพิ่มเงื่อนไขเพิ่มเติมสำหรับบางค่า เริ่มจาก

max 24
คือแสดงผลมากสุดไม่เกิน 24 ตัวอักษร เพื่อไม่ให้ชื่อยาวกระทบกับส่วนอื่น

upper
แสดงผลเป็น Uppercase

swapSymbol
สำหรับสลับ symbol ตามค่าที่ได้รับมาเช่น Currency และ Jitta Line ที่เป็น Above หรือ Below ก็เปลี่ยนสีและคำ

ส่วน {graph} จะใช้เป็น url แทน

เท่านี้ symbol ที่เราทำขึ้นมาก็พร้อมที่จะ Support JSON ที่รันผ่าน sketch-data-populator ได้แล้ว ซึ่งจริงๆแล้วก็ยังใช้งานแบบ symbol ปกติได้เหมือนเดิม แต่ชื่อ field เวลาที่เราจะ overrides ก็จะถูกเปลี่ยนไป

ลองทดสอบ data 3 ชิ้นที่แตกต่างกัน
ตามเงื่อนไขที่เราใส่ไว้จะได้ symbol ออกมาตามเงื่อนไขที่เรากำหนดไว้ ทั้ง Currency และ Jitta Line

การใช้งาน sketch-data-populator ก่อนอื่นต้องติดตั้งบน Sketch ก่อน (วิธีติดตั้ง) ส่วนการใช้งานเบื้องต้นมีวีดีโอสั้นๆ ยังมีรายละเอียดที่ยังไม่ได้พูดถึงอีกเยอะเหมือนกันอาจจะทำอะไรสนุกๆได้อีก

สิ่งที่คิด

• คิดว่าการแก้ในรูปแบบ JSON เห็นของทั้งหมดได้ง่ายกว่า
• รู้สึกสนุกที่สามารถกำหนดเงื่อนไขนิดๆหน่อยๆได้
• ไม่ต้องคอยเก็บ symbol ที่เคยใส่ค่าไว้ เพราะจะทำใหม่เมื่อไหร่ก็ได้