ONLINECOURSE.HEADER

UI Design with Figma

ออกแบบ UI ไปจนถึงการทำ Prototype ด้วย Figma
2,990.00
บาท
4.7
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

Before We Start

Course Instruction

Exercise: Create Your First Frame

Grids and Rulers

2:33

Exercise: Grids and Rulers

Shapes

5:59

Exercise: Shapes

Icons

4:07

Exercise: Icons

Fonts

3:11

Install Font Helper

0:35

Install Font Helper

Images

2:23

Manipulating Images in Figma

Alignments and Distributions

3:11

Exercise: Alignments and Distributions

Recap

0:21

Color Styles

8:00

Exercise: Color Styles

Text Styles

7:57

Exercise: Text Styles

Shadow Styles

2:54

Exercise: Shadow Styles

Recap

0:23

Frames and Groups

Nested Icons

5:54

Auto Layout (II)

3:18

Exercise: Auto Layout

Card Responsive

5:28

Exercise: Card Components

Components

2:12

Recap

0:40

Project Overview

0:54

Project: Learning by Doing

Solution

32:57

Colors

6:42

Texts

6:05

Shadows

3:39

Icons

8:21

Buttons

7:20

Cards

11:28

Navigations

6:26

Inputs

2:51

Exercise: Design Systems

Solution

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 Stages

2:44

Transitions

5:56

Smart Animations

8:26

Recap

0:34

Comments

1:03

Version Control

1:00

Hand Off

0:50

Share Team Libraries

1:23

Export Files

0:30

Conclusion

0:48

Final Project

SECTION_TITLE.INSTRUCTOR

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