การใช้งาน Variant ใน Figma
การใช้งาน Variant ใน Figma นั้น เราจะใช้คุณสมบัติของ Variant ทำการ Group component เข้าไว้ด้วยกัน แล้วทำการเรียกใช้โดยการลากตัว Instance เข้ามาในตัวเฟรม ทำการเลือกได้ว่าต้องการให้แสดงผลที่สถานะไหน และนอกจากนั้นยังสามารถเพิ่ม Design ได้ไม่จำกัดในตัวกลุ่มของ Variant
วิธีการใช้งาน Variant (ตัวแปร) และ Instance ใน Figma มีดังนี้
1. สร้างปุ่ม
- ทำการเลือกปุ่ม แล้วกดตรงที่วงกลมสีแดง
2. create component
- คลิกขวา และเลือก create component
3. เพิ่มตัวแปร
- คลิกไปที่ปุ่มบวกด้านขวา คำว่า Variant
-ทำการขยายกรอบพื้นที่ของ ตัวแปร
- ตั้งชื่อปุ่มที่ 1
- ตั้งชื่อปุ่มที่ 2
- คลิกปุ่มบวกที่อยู่ด้านล่าง เราจะได้ตัวแปรเพิ่มมาอีก 1 ตัว
- คลิกปุ่มที่2 แล้วปรับสีแบล็กกาว (แล้วแต่เราจะเลือกปุ่มไหน)
ไปที่แถบ Accect แล้วลากปุ่มออกมา
- แถบขวามือเราสามารถเลือกว่าจะแสดงปุ่มแบบไหน
ในส่วนของการสร้าง Variant หรือตัวแปรขึ้นมาเพื่อที่จะใช้คุณสมบัติกรุ๊ปแล้วสามารถเลือกใช่งานของตัวแปรได้ ซึ่งการตั้งค่าตัวแปรนี้จะมีผลต่อการออกแบบ Auto Layout ด้วย
การใช้งาน Variant ใน Figma
Moderator: mindphp, ผู้ดูแลกระดาน
-
- PHP Hero Member
- โพสต์: 166
- ลงทะเบียนเมื่อ: 07/12/2020 9:33 am
-
- PHP Super Hero Member
- โพสต์: 849
- ลงทะเบียนเมื่อ: 30/11/2020 10:24 am
Re: การใช้งาน Variant ใน Figma
ชื่อบทความไม่สื่อถึงประโยชน์
สีของสัญลักษณ์
การเชื่อมลิงค์ซ้ำกัน
สีของสัญลักษณ์
การเชื่อมลิงค์ซ้ำกัน
-
- PHP Hero Member
- โพสต์: 166
- ลงทะเบียนเมื่อ: 07/12/2020 9:33 am
Re: วิธีการแยก Variant ในโปรแกรม Figma
วิธีการแยก Variant ในโปรแกรม Figma
การใช้งาน Variant ใน Figma นั้น เราจะใช้คุณสมบัติของ Variant ทำการ Group component เข้าไว้ด้วยกัน แล้วทำการเรียกใช้โดยการลากตัว Instance เข้ามาในตัวเฟรม ทำการเลือกได้ว่าต้องการให้แสดงผลที่สถานะไหน และนอกจากนั้นยังสามารถเพิ่ม Design ได้ไม่จำกัดในตัวกลุ่มของ Variant
วิธีการใช้งาน Variant (ตัวแปร) และ Instance ใน Figma มีดังนี้
1. สร้างปุ่ม - ทำการเลือกปุ่ม แล้วกดตรงที่วงกลมสีเขียว
2. create component - คลิกขวา และเลือก create component
3. เพิ่มตัวแปร - คลิกไปที่ปุ่มบวกด้านขวา คำว่า Variant -ทำการขยายกรอบพื้นที่ของ ตัวแปร - ตั้งชื่อปุ่มที่ 1
- ตั้งชื่อปุ่มที่ 2 - คลิกปุ่มบวกที่อยู่ด้านล่าง เราจะได้ตัวแปรเพิ่มมาอีก 1 ตัว - คลิกปุ่มที่2 แล้วปรับสีแบล็กกาว (แล้วแต่เราจะเลือกปุ่มไหน) ไปที่แถบ Accect แล้วลากปุ่มออกมา - แถบขวามือเราสามารถเลือกว่าจะแสดงปุ่มแบบไหน
ในส่วนของการสร้าง Variant หรือตัวแปรขึ้นมาเพื่อที่จะใช้คุณสมบัติกรุ๊ปแล้วสามารถเลือกใช่งานของตัวแปรได้ ซึ่งการตั้งค่าตัวแปรนี้จะมีผลต่อการออกแบบของหน้าจอ Auto Layout ด้วย หรือจะเรียกว่า การแยก packagename ออกมา หรือจะเรียกว่าแยกเป็น environment ใหม่ก็ได้ ทำให้สามารถปรับแต่งได้
การใช้งาน Variant ใน Figma นั้น เราจะใช้คุณสมบัติของ Variant ทำการ Group component เข้าไว้ด้วยกัน แล้วทำการเรียกใช้โดยการลากตัว Instance เข้ามาในตัวเฟรม ทำการเลือกได้ว่าต้องการให้แสดงผลที่สถานะไหน และนอกจากนั้นยังสามารถเพิ่ม Design ได้ไม่จำกัดในตัวกลุ่มของ Variant
วิธีการใช้งาน Variant (ตัวแปร) และ Instance ใน Figma มีดังนี้
1. สร้างปุ่ม - ทำการเลือกปุ่ม แล้วกดตรงที่วงกลมสีเขียว
2. create component - คลิกขวา และเลือก create component
3. เพิ่มตัวแปร - คลิกไปที่ปุ่มบวกด้านขวา คำว่า Variant -ทำการขยายกรอบพื้นที่ของ ตัวแปร - ตั้งชื่อปุ่มที่ 1
- ตั้งชื่อปุ่มที่ 2 - คลิกปุ่มบวกที่อยู่ด้านล่าง เราจะได้ตัวแปรเพิ่มมาอีก 1 ตัว - คลิกปุ่มที่2 แล้วปรับสีแบล็กกาว (แล้วแต่เราจะเลือกปุ่มไหน) ไปที่แถบ Accect แล้วลากปุ่มออกมา - แถบขวามือเราสามารถเลือกว่าจะแสดงปุ่มแบบไหน
ในส่วนของการสร้าง Variant หรือตัวแปรขึ้นมาเพื่อที่จะใช้คุณสมบัติกรุ๊ปแล้วสามารถเลือกใช่งานของตัวแปรได้ ซึ่งการตั้งค่าตัวแปรนี้จะมีผลต่อการออกแบบของหน้าจอ Auto Layout ด้วย หรือจะเรียกว่า การแยก packagename ออกมา หรือจะเรียกว่าแยกเป็น environment ใหม่ก็ได้ ทำให้สามารถปรับแต่งได้
-
- PHP Hero Member
- โพสต์: 166
- ลงทะเบียนเมื่อ: 07/12/2020 9:33 am
Re: การใช้งาน Variant ใน Figma
แก้ไขแล้วค่ะDuanghathai Termtem เขียน: ↑23/12/2020 12:54 pm ชื่อบทความไม่สื่อถึงประโยชน์
สีของสัญลักษณ์
การเชื่อมลิงค์ซ้ำกัน
-
- Similar Topics
- ตอบกลับ
- แสดง
- โพสต์ล่าสุด
-
- 3 ตอบกลับ
- 2902 แสดง
-
โพสต์ล่าสุด โดย Aoranuch Phupaloy
24/12/2020 5:08 pm
-
- 3 ตอบกลับ
- 2104 แสดง
-
โพสต์ล่าสุด โดย Aoranuch Phupaloy
24/12/2020 5:41 pm
ผู้ใช้งานขณะนี้
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 64