แนะนำการใช้งาน ของโปรแกรม Figma

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

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

Aoranuch Phupaloy
PHP Hero Member
PHP Hero Member
Posts: 166
Joined: 07/12/2020 9:33 am

แนะนำการใช้งาน ของโปรแกรม Figma

Post by Aoranuch Phupaloy »

แนะนำการใช้งาน ของโปรแกรม
Figma

เรามาดูกันว่าโปรแกรม Figma ใช้งานยังไง

1. ไปที่ https://www.figma.com/downloads/
F1.JPG
F1.JPG (74.9 KiB) Viewed 232 times
นี่คือหน้าตาของ Figma ในรูปแบบของเว็บนะคะ

2. ทำการสมัครใช้งาน
F2.png
F2.png (79.64 KiB) Viewed 232 times
- กรณีที่เรายังไม่มี Account ต้องกดไปที่ Sing up ก่อน
- กรอกอีเมลและหรัสผ่าน
- ระบบจะส่งข้อความไปยังอีเมลของเราที่นำมากรอก ให้ไปกดยืนยัน
F3.JPG
F3.JPG (67.55 KiB) Viewed 232 times
- ใส่ชื่อ และ ระบุว่าเราทำงานแบบไหน
- ติ๊กตรงช่องสี่เหลี่ยม แล้วกลับไปล็อกอินที่หน้าแรก

3. หลังจาก Login แล้วหน้าตาของโปรแกรมก็จะเป็นปนะมาณนี้นะคะ
F4.JPG
F4.JPG (61.98 KiB) Viewed 232 times
- ชิ้นงานจะบันทึกบน Clound
F5.png
F5.png (97.5 KiB) Viewed 232 times
- ตรงที่วงกลมสีแดงด้านบน คือ การที่เราจะเพิ่มหน้าใหม่
F6.png
F6.png (76.13 KiB) Viewed 232 times
- ปุ่มที่วงกลมสีแดง คือปุ่มแสดงผล
F7.JPG
F7.JPG (74.66 KiB) Viewed 232 times
- การแสดงผลของ Figma เป็นการแสดงผลแบบจำลองโปรแกรม

สรุป
Figma เป็นโปรแกรมออกแบบเว็บไซต์และแอปพลิเคชัน เราสามารถออกแบบรูปทรง ใส่แบบข้อความ ใส่สีใส่พื้นหลังได้ เมื่อออกแบบเสร็จเราสามารถที่จำลองบนรูปแบบของเว็บไซต์หรือแอปพลิเคชันนั้นได้ แต่ไม่สามารถที่จะรันโปรแกรมได้จริงๆ
Duanghathai Termtem
PHP Super Hero Member
PHP Super Hero Member
Posts: 849
Joined: 30/11/2020 10:24 am

Re: แนะนำการใช้งาน ของโปรแกรม Figma

Post by Duanghathai Termtem »

ขาดการแนบลิงค์ในส่วนสรุป
Aoranuch Phupaloy
PHP Hero Member
PHP Hero Member
Posts: 166
Joined: 07/12/2020 9:33 am

Re: แนะนำการใช้งาน ของโปรแกรม Figma

Post by Aoranuch Phupaloy »

แนะนำการใช้งาน ของโปรแกรม
Figma

เรามาดูกันว่าโปรแกรม Figma ใช้งานยังไง

1. ไปที่ https://www.figma.com/downloads/
หน้าแรกหน้าเว็บไซต์กรณีที่ยังไม่ล็อกอิน
หน้าแรกหน้าเว็บไซต์กรณีที่ยังไม่ล็อกอิน
F1.JPG (74.9 KiB) Viewed 182 times
นี่คือหน้าตาของ Figma ในรูปแบบของเว็บนะคะ

2. ทำการสมัครใช้งาน
สมัครใช้งาน
สมัครใช้งาน
F2.png (79.64 KiB) Viewed 182 times
- กรณีที่เรายังไม่มี Account ต้องกดไปที่ Sing up ก่อน
- กรอกอีเมลและหรัสผ่าน
- ระบบจะส่งข้อความไปยังอีเมลของเราที่นำมากรอก ให้ไปกดยืนยัน
ขั้นตอนการยืนยัน
ขั้นตอนการยืนยัน
F3.JPG (67.55 KiB) Viewed 182 times
- ใส่ชื่อ และ ระบุว่าเราทำงานแบบไหน
- ติ๊กตรงช่องสี่เหลี่ยม แล้วกลับไปล็อกอินที่หน้าแรก

