Design System & Design Tokens - Figma ใครว่าง่าย ?

🔥 Design System & Design Tokens - UI DAY 3 รุ่น 49

.

หัวข้อที่หลายคนคิดว่า “น่าจะไม่ยาก” แค่กำหนดค่าสี กำหนดฟอนต์

.

จนกระทั่งได้เรียนจริง 555 😅

.

เพราะนี่ไม่ใช่แค่การทำ UI ให้สวย

แต่คือการคิดระบบให้ทีมใช้ต่อได้จริง

.

ตั้งแต่ Component, Variant, Auto Layout, Responsive, การตั้งชื่อ Color, Typo, Style ไปจนถึง Token ที่ช่วยให้ Design เชื่อมกับ Development ได้ดีขึ้น

.

เนื้อหาอัดแน่นแบบจัดเต็ม

ครอบคลุมตั้งแต่พื้นฐาน ไปจนถึงระดับ Advance

.

🥹 ไม่เชื่อถามผู้เรียนได้ว่า…

“แน่นแค่ไหน” 555 🤣🤣🤣

.

เพราะการเป็น UX/UI Designer ที่ดี

ไม่ใช่แค่ทำหน้าจอสวย

แต่ต้องออกแบบระบบที่สเกลได้ด้วย

.

* ทุกคนเก่งมากครับ ที่อยู่ด้วยกันตั้งแต่เช้ายันเย็น สมองไหลกันแน่นอน

* อย่าลืมทบทวนย้อนหลังกันนะครับ

* ฝาก Pitching Project x AI กันด้วยนะครับ แล้วพบกัน Pitching Day 4 เย้ ~

.

เว็บไซต์รวมแหล่งข้อมูล UXUI ของชาว UXUI STUDIO

https://uxui-studio.com/

.

👉 สำรองที่นั่ง/สอบถามข้อมูลเพิ่มเติม

FB PAGE : https://m.me/uxuistudio9

.

#uxuistudio #uxdesign #uidesign #graphicdesign #uxui #uxuiworkshop #uxworkshop #uiworkshop

#เพราะเราเข้าใจว่ามือใหม่ต้องการอะไร

5/10 แก้ไขเป็น

... อ่านเพิ่มเติมจากประสบการณ์ตรงที่ได้เข้าร่วมเวิร์กช็อปเกี่ยวกับ Design System และ Design Tokens ใน Figma พบว่าหลายคนมักคิดว่าการสร้างระบบดีไซน์นั้นง่ายเพียงแค่กำหนดสีและฟอนต์เท่านั้น แต่อันที่จริงแล้วมันเป็นเรื่องลึกซึ้งที่ต้องทำความเข้าใจองค์ประกอบหลายส่วน เช่น การจัดการ Component ที่ทำให้สามารถนำกลับมาใช้ซ้ำได้, Variant ที่ช่วยสร้างความยืดหยุ่นในการออกแบบองค์ประกอบ UI, การใช้ Auto Layout เพื่อการจัดวางที่อัตโนมัติและตอบสนองต่อการเปลี่ยนขนาดของหน้าจอ รวมถึงการตั้งชื่อตัวแปรสี (Color Tokens) และตัวอักษร (Typography Tokens) ซึ่งมีผลต่อการสื่อสารออกแบบและการทำงานร่วมกับทีมพัฒนา การเรียนรู้เรื่อง Design Tokens ยังช่วยให้การเชื่อมต่อระหว่างดีไซน์และการพัฒนาระบบเป็นไปอย่างราบรื่น เพราะ Tokens จะทำหน้าที่เป็นรหัสกลางที่สื่อสารค่าสี ขนาด และรูปแบบต่างๆ ให้กับโค้ดโดยตรง เมื่อมีการเปลี่ยนแปลงรายละเอียดใน Design Token ก็จะสะท้อนในทั้งดีไซน์และโค้ดทันที ช่วยลดความผิดพลาดและเพิ่มประสิทธิภาพในการทำงานร่วมกัน ตัวเวิร์กช็อปที่เข้าร่วมยังรวมถึงการสอนตั้งชื่อสไตล์สีและฟอนต์อย่างเป็นระบบ ซึ่งช่วยให้ทีมสามารถเข้าใจและนำไปใช้ได้อย่างถูกต้อง นอกจากนี้ยังมีการฝึกฝนผ่านโปรเจกต์จริง ทำให้ผู้เรียนเข้าใจและสามารถนำความรู้ไปสร้างพอร์ตโฟลิโอได้จริง เหมาะมากสำหรับมือใหม่ที่ต้องการเริ่มต้นในสายงาน UX/UI Designer สิ่งสำคัญที่ได้จากประสบการณ์นี้คือความเข้าใจว่า Design System ไม่ใช่แค่เรื่องความสวยงามของ UI แต่คือการวางระบบเพื่อรองรับการสเกลงานในอนาคต การสร้างความสม่ำเสมอและการบำรุงรักษาที่ง่ายสำหรับทีมออกแบบและพัฒนา ดังนั้นใครที่คิดว่าเรื่องนี้ง่าย ควรเปิดใจให้กว้างและเรียนรู้ในเชิงลึก เพราะมันจะเป็นกุญแจสำคัญที่จะช่วยให้คุณเป็น UX/UI Designer ที่ไม่เพียงแค่สร้างผลงานสวยงามแต่สามารถทำงานร่วมกับทีมได้อย่างมืออาชีพจริงๆ

