Online Course

UI Design with Figma

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

รายละเอียด

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

.

การออกแบบ 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 ท่านขึ้นไป)

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

เนื้อหาในคอร์ส

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

ผู้สอน

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