เรียกใช้งานดีไซน์ต่างๆซ้ำๆด้วย Component ใน Figma

Graphic design ความรู้สำหรับ การออกแบบ ออกแบบเว็บ Phothoshop ตัดต่อวีดีโอ

Moderator: mindphp, ผู้ดูแลกระดาน

pataponnew
PHP Hero Member
PHP Hero Member
โพสต์: 152
ลงทะเบียนเมื่อ: 03/05/2021 10:18 am

เรียกใช้งานดีไซน์ต่างๆซ้ำๆด้วย Component ใน Figma

โพสต์ที่ยังไม่ได้อ่าน โดย pataponnew »

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

1.สร้างเฟรม
เราจะทำการสร้างปุ่มด้วยการวาดเฟรมนะครับดังรูป
เริ่มต้นสร้างปุ่ม
เริ่มต้นสร้างปุ่ม
bandicam 2021-05-25 16-36-10-767.jpg (29.46 KiB) Viewed 821 times
ทีนี้ผมก็จะได้ปุ่มมาหนึ่งปุ่มเเล้วครับ

2.กำหนดเป็น Component
ทีนี้ผมจะทำให้ปุ่มที่ผมสร้างเป็น Component โดยทำการลากเมาส์คลุมตัวปุ่มที่ผมสร้างนะครับ คลิกขวาเเล้วเลือก Create Component
การทำให้ปุ่มเป็น Component
การทำให้ปุ่มเป็น Component
bandicam 2021-05-25 16-40-56-151.jpg (62.45 KiB) Viewed 821 times
หรือจะคลิกที่ปุ่มบนเมนูด้านบนเเล้ว เลือก Create Component ก็ได้ครับ
การทำให้ปุ่มเป็น Component
การทำให้ปุ่มเป็น Component
bandicam 2021-05-25 16-41-17-651.jpg (45.35 KiB) Viewed 821 times
3.การใช้งาน Component
ตรงเเถบเมนูด้านซ้ายมือ คลิกที่ Assets จะเห็น Component ที่เราสร้างไว้ดังรูปครับ
Component ที่เราสร้างไว้
Component ที่เราสร้างไว้
bandicam 2021-05-25 16-44-41-532.jpg (12.05 KiB) Viewed 821 times
ลากมาวางในงานของเราได้เลยครับผม

4.คุณสมบัติของ Component
ผมจะลากมาวางทั้งหมด 6 ปุ่มนะครับ ปุ่มฝั่งซ้ายจะเป็นปุ่มที่ผมลากลงมาเเล้วทำการเปลี่ยนสีนะครับ ส่วนปุ่มฝั่งขวาผมจะไม่ได้ไปทำอะไรกับมัน ตรงกลางเป็นปุ่ม Main Component นะครับ
ทดลองการใช้งานคุณสมบัติของ Component
ทดลองการใช้งานคุณสมบัติของ Component
bandicam 2021-05-25 16-51-32-056.jpg (41.8 KiB) Viewed 821 times
ผมจะทำการเปลี่ยนสีเฉพาะเเค่ปุ่ม Main Component มาดูผลลัพธ์ที่เกิดขึ้นครับ
ทดลองการใช้งานคุณสมบัติของ Component
ทดลองการใช้งานคุณสมบัติของ Component
bandicam 2021-05-25 16-54-16-807.jpg (36.63 KiB) Viewed 821 times
จะเห็นได้ว่าปุ่มที่ไม่ได้เปลี่ยนจะเปลี่ยนสีตาม Main Component หมดเลยครับ เพราะว่าปุ่มที่เรายังไม่ได้ทำการเปลี่ยนสี สีของมันจะขึ้นกับตัว Main component ครับ
ทีนี้เราจะมาลองเปลี่ยนข้อความในปุ่มกันนะครับ โดยผมจะเปลี่ยนจากคำว่า "Test" เป็น คำว่า "ปุ่ม" ดูนะครับ
ทดลองการใช้งานคุณสมบัติของ Component
ทดลองการใช้งานคุณสมบัติของ Component
bandicam 2021-05-25 16-59-38-245.jpg (51.73 KiB) Viewed 821 times
จะสังเกตุได้ว่า ทุกปุ่มที่ผมลากมาวางจะถูกเปลี่ยนข้อความข้างในเป็น "ปุ่ม" ตามตัว 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/
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 35