รู้จัก Full Stack Designer – นักออกแบบที่โค้ดได้นิดหน่อย

เขียนบล็อกเรื่อง Shape Up ไปเมื่อต้นปี มีประเด็นว่า ทีมขนาดเล็กที่สามารถทำโปรดักต์ที่ยิ่งใหญ่ได้ นักออกแบบต้องเป็น Full Stack Designer

สิ้นเดือนนี้จะไปสอนเด็กๆ ค่าย YWC เลยเสนอหัวข้อทีมจัดค่ายไปว่า พี่พูดเรื่อง Dev Flow กับ Full Stack Desinger ละกันนะ

เพราะส่วนตัวคิดว่า เหล่า UX/UI Designer ทั้งหลาย ในอนาคตอาจจะต้องกลายเป็น Full Stack Designer เช่นกัน รู้จักกันไว้ซักหน่อยก็น่าจะดี

Full Stack Designer คือใคร?

สั้นๆ คือ UX/UI ที่จบงานเป็น Frontend ได้

• เข้าใจ UX Research และ User Journeys
• ออกแบบ UI และ Interactions ได้สวยงาม
• สร้าง Prototype เป็นโค้ดได้ (ใช้ Present กับใช้จริง ทำทีเดียวไปเลยดีกว่า)
• จบงานเป็น Frontend ได้ (HTML/CSS/JS ตาม Framework ที่ใช้)
• สร้างและจัดการ Design System ที่เป็นโค้ดพร้อมใช้ (Style Guide / Component Library)

ฝรั่งใช้คำว่า Full Stack Designers don’t just hand off; they ship.

คือ เปลี่ยนจากการส่งดีไซน์พร้อมคำอธิบาย เป็นการส่งโค้ดพร้อมใช้งานเลย

ทำไมฉันต้องกลายเป็น Full Stack Designer?

1. AI มาช่วยแล้วงัย

Figma เพิ่งเปิดตัวเครื่องมือช่วยสร้างโค้ดจำนวนมาก ก็เพราะหนีไม่พ้นว่า นักออกแบบที่จบงานเป็นโค้ดได้ ย่อมทำงานได้เร็วกว่า ประสิทธิภาพดีกว่า ถึงไม่ชำนาญโค้ด ก็ใช้ AI ช่วยได้หลายแบบ

2. Design Handoff มันเสียเวลา

การสื่อสารระหว่าง Designer กับ Frontend นั้นเสียเวลาทำความเข้าใจกัน เพราะความเนี้ยบไม่เท่ากัน ระยะบางอย่างผิดไป 1-2px ถ้าคนออกแบบต้องมาวงแก้ทุกจุด งานก็ไม่เดินอีก พอปล่อยไปเรื่อยๆ งานก็หลุดจากที่ออกแบบไปเรื่อยๆ

3. Design Systems จริงๆ ไม่ใช่ดีไซน์ แต่คือโค้ด

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



สีต่างๆ ที่ระบุใน Figma หลายๆ อันก็ก๊อบเทมเพลตมาใส่แล้วกลายเป็นไม่ได้ใช้จริง แบบนี้สู้ใช้ สีจาก Tailwind CSS แล้วเลือกแค่โทนสีเทาที่จะใช้ดีกว่า (เช่น Slate, Gray, Zinc, Neutral, Stone) แล้วเหลือสีที่มาจากแบรนด์จริงๆ แค่ 2-5 สีเท่านั้นเอง

หรือพวก UI Component เช่น ปุ่ม ฟอร์ม การ์ด ฯลฯ ถ้าออกแบบแล้วจบเป็นโค้ด สถานะต่างๆ (hover, active, ฯลฯ) ก็จะมาได้ครบถ้วน แล้วทำเป็นเว็บตัวอย่างพร้อมโค้ดให้ก๊อบไปใช้ ก็จะกลายเป็น Design System ที่ทั้งทีมได้ใช้ร่วมกันจริงๆ

ตัวอย่างก็เช่น Polaris ของ Shopify ตามรูป ซึ่งมี Component พร้อมโค้ดที่ใช้งานได้เลย

4. จะเริ่มงานที่ Design หรือ Code ก็ได้

ถ้าเข้าใจโค้ด เราจะไปหยิบ Component Library แล้วค่อยมาออกแบบก็ยังได้ เช่น หากโจทย์เป็นระบบหลังบ้าน ก็อาจเลือกใช้ Sidebar Component ของ shadcn/ui แล้วค่อยมาเปลี่ยนสีเปลี่ยนระยะตามที่ต้องการ (อาจใช้ตัวช่วยอย่าง tweakcn.com ตามรูปด้านล่าง) ไม่ต้องเริ่มออกแบบจากศูนย์

กระบวนการทำงานของ Full Stack Designer

เมื่อเห็นข้อดีด้านบน เราก็จะเห็น Flow การทำงานใหม่ ดังนี้

1. UX Flow

เริ่มต้นด้วย UX Research & Workflow เพื่อสร้าง Flow ของระบบ

2. UI Mockup

ออกแบบ UI ที่ตอบโจทย์ Flow นั้น โดย

1. ออกแบบเป็น Design – จะใช้ Template สำเร็จรูปมาช่วยก็ได้ หรือขึ้นใหม่เลยก็ได้
2. ออกแบบเป็น Code – ไล่ดู Component Library ที่เหมาะกับ Flow ของเรา เช่น shadcn/ui, SmoothUI, Chakra UI ฯลฯ แล้วเอามาปรับใช้

3. Code

แปลงจากดีไซน์ใน Mockup เป็น Component Library แล้วประกอบทุกอย่างรวมกันเป็น Style Guide พร้อมโค้ด

แล้วทั้งหมดนี้ ก็จะกลายเป็น Design System ที่พร้อมให้ปรับปรุงต่อได้เรื่อยๆ

เพิ่มงานอีกแล้วหรอ แบบนี้ฉันก็ต้องเหนื่อยขึ้นสิ?

อาจมีคำถามว่า ต้องให้เขียนโค้ดด้วยหรอ งานที่มีก็ทำไม่ไหวอยู่แล้วนะ?

ผมคิดว่า มันไม่ได้มีแค่ส่วนงานที่เพิ่ม เพราะเมื่อรู้โค้ด ก็จะมีงานที่ลดด้วย

1. ทำ Prototype เป็นโค้ดทีเดียวเลย

ไม่ต้องทำพรีเซนต์ซ้ำซ้อนใน Figma แล้ว ทำ Frontend แล้วก็กดโชว์ได้เลย

2. ดีไซน์น้อยลง แต่ส่งงานได้มากขึ้น

ถ้าเรามองว่า Figma เป็นแค่กระดาษทด บางทีเราแค่วางคร่าวๆ แล้วไปโค้ดเลย ไม่ต้องทำเนี้ยบ ก็จบงานได้เร็ว

หลายๆ หน้าไม่ต้องใช้ Auto Layout ก็ได้ / ไม่ต้องทำหน้าจอหลายขนาดก็ได้ (ก็เราตัดเองนี่นา) / ไม่ต้องทำหลายเงื่อนไข (State ต่างๆ) ก็ได้ ถ้ามันมีใน Component Library แล้ว – เราก็แค่ขึ้นโครงใน Figma ที่เหลือใส่ในโค้ดไปเลย

บางงานอาจจะทำใน Figma แค่ส่วน Header / Footer / Hero Section ก็พอ

3. ตรวจงานน้อยลง แต่งานเนี้ยบขึ้น

ในเมื่อเราออกแบบเอง เราย่อมรู้ว่าหน้าจอไหน อยากให้เป็นอย่างไร ไม่ต้องเสียเวลาอธิบายดีไซน์ (Handoff) ไม่ต้องกลับมาตรวจงาน Frontend อีก

วาง Component ใน Figma เสร็จ ไปประกอบที่ Headless UI ในโค้ด ก็กลายเป็น Design System ได้ทันที งานเนี้ยบได้ดังใจ

ทักษะที่ต้องเรียนเพิ่มเติม

จาก Designer หากอยากเป็น Full Stack Designer ก็ต้องศึกษาโค้ดเพิ่ม (จนกว่า AI จะช่วยทำให้หมด) หัวข้อก็น่าจะประมาณนี้

1. HTML & CSS (ในยุคนี้แนะนำให้เรียน Tailwind CSS ก่อน)
2. Next.js หรือเฟรมเวิร์กอื่นๆ ที่ทีมใช้
3. Design tokens & theming ใช้ตัวแปรเพื่อปรับรูปแบบต่างๆ และแก้ไขภายหลังได้ง่าย
4. GitHub แบบพื้นฐาน (commit, push, pull request)
5. Headless UI – เข้าใจการแก้ไข Component เพื่อให้เป็นดีไซน์ของเราเอง
6. Prototyping Tools – สร้างตัวอย่างงานเป็นโค้ดจริงได้ ทำผ่านเว็บก็เช่น CodeSandbox, StackBlitz หรือทำในเครื่องก็เช่น Node.js ที่ติดตั้งเฟรมเวิร์กในข้อ 2

หรือเริ่มจากเครื่องมือช่วย Gen Code จากดีไซน์ เช่น Figma Site, Builder.io แล้วค่อยมาแอบแก้โค้ดนิดๆ หน่อยๆ เพื่อค่อยๆ เรียนรู้ก็ได้เช่นกัน

บทสรุป

สื่อหลายแห่งต่างทำนายว่า อนาคตอาจไม่มีอาชีพ Frontend Dev เนื่องจากเครื่องมือหรือ AI จะมาแทน ดังนั้นหากเป็น Frontend ที่สนใจด้านออกแบบก็ควรหัด Design/UX/UI เพิ่ม และหากเป็น Designer ก็น่าจะลองหัด Frontend เพิ่ม

ซึ่งก็จะเป็นตำแหน่งที่เรียกรวมกันว่า Full Stack Designer นั่นเองฮะ