💻
JWC13 Learning Resources
  • Home Page
  • 💻Programming Major
    • Learning Agenda
    • Learning Scope
    • 🥼Self-learning Project
    • Website Development Fundamental
      • Semantic HTML 💎
      • CSS 💎
        • CSS Fundamental
        • Flexbox
        • Grid
        • Responsive
        • CSS Frameworks
          • Bootstrap
          • TailwindCSS
      • Javascript 💎
        • Script tag
        • Events
        • DOM
        • JQuery ⭐️
        • Hoisting & Scoping
        • Callbacks
        • Arrays
        • Objects
        • Promise
        • Async
        • Error Handling
    • Intermediate Website Development
      • HTTP Protocol
      • Client Server Architecture
        • Web Server
        • REST API
        • Server-Side Rendering
          • PHP
          • Express & EJS
      • Firebase⭐️
      • Version Control💎
      • Hosting Website
        • Firebase Hosting
        • Netlify
        • Vercel
    • Fullstack Development for Software Engineers
      • Typescript
      • Node.js
      • Rendering Patterns
      • Frameworks & UI Libraries
        • React
        • Next.js
        • SvelteKit
        • Laravel
      • Build Tools
      • Backend Development
        • API Architecture
        • CRUD
        • Cookies & Authentication
        • Containerize
        • Database
          • Object Relational Mapping
          • MongoDB
      • Object Oriented Programming
      • Design Patterns
    • Hands-On Project
      • Next.js Fullstack
      • SvelteKit Fullstack
      • Laravel Fullstack
  • 🎨Design Major
    • 🍄Pre-camp Activity Summary
    • 👀Intro to Figma 101 class
Powered by GitBook
On this page
  • สรุปเนื้อหาการเรียน
  • Link YouTube 🔗 https://youtu.be/KRB1MhtJWvc?si=neGkqtm3s_5GxSy3
  • Intro to Figma 101 class เนื้อหาโดยสรุป

Was this helpful?

  1. Design Major

Intro to Figma 101 class

คลิปความยาว 55:36 นาที

PreviousPre-camp Activity Summary

Last updated 9 months ago

Was this helpful?

สรุปเนื้อหาการเรียน

  • Figma tools & interface แต่ละส่วนของ Figma ประกอบไปด้วยอะไรบ้าง

  • เครื่องมือที่ใช้ในการออกแบบ move / frame / shape / text

  • Workshop challenge : craft button

Intro to Figma 101 class เนื้อหาโดยสรุป

กดดูตามหัวข้อได้น้า ไม่ต้องดูหมด เอาเฉพาะเนื้อหาที่สนใจ

Beginner Level ระดับเริ่มต้น

Link YouTube 🔗

introduction พูดคุยก่อนเริ่มเรียน

Figma Interface อธิบายส่วนต่าง ๆ ของ Figma

Panel Page & Layer อธิบายหน้าต่างซ้ายมือ

Panel Properties อธิบายหน้าต่างด้านขวามือ

Tools อธิบายเครื่องมือออกแบบคร่าวๆ

แนะนำเครื่องมือ Call in Figma

อธิบายการใช้งาน Move/Hand/Scale Tools

Frame tools เครื่องมือที่อยากให้ใช้งานอย่างเข้าใจ *แนะนำ*

เปรียบเทียบการใช้งาน Frame VS Group

ยกตัวอย่างความแตกต่างระหว่าง Frame VS Group

แต่ Shape ก็มีหน้าที่ของมันอยู่นะ By P'Grape

Shape tools ก็มีจุดประสงค์การใช้งาน

Section tools ความเหมือนที่แตกต่างจาก Frame

Slice tools เครื่องมือช่วยแบ่งรูป

แนะนำเครื่องมือ Shape tools แบบคร่าวๆ

Pen tools การใช้งาน

Text tools เบื้องต้น

Comment Feature สำหรับการ communication ในไฟล์

Plugin tools Novice Level ระดับมือใหม่

คำแนะนำในการขึ้น wireframe ให้

Workshop Challenge

เช็คชื่อก่อนทำ Workshop

แจกโจทย์ทำปุ่ม

เริ่มทำ Challenge

[เสริมมุมมอง Dev] ในความต่างของ Frame VS Group

Trick ใช้ไม้บรรทัดจาก P'Grape

รีวิวงานของน้องแต่ละกลุ่ม

ส่งท้าย Session

https://youtu.be/KRB1MhtJWvc?si=neGkqtm3s_5GxSy3
00:00
02:30
03:17
06:27
08:26
09:16
10:00
15:33
16:34
19:25
21:02
22:00
23:09
24:13
25:38
27:20
27:48
29:09
30:35
31:48
36:29
36:43
39:29
40:16
40:52
42:39
43:55
53:59
🎨
👀
Page cover image