ใน Figma เรียกว่าองค์ประกอบ UI ส่วนประกอบ . สร้างขึ้นอย่างถูกต้องมีความหลากหลายและง่ายต่อการอัปเดตอย่างไม่น่าเชื่อ แต่ส่วนประกอบมีความสามารถอะไรบ้างและทำงานอย่างไร เราจะแสดงให้เห็นถึงพลังของพวกเขาด้วยการทำงานร่วมกับหนึ่งในสิ่งที่พบบ่อยที่สุด องค์ประกอบ UI ทั้งหมด - ปุ่ม
ทำไมต้องปุ่ม?
ปุ่มต่างๆเต็มไปด้วยตัวแปรต่างๆเช่นความสูงความกว้างความยาวป้ายการเว้นภายในสถานะและธีม ด้วยการสร้างระบบปุ่มพื้นฐานเราจะได้เรียนรู้คุณค่าอันยิ่งใหญ่ของการใช้งาน Figma ด้วยความคิดตามองค์ประกอบและไลบรารีส่วนประกอบ Figma
* หมายเหตุบรรณาธิการ: บทช่วยสอนที่เขียนขึ้นนี้ได้มาจากวิดีโอสอนที่สร้างโดย David Luhr จาก สร้าง UX .
%c c++
ภารกิจที่ 1: สร้างส่วนประกอบปุ่ม Figma พื้นฐาน
- เราจะเริ่มต้นด้วยการสร้างเฟรมใหม่และเปลี่ยนชื่อ ปุ่มต่างๆ ในแผงเลเยอร์
- พิมพ์ข้อความป้ายกำกับปุ่มของคุณ เราจะใช้ 'ลงทะเบียน' สำหรับบทช่วยสอนนี้
- แบบอักษรของเราคือ:
- Roboto ปานกลาง
- ขนาดตัวอักษร 18
- ความสูงของเส้น 24
- ศูนย์จัดแนวข้อความ
- จัดแนวกลาง
- การปรับขนาด = ขนาดคงที่
- เมื่อคุณเขียนไฟล์ ปุ่ม ให้ดับเบิลคลิกที่มุมขวาล่างของกล่องข้อความเพื่อปรับขนาดตามข้อ จำกัด ที่เล็กที่สุดของข้อความโดยอัตโนมัติ
- เปลี่ยนชื่อเลเยอร์ข้อความ ป้ายกำกับปุ่ม .
- ทำเป็นรูปสี่เหลี่ยมผืนผ้าวางไว้ด้านล่าง ป้ายกำกับปุ่ม ในแผงเลเยอร์และเปลี่ยนชื่อ ปุ่มคอนเทนเนอร์ . อนุญาตให้สีของคอนเทนเนอร์ปุ่มยังคงเป็นสีเทาเริ่มต้น
- กำหนดความสูงคงที่สำหรับคอนเทนเนอร์ปุ่ม เราจะใช้ 60 พิกเซล
- ตอนนี้เราจะเพิ่มช่องว่างภายในลงในที่เก็บปุ่ม
- ความกว้างของป้ายปุ่มคือ 63 พิกเซล
- เราต้องการช่องว่างด้านขวาและด้านซ้าย 24 พิกเซล รวมแล้วจะเท่ากับ 48 พิกเซล
- ดังนั้นเราจะป้อนความกว้างของป้ายกำกับ (63 พิกเซล) + ช่องว่างภายในทั้งหมด (48 พิกเซล)
- เลือกทั้งฉลากและภาชนะและจัดให้อยู่กึ่งกลางด้วยเครื่องมือจัดแนว
คลิกเพื่อดูภาพขนาดเต็ม 
คลิกเพื่อดูภาพขนาดเต็ม เราได้ออกแบบปุ่มพื้นฐาน อย่างไรก็ตามช่องว่างภายในของปุ่มของเรายังไม่สามารถรองรับการเปลี่ยนความยาวฉลากได้ ในขั้นตอนต่อไปเราจะกล่าวถึงรูปแบบภายในซึ่งจะช่วยให้ความกว้างของคอนเทนเนอร์ปุ่มมีความยืดหยุ่นเมื่อเทียบกับความยาวฉลาก
ภารกิจที่ 2: ทำให้ปุ่มเป็นแบบโต้ตอบ
ในการทำให้ปุ่มโต้ตอบเราจะเพิ่มวงแหวนโฟกัส
หลามแอตทริบิวต์คืออะไร
- ทำซ้ำ ปุ่มคอนเทนเนอร์ และเปลี่ยนชื่อ วงแหวนโฟกัสของปุ่ม .
- ตรวจสอบให้แน่ใจว่าวงแหวนโฟกัสอยู่ใต้ที่เก็บปุ่มในแผงเลเยอร์
- นำส่วนที่เติมของวงแหวนโฟกัสออกแล้วเพิ่มเส้นขีดด้านในสีดำที่มีความหนา 4 พิกเซล
- นอกจากนี้เรายังต้องการช่องว่าง 4 พิกเซลระหว่างที่เก็บปุ่มและวงแหวนโฟกัสทั้งสี่ด้านดังนั้นเราจะเพิ่ม +16 ให้กับทั้งความกว้างและความสูง
- เลือกและจัดกึ่งกลางฉลากคอนเทนเนอร์ปุ่มและวงแหวนโฟกัส
- เลือกองค์ประกอบทั้งสาม (ฉลากคอนเทนเนอร์ปุ่มวงแหวนโฟกัส) คลิกขวาและเลือก 'สร้างส่วนประกอบ'
- เปลี่ยนชื่อส่วนประกอบ ปุ่ม / ดั้งเดิม / ค่าเริ่มต้น .
- ปุ่ม = ประเภทส่วนประกอบ
- Primitive = การเปลี่ยนแปลง
- ค่าเริ่มต้น = รัฐ
นี่คือลักษณะที่ปุ่มของเราในรูปแบบที่เรียบง่ายที่สุดจะอยู่ในสถานะโฟกัส
คลิกเพื่อดูภาพขนาดเต็ม 
คลิกเพื่อดูภาพขนาดเต็ม นี่คือปุ่มดั้งเดิมของเรา มันจะไม่ปรากฏในการออกแบบขั้นสุดท้ายของเรา แต่จะทำหน้าที่เป็นพื้นฐานที่รูปแบบปุ่มทั้งหมดของเราจะสร้างขึ้น ข้อได้เปรียบ? หากเราจำเป็นต้องออกแบบปุ่มของเราใหม่ในอนาคตเราจะต้องแก้ไขในที่เดียวเท่านั้น
คลิกเพื่อดูภาพขนาดเต็ม ภารกิจที่ 3: สร้างตารางเค้าโครงปุ่ม
- เลือก ปุ่ม / ดั้งเดิม / ค่าเริ่มต้น ไปที่แผงออกแบบแล้วคลิกไอคอน '+' ถัดจาก 'Layout Grid'
- จากนั้นคลิกที่ไอคอนเส้นตารางเลือก 'คอลัมน์' และป้อนค่าต่อไปนี้:
- จำนวนคอลัมน์ = 1
- ความกว้าง = อัตโนมัติ
- เด็กชาย = 0
- ประเภท = ยืด
- 'Margin' ให้ช่องว่างภายในที่เก็บปุ่ม
- จำไว้ว่าเราต้องมีช่องว่างด้านซ้ายและด้านขวา 24 พิกเซล
- เรายังต้องพิจารณาขอบหนา 4 พิกเซลและช่องว่าง 4 พิกเซลของวงแหวนโฟกัสของเราด้วย
- ซึ่งหมายความว่าเราต้องมีระยะขอบ 32 พิกเซล
- เมื่อเพิ่มระยะขอบแล้วคุณจะสังเกตเห็นพื้นที่ตัวบ่งชี้สีแดงที่แสดงช่องว่างภายในของที่เก็บปุ่มและพอดีกับความกว้างของฉลาก
- เลือกทั้งสามชั้น ภายใน องค์ประกอบไปที่ 'ข้อ จำกัด ' และตรึงไว้ที่ 'ซ้ายและขวา' และ 'กึ่งกลาง'
- ณ จุดนี้คุณสามารถเลือกองค์ประกอบและลากไปยังความกว้างใดก็ได้ที่คุณต้องการ คุณจะเห็นว่าเค้าโครงทำงานตรงตามที่ออกแบบไว้
- หากคุณทำให้ความกว้างของปุ่มสั้นกว่าป้ายกำกับคุณจะสังเกตเห็นว่าป้ายกำกับแบ่งไปอีกบรรทัด
คลิกเพื่อดูภาพขนาดเต็ม 
คลิกเพื่อดูภาพขนาดเต็ม 
คลิกเพื่อดูภาพขนาดเต็ม ตอนนี้เราต้องเพิ่มข้อ จำกัด การจัดวางให้กับแต่ละองค์ประกอบของปุ่มของเรา
คลิกเพื่อดูภาพขนาดเต็ม ภารกิจที่ 4: ปรับความกว้างของปุ่มสำหรับความยาวข้อความ
มาดูกันว่าปุ่มของเราทำงานอย่างไรกับป้ายกำกับปุ่มที่ยาวขึ้น
- ไปที่แผงเนื้อหาลากปุ่มอินสแตนซ์ใหม่แล้วพิมพ์ 'กำหนดเวลาการนัดหมาย' หรืออะไรที่ยาวกว่านั้น เกิดอะไรขึ้น? ป้ายกำกับล้นไปยังบรรทัดถัดไปไม่ใช่สิ่งที่เราต้องการ
- กลับไปที่แผงเลเยอร์ของคุณเลือกองค์ประกอบใหม่ที่คุณเพิ่งลากเข้ามาและใช้ปุ่มลูกศรเพื่อปรับความกว้างให้มีขนาดที่แม่นยำซึ่งเหมาะกับป้ายกำกับ
- เมื่อคุณทำเช่นนี้คุณจะเห็นว่าตัวแปรเลย์เอาต์ทั้งหมดยังคงเป็นไปตามที่ตั้งใจไว้นั่นคือช่องว่างภายในตำแหน่งป้ายกำกับจังหวะ 4 พิกเซลและช่องว่าง 4 พิกเซลของวงแหวนโฟกัส (ลบปุ่มที่ซ้ำกันนี้ก่อนย้ายไปที่ภารกิจที่ 5)
คลิกเพื่อดูภาพขนาดเต็ม ด้วยการใช้ตารางเค้าโครงคุณสามารถสร้างปุ่มเดียวที่ใช้งานได้ตลอดการออกแบบทั้งหมดของคุณและสิ่งที่คุณต้องทำคือปรับความกว้างตามความยาวของป้ายกำกับที่คุณต้องการ
คลิกเพื่อดูภาพขนาดเต็ม ภารกิจที่ 5: สร้างสถานะโฮเวอร์และโฟกัส
ด้วยค่าเริ่มต้นของปุ่มเรามาสร้างพื้นฐานของสถานะการวางเมาส์และโฟกัสของเรากัน
วิธีทำงบกระแสเงินสดจากงบดุล
- ปิดวงแหวนโฟกัสในค่าเริ่มต้นของปุ่มของคุณ
- กดปุ่ม Alt ค้างไว้แล้วลากอินสแตนซ์ใหม่ของปุ่มเริ่มต้นออก
- ทำให้ที่เก็บปุ่มเป็นสีเทาอ่อน (# E7E7E7)
- คลิกขวา 'สร้างส่วนประกอบ' และเปลี่ยนชื่อ ปุ่ม / ดั้งเดิม / โฮเวอร์ .
- ลากอินสแตนซ์อื่นของสถานะเริ่มต้นเปิดวงแหวนโฟกัสและจับคู่สีของคอนเทนเนอร์ปุ่มกับสีของคอนเทนเนอร์สถานะโฮเวอร์ (# E7E7E7)
- คลิกขวา 'สร้างส่วนประกอบ' และเปลี่ยนชื่อ ปุ่ม / ดั้งเดิม / โฟกัส .
คลิกเพื่อดูภาพขนาดเต็ม ตอนนี้เรามีส่วนจัดการกับรูปแบบของปุ่มและวิธีการทำงานในสถานะต่างๆ จากที่นี่เราสามารถเริ่มเพิ่มธีมหรือสไตล์เฉพาะได้ขึ้นอยู่กับสิ่งที่เราต้องการ
คลิกเพื่อดูภาพขนาดเต็ม ภารกิจที่ 6: ใช้ธีมปุ่ม
ตอนนี้เราจะสร้างรูปแบบที่มีสไตล์
- กดปุ่ม Alt ค้างไว้แล้วลากในอินสแตนซ์อื่นของ ปุ่ม / ดั้งเดิม / ค่าเริ่มต้น .
- เปลี่ยนสีของคอนเทนเนอร์ให้ตรงกับสีของธีมที่ต้องการ (# 204ECF)
- ทำให้ป้ายปุ่มเป็นสีขาว (#FFFFFF) สลับวงแหวนโฟกัสเปลี่ยนจังหวะเป็นสีของธีมที่ต้องการ (# 204ECF) และปิดสวิตช์
- คลิกขวา 'สร้างส่วนประกอบ' และเปลี่ยนชื่อ ปุ่ม / BrightBlue / ค่าเริ่มต้น .
- ลากปุ่มเริ่มต้นใหม่นี้ออกมาสองอินสแตนซ์: หนึ่งสำหรับสถานะโฮเวอร์และอีกหนึ่งสำหรับสถานะโฟกัส
- เปลี่ยนสีของที่เก็บปุ่มให้ตรงกับสีของธีมที่ต้องการ (# 678FFF) คลิกขวา 'สร้างส่วนประกอบ' และเปลี่ยนชื่อ ปุ่ม / BrightBlue / Hover .
- ใช้สีเดียวกันกับที่เก็บปุ่มโฟกัสสลับบนวงแหวนโฟกัสคลิกขวา 'สร้างส่วนประกอบ' และเปลี่ยนชื่อ ปุ่ม / BrightBlue / โฟกัส .
คลิกเพื่อดูภาพขนาดเต็ม คุณสามารถใช้กระบวนการเดียวกันนี้กับธีมต่างๆที่คุณต้องการในการออกแบบของคุณ
คลิกเพื่อดูภาพขนาดเต็ม ภารกิจที่ 7: ดูความงามของส่วนประกอบ Figma
เมื่อคุณสร้างธีมทั้งหมดแล้วให้ใช้เวลาสักครู่เพื่อสังเกตว่าการทำงานกับคอมโพเนนต์มีประสิทธิภาพเพียงใด
- เลือกไฟล์ ปุ่ม / ดั้งเดิม / ค่าเริ่มต้น เพิ่มรัศมีมุมและคุณจะเห็นว่าปุ่มทั้งหมดของคุณได้รับการอัปเดตโดยอัตโนมัติ
- จากนั้นไปที่แผงส่วนประกอบของคุณ ปุ่มทั้งหมดของคุณสามารถลากไปไว้ในส่วนใดส่วนหนึ่งของการออกแบบของคุณได้
- นอกจากนี้เนื่องจากเราใช้หลักการตั้งชื่อนี้เราจึงสามารถสลับปุ่มใดก็ได้สำหรับอินสแตนซ์ / ธีมอื่น หากต้องการดูการทำงานนี้ให้ลากปุ่มในอินสแตนซ์เดียวจากนั้นไปที่ 'อินสแตนซ์' ในไฟล์ ออกแบบ แผงเลือกอินสแตนซ์ที่คุณต้องการและจะเปลี่ยนทันที
คลิกเพื่อดูภาพขนาดเต็ม 
คลิกเพื่อดูภาพขนาดเต็ม 
คลิกเพื่อดูภาพขนาดเต็ม การทำงานภายใต้กรอบของส่วนประกอบทำให้เราสามารถจัดการปุ่มของเราได้อย่างรวดเร็วและมีประสิทธิภาพในทุกพื้นที่ของการออกแบบของเรา เหนือสิ่งอื่นใดมันไม่ได้ใช้แค่ปุ่มเท่านั้น แต่ยังใช้งานได้ด้วย ส่วนประกอบ UI ทุกประเภท
•••อ่านเพิ่มเติมในบล็อกการออกแบบ ApeeScape:
- พลังของ Figma ในฐานะเครื่องมือออกแบบ
- Figma เทียบกับ Sketch vs. Axure - การทบทวนตามงาน
- ปรับปรุงการออกแบบร่วมกันด้วย Figma
- การออกแบบปุ่มในช่วงหลายปีที่ผ่านมา - ไทม์ไลน์ Dribbble
- Framer Tutorial: 7 Microinteractions อย่างง่ายเพื่อปรับปรุงต้นแบบของคุณ
ทำความเข้าใจพื้นฐาน
คุณสามารถทำอะไรกับ Figma ได้บ้าง?
Figma เป็นเครื่องมือออกแบบออนไลน์ที่ช่วยให้นักออกแบบและทีมออกแบบสามารถทำงานร่วมกันได้ นักออกแบบสามารถใช้แอป Figma เป็นเครื่องมือจำลองสำหรับการส่งมอบผลิตภัณฑ์ดิจิทัลที่หลากหลาย นอกจากนี้เนื่องจาก Figma เป็นเครื่องมือออกแบบบนเบราว์เซอร์นักออกแบบจึงสามารถเข้าถึงงานบนคอมพิวเตอร์เครื่องใดก็ได้ที่มีการเชื่อมต่ออินเทอร์เน็ต
Figma ดีกว่า Sketch หรือไม่?
เป็นการยากที่จะระบุอย่างชัดเจนว่าซอฟต์แวร์ออกแบบใดดีกว่าเนื่องจากนักออกแบบและทีมออกแบบทุกคนมีความต้องการและการกำหนดลักษณะขั้นตอนการทำงานที่แตกต่างกัน ที่กล่าวว่า Figma ได้รับการยกย่องจากคุณสมบัติการทำงานร่วมกันซึ่งช่วยให้นักออกแบบนักพัฒนาและผู้มีส่วนได้ส่วนเสียสามารถสร้างและปรับแต่งผลิตภัณฑ์ดิจิทัลร่วมกันได้
ความแตกต่างใน s corp และ c corp
ฉันจะส่งออกใน Figma ได้อย่างไร
นักออกแบบและทีมออกแบบที่ใช้แพลตฟอร์มการออกแบบหลายแพลตฟอร์มนั้นโชคดีเพราะ Figma ช่วยให้สามารถส่งออกวัตถุชิ้นเดียวเฟรมทั้งหมดและไฟล์โครงการแบบเต็มได้อย่างง่ายดาย ในหลายกรณีวัตถุอาจถูกลากจาก Figma ไปยังโปรแกรมอื่นหรืออาจคัดลอกเป็น SVG และวางลงในโปรแกรมอื่นโดยตรง
Figma สามารถส่งออกไปยัง Sketch ได้หรือไม่
ใช่. วัตถุใด ๆ ในต้นแบบ Figma ของคุณ (ปุ่มไอคอน ฯลฯ ) อาจถูกส่งออกไปยัง Sketch ไฟล์ SVG สามารถลากได้โดยตรงจาก Figma ไปยัง Sketch นอกจากนี้ยังมีตัวเลือกสำหรับการส่งออกไฟล์การออกแบบทั้งหมดจาก Figma ไปยัง Sketch จากไฟล์ Figma ของคุณเพียงไปที่ไฟล์> บันทึกเป็นไฟล์. fig
ใครเป็นคนสร้าง Figma?
Figma ซึ่งตั้งอยู่ในซานฟรานซิสโกก่อตั้งขึ้นในปี 2555 โดยอดีตนักศึกษามหาวิทยาลัยบราวน์ Evan Wallace และ Dylan Field วอลเลซและฟิลด์เชื่อว่าเพื่อให้การออกแบบสามารถทำงานร่วมกันได้อย่างแท้จริงจำเป็นต้องเกิดขึ้นบนเว็บ (ตรงข้ามกับการแยกคอมพิวเตอร์แต่ละเครื่องออก)