โพสต์ที่เกี่ยวข้อง

สายทำสไลด์ถูกใจสิ่งนี้ แค่พิมพ์บอก ChatGPT ก็เจน Figma Slides
สายทำสไลด์ถูกใจสิ่งนี้ แค่พิมพ์บอก ChatGPT ก็เจน Figma Slides สวยๆ ให้เลย ไปลองเล่นกันดูนะ #peesamac #Figma #ChatGPT #FigmaBuzz #FigmaSlides #ทริคไอที #ออกแบบ
Peesamac

Peesamac

ถูกใจ 29 ครั้ง

ภาพแสดงการประชุมออนไลน์หรือคลาสเรียน UXUI ผ่านวิดีโอคอล ผู้สอนกำลังบรรยายเรื่อง Design System และ Design Tokens โดยมีผู้เข้าร่วมหลายคนปรากฏเป็นภาพโปรไฟล์และวิดีโอที่หลากหลาย เช่น รูปบุคคล, สัตว์เลี้ยง, และตัวการ์ตูน
UXUI - Design System & Design Tokens !!
📍 บรรยากาศ UI DAY 3 ของ UXUI รุ่น 47 . เนื้อหาวันนี้ จัดเต็ม เรื่อง Design System & Design Tokens กันแบบจุก ๆ . ไม่ว่าจะเป็น auto layout, variable, style, component, variant และอื่น ๆ อีกมากมาย 🤣 . พร้อมทั้งเทคนิคต่าง ๆ ที่ช่วยให้คุณประหยัดเวลาในการศึกษาเองได้อย่าง "มหาศาล" .
UXUI STUDIO

UXUI STUDIO

ถูกใจ 0 ครั้ง

UXUI - Design system / Design token
✅ Design System / Design Token . การจัดการพื้นฐานให้ถูกต้อง คือจุดเริ่มต้นของ Design System ที่ “ใช้ได้จริง” . ตั้งแต่การกำหนด Colors, Typography, Shadow ไปจนถึงการตั้งชื่อ (String) และกำหนดค่า (Value) ให้เป็นมาตรฐานเดียวกัน . จากนั้นเชื่อมทุกอย่างเข้าด้วยกันด้วย Variables, Styles, Components
UXUI STUDIO

UXUI STUDIO

ถูกใจ 0 ครั้ง

คลิ๊กเดียวก็อปดีไซน์เข้า Figma ได้เลย
UI.Live รวมทุกอย่างไว้ให้ — template, component, icon, illustration, mockup ทั้งเอาไว้หาแรงบันดาลใจ หรือก็อปมาแก้ไขใช้จริงก็ได้ 🔥 #uxui #uxuidesigner #uxuitools #productdesign #uidesign
Nashavibes

Nashavibes

ถูกใจ 302 ครั้ง

