การใช้งาน Variant ใน Figma

[Aoranuch Phupaloy]

การใช้งาน Variant ใน Figma
การใช้งาน Variant ใน Figma นั้น เราจะใช้คุณสมบัติของ Variant ทำการ Group component เข้าไว้ด้วยกัน แล้วทำการเรียกใช้โดยการลากตัว Instance เข้ามาในตัวเฟรม ทำการเลือกได้ว่าต้องการให้แสดงผลที่สถานะไหน และนอกจากนั้นยังสามารถเพิ่ม Design ได้ไม่จำกัดในตัวกลุ่มของ Variant
วิธีการใช้งาน Variant (ตัวแปร) และ Instance ใน Figma มีดังนี้
1. สร้างปุ่ม

สร้างปุ่มวัตถุ

v1.png (29.95 KiB) Viewed 1504 times

- ทำการเลือกปุ่ม แล้วกดตรงที่วงกลมสีแดง

2. create component

create component

v2.png (41.63 KiB) Viewed 1504 times

- คลิกขวา และเลือก create component

3. เพิ่มตัวแปร

เพิ่มตัวแปร

v3.png (29.13 KiB) Viewed 1504 times

- คลิกไปที่ปุ่มบวกด้านขวา คำว่า Variant

ตั้งค่า Variant

v4.png (6 KiB) Viewed 1504 times

-ทำการขยายกรอบพื้นที่ของ ตัวแปร

ขยายกรอบพื้นที่ของ ตัวแปร

v5.png (24.68 KiB) Viewed 1504 times

- ตั้งชื่อปุ่มที่ 1
- ตั้งชื่อปุ่มที่ 2

เพิ่มตัวแปรที่ปุ่มบวก

v6.png (9.23 KiB) Viewed 1504 times

- คลิกปุ่มบวกที่อยู่ด้านล่าง เราจะได้ตัวแปรเพิ่มมาอีก 1 ตัว

ปรับสีแบล็กกาว

v7.png (79.75 KiB) Viewed 1504 times

- คลิกปุ่มที่2 แล้วปรับสีแบล็กกาว (แล้วแต่เราจะเลือกปุ่มไหน)

Accect

v8.png (27.6 KiB) Viewed 1504 times

ไปที่แถบ Accect แล้วลากปุ่มออกมา

เลือกว่าจะแสดงปุ่มแบบไหน

v9.png (29.33 KiB) Viewed 1504 times

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

[Duanghathai Termtem]

ชื่อบทความไม่สื่อถึงประโยชน์
สีของสัญลักษณ์
การเชื่อมลิงค์ซ้ำกัน

[Aoranuch Phupaloy]

วิธีการแยก Variant ในโปรแกรม Figma
การใช้งาน Variant ใน Figma นั้น เราจะใช้คุณสมบัติของ Variant ทำการ Group component เข้าไว้ด้วยกัน แล้วทำการเรียกใช้โดยการลากตัว Instance เข้ามาในตัวเฟรม ทำการเลือกได้ว่าต้องการให้แสดงผลที่สถานะไหน และนอกจากนั้นยังสามารถเพิ่ม Design ได้ไม่จำกัดในตัวกลุ่มของ Variant
วิธีการใช้งาน Variant (ตัวแปร) และ Instance ใน Figma มีดังนี้
1. สร้างปุ่ม

สร้างปุ่มวัตถุ

v1.png (30.34 KiB) Viewed 1458 times

- ทำการเลือกปุ่ม แล้วกดตรงที่วงกลมสีเขียว

2. create component

create component

v2.png (41.63 KiB) Viewed 1458 times

- คลิกขวา และเลือก create component

3. เพิ่มตัวแปร

เพิ่มตัวแปร

v3.png (29.52 KiB) Viewed 1458 times

- คลิกไปที่ปุ่มบวกด้านขวา คำว่า Variant

ตั้งค่า Variant

v4.png (6 KiB) Viewed 1458 times

-ทำการขยายกรอบพื้นที่ของ ตัวแปร

ขยายกรอบพื้นที่ของ ตัวแปร

v5.png (24.68 KiB) Viewed 1458 times

- ตั้งชื่อปุ่มที่ 1
- ตั้งชื่อปุ่มที่ 2

เพิ่มตัวแปรที่ปุ่มบวก

v6.png (9.98 KiB) Viewed 1458 times

- คลิกปุ่มบวกที่อยู่ด้านล่าง เราจะได้ตัวแปรเพิ่มมาอีก 1 ตัว

ปรับสีแบล็กกาว

v7.png (79.75 KiB) Viewed 1458 times

- คลิกปุ่มที่2 แล้วปรับสีแบล็กกาว (แล้วแต่เราจะเลือกปุ่มไหน)

Accect

v8.png (31.48 KiB) Viewed 1458 times

ไปที่แถบ Accect แล้วลากปุ่มออกมา

เลือกว่าจะแสดงปุ่มแบบไหน

v9.png (29.33 KiB) Viewed 1458 times

- แถบขวามือเราสามารถเลือกว่าจะแสดงปุ่มแบบไหน
ในส่วนของการสร้าง Variant หรือตัวแปรขึ้นมาเพื่อที่จะใช้คุณสมบัติกรุ๊ปแล้วสามารถเลือกใช่งานของตัวแปรได้ ซึ่งการตั้งค่าตัวแปรนี้จะมีผลต่อการออกแบบของหน้าจอ Auto Layout ด้วย หรือจะเรียกว่า การแยก packagename ออกมา หรือจะเรียกว่าแยกเป็น environment ใหม่ก็ได้ ทำให้สามารถปรับแต่งได้

[Aoranuch Phupaloy]

ชื่อบทความไม่สื่อถึงประโยชน์
สีของสัญลักษณ์
การเชื่อมลิงค์ซ้ำกัน

แก้ไขแล้วค่ะ