3. หลังจาก Login แล้วหน้าตาของโปรแกรมก็จะเป็นปนะมาณนี้นะคะ
หน้าแรกหน้าเว็บไซต์กรณีที่ล็อกอิน
หน้าแรกหน้าเว็บไซต์กรณีที่ล็อกอิน
F4.JPG (61.98 KiB) Viewed 182 times
- ชิ้นงานจะบันทึกบน Clound
แนะนำฟังก์ชันการบันทึกข้อมูล
แนะนำฟังก์ชันการบันทึกข้อมูล
F5.png (97.5 KiB) Viewed 182 times
- ตรงที่วงกลมสีแดงด้านบน คือ การที่เราจะเพิ่มหน้าใหม่
วิธีการแสดงผล
วิธีการแสดงผล
F6.png (76.13 KiB) Viewed 182 times
- ปุ่มที่วงกลมสีแดง คือปุ่มแสดงผล
การแสดงผลบนอุปกรณ์จำลอง
การแสดงผลบนอุปกรณ์จำลอง
F7.JPG (74.66 KiB) Viewed 182 times
- การแสดงผลของ Figma เป็นการแสดงผลแบบจำลองโปรแกรม

สรุป
Figma เป็นโปรแกรมออกแบบเว็บไซต์และแอปพลิเคชัน เราสามารถออกแบบรูปทรง ใส่แบบข้อความ ใส่สีใส่พื้นหลังได้ เมื่อออกแบบเสร็จเราสามารถที่จำลองบนรูปแบบของเว็บไซต์หรือแอปพลิเคชันนั้นได้ แต่ไม่สามารถที่จะรันโปรแกรมได้จริงๆ
Last edited by Aoranuch Phupaloy on 22/12/2020 3:48 pm, edited 1 time in total.
Aoranuch Phupaloy
PHP Hero Member
PHP Hero Member
Posts: 166
Joined: 07/12/2020 9:33 am

Re: แนะนำการใช้งาน ของโปรแกรม Figma

Post by Aoranuch Phupaloy »

Duanghathai Termtem wrote: 14/12/2020 12:00 pm ขาดการแนบลิงค์ในส่วนสรุป
แก้ไขแล้ว
- แนบลิงค์ในส่วนสรุป
Duanghathai Termtem
PHP Super Hero Member
PHP Super Hero Member
Posts: 849
Joined: 30/11/2020 10:24 am

Re: แนะนำการใช้งาน ของโปรแกรม Figma

Post by Duanghathai Termtem »

Aoranuch Phupaloy wrote: 21/12/2020 3:13 pm
Duanghathai Termtem wrote: 14/12/2020 12:00 pm ขาดการแนบลิงค์ในส่วนสรุป
แก้ไขแล้ว
- แนบลิงค์ในส่วนสรุป
ขาดส่วนเกริ่นและลิงค์เชื่อม3ลิงค์
ไม่ควรเชื่อมลิงค์ซ้ำในบทความเดียวกัน
มีบางลิงค์ ไม่ได้นำไปสู่หน้าบทคามที่้องการเชื่อม
Aoranuch Phupaloy
PHP Hero Member
PHP Hero Member
Posts: 166
Joined: 07/12/2020 9:33 am

Re: การใช้งานเบื้องต้นของโปรแกรมออกแบบหน้าจอ Figma

Post by Aoranuch Phupaloy »

การใช้งานเบื้องต้นของโปรแกรมออกแบบหน้าจอ Figma
Figma ออกแบบมาเพื่อช่วยงาน Design ตั้งแต่ก่อนเริ่มต้นลงมือออกแบบรวมถึงขั้นตอนทดสอบ พูดง่ายๆก็คือใช้งานได้ตั้งแต่วาด wireframe ไปจน prototype และ test กับ user ได้เลยโดยแบ่ง Feature การทำงานเป็น 4 ด้านดังนี้
- Collaboration Features
- Design Features
- Prototyping Features
- Design systems features