Figma MCP X Claude - Part 2
🤖✨ ทั้งหมดนี้สร้างด้วย Figma MCP x Claude AI [Part 2] 🤩 . แอดมินลอง POC ใช้ MCP สั่งให้ Claude สร้าง Design System มาให้ 2 แบบ . 👉 1. แบบ Document บน Figma เอาไว้จัดโครงสร้าง Design System ให้ทีมเห็นภาพรวม อ่าน guideline และ review งานร่วมกันได้ง่าย . 👉 2. แบบ Web Page สำหรับไว้ Deliver งานใ
UXUI STUDIO

UXUI STUDIO

ถูกใจ 0 ครั้ง

ภาพแสดงฟีเจอร์ Contrast Checker ใหม่ใน Figma ซึ่งอยู่ใน Color Picker โดยมีการตรวจสอบอัตราส่วนคอนทราสต์ของข้อความ 'WCAG' บนพื้นหลังสีแดง และแสดงผลว่าผ่านเกณฑ์ AA พร้อมตัวเลือกหมวดหมู่และระดับการเข้าถึง
ฟีเจอร์ใหม่ใน Figma ที่ช่วยให้การออกแบบ ไม่ต้องเดาสีอีกต่อไป !
#New 🎉 ฟีเจอร์ใหม่ใน Figma ที่ช่วยให้การออกแบบ ไม่ต้องเดาสีอีกต่อไป ! . Contrast Checker (WCAG) ใน Color Picker จะช่วยคุณเช็กว่า "สีตัวหนังสือกับพื้นหลัง" ผ่านมาตรฐานการเข้าถึง (WCAG) หรือยัง ? . หมดปัญหา "สีจม อ่านไม่ออก UX พัง!" ไปได้เลย 🎯 . 👉 ลองเข้าไป explore ได้ที่นี
UXUI STUDIO

UXUI STUDIO

ถูกใจ 0 ครั้ง

ภาพแสดงหน้าจอ ChatGPT ที่กำลังสนทนาเพื่อสร้างสไลด์ Figma โดยมีข้อความว่า "HOW TO ทำ slide ไวขึ้น 50%" และ "ChatGPT เรียกแอป Figma มาทำ Slides ได้นะคะ" พร้อมไอคอนหลอดไฟ
ภาพแสดงหน้าจอ ChatGPT ที่มีหน้าต่างพรีวิว Figma Slides ปรากฏขึ้นมา พร้อมข้อความว่า "เรียก FIGMA ขึ้นมา" และ "หน้าต่างน้อยอยู่ใน ChatGPT ค่ะ" โดยมีตัวการ์ตูนสีเหลืองกำลังชูหลอดไฟ
ภาพหัวข้อ "ทำสไลด์ไวขึ้น Figma + ChatGPT" และส่วนที่อธิบายความเข้าใจผิด ความจริง และข้อจำกัดของ AI ในการสร้างสไลด์ พร้อมข้อความว่า "สไลด์หน้าตาแบบนี้"
รู้ยัง? ตอนนี้เรียก Figma มาทำ Slides ได้ตรงจาก ChatGPT ค่ะ
#รวมเรื่องไอที [📌 แชร์ทริค ChatGPT x Figma : How to ทำ presentationไวขึ้น 50%] ก่อนหน้านี้เวลาอยากทำสไลด์ หลายคน (รวมถึงเรา) จะใช้ ChatGPT → Canva in-app → แต่งต่อใน Canva หรือไปทำใน Canva เลยโดยเอาโครงจาก ChatGPT ตอนนี้ รู้ยังคะ Figma ก็ทำแบบเดียวกันได้แล้ว และเป็น Figma Slides เปิดขึ้นมาให้
Sugarcane

Sugarcane

ถูกใจ 1 ครั้ง

graphic design ฟรี มีเครื่องมืออะไรบ้าง
เพื่อนๆ คนไหนที่กำลังมองหาเครื่องมือออกแบบกราฟิกฟรีๆ ใช้ง่าย ไม่ต้องดาวน์โหลด ลองดู 3 ตัวนี้ได้เลย! Canva (แคนวา) เป็นแพลตฟอร์มที่ใช้ง่ายมากๆ สำหรับผู้เริ่มต้น มีเทมเพลตสำเร็จรูปให้เลือกใช้หลายพันแบบ สำหรับโซเชียลมีเดีย, การนำเสนอ, โปสเตอร์ และอื่นๆ อีกมากมาย พร้อมทั้งมีคลังรูปภาพ, ไอคอน และฟอน
Nine9Tech

Nine9Tech

ถูกใจ 2 ครั้ง

Figma MCP X Claude AI
ทั้งหมดนี้สร้างด้วย Figma MCP x Claude AI 🤖✨ . จากที่ hype กันมาก แอดมินเพิ่งมีเวลา 😅 วันนี้มาลอง POC แล้ว “น่าสนใจมาก” โดยเฉพาะงานที่ปกติเราต้องใช้เวลาเยอะ และแก้ซ้ำ ๆ เช่น . 👉 ช่วย audit งาน (เช็กความสม่ำเสมอของ UI / การใช้คอมโพเนนต์) 👉 ช่วย generate document ต่าง ๆ (spec / guideline / han
UXUI STUDIO

UXUI STUDIO

ถูกใจ 0 ครั้ง

Uxui ไม่ได้ใช้แค่ figma หรอ?
หลายคนคิดว่า UX/UI = Figma เท่านั้น แต่จริง ๆ แล้วมันมี 2 เส้นทาง Design อย่างเดียว หรือ Design + Build เว็บจริง เลย #UXUI #uxuidesigner #figma #designer #uxuidesign
Nashavibes

Nashavibes

ถูกใจ 80 ครั้ง

🧩 UX/UI ไม่ได้ทำงานคนเดียวบน Figma
เพราะในแต่ละเฟสของโปรเจกต์ เราต้องสื่อสารกับคนหลากบทบาท ทั้ง PO, Dev, QA, UX Writer #uxuidesigner #uxuiworkflow #productdesign #uxui #remoteworker
Nashavibes

Nashavibes

ถูกใจ 14 ครั้ง

จาก 0 → มีพอร์ตจริง + ใบเซอร์จริง ใช้สมัครงานได้จริง ✨ Unlock skill UX/UI กับ @uxui.studio เพราะเราเข้าใจว่ามือใหม่ต้องการอะไร ย้ายสายงานได้ แม้ไม่มีพื้นฐานก็เรียนได้ครบจบที่นี่ สอบถามรายละเอียดเพิ่มเติมได้ทางเพจ Facebook: Uxui.studio 💬 #uxuistudio #uxdesign #uidesign #คอร์สuxui
Nashavibes

Nashavibes

ถูกใจ 14 ครั้ง

ภาพรีวิวคอร์ส UXUI จาก Uxui.studio ที่อธิบายว่าคอร์สนี้ครบถ้วน สอนตั้งแต่พื้นฐานการคิดงาน, การใช้ Figma, Design System, การทำ Portfolio และการหางาน เหมาะสำหรับผู้เริ่มต้นหรือผู้ที่ต้องการเปลี่ยนสายงาน เนื้อหาแน่นและเน้นการลงมือทำจริง
รีวิวคอร์ส UXUI ครบ จบ ทุก Process
📍 ครบ จบ ทุก Process และทุกข้อสงสัย สำหรับคนอยากเริ่มต้นหรือย้ายมาสาย UX/UI . เพราะไม่ได้สอนแค่ใช้ Figma แต่ปูพื้นวิธีคิดงานแบบเป็นระบบ ตั้งแต่คิด UX → ทำ UI → เข้าใจ Design System แบบถึงแก่น พร้อมสอนเทคนิคการทำ Portfolio อย่างละเอียดและให้คำแนะนำสายงานจริงจัง . ช่วยให้เริ่มต้นได้ถูกทางและทำ
UXUI STUDIO

UXUI STUDIO

ถูกใจ 0 ครั้ง

Gemini สร้างแผนที่โรงเรียน
#แผนที่โรงเรียน #แผนผังโรงเรียน #สร้างแผนผัง #แจกpromptฟรี #แผนที่3มิติ
Rainyy329

Rainyy329

ถูกใจ 23 ครั้ง

Figma Seires EP2 | รวม Figma Plug-in ที่มืออาชีพเค้าใช้กัน งานไวขึ้นชัวร์ #UXUI #PrinceHouse #figma #uxuidesign #figmadesign
Prince House | UX Stories

Prince House | UX Stories

ถูกใจ 0 ครั้ง

ตอบทุกคำถามที่ UXUI มือใหม่ หาคำตอบไม่ได้ !
♥️ แล้วพบกันนะครับ เวลา 19:30–21:00 น. (วันนี้) หัวข้อ “UXUI Fundamentals – เริ่มคิดอย่างนักออกแบบ” วันศุกร์ที่ 27 กุมภาพันธ์ เวลา 19:30–21:00 น. (วันศุกร์นี้) * จะพยายามไม่เลิกเลทนะครับ 🤣 . . 🔥 UXUI รุ่น 48 ราคาโปรโมชันหมดเขตพรุ่งนี้แล้วววว [รอบเดือนมีนาคม] https://www.facebook.com/sh
UXUI STUDIO

UXUI STUDIO

ถูกใจ 0 ครั้ง

สอนทำ FIGME AI น่ารักง่ายๆ
pakgood

pakgood

ถูกใจ 5 ครั้ง

ภาพเปรียบเทียบการออกแบบ UX/UI แอปประกันสังคม 'Before' และ 'After' แสดงให้เห็นถึงการปรับปรุงหน้าจอหลักของแอปพลิเคชัน โดยมีข้อมูลสิทธิประโยชน์และบริการต่างๆ ที่จัดเรียงใหม่ให้ใช้งานง่ายขึ้น
ภาพหน้าจอแอปประกันสังคม 'Before' แสดงข้อมูลผู้ประกันตน มาตรา 33 พร้อมรายละเอียดเงินสมทบ สิทธิทันตกรรมคงเหลือ และโรงพยาบาลที่เลือก รวมถึงส่วนสิทธิพิเศษและสิทธิประโยชน์ต่างๆ ที่จัดเรียงในรูปแบบเดิม
ภาพหน้าจอแอปประกันสังคม 'After' ที่ได้รับการออกแบบใหม่ แสดงส่วนหัวที่ปรับปรุง ค้นหา สิทธิบำนาญพร้อมยอดเงินสะสม สิทธิทันตกรรมคงเหลือ และส่วนสิทธิประโยชน์ของคุณที่จัดเรียงอย่างเป็นระเบียบและทันสมัยขึ้น
ออกแบบแอปประกันสังคมใหม่ Before - After
ลองออกแบบ UX/UI แอปประกันสังคมใหม่ ฉบับ Prince House #princehouse # #uxuidesign #ประกันสังคม #graphicdesign #figma
Prince House | UX Stories

Prince House | UX Stories

ถูกใจ 6 ครั้ง

Figma 101 : ทำได้ครอบจักรวาลแล้วตอนนี้ ติดตามไว้เลย ทริคดีๆมีมาเรื่อยๆ #uxuidesign #PrinceHouse #figma #UXUI #figmadesign
Prince House | UX Stories

Prince House | UX Stories

ถูกใจ 0 ครั้ง

ภาพรวมการนำเสนอในงาน Mobile Native Thailand Meetup #3 โดยมีวิทยากรกำลังพูดอยู่หน้าจอโปรเจคเตอร์ที่แสดงแผนผัง Workflow สำหรับ 'Visual Triage' และ 'Code Reviewer' พร้อมผู้ฟังจำนวนมากกำลังนั่งฟังอยู่ด้านหน้า
มี agent เข้ามาช่วยงาน สุดท้าย คน ตัดสินใจอยู่ดี
หลาย ๆ คนคงจะเคยได้ยิน และใช้ LLM กันอยู่แล้ว และเอาระบบ automation มาใช้กับ mobile native ได้ยังไง? สรุปจาก session “Agents in the Loop: Practical Automation for Mobile” โดยคุณ Pisit Jaiton (Full Stack Developer, Arise by Infinitas) จากงาน Mobile Native Thailand Meetup # 3 . แน่นอนทุกที่น่าจ
มินซอ แอนดรอยด์เดฟ

มินซอ แอนดรอยด์เดฟ

ถูกใจ 2 ครั้ง

NT WorkManage – Dashboard UI
ระบบ Dashboard สำหรับจัดการงาน ติดตามสถานะ และจัดการ workflow ภายในภายในองค์กร Tools Figma | UI Design #UXUIDesigner #UIUXDesign #FigmaDesigner
Moonatelier

Moonatelier

ถูกใจ 1 ครั้ง

ภาพพื้นหลังเป็นมือคนกำลังถือกระดาษตัวอย่างสี พร้อมข้อความหัวข้อว่า "UX/UI ทำงานร่วมกับใครบ้าง ตั้งแต่เริ่มจนจบ" บนพื้นหลังสีดำ
ภาพแสดงขั้นตอนที่ 1 ของการทำงาน UX/UI คือ "รับโจทย์ + วางเป้าหมาย" โดยระบุผู้ร่วมงานและสิ่งที่ UX/UI ทำในขั้นตอนนี้
ภาพแสดงขั้นตอนที่ 2 ของการทำงาน UX/UI คือ "รีเสิร์ช + เข้าใจผู้ใช้" โดยระบุผู้ร่วมงานและสิ่งที่ UX/UI ทำในขั้นตอนนี้
🧩 UX/UI ไม่ได้ทำงานคนเดียวบน Figma
เพราะในแต่ละเฟสของโปรเจกต์ เราต้องสื่อสารกับคนหลากบทบาท ทั้ง PO, Dev, QA, UX Writer #uxuidesigner #uxuiworkflow #productdesign #uxui
Nashavibes

Nashavibes

ถูกใจ 60 ครั้ง

ภาพหน้าจอแสดงการออกแบบแอปพลิเคชันมือถือ 4 หน้าจอ ได้แก่ Explore, Closet, Category และ User สำหรับแอปพลิเคชันเสื้อผ้าแฟชั่น
ภาพแสดงผังการไหลของผู้ใช้งาน (user flow) สำหรับแอปพลิเคชันสูตรอาหาร โดยมีหน้าจอค้นหา หมวดหมู่ และหน้า My Recipes
ภาพสไลด์นำเสนอ 'Design System' ที่แสดงชุดสี (color palette) รูปแบบตัวอักษร (font styles) และส่วนประกอบ UI (UI components) สำหรับการออกแบบ
คอร์สเรียน UXUI - ที่ลงมือทำจริง ได้ผลงานจริง
🎯 Pitching Project คือผลลัพธ์ปลายทางของคลาสนี้เลยครับ . ทุกคนต้องทำโปรเจกต์จริงตามเงื่อนไขของคลาส โดยต้องนำ Methods และความรู้ทั้งหมดที่เรียนมา . ฝึกคิด ฝึกออกแบบ แล้วก็ฝึกเล่าไอเดียเหมือนตอนพรีเซนต์งานจริงกันเลย . บางคนจัดการเวลาได้ดีมากกก ทำออกมาดีจนแทบจะเป็น Portfolio สมัครงานได้เลย 😍
UXUI STUDIO

UXUI STUDIO

ถูกใจ 6 ครั้ง

Graphic design อาชีพที่ใครๆก็บอกว่าง่ายนิดเดียว 🥹🙂‍↔️
คนที่ทำอาชีพนี้อาจจะเคยได้ยินประโยคนี้บ่อย “แค่นี้เอง คิดแพงจัง” “แก้นิดเดียว ใช้เวลาไม่นานเนอะ” หรือหนักสุดคือ “แค่คลิกๆงานก็เสร็จแล้ว” 🥹 และประโยคอีกมากมายที่คนอาชีพนี้ต้องเจอ ส่วนใหญ่เป็นคำที่ลดคุณค่าของอาชีพนี้ แต่เราอย่าไปสนค่ะฮึบ😌 วันนี้จะมาเล่าให้ฟังว่าอาชีพนี้ไม่ได้ง่ายแบบที่หลายคนคิด
เขินอาย🐳

เขินอาย🐳

ถูกใจ 43 ครั้ง

แนะนำแอพดีๆสำหรับชาวออฟฟิศ เปลี่ยนการบันทึกงานให้เป็นเรื่องง่าย แค่ใช้ goodlogs Ai scan รูปก็พร้อมสร้าง task งานได้ง่ายๆ แถมยังส่งออกไฟล์ไว้ทำประเมินภาระงานได้อีกนะ
Goodlogs

Goodlogs

ถูกใจ 1 ครั้ง

ดูเพิ่มเติม