วิธีสร้างเนื้อหาที่เลื่อนได้ใน Figma

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

บทความนี้จะอธิบายวิธีทำให้การออกแบบ Figma ของคุณสามารถเลื่อนได้

ปรับข้อความแบบเลื่อนให้เหมาะสมภายในรูปร่าง

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

นี่คือวิธีการ:

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

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

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

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

วิธีการออกแบบส่วนประกอบที่สามารถเลื่อนได้ของคุณ

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

วิธีเปลี่ยนแบบอักษรของการออกแบบที่เลื่อนได้ของคุณ

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

เลือกเนื้อหาในกรอบเลื่อนที่คุณต้องการเปลี่ยนแปลง
ไปที่เมนูแบบเลื่อนลงที่ด้านซ้ายบนแล้วเลือก
เลื่อนดูแบบอักษรจนกว่าคุณจะพบแบบอักษรที่คุณต้องการใช้

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

ข้อควรพิจารณาบางประการ ได้แก่:

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

แม้ว่าการเลือกแบบอักษรที่ถูกต้องอาจต้องมีการทดลองบ้าง ตัวอย่างแบบอักษรที่เป็นรูปธรรมบางส่วนก็เป็นตัวเลือกที่น่าเชื่อถือที่สุด:

วิธีป้องกันการอัปเกรดเป็น windows 10

Roboto – หากคุณต้องการเล่นอย่างปลอดภัย ให้ใช้ Roboto ถือเป็นแบบอักษรอเนกประสงค์และเป็นกลางพร้อมแอปพลิเคชันมากมาย เนื่องจากง่ายต่อการเข้าใจ หลายๆ คนจึงเลือก Roboto มาเป็นคำแนะนำและหน้า Landing Page
Poppins – หากต้องการความเป็นมิตรแต่ทันสมัยและสะอาดตา เลือก Poppins แบบอักษรนี้มีความโค้งมนมากขึ้นและทำให้ข้อความดูน่าดึงดูดและอ่านง่าย
Raleway – เมื่อออกแบบสำหรับแบรนด์หรูที่มีความซับซ้อน คุณอาจต้องการพิจารณา Raleway โดยทั่วไปจะบางแต่มีน้ำหนักที่แตกต่างกันและรูปลักษณ์โดยรวมที่หรูหรา
Lato – เป็นมิตร เชื่อถือได้ และจริงจังเป็นคำที่เหมาะสมในการอธิบายแบบอักษรนี้ นักออกแบบสามารถใช้ Lato สำหรับหัวเรื่องและข้อความย่อหน้าได้ โดยประเด็นหลักคือความสามารถในการอ่านและความชัดเจน

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

การเปลี่ยนสีของรูปร่างกรอบ

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

ต่อไปนี้คือวิธีที่คุณสามารถเปลี่ยนสีกรอบของคุณได้:

เลือกเฟรมที่คุณต้องการแก้ไข
เลเยอร์จะปรากฏบนแถบด้านข้างขวา ไปที่ส่วน 'เติม'
เลือก “+” เพื่อเพิ่มการเติม
หน้าต่างตัวเลือกสีจะเปิดขึ้น เลือกสีเติมและการไล่ระดับสี คุณยังสามารถพิมพ์รหัสฐานสิบหกได้หากคุณทราบสีที่แน่นอน

เช่นเดียวกับองค์ประกอบการออกแบบอื่นๆ คุณอาจต้องทดลองใช้สีต่างๆ และลักษณะที่ปรากฏด้วยแบบอักษรที่คุณเลือก

อัปโหลดรูปภาพไปยัง Google ไดรฟ์โดยอัตโนมัติ

คำถามที่พบบ่อย

มีคำสั่งข้อความแบบเลื่อนได้ใน Figma หรือไม่?

น่าเสียดายที่ไม่มีคำสั่งให้เลื่อนข้อความภายใน Figma ได้ อย่างไรก็ตาม คุณสามารถดำเนินการให้เสร็จสิ้นได้ในไม่กี่คลิกโดยใช้วิธีการข้างต้น

ฉันจะตัดสินใจเลือกตัวเลือกโอเวอร์โฟลว์ใดที่ฉันต้องการได้อย่างไร?

ขึ้นอยู่กับประเภทของข้อความที่คุณใช้ การออกแบบโดยรวม และฟังก์ชันของข้อความ รูปแบบแนวตั้งมักจะเหมาะสำหรับการอ่านข้อความขนาดใหญ่ผ่านๆ

โดยปกติแล้วอินเทอร์เฟซอุปกรณ์ใดจะต้องมีการออกแบบข้อความแบบเลื่อนได้

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

Figma เป็นตัวเลือกที่ดีที่สุดสำหรับการออกแบบแบบเลื่อนได้หรือไม่?

Figma เป็นหนึ่งในเครื่องมือที่ดีที่สุดสำหรับการสร้างแบบฟอร์มที่หลากหลาย รวมถึงการออกแบบแบบเลื่อนได้ ยังดีกว่า Figma ฟรี อย่างไรก็ตาม คุณอาจมีความชอบส่วนตัวบางประการ ลองทดลองใช้แพลตฟอร์มบางแพลตฟอร์ม เช่น Adobe Illustrator จนกว่าคุณจะพบเครื่องมือที่เหมาะกับคุณที่สุด

ทำให้การออกแบบของคุณสามารถเลื่อนได้และใช้งานง่าย

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

คุณพบว่าการทำให้เนื้อหาของคุณเลื่อนได้ใน Figma นั้นเป็นเรื่องง่ายหรือไม่? แล้วการเลือกแบบอักษรที่เหมาะสมล่ะ? แจ้งให้เราทราบในส่วนความเห็นด้านล่าง