Blueseas Design Talks Ep. 13 : Figma Variables Part 2

ในวงการพัฒนาซอฟต์แวร์ที่มีการเปลี่ยนแปลงอยู่เสมอ การร่วมงานระหว่าง Designer กับ Developer นั้นมีความสำคัญอย่างยิ่งต่อผลสำเร็จ เครื่องมือออกแบบและสร้าง Prototype ที่มีประสิทธิภาพสูงอย่าง Figma จึงเกิดขึ้นเพื่อทำให้การร่วมงานระหว่างทั้งสองฝ่ายราบรื่นยิ่งขึ้น
Speaker ของเราในวันนี้ คืออออออ พี่หนุ่ม วิทวัส กัปตันแห่ง UX/UI Designer นั่นเอง ซึ่งพี่หนุ่มอยากจะมาแชร์เรื่อง การทำ Variable Collection ที่จะช่วยยกระดับให้เป็นนักออกแบบ UI มืออาชีพมากยิ่งขึ้น
Variables คือ การเก็บค่าต่าง ๆ ที่ใช้ในงาน Design ของเราให้อยู่ในรูปแบบของตัวแปร (variable) ทำให้ตอนนี้เราสามารถเก็บค่าตัวเลขต่างๆ ของเราให้อยู่ในรูปของตัวแปรชื่อนึงได้ ไม่ต้องคอยจำตัวเลขที่ใช้ในจุดต่างๆ แล้วว่าเคยใช้อะไรไป ทำให้เวลาคุยกันจะง่ายขึ้นเพราะมีชื่อให้เรียกตรงกัน ใช้ได้กับแทบทุกอย่างที่เป็นตัวเลข เช่น Width, Height, Radius, Padding, Gap และอื่นๆ อีกมากมาย

Variables มีกี่ชนิด?

นอกเหนือจากตัวเลขแล้ว Variables ยังรองรับตัวแปรชนิดอื่นๆ อีก รวมทั้งหมด 4 อย่างด้วยกัน

  • Number ค่าตัวเลขทั่วไปทั้งมีและไม่มีทศนิยม
  • Color ค่าสีในรูปแบบของ HEX code (ใส่ opacity ได้ด้วย)
  • String ข้อความทั่ว ๆ ไป
  • Boolean เป็นข้อมูลที่มีค่าเป็น “จริง” หรือ “เท็จ” เท่านั้น โดยจะแทนด้วย True และ False

เรื่องของสี ที่เป็นพื้นฐานของการเริ่มต้นการทำ Variable จะเป็นในเรื่องของการตั้งชื่อสีที่ต้องทำให้ทุกคนในทีมเข้าใจง่ายเเละรู้ความหมายร่วมกัน

  • สีหลักๆ Primary, Secondary, Warning Error, Info, Disable
  • โดยส่วนใหญ่จะเเบ่งเฉดสีจาก 100 – 900 ไล่จากสีอ่อนไปจนถึงสีเข้ม
  • เเบ่งเป็นสีหลักเเละสีรอง เผื่อมีการเปลี่ยน Requirement เรื่องสี ซึ่งเรื่อง Change ในวงการนี้ ถือว่าปกติมาก
  • การปรับ Opacity ค่าความเข้มเป็น % (ค่า 1 – 100)
  • การตั้งค่าว่าต้องการให้เเสดงตรงส่วนไหนในการตั้งค่าของเเถบด้านขวาเครื่องมือ ตั้งค่าการมองเห็นโดยผู้สร้าง

การตั้ง Scaling ในส่วนจะไปปรากฎที่เเถบเครื่องมือด้านขวา เมื่อกดใช้จะสะดวกมากขึ้น

  • ความกว้าง ยาว สูง ค่า x การขยับซ้าย ขวา
  • การตั้งชื่อของมุม เช่น None จะเลือกความโค้ง = 0 เเปลว่าไม่มีมุม
  • ตั้งค่าว่าต้องการตั้งค่าให้ใช้ในส่วนไหน เช่น ความโค้ง ความยาว ความสูง ความห่างของ Layout เท่าไหร่
  • การตั้งค่าในส่วนของความหนาของเส้น Stroke
  • การตั้งค่าความกว้างยาวยาวขนาดที่ต้องการ เช่น การทำขนาดโทรศัพท์ไว้ หน้าจอ Desktop

การตั้งค่า Font figma พึ่งนำเข้ามาให้ใช้

  • ขนาดของ Font
  • การตั้งค่า Style Font
  • Part Display & Text เเล้วเเต่ขนาดที่ตั้งค่า
  • ปัญหาการตั้งค่าการใช้งานของ Font จำเป็นต้อง Checkbox ทุกช่องไว้ก่อน
  • Font color แบ่งเป็น Light background & Dark background

สรุป

การตั้งค่า จะนำมาผูกในงาน Design เพื่อที่เวลาเปลี่ยนเเปลงงานเยอะๆ สามารถมาตั้งค่าใน Variable ทำให้เราไม่ต้องเข้าไปตั้งค่าหลายๆ ที่ สามารถเปลี่ยนที่เดียว เเล้วสามารถเปลี่ยนทั้งหมดได้ในทันที ทำให้สะดวกในการใช้งาน เเละตั้งค่า เมื่อ Public ไว้ตามที่ตั้งค่าไว้ เราสามารถใช้งานในงานไหนก็ได้ตามที่ตั้งค่าไว้
Blueseas Design Talks เป็นอีกหนึ่งกิจกรรมดีๆ ของชาวเรือเหล็กที่จะช่วยสร้างแรงบันดาลใจให้กับทีมงานในการยอมรับบทบาทที่หลากหลาย สร้าง Culture ของการพัฒนาอย่างต่อเนื่องในธุรกิจพัฒนาซอฟต์แวร์ที่มีการแข่งขันสูงและเปลี่ยนแปลงอย่างต่อเนื่องได้
เพราะที่ Blueseas เราสามารถเรียนรู้และเติบโตได้แบบไร้ขีดจำกัด ติดตามเทรนด์ใหม่ๆ เกี่ยวกับคนทำงานสายดีไซน์อื่นๆ ได้ใน Blueseas Design Talks ครั้งต่อไปนะคะ
Post Views: 99