ONLINECOURSE.HEADER

UI Design with Figma

ออกแบบ UI ไปจนถึงการทำ Prototype ด้วย Figma

2,990.00
บาท
4.4
6-7 ชั่วโมง
แบบฝึกหัดทุกบทเรียน
เรียนจบรับประกาศนียบัตร
ไม่ต้องมีพื้นฐาน

SECTION_TITLE.INSTRUCTOR

ธนนท์ วงษ์ประยูร (Lead Designer ที่ Ko-fi) | Skooldio Instructor
ธนนท์ วงษ์ประยูร
Lead Designer ที่ Ko-fi

SECTION_TITLE.OVERVIEW

การออกแบบ User Interface (UI Design) สำหรับ Digital Product ในปัจจุบัน ต่างไปจากการออกแบบสิ่งพิมพ์ โปสเตอร์ หรือกราฟิกดีไซน์ในอดีต เพราะจำเป็นต้องออกแบบให้ Responsive เพื่อตอบสนองกับรูปแบบ Device ต่างๆ ที่ User มี ต้องออกแบบโดยคำนึงถึงระบบปฏิบัติการต่างๆ แล้ว การคำนึงถึงการทำงานร่วมกันทั้งในทีมและต่างทีมยังเป็นอะไรที่ไม่ควรมองข้ามเป็นอย่างยิ่ง

เริ่มต้นงานออกแบบของคุณอย่างมืออาชีพ ด้วย Design Tool ที่ร้อนแรงที่สุดแห่งยุคอย่าง Figma โปรแกรมออกแบบ UI ที่สามารถใช้งานได้ฟรีและออกแบบมาเพื่อการทำงานร่วมกันระหว่างทีมอย่างแท้จริง ทำให้คุณสามารถทำงานร่วมกับเพื่อนร่วมทีมผ่านเว็บไซต์ หรือจะติดตั้งโปรแกรมก็ทำได้ไม่ยาก ผ่านคอร์ส Figma ที่อัดเนื้อหาสุดเข้มข้นที่คุณจะได้เรียนตั้งแต่

  • ใช้งานคำสั่งพื้นฐาน และเทคนิคในการใช้งาน Figma
  • วิธีปรับแต่งรูป และสร้าง Icon ด้วย Figma
  • พื้นฐานการออกแบบเบื้องต้น ที่จะทำให้คุณเข้าใจหลักการสร้าง Component ต่างๆ
  • ออกแบบ UI ของ Web และ App ให้รองรับความ Responsive ในแต่ละ Devices
  • ลงมือสร้าง Design system เพื่องานออกแบบที่มีประสิทธิภาพมากยิ่งขึ้น
  • การใช้งาน Plug-in ใน Figma ที่จะทำให้งานออกแบบง่ายกว่าที่เคย
  • การทำ Prototype อย่างง่ายไปจนถึงการใส่ Transition และ Animation ต่างๆ

โดยเนื้อหาในหลักสูตรนี้ เป็นการปรับปรุงเนื้อหาให้คุณสามารถใช้งาน Figma 2022 ได้อย่างถูกต้อง ครบถ้วนมากยิ่งขึ้น!

Figma คืออะไร?

Figma หนึ่งใน Design Tools ที่มาแรงที่สุดแห่งปี โดยมีฟีเจอร์การใช้งานที่หลากหลาย ทั้งด้านงาน Graphic Design และงาน UX/UI Design

อ่านบทความเพิ่มเติมได้ที่นี่

โดยโปรแกรม Figma นี้ สามารถทำได้ตั้งแต่การสร้างงาน Design พื้นฐาน, การปรับแต่งรูป, การออกแบบองค์ประกอบพื้นฐาน หรือ การสร้าง Elements ต่างๆ ที่จะมารวมเป็น Component เพื่อนำมาวางเป็น Layout ในแต่ละหน้าของ UI ไม่ว่าจะเป็นสำหรับ Website หรือ Application

