ONLINECOURSE.HEADER

UI Design with Figma

ออกแบบ UI ไปจนถึงการทำ Prototype ด้วย Figma
2,990.00
บาท
6-8 ชั่วโมง
2 Projects
ไม่ต้องมีพื้นฐาน
เรียนจบรับประกาศนียบัตร

SECTION_TITLE.OVERVIEW

โปรโมชั่นพิเศษ

.

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

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

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

Figma คืออะไร?

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

.

โดยโปรแกรม 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 เว็บหรือแอปของตัวเองได้

คอร์สออนไลน์นี้เหมาะสำหรับ

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

สอนโดย

คุณธนนท์ วงษ์ประยูร

  • Lead Designer ที่ Ko-fi
  • รางวัลชนะเลิศ Tech Jam 2019 และได้ดูงานที่ Silicon Valley, USA
  • เข้ารอบสุดท้าย Line Hackathon 2019
  • อดีต UX/UI Designer ที่ Skooldio

รายละเอียดเพิ่มเติม

ระหว่างเรียนคอร์สนี้ ผู้เรียนจะได้เรียนรู้ผ่านวิดีโอกว่า พร้อมได้ลงมือทำแบบฝึกหัดและโปรเจคจริง

  • ผู้เรียนจะได้รับประกาศนียบัตร (Certificate of Completion) เมื่อเรียนจบคอร์ส
  • สอบถามทีมงานผู้เชี่ยวชาญได้ตลอดการเรียน

สอบถามข้อมูลเพิ่มเติม

  • Facebook Skooldio
  • สำหรับท่านที่ต้องการสมัครในนามบริษัท กรุณาติดต่อ hello@skooldio.com (มีส่วนลดเมื่อสมัคร 5 ท่านขึ้นไป)

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

SECTION_TITLE.COURSE_OUTLINE

01

Introduction

Welcome to class

0:32

Why Figma

2:09

Component based design

3:19

Before we start

Get Started with Figma

1:43

Course Instruction

Exercise: Create your first frame

Grids, Rulers

2:33

Exercise: Grids, Rulers

Shape

5:59

Exercise: Shapes

Icons

4:07

Exercise: Icons

Font

3:11

Install font helper

0:35

Install font helper

Images

2:23

Manipulating Images in Figma

Alignment/ Distribution

3:11

Exercise: Alignment/ Distribution

Recap

0:21

Color Style

8:00

Exercise: Color Style

Text Style

7:57

Exercise: Text Style

Shadow Style

2:54

Exercise: Shadow Style

Recap

0:23

Auto layout (I)

2:07

Frame and Group

Nested icon

5:54

Auto layout (II)

3:18

Exercise: Auto layout

Card responsive

5:28

Exercise: Card component

Component

2:12

Recap

0:40

Project overview

0:54

Project: Learning by Doing

Solution

32:57

Design Systems

0:59

Colors

6:42

Text

6:05

Shadow

3:39

Icons

8:21

Button

7:20

Card

11:28

Navigation

6:26

Inputs

2:51

Exercise Implement

Implement

12:52

Prototype

4:32

Fix position when scrolling

1:06

Horizontal scroll

3:35

Plugin - Unsplash

2:15

Plugin - Google Sheet Sync

4:10

Exercise: Link wireframes

Exercise: Horizontal scroll

Component link

7:35

Pop up UI

2:39

Loading stage

2:44

Transition

5:56

Smart Animation

8:26

Recap

0:34

Comment

1:03

Version control

1:00

Hand off

0:50

Share team library

1:23

Export file

0:30

Conclusion

0:48

Final Project

SECTION_TITLE.INSTRUCTOR

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