เรามาดูกันว่าโปรแกรม Figma ใช้งานยังไง
1. ไปที่ https://www.figma.com/downloads/
หน้าแรกของเว็บไซต์กรณีที่ยังไม่ล็อกอิน
หน้าแรกของเว็บไซต์กรณีที่ยังไม่ล็อกอิน
F1.JPG (74.9 KiB) Viewed 167 times
นี่คือหน้าตาของ Figma ในรูปแบบของเว็บนะคะ

2. ทำการสมัครใช้งาน
สมัครใช้งาน
สมัครใช้งาน
F2.png (79.63 KiB) Viewed 167 times
- กรณีที่เรายังไม่มี Account ต้องกดไปที่ Sing up ก่อน
- กรอกอีเมลและหรัสผ่าน
- ระบบจะส่งข้อความไปยังอีเมลของเราที่นำมากรอก ให้ไปกดยืนยัน
ขั้นตอนการยืนยัน
ขั้นตอนการยืนยัน
F3.JPG (67.55 KiB) Viewed 167 times
- ใส่ชื่อ และ ระบุว่าเราทำงานแบบไหน
- ติ๊กตรงช่องสี่เหลี่ยม แล้วกลับไปล็อกอินที่หน้าแรก

3. หลังจาก Login แล้วหน้าตาของโปรแกรมก็จะเป็นปนะมาณนี้นะคะ
หน้าแรกของเว็บไซต์กรณีที่ล็อกอิน
หน้าแรกของเว็บไซต์กรณีที่ล็อกอิน
F4.JPG (61.98 KiB) Viewed 167 times
- ชิ้นงานจะบันทึกบน Clound
แนะนำฟังก์ชันบันทึกข้อมูล
แนะนำฟังก์ชันบันทึกข้อมูล
F5.png (97.65 KiB) Viewed 167 times
- ตรงที่วงกลมสีเขียวด้านบน คือ การที่เราจะเพิ่มหน้าใหม่
วิธีแสดงผล
วิธีแสดงผล
F6.png (76.28 KiB) Viewed 167 times
- ปุ่มที่วงกลมสีเขียว คือปุ่มแสดงผล
การแสดงผลบนอุปกรณ์จำลอง
การแสดงผลบนอุปกรณ์จำลอง
F7.JPG (74.66 KiB) Viewed 167 times
- การแสดงผลของ Figma เป็นการแสดงผลแบบจำลองโปรแกรม

Figma เป็นโปรแกรมออกแบบเว็บไซต์และแอปพลิเคชันเราสามารถออกแบบรูปทรง, ใส่แบบข้อความ, ใส่สีใส่พื้นหลังได้ UX/UI Design ทำได้ตั้งแต่ก่อนเริ่มต้นออกแบบไปจนถึงทำ prototype เลยเมื่อออกแบบเสร็จเราสามารถที่จำลองบนรูปแบบของเว็บไซต์หรือแอปพลิเคชันนั้นได้แต่ไม่สามารถที่จะรันโปรแกรมได้จริงๆ
Last edited by Aoranuch Phupaloy on 25/12/2020 3:09 pm, edited 2 times in total.
Aoranuch Phupaloy
PHP Hero Member
PHP Hero Member
Posts: 166
Joined: 07/12/2020 9:33 am

Re: แนะนำการใช้งาน ของโปรแกรม Figma

Post by Aoranuch Phupaloy »

Duanghathai Termtem wrote: 23/12/2020 12:32 pm
Aoranuch Phupaloy wrote: 21/12/2020 3:13 pm
Duanghathai Termtem wrote: 14/12/2020 12:00 pm ขาดการแนบลิงค์ในส่วนสรุป
แก้ไขแล้ว
- แนบลิงค์ในส่วนสรุป
ขาดส่วนเกริ่นและลิงค์เชื่อม3ลิงค์
ไม่ควรเชื่อมลิงค์ซ้ำในบทความเดียวกัน
มีบางลิงค์ ไม่ได้นำไปสู่หน้าบทคามที่้องการเชื่อม
แก้ไขแล้วค่ะ
Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “Graphic design”

Who is online

Users browsing this forum: No registered users and 6 guests