โปรแกรม Figma ยังช่วยให้คุณออกแบบตัว UI Design ให้มีความ Responsive กันในทุกๆ Device ได้อย่างสมบูรณ์ รวมไปถึงฟีเจอร์การทำ Prototype เพื่อให้ User หรือทีมอื่นๆ ทดลองเล่นได้แบบ Real-time นอกจากนี้ Designer ยังสามารถส่งตัว Styling Code ให้ Developer รับไปพัฒนาต่อจากงาน Design ของเราได้แบบไม่ยาก

และที่สำคัญที่สุดคือ Figma เป็นโปรแกรมฟรี! ที่คุณไม่จำเป็นต้องลงโปรแกรมอื่นๆเพิ่ม ทั้งยังให้คุณทำงานได้ผ่านเว็บ และช่วยให้การส่งต่องานระหว่างทีมเป็นไปได้อย่างง่ายดาย และมีประสิทธิภาพ!

ทำไมต้อง Figma?

  • ใช้ได้ทั้งบนระบบ Mac และ Windows
  • ส่งต่อไฟล์กันง่ายแค่แชร์ link เพราะใช้งานบนเว็บ
  • ออกแบบสะดวกและรวดเร็วด้วย Auto Layout พร้อมรองรับ Responsive ตามขนาด Device
  • Plugin เพิ่มประสิทธิภาพการทำงานมากมาย
  • ออกแบบและส่งต่อ Design System ได้ไม่ยาก
  • ทำ Prototype ได้เสมือนจริง และแสดงผลได้ Real-time

สิ่งที่จะได้รับจากคอร์สออนไลน์นี้

  • ใช้งาน Figma ในการออกแบบได้อย่างมีประสิทธิภาพ
  • เข้าใจพื้นฐานการออกแบบ UI
  • ออกแบบ UI สำหรับเว็บหรือแอปได้ด้วยตนเอง
  • ออกแบบรองรับความ Responsive ใน Devices ต่างๆ
  • จัดระเบียบการออกแบบด้วย Design System ในงานออกแบบของตัวเอง
  • ทำ Prototype เว็บหรือแอปของตัวเองได้

คอร์สออนไลน์ UI Design with Figma เหมาะสำหรับ

  • ผู้ที่ต้องการศึกษาการใช้ Figma เพื่อการทำงาน หรือสื่อสารงานกับ UX/UI Designer
  • UX/UI designer ที่อยากเพิ่มประสิทธิภาพงานออกแบบด้วย Design Systems
  • Product Manager/Product Owner ที่ต้องการเข้าใจและแก้ไขงานออกแบบเองได้
  • Graphic Designer ที่สนใจเปลี่ยนสายงานเป็น UX/UI Designer
  • ผู้ใช้งาน Design Tools ต่างๆ ที่กำลังต้องการเปลี่ยนมาเป็น Figma
  • ผู้ที่กำลังสนใจหรือเปลี่ยนสายงานมาเป็น UX/UI Designer

บทความที่เกี่ยวข้อง

หมายเหตุ: โปรแกรมที่ใช้ภายในคอร์ส UI Design with Figma คือ โปรแกรม Figma ใน Version July 2022 ซึ่งหน้าตาโปรแกรมหรือหน้าตา UI อาจมีความแตกต่างไปจากเดิมเนื่องจากการพัฒนา Software ของโปรแกรม แต่หลักการใช้งานและ Concept ต่าง ๆ ยังเหมือนเดิม สามารถเรียนรู้ได้จากคอร์ส UI Design with Figma ได้เลย

SECTION_TITLE.COURSE_OUTLINE

01

Intro to Course

Welcome to Class

What and Why Figma

1:25

Figma Registration

Download Figma Desktop Application

Start Screen and Course Introduction

1:28

Figma Shortcut Key

Exercise Introduction

Get Start with Figma

0:32

Frame

1:06

Grids and Rulers

1:28

Exercise: Frame and Grids

Text

1:26

Install font helper

0:30

Shapes and Radius

3:04

Fill

1:31

Stroke

0:56

Shadow and Effect

1:13

Images

1:08

Masking

1:57

Exercise: Shapes and Image

Alignment and Distribution

1:35

Exercise: Alignment and Distribution

Group, Frame and Constraints

1:52

Exercise: Group, Frame and Constraints

Icon

4:56

Exercise: Icon

Recap

0:21

Intro to Style System

0:52

Color Style

0:54

Exercise: Color Style

Text System

1:19

Exercise: Text Style

Shadow Style

1:25

Exercise: Shadow Style

Grid Style

1:07

Button and Padding

2:12

Plugin - Unsplash and Material Symbols

1:54

How to run plugin

Button with Icon and Space Between

Exercise: Button with Auto Layout

Responsive Card

11:14

Exercise: Responsive Card

Recap

0:24

Intro to Component and Property

1:05

Component

1:35

Exercise: Component

Text Property

1:20

Exercise: Text Property

Instance Swap

2:44

Exercise: Instance Swap

Boolean

1:49

Exercise: Boolean

Variants

6:14

Exercise: Variants

Recap

0:41

Introduction

0:39

Instruction

Solution

22:12

Component based Design

1:26

Introduction

0:41

Course Material

Text

2:45

Color

2:52

Icon

1:54

Tab

2:58

Button

13:04

Card

3:48

Navigation

5:19

Exercise: Design System

Introduction

0:45

Link

2:03

Exercise: Link Wireframes

Fix Position when Scrolling

1:52

Horizontal and Vertical Scroll

1:52

Exercise: Horizontal Scroll

Swapping and State

2:23

Modal

1:25

Loading State

1:27

Smart Animation

Recap

0:30

Share with Team and Handoff to Developer

1:23

Comment

1:02

Version Control

0:42

Share Team Libraries

1:19

Widget

3:28

Export and Save File

0:58

Batch Styler and Similayer

1:37

Google Sheet Sync

1:22

Stark

1:18

Conclusion

0:45

Final Project

SECTION_TITLE.FAQS

Q:

วิธีขอใบเสนอราคาและใบแจ้งหนี้ในนามนิติบุคคล

A:

หากต้องการใบเสนอราคาและใบแจ้งหนี้ในนามนิติบุคคลสามารถส่งรายละเอียดดังนี้

  • คอร์สที่สนใจและจำนวนผู้เรียน
  • ชื่อ-นามสกุล, เบอร์โทรผู้ติดต่อ
  • ชื่อ-ที่อยู่บริษัท, เลขประจำตัวผู้เสียภาษี
  • จำนวนภาษีหัก ณ ที่จ่าย (ถ้ามี)

มาที่ hello@skooldio.com โดยใช้ระยะเวลาดำเนินการไม่เกิน 1 วันทำการ (จันทร์-ศุกร์)

A:

สามารถทำได้ โดยในหน้าคำสั่งซื้อ กดเครื่องหมายถูกในช่อง "ต้องการออกใบกำกับภาษี/ใบเสร็จรับเงิน" จากนั้นเลือก "นิติบุคคล/บริษัท" และคำสั่งซื้อจะมีการหักภาษี ณ ที่จ่าย 3% โดยอัตโนมัติ ในกรณีบริษัทของท่านไม่ใช่ 3% กรุณาส่งรายละเอียดที่ต้องการสั่งซื้อมาที่ hello@skooldio.com

A:

กดเครื่องหมายถูกในช่อง "ต้องการออกใบกำกับภาษี/ใบเสร็จรับเงิน" ในหน้าชำระเงินและเลือกประเภทบุคคลทั่วไปหรือนิติบุคคล และกรอกรายละเอียด

A:

สำหรับคอร์สที่ซื้อในนามบุคคลทั่วไป คอร์สมีอายุตลอดชีพ สำหรับคอร์สที่ซื้อในนามนิติบุคคล สามารถกลับมาเรียนซ้ำได้ภายใน 1 ปี

A:

หลังจากได้รับใบกำกับภาษีแล้ว หากต้องการแก้ไขข้อมูล สามารถทำได้ภายใน 7 วัน นับจากวันที่ได้รับใบกำกับภาษีแบบเต็มรูปทางอีเมล โดยสามารถแก้ไขข้อมูลได้เฉพาะ ชื่อ-นามสกุล เลขประจำตัวผู้เสียภาษีและที่อยู่เท่านั้น จะไม่สามารถแก้ไขข้อมูลคำสั่งซื้อได้

SECTION_TITLE.RELATED_ONLINE_COURSES