นำเข้าไปยัง Figma: Buddy เปลี่ยนรูปภาพ, HTML, การออกแบบ Claude, ต้นแบบของ Claude และเว็บไซต์เป็นเลเยอร์

Reading Time: 2 minutes

งานออกแบบไม่ได้เริ่มต้นจากที่เดียวอีกต่อไป

บางครั้งแนวคิดแรกก็คือต้นแบบ Claude Design บางครั้งก็เป็นสิ่งประดิษฐ์ของคลอดด์ บางครั้งอาจเป็นการทดลอง HTML ภาพหน้าจอ หน้า Landing Page ที่คุณชื่นชอบ หรือเว็บไซต์สดที่ทีมของคุณต้องการเรียนรู้

ปัญหาอยู่ที่การไม่ได้รับ AI หรือเว็บมาสร้างสิ่งที่น่าสนใจ ปัญหาคือการนำแนวคิดนั้นกลับไปสู่จุดที่การออกแบบผลิตภัณฑ์เกิดขึ้นจริง: Figma

Buddy ช่วยให้คุณสามารถนำเข้าเกือบทุกอย่างลงใน Figma และเปลี่ยนให้เป็นเลเยอร์การออกแบบที่แก้ไขได้บนผืนผ้าใบ ไม่ใช่ภาพหน้าจอที่แบนราบ ไม่ใช่รูปภาพอ้างอิงแบบคงที่ เลเยอร์จริงที่คุณสามารถแก้ไข จัดระเบียบ ปรับแต่ง และส่งต่อได้

Install Buddy Figma Agent →

นำเข้าทุกอย่างไปยัง Figma ด้วย Buddy จากนั้นออกแบบต่อไปใน Figma

Buddy เป็นตัวแทนการออกแบบ AI Figma ของ Anima มันอยู่ภายใน Figma อ่านแคนวาสของคุณ และช่วยคุณสร้าง แก้ไข และจัดระเบียบการออกแบบผ่านการแชท

ตอนนี้ Buddy ยังทำหน้าที่เป็นสะพานเชื่อมระหว่างแรงบันดาลใจภายนอกกับเวิร์กโฟลว์ Figma ของคุณอีกด้วย วางอาร์ติแฟกต์ รูปภาพ ภาพหน้าจอ HTML หรือ URL และ Buddy จะเปลี่ยนให้เป็นเลเยอร์ Figma ที่แก้ไขได้ เพื่อให้คุณสามารถดำเนินกระบวนการออกแบบต่อไปได้โดยไม่ต้องสร้างทุกเฟรมใหม่ด้วยตนเอง

นั่นหมายความว่าคุณสามารถเริ่มต้นจาก:

อาร์ติแฟกต์ Claude Designเมื่อคุณต้องการนำอินเทอร์เฟซที่ AI สร้างขึ้นมาไว้ใน Figma
สิ่งประดิษฐ์ของคลอดด์เมื่อมีการสร้างต้นแบบ หน้าจอ หรือแนวคิดเชิงโต้ตอบใน Claude
อาร์ติแฟกต์ HTMLเมื่อการออกแบบเริ่มต้นจาก HTML ที่สร้างขึ้นหรือการจำลองโค้ด
รูปภาพและภาพหน้าจอเมื่อคุณต้องการวางการอ้างอิงภาพและรับเลเยอร์ Figma ที่แก้ไขได้
เว็บไซต์ URLเมื่อคุณต้องการโคลนเว็บไซต์สาธารณะลงใน Figma เพื่อเป็นการออกแบบ คุณสามารถตรวจสอบและรีมิกซ์ได้

ขั้นตอนการทำงานนั้นง่ายดาย: นำแหล่งที่มามาไว้ใน Buddy จากนั้นปล่อยให้ Anima ตีความโครงสร้างภาพ จากนั้นจึงออกแบบต่อบนผืนผ้าใบ Figma โดยตรง

เหตุใดจึงสำคัญ: AI ให้ร่างแรกแก่คุณ ส่วน Figma ให้คุณควบคุม

เครื่องมือ AI สามารถสร้างแบบร่างแรกได้ดีมาก พวกเขาสามารถสร้างแนวคิดของแอป หน้า Landing Page แดชบอร์ด ขั้นตอนการเริ่มต้นใช้งาน หน้าการกำหนดราคา เครื่องมือภายใน และการทดสอบผลิตภัณฑ์ได้ในเวลาไม่กี่นาที

