ใน Figma การทำ Component คือการทำให้งานที่เราออกเเบบกลับมาใช้ซ้ำได้หลายๆจุดบนหน้าเว็ปไซต์ เช่นปุ่มที่เราออกเเบบไว้ เป็นต้น
ซึ่งจะช่วยอำนวยความสะดวกเวลาที่เราต้องการที่จะใช้งานสิ่งที่เราออกเเบบไว้โดยไม่ต้องสร้างใหม่อีกครั้ง
โดยผมจะเเนะนำตัวอย่างการสร้าง ปุ่มที่เป็น Componentกันนะครับ
1.สร้างเฟรม
เราจะทำการสร้างปุ่มด้วยการวาดเฟรมนะครับดังรูป
ทีนี้ผมก็จะได้ปุ่มมาหนึ่งปุ่มเเล้วครับ
2.กำหนดเป็น Component
ทีนี้ผมจะทำให้ปุ่มที่ผมสร้างเป็น Component โดยทำการลากเมาส์คลุมตัวปุ่มที่ผมสร้างนะครับ คลิกขวาเเล้วเลือก Create Component
หรือจะคลิกที่ปุ่มบนเมนูด้านบนเเล้ว เลือก Create Component ก็ได้ครับ
3.การใช้งาน Component
ตรงเเถบเมนูด้านซ้ายมือ คลิกที่ Assets จะเห็น Component ที่เราสร้างไว้ดังรูปครับ
ลากมาวางในงานของเราได้เลยครับผม
4.คุณสมบัติของ Component
ผมจะลากมาวางทั้งหมด 6 ปุ่มนะครับ ปุ่มฝั่งซ้ายจะเป็นปุ่มที่ผมลากลงมาเเล้วทำการเปลี่ยนสีนะครับ ส่วนปุ่มฝั่งขวาผมจะไม่ได้ไปทำอะไรกับมัน ตรงกลางเป็นปุ่ม Main Component นะครับ
ผมจะทำการเปลี่ยนสีเฉพาะเเค่ปุ่ม Main Component มาดูผลลัพธ์ที่เกิดขึ้นครับ
จะเห็นได้ว่าปุ่มที่ไม่ได้เปลี่ยนจะเปลี่ยนสีตาม Main Component หมดเลยครับ เพราะว่าปุ่มที่เรายังไม่ได้ทำการเปลี่ยนสี สีของมันจะขึ้นกับตัว Main component ครับ
ทีนี้เราจะมาลองเปลี่ยนข้อความในปุ่มกันนะครับ โดยผมจะเปลี่ยนจากคำว่า "Test" เป็น คำว่า "ปุ่ม" ดูนะครับ
จะสังเกตุได้ว่า ทุกปุ่มที่ผมลากมาวางจะถูกเปลี่ยนข้อความข้างในเป็น "ปุ่ม" ตามตัว Main Component ครับ
ค่าของตัว Component ลูก ที่เราลากมาวางจะขึ้นอยู่กับ ตัว Component เเม่ หมดเลยครับถ้าเกิดเราไม่ได้ทำการเปลี่ยนค่าต่างๆ ถ้าตัว Component เเม่มีการเปลี่ยนเเปลง Component ลูก ก็จะเปลี่ยนเเปลงในส่วนนั้นๆด้วย
นี่คือคุณสมบัติของ Component ครับ เราจะใช้คุณสมับติเหล่านี้ในการอำนวยความสะดวกในการเขียนเว็ปไซต์ให้รวดเร็วยิ่งขึ้นครับ
อ้างอิง
https://hocco.co/blog/figma-vs-framer/
https://uxplanet.org/figma-master-component-quick-tip-8575d5dbd89f
https://antforfigma.com/
เรียกใช้งานดีไซน์ต่างๆซ้ำๆด้วย Component ใน Figma
Moderator: mindphp, ผู้ดูแลกระดาน
-
- PHP Hero Member
- โพสต์: 152
- ลงทะเบียนเมื่อ: 03/05/2021 10:18 am
-
- Similar Topics
- ตอบกลับ
- แสดง
- โพสต์ล่าสุด
-
-
โพสต์ใหม่ การสร้าง component ด้วย Figma ในการออกแบบ UI
โดย sirapop014563 » 11/10/2023 10:37 am » ใน Microsoft Office Knowledge & line & Etc - 0 ตอบกลับ
- 447 แสดง
-
โพสต์ล่าสุด โดย sirapop014563
11/10/2023 10:37 am
-
ผู้ใช้งานขณะนี้
สมาชิกกำลังดูบอร์ดนี้: Google [Bot] และบุคลทั่วไป 51