การออกเเบบ UX/UI ใน figma เบื้องต้น

Graphic design ความรู้สำหรับ การออกแบบ ออกแบบเว็บ Phothoshop ตัดต่อวีดีโอ

Moderator: mindphp, ผู้ดูแลกระดาน

pataponnew
PHP Hero Member
PHP Hero Member
โพสต์: 152
ลงทะเบียนเมื่อ: 03/05/2021 10:18 am

การออกเเบบ UX/UI ใน figma เบื้องต้น

โพสต์ที่ยังไม่ได้อ่าน โดย pataponnew »

Figma เป็นโปรเเกรมสร้างตัว Prototype สำหรับออกเเบบหน้าUI/UX นั่นก็คือในส่วนของหน้าเเสดงผลของเว็ปไซต์/เเอปพลิเคชั่น ครับ
โดยในกระทู้นี้จะมาเเนะนำการออกเเบบ UX/UI เบื้องต้นใน figma กันครับ
ก่อนอื่น ทำการเข้าเว็ปไซต์ www.figma.com เเละล็อคอินให้เรียบร้อยครับ
เมื่อเข้ามาหน้ารวมโปรเจคของเราให้คลิกที่ New เเละคลิกที่ Design file ก็จะได้โปรเจคอันใหม่ที่เราจะใช้ครับ
หน้าเพจรวมโปรเจค
หน้าเพจรวมโปรเจค
bandicam 2021-05-25 10-33-02-135.jpg (52.64 KiB) Viewed 905 times
เริ่มต้นสร้างโปรเจค
เริ่มต้นสร้างโปรเจค
bandicam 2021-05-25 10-45-18-603.jpg (16.16 KiB) Viewed 905 times
ก็จะเข้ามายังหน้า draft งานที่เรากำลังทำ
หน้าต่าง draft งาน Figma
หน้าต่าง draft งาน Figma
bandicam 2021-05-25 10-54-28-051.jpg (16.92 KiB) Viewed 905 times
ให้ทำการคลิกที่เมนู frame จะเป็นการออกเเบบตัวหน้าจอเเสดงผลครับ
คลิกที่เมนู frame
คลิกที่เมนู frame
bandicam 2021-05-25 10-59-29-761.jpg (9.14 KiB) Viewed 905 times
จะมีให้เลือก template ของตัวหน้าจอต่างๆครับ ตอนนี้เราจะสร้างขนาดเฟรมให้เหมาะสมกับหน้าจอคอมพิวเตอร์ Desktop ตัว Figma มี frame ให้เลือกหลายเเบบเลยครับไม่ว่าจะเป็น iPhone, Android MacBook ฯลฯ
template ของตัวหน้าจอต่างๆ
template ของตัวหน้าจอต่างๆ
bandicam 2021-05-25 11-56-18-188.jpg (26.55 KiB) Viewed 905 times
โดยผมจะใช้เป็น Desktop ครับ
เมื่อสร้างตัว Frame มาเเล้ว
ทางขวามือในเมนู Design จะมีที่ให้ปรับขนาดของตัว frame อยู่
การเริ่มสร้างตัว Frame
การเริ่มสร้างตัว Frame
bandicam 2021-05-25 12-04-57-295.jpg (14.25 KiB) Viewed 905 times
เราจะใช้เมนู Rectangle ในการสร้างรูปร่างต่างๆในเว็ปไซต์ครับ
เมนู Rectangle
เมนู Rectangle
bandicam 2021-05-25 12-16-30-846.jpg (22.71 KiB) Viewed 905 times
เเละสามารถปรับสีต่างๆได้
ปรับสีต่างๆในส่วนของรูปทรง
ปรับสีต่างๆในส่วนของรูปทรง
bandicam 2021-05-25 12-18-34-074.jpg (30.95 KiB) Viewed 905 times
เราจะมาออกเเบบโดยอ้างอิงจากเว็ปไซต์ต่างๆกันครับ
เริ่มต้นออกเเบบเว็ปไซต์
เริ่มต้นออกเเบบเว็ปไซต์
bandicam 2021-05-25 12-30-04-876.jpg (17.01 KiB) Viewed 905 times
จากรูปผมจะทำการออกเเบบในส่วนของ Header ครับ มีโลโก้ของเว็ปไซต์เเละ ปุ่ม login ครับ
โดยตัวอักษรเราจะสร้างจากเมนู text กดลากขนาดกล่องของข้อความก็จะสามารถพิมข้อความในกล่องเเล้วครับ
การเพิ่ม Text
การเพิ่ม Text
bandicam 2021-05-25 12-34-30-121.jpg (12.51 KiB) Viewed 905 times
ขนาดของข้อความ สี ฟ้อนต์ต่างๆ ก็มาปรับเเก้ไขเมนูขวามือ คลิกที่ Design ครับ เเล้วปรับตรงเมนูตามรูปครับ
การปรับขนาดของข้อความ สี ฟ้อนต์ต่างๆ
การปรับขนาดของข้อความ สี ฟ้อนต์ต่างๆ
bandicam 2021-05-25 12-36-52-554.jpg (10.43 KiB) Viewed 905 times
เราสามารถเเก้ไขชื่อรูปทรงต่างๆจากเมนูทางด้านซ้าย เลือกรูปทรงที่ต้องการจะเปลี่ยนชื่อ เพื่อป้องกันความสับสนครับ
การเเก้ไขชื่อรูปทรงต่างๆ
การเเก้ไขชื่อรูปทรงต่างๆ
bandicam 2021-05-25 12-31-14-225.jpg (27.61 KiB) Viewed 905 times
เราก็จะสามารถเช็คได้ว่ารูปทรงที่เราเลือกนั้นถ้าจะนำไปเขียนในไฟล์ css จะต้องกำหนดขนาดเท่าไหร่สีอะไรให้เหมือนที่เราออกเเบบจากเมนูขวามือ เเล้วคลิกที่เมนู inspect
การเช็ค CSS รูปทรงที่เลือก
การเช็ค CSS รูปทรงที่เลือก
bandicam 2021-05-25 12-43-00-773.jpg (32.1 KiB) Viewed 905 times
ก็จะเเสดงโชว์ ตัว properties ต่างๆ เเละโค้ด css ซึ่งเราสามารถ export ข้อความเป็น css ไปใส่ในไฟล์ css ของเราได้ครับ
การใส่รูปก็ง่ายมากครับเเค่ทำการลากรูปที่เราต้องการลงในตัวงานของเราครับ
ตัวงาน
ตัวงาน
bandicam 2021-05-25 12-47-35-890.jpg (37.74 KiB) Viewed 905 times
เเละนี่ก็คือตัวอย่างการออกเเบบ 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
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 63