Figma เป็นโปรเเกรมสร้างตัว Prototype สำหรับออกเเบบหน้าUI/UX นั่นก็คือในส่วนของหน้าเเสดงผลของเว็ปไซต์/เเอปพลิเคชั่น ครับ
โดยในกระทู้นี้จะมาเเนะนำการออกเเบบ UX/UI เบื้องต้นใน figma กันครับ
ก่อนอื่น ทำการเข้าเว็ปไซต์ www.figma.com เเละล็อคอินให้เรียบร้อยครับ
เมื่อเข้ามาหน้ารวมโปรเจคของเราให้คลิกที่ New เเละคลิกที่ Design file ก็จะได้โปรเจคอันใหม่ที่เราจะใช้ครับ
ก็จะเข้ามายังหน้า draft งานที่เรากำลังทำ
ให้ทำการคลิกที่เมนู frame จะเป็นการออกเเบบตัวหน้าจอเเสดงผลครับ
จะมีให้เลือก template ของตัวหน้าจอต่างๆครับ ตอนนี้เราจะสร้างขนาดเฟรมให้เหมาะสมกับหน้าจอคอมพิวเตอร์ Desktop ตัว Figma มี frame ให้เลือกหลายเเบบเลยครับไม่ว่าจะเป็น iPhone, Android MacBook ฯลฯ
โดยผมจะใช้เป็น Desktop ครับ
เมื่อสร้างตัว Frame มาเเล้ว
ทางขวามือในเมนู Design จะมีที่ให้ปรับขนาดของตัว frame อยู่
เราจะใช้เมนู Rectangle ในการสร้างรูปร่างต่างๆในเว็ปไซต์ครับ
เเละสามารถปรับสีต่างๆได้
เราจะมาออกเเบบโดยอ้างอิงจากเว็ปไซต์ต่างๆกันครับ
จากรูปผมจะทำการออกเเบบในส่วนของ Header ครับ มีโลโก้ของเว็ปไซต์เเละ ปุ่ม login ครับ
โดยตัวอักษรเราจะสร้างจากเมนู text กดลากขนาดกล่องของข้อความก็จะสามารถพิมข้อความในกล่องเเล้วครับ
ขนาดของข้อความ สี ฟ้อนต์ต่างๆ ก็มาปรับเเก้ไขเมนูขวามือ คลิกที่ Design ครับ เเล้วปรับตรงเมนูตามรูปครับ
เราสามารถเเก้ไขชื่อรูปทรงต่างๆจากเมนูทางด้านซ้าย เลือกรูปทรงที่ต้องการจะเปลี่ยนชื่อ เพื่อป้องกันความสับสนครับ
เราก็จะสามารถเช็คได้ว่ารูปทรงที่เราเลือกนั้นถ้าจะนำไปเขียนในไฟล์ css จะต้องกำหนดขนาดเท่าไหร่สีอะไรให้เหมือนที่เราออกเเบบจากเมนูขวามือ เเล้วคลิกที่เมนู inspect
ก็จะเเสดงโชว์ ตัว properties ต่างๆ เเละโค้ด css ซึ่งเราสามารถ export ข้อความเป็น css ไปใส่ในไฟล์ css ของเราได้ครับ
การใส่รูปก็ง่ายมากครับเเค่ทำการลากรูปที่เราต้องการลงในตัวงานของเราครับ
เเละนี่ก็คือตัวอย่างการออกเเบบ UX/UI เบื้องต้นใน Figma นะครับ จะเห็นได้ว่า สะดวกเเละง่ายต่อการใช้งานมากเลยครับ
การใช้งาน UX/UI ในสมัยนี้นั้นจริงจังมาก จนมีอาชีพ UX/UI designer เลยครับ
อ้างอิง
https://ichi.pro/th/figma-9-thekhnikh-sakhay-ni-kar-xxkbaeb-websit-60925122405225
https://alchemist.itbangmod.in.th/%E0%B8%A1%E0%B8%B2%E0%B8%94%E0%B8%B5%E0%B9%84%E0%B8%8B%E0%B8%99%E0%B9%8C-prototype-%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2-figma-%E0%B8%81%E0%B8%B1%E0%B8%99%E0%B9%80%E0%B8%96%E0%B8%AD%E0%B8%B0-a36448fef487
https://life.wongnai.com/wongnai-ux-moved-to-figma-fb636a797ef7
การออกเเบบ UX/UI ใน figma เบื้องต้น
Moderator: mindphp, ผู้ดูแลกระดาน
-
- PHP Hero Member
- โพสต์: 152
- ลงทะเบียนเมื่อ: 03/05/2021 10:18 am
-
- Similar Topics
- ตอบกลับ
- แสดง
- โพสต์ล่าสุด
-
- 0 ตอบกลับ
- 822 แสดง
-
โพสต์ล่าสุด โดย pataponnew
25/05/2021 10:09 am
-
- 3 ตอบกลับ
- 2076 แสดง
-
โพสต์ล่าสุด โดย Aoranuch Phupaloy
24/12/2020 5:41 pm
-
- 3 ตอบกลับ
- 2874 แสดง
-
โพสต์ล่าสุด โดย Aoranuch Phupaloy
24/12/2020 5:08 pm
ผู้ใช้งานขณะนี้
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 3