การใช้งาน Figma ออกแบบ UI (Basic)

หลายๆคนอาจจะต้องการจะสร้าง User Interface(UI), Mockup ง่ายๆ แต่ไม่มีโปรแกรมที่รองรับการทำแม้แต่โปรแกรมเดียวในเครื่อง ทางออกก็คือ Figma ค่ะ
www.figma.com

Figma หรือที่เขาเคลมไว้ว่า The collaborative interface design tool
เป็น Website และ Application บนเครื่องคอมฯที่สามารถเข้าไปออกแบบงานประเภท UI ได้ทันทีโดยไม่ต้องทำการลงโปรแกรมใดๆ การ Save ข้อมูลก็ไม่กินพื้นที่บนเครื่องของผู้ใช้งานด้วย นับว่าแทบจะมาแทนโปรแกรมอย่าง Sketch หรือ Photoshop ในการออกแบบ UI กันเลยทีเดียว

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

เริ่มต้นคือตรงเข้าไปที่เว็บกันเลยค่ะ www.figma.com
โดยเมื่อเราสร้าง Account บน Figma เสร็จเรียบร้อยแล้วก็จะได้เห็นหน้าตาของ Website เป็นแบบรูปด้านล่างนี้

หน้าตาของ Figma (รูป 1)

กดสร้างโปรเจคใหม่โดยกดที่ปุ่ม + ที่มุมซ้ายด้านบน 
เราก็จะได้โปรเจคหรือหน้าเปล่าๆรอให้เราออกแบบขึ้นมาแล้วละค่ะ

หน้าของโปรเจคที่เราสร้างขึ้นมา (รูป 2)

โดยการสร้างเฟรม หรือขอบเขตของหน้าจอต่างๆจะสร้างด้วยการกดปุ่ม Frame Tool (รูป 3) หรือกด f บนคีย์บอร์ด เพื่อลากเฟรมขึ้นมาในพื้นที่ทำงานได้เลย และจะสร้างกี่เฟรมก็ได้ตามที่เราต้องการ

ปุ่ม Frame Tool (รูป 3)

โดยเราจะปรับขนาดของเฟรมได้เองจากแถมด้านขวาสุดของหน้าจอ โดยกดเลือกที่ชื่อเฟรมนั้นๆจากพื้นที่ทำงานหรือกดเลือกชื่อเฟรมนั้นจากแถบด้านซ้ายสุด แล้วทำการปรับขนาดได้ที่ W (Width) และ H (Height)

การปรับขนาดของเฟรม (รูป 4)

การเพิ่มรูปภาพ หรือสัญลักษณ์ต่างๆ
เพิ่มได้โดยการกดที่ปุ่มรูปสี่เหลี่ยมด้านซ้ายบนของหน้าจอดังรูป 5 เพื่อเลือกชนิดของสิ่งที่ต้องการวาด เช่น วงกลม สี่เหลี่ยม ฯ และลากเม้าส์บนพื้นที่ทำงาน หรือบนเฟรมตามที่ต้องการได้เลย 
รวมถึงการเพิ่มข้อความ จะสามารถทำได้ด้วยการกดรูปตัว T ด้านซ้ายบนของหน้าจอ (จากรูป 5) ได้เลย

การกดเลือกสัญลักษณ์เพื่อนำมาใช้งาน (รูป 5)

การ Export หรือ Save รูปเพื่อนำไปใช้งาน
สามารถ Save ทีละรูปด้วยกดที่ชื่อของรูปบนเฟรมนั้นๆเพื่อเลือก (ด้านบนซ้ายของเฟรมจะปรากฏชื่อของแต่ละเฟรมอยู่) 
หรือ กดชื่อเฟรมจากแถบทางด้านซ้ายมือก็ได้ 
และกด + ตรงคำว่า EXPORT ที่ด้านขวาล่างของหน้าจอเพื่อแสดงส่วนเพิ่มเติมของการ Export ว่าเราต้องการ Save เป็นนามสกุลอะไร (.PNG .JPG .SVG) เมื่อเลือกเรียบร้อยแล้วก็สามารถกดที่ปุ่ม Export _(ชื่อไฟล์)_ ได้เลย

การกด Export รูปลงที่เครื่องของเรา (รูป 6)
ส่วนของการ Export (รูป 7)

หรือถ้าต้องการจะ Export เฟรมทีละหลายๆเฟรม ก็กด shift เลือกเอาจากแถบด้านซ้ายสุดตามต้องการได้เลย แล้วกด Export ทีเดียวก็จะได้รูปภาพทั้งหมดจากที่เราเลือกมาลงเครื่องของเราพร้อมนำไปใช้ได้แล้วค่ะ

การกดเลือกเฟรมหลายๆเฟรมเพื่อ Export (รูป 8)

การ shared งานให้คนอื่นได้เข้ามาทำงานร่วมกับเราหรือเข้ามาดูก็สามารถกดปุ่ม Share สีฟ้าที่ด้านขวาบนของหน้าจอ จะปรากฏหน้าต่างขึ้นมาให้เห็น 
โดยที่เราจะ Share ได้ทั้ง Email และจาก Link และสามารถตั้งค่าได้ว่าแต่ละคนจะทำอะไรกับ Project ที่เราสร้างได้บ้าง (can edit, can view) ตามรูป 10

ปุ่ม Share (รูป 9)
หน้าต่างที่จะปรากฏเมื่อกดปุ่ม Share (รูป 10)

ทั้งนี้ Figma ยังมีการเพิ่ม Comment ได้อีกด้วยค่ะ โดยกดปุ่ม Bubble ตามรูป 11 ที่ด้านซ้ายบนของหน้าจอ 
และเมื่อเรากดบนหน้าต่างส่วนที่เราทำงานก็จะปรากฏหน้าต่างตามรูป 12 เพื่อให้เราพิมพ์ข้อความที่เราต้องการ Comment เรียบร้อยก็กดปุ่ม Post สีฟ้าด้านล่างของหน้าต่าง เพื่อแจ้งให้คนอื่นทราบความเห็นของเราได้เลย

ปุ่มกดเพิ่ม Comment (รูป 11)
หน้าต่างที่จะปรากฏเมื่อเราต้องการเพิ่ม Comment (รูป 12)

ส่วนการบันทึกโปรเจคนั้นเราไม่จำเป็นต้องกด Save หรือทำอะไรเพราะทั้งตัว Web และ App ที่เราใช้งานจะทำการบันทึกตลอดเวลาอยู่แล้ว และนี่ก็เป็นอีกหนึ่งข้อดีของ Figma

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

Like what you read? Give Natnalin Sompaiboon a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.