แต่งานออกแบบอย่างมืออาชีพไม่ได้สิ้นสุดที่ร่างแรก มักจะเริ่มต้นที่นั่น

ทีมยังคงต้องแก้ไขสำเนา แก้ไขลำดับชั้น ใช้แบรนด์ จัดระยะห่าง ใช้ส่วนประกอบ ตรวจสอบ Edge Case และเตรียมไฟล์ที่นักออกแบบ PM และวิศวกรคนอื่นๆ สามารถทำงานได้จริง

นั่นคือเหตุผลว่าทำไมการนำเข้าจึงมีความสำคัญ หากแนวคิดที่สร้างโดย AI ยังคงถูกล็อกอยู่ในหน้าต่างแชท โปรแกรมดูสิ่งประดิษฐ์ ภาพหน้าจอ หรือแท็บเบราว์เซอร์ ก็ยากที่จะเปลี่ยนเป็นขั้นตอนการออกแบบผลิตภัณฑ์จริงได้

Buddy นำงานนั้นกลับมายัง Figma ในรูปแบบเลเยอร์ที่แก้ไขได้ ดังนั้นเอาต์พุต AI จึงกลายเป็นสิ่งที่ทีมของคุณสามารถสร้างรูปร่างได้

นำเข้าอาร์ติแฟกต์ Claude Design ลงใน Figma

Claude Design เหมาะอย่างยิ่งสำหรับการสำรวจแนวคิด UI และแนวคิดเชิงโต้ตอบอย่างรวดเร็ว คุณสามารถอธิบายผลิตภัณฑ์ คุณลักษณะ หรือหน้า Landing Page และรับสิ่งประดิษฐ์ที่สวยงามได้อย่างรวดเร็ว

แต่หากขั้นตอนต่อไปคือการทบทวนการออกแบบ การปรับแต่งแบรนด์ หรือการส่งต่อ โดยปกติแล้วทีมของคุณต้องการผลลัพธ์ใน Figma

ด้วย Buddy คุณสามารถนำอาร์ติแฟกต์ Claude Design เข้าไปใน Figma และดำเนินการต่อจากที่นั่น Buddy สร้างอินเทอร์เฟซขึ้นใหม่เป็นเลเยอร์ที่แก้ไขได้ เพื่อให้คุณสามารถปรับเค้าโครง การพิมพ์ สี ระยะห่าง ไอคอน และเนื้อหาบนผืนผ้าใบได้

สิ่งนี้มีประโยชน์เมื่อผู้ก่อตั้ง นายกรัฐมนตรี นักการตลาด หรือวิศวกรสร้างต้นแบบ AI ก่อน จากนั้นต้องการให้นักออกแบบสร้างคุณภาพการผลิต

นำเข้าสิ่งประดิษฐ์ของ Claude และต้นแบบ AI

สิ่งประดิษฐ์ของ Claude สามารถมีมากกว่าหนึ่งหน้าจอได้ พวกเขาสามารถประกอบด้วยสถานะ แผง เมนู แบบฟอร์ม ตาราง การ์ด สถานะว่าง และแนวคิด UI แบบเต็ม

แทนที่จะจับภาพหน้าจอด้วยตนเองและติดตามการออกแบบ ให้วางส่วนที่สร้างขึ้นลงใน Buddy Anima เปลี่ยนให้เป็นการออกแบบ Figma ที่มีโครงสร้างซึ่งทีมของคุณสามารถแก้ไขได้

เมื่อปรากฏบนผืนผ้าใบแล้ว คุณสามารถ:

แยกหน้าจอออกเป็นเฟรม
แก้ไขข้อความและสำเนาผลิตภัณฑ์
ปรับแต่งระยะห่างและลำดับชั้น
แทนที่ภาพทั่วไปด้วยทรัพย์สินของแบรนด์
ใช้ระบบการออกแบบของคุณ
เตรียมการออกแบบเพื่อการตรวจทานหรือการส่งมอบทางวิศวกรรม

ต้นแบบ AI กลายเป็นจุดเริ่มต้น ไม่ใช่ทางตัน

นำเข้าอาร์ติแฟกต์ HTML ลงใน Figma

ขณะนี้เครื่องมือ AI จำนวนมากสร้าง HTML เป็นเอาต์พุตการออกแบบ ซึ่งจะมีประโยชน์สำหรับการดูตัวอย่างอย่างรวดเร็ว แต่ HTML ไม่ใช่ที่ที่ดีที่สุดในการประเมินการออกแบบผลิตภัณฑ์เสมอไป

นักออกแบบจำเป็นต้องมีการควบคุมผืนผ้าใบ พวกเขาจำเป็นต้องย้ายเลเยอร์ เปรียบเทียบตัวเลือก ตรวจสอบลำดับชั้น และจัดแนวงานให้เข้ากับระบบการออกแบบ

Buddy ช่วยโดยการนำส่วนต่างๆ ของ HTML กลับเข้าไปใน Figma คุณสามารถใช้เอาต์พุต HTML เป็นแหล่งที่มา จากนั้นแปลงให้เป็นเลเยอร์ Figma ที่แก้ไขได้ ซึ่งสามารถทำความสะอาด จัดระเบียบใหม่ และขัดเกลาได้

สิ่งนี้มีประโยชน์อย่างยิ่งสำหรับทีมที่สร้างต้นแบบด้วยโค้ดก่อน จากนั้นจึงต้องการไฟล์การออกแบบที่เหมาะสมสำหรับการทำงานร่วมกัน

วางรูปภาพหรือภาพหน้าจอและรับเลเยอร์ Figma ที่แก้ไขได้

ภาพหน้าจอมีอยู่ทุกที่ในงานผลิตภัณฑ์

ผู้ใช้ส่งภาพหน้าจอของโฟลว์ที่พวกเขาชอบ เพื่อนร่วมทีมแชร์เพจคู่แข่ง PM ทิ้งแนวคิด UI คร่าวๆ ลงใน Slack ผู้ก่อตั้งร่างแลนดิ้งเพจด้วยเครื่องมือ AI อื่น

โดยปกติแล้ว ภาพหน้าจอนั้นเป็นเพียงข้อมูลอ้างอิงเท่านั้น คุณสามารถวางไว้ใน Figma ได้ แต่คุณยังต้องสร้าง UI ใหม่ด้วยตนเอง หากคุณต้องการแก้ไข

ด้วย Buddy คุณสามารถวางรูปภาพหรือภาพหน้าจอแล้วแปลงเป็นเลเยอร์ Figma ที่แก้ไขได้ ข้อความ เค้าโครง โครงสร้างภาพ และองค์ประกอบ UI กลายเป็นสิ่งที่คุณสามารถทำงานได้บนผืนผ้าใบ

ซึ่งจะช่วยประหยัดส่วนที่น่ารำคาญที่สุดของกระบวนการ นั่นคือการสร้างสิ่งที่มีอยู่แล้วขึ้นมาใหม่เพื่อให้คุณสามารถทำการเปลี่ยนแปลงได้

โคลนเว็บไซต์ใดๆ โดยการวาง URL

แรงบันดาลใจในเว็บไซต์เป็นหนึ่งในจุดเริ่มต้นที่พบบ่อยที่สุดสำหรับงานผลิตภัณฑ์และการตลาดใหม่ๆ

บางทีคุณอาจชอบโครงสร้างของหน้าแรกของ SaaS บางทีคุณอาจต้องการศึกษาหน้าการกำหนดราคา บางทีคุณอาจต้องบันทึกเค้าโครงแดชบอร์ด ขั้นตอนการเริ่มต้นใช้งาน หรือส่วนของหน้า Landing Page

ด้วย Buddy คุณสามารถวางเว็บไซต์ URL และนำเพจดังกล่าวไปไว้ที่ Figma ในรูปแบบที่แก้ไขได้ แทนที่จะบันทึกภาพหน้าจอ Buddy ช่วยให้คุณสร้างโครงสร้างภาพขึ้นมาใหม่เป็นเลเยอร์บนผืนผ้าใบ

ใช้เพื่อเรียนรู้จากรูปแบบ สำรวจทางเลือกอื่น สร้างมูดบอร์ด หรือเร่งเวอร์ชันแรกของเพจใหม่ จากนั้นทำให้เป็นของคุณด้วยสำเนา ส่วนประกอบ แบรนด์ และเรื่องราวของผลิตภัณฑ์

สิ่งที่คุณจะได้จากแคนวาส Figma

ความแตกต่างที่สำคัญคือความสามารถในการแก้ไข

Buddy ไม่ใช่แค่การวางบิตแมปบนผืนผ้าใบเท่านั้น เป้าหมายคือเพื่อให้คุณมีการออกแบบ Figma ที่ใช้งานได้จริง ซึ่งสามารถแก้ไข ตรวจสอบ และปรับปรุงได้

หลังจากนำเข้าแล้ว คุณสามารถทำงาน Figma ต่อไปได้ตามปกติ:

แก้ไขข้อความโดยตรง
ย้ายและปรับขนาดเลเยอร์
ปรับสี แบบอักษร ระยะห่าง และลำดับชั้น
จัดระเบียบเฟรมและส่วนต่างๆ
ใช้เค้าโครงอัตโนมัติตามที่จำเป็น
แทนที่องค์ประกอบหยาบด้วยส่วนประกอบจริง
จัดตำแหน่งผลลัพธ์ให้สอดคล้องกับระบบการออกแบบของคุณ

นั่นคือจุดประสงค์ของ Buddy: ความเร็วโดยไม่สูญเสียการควบคุม

ขั้นตอนการทำงานที่ดีขึ้นสำหรับการออกแบบที่สร้างโดย AI

ขั้นตอนการทำงานแบบเก่ามีลักษณะดังนี้:

สร้างแนวคิดในเครื่องมือ AI
ถ่ายภาพหน้าจอ
วางภาพหน้าจอลงใน Figma
สร้างการออกแบบใหม่ด้วยตนเองตั้งแต่เริ่มต้น
เริ่มงานออกแบบจริง

ขั้นตอนการทำงานของ Buddy สั้นกว่า:

สร้างหรือค้นหาแหล่งที่มา: อาร์ติแฟกต์, HTML, รูปภาพ, ภาพหน้าจอ หรือ URL
วางลงใน Buddy
รับเลเยอร์ Figma ที่แก้ไขได้
ออกแบบบนผืนผ้าใบต่อไป

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

นี่เพื่อใคร?

การนำเข้าทุกสิ่งไปยัง Buddy มีประโยชน์สำหรับทุกคนที่ต้องการการเคลื่อนไหวอย่างรวดเร็วโดยไม่สูญเสียเวิร์กโฟลว์ Figma

นักออกแบบ สามารถเปลี่ยนเอาต์พุต AI และภาพหน้าจอให้เป็นจุดเริ่มต้นที่แก้ไขได้
PM สามารถนำสิ่งประดิษฐ์ของ Claude หรือการอ้างอิงเว็บไซต์มาสู่ Figma เพื่อการสนทนาเกี่ยวกับผลิตภัณฑ์ที่ชัดเจนยิ่งขึ้น
ผู้ก่อตั้ง สามารถย้ายจากแนวคิดไปสู่ไฟล์การออกแบบโดยไม่ต้องสร้างทุกอย่างใหม่ด้วยตนเอง
นักการตลาด สามารถลอกแบบแรงบันดาลใจของแลนดิ้งเพจและปรับให้เข้ากับแบรนด์ของพวกเขาได้
วิศวกร สามารถสร้างต้นแบบในเครื่องมือ HTML หรือ AI จากนั้นส่งผลลัพธ์กลับไปที่การออกแบบ

มันไม่ได้เกี่ยวกับการแทนที่การออกแบบ เป็นเรื่องเกี่ยวกับการกำจัดงานสร้างใหม่ที่น่าเบื่อระหว่างแนวคิดและผืนผ้าใบที่แก้ไขได้

ลองนำเข้าแนวคิดถัดไปของคุณไปที่ Buddy

หน้าจอผลิตภัณฑ์ที่ยอดเยี่ยมถัดไปอาจเริ่มต้นใน Claude Design, อาร์ติแฟกต์ของ Claude, ต้นแบบ HTML ที่สร้างขึ้น, ภาพหน้าจอ หรือเว็บไซต์ URL

ด้วย Buddy จุดเริ่มต้นดังกล่าวจะกลายเป็นการออกแบบ Figma ที่สามารถแก้ไขได้ในขั้นตอนการทำงานที่มีอยู่ของคุณ

วางลงใน Buddy วางเลเยอร์บนผืนผ้าใบ และออกแบบต่อไป