ทริคTools

พื้นฐาน Figma

เปิดไฟล์ดีไซน์ใน Figma ดูค่าสี/ระยะ และส่งออก asset สำหรับงานจริง

เริ่มอ่านตรงนี้ก่อน

อธิบายแบบง่าย

พื้นฐาน Figma คือเรื่องที่ช่วยให้เราเป็นเครื่องมือช่วยสร้างหรือแปลงของที่ใช้ซ้ำ เช่น SVG, icon, formulaได้ถูกทางขึ้น

ระดับ

เหมาะกับคนที่เริ่มลงมือทำแล้ว

ใช้เมื่อไหร่

คุณได้รับลิงก์ดีไซน์จากทีมออกแบบและต้องนำไปทำจริง

อ่านแล้วทำอะไรต่อ

คลิกปุ่มในดีไซน์ อ่านค่า HEX จากแผง Inspect แล้วนำไปใส่ในธีมของแอป

เห็นภาพ: ทริคนี้เป็นยังไง

1เปิดไฟล์ดีไซน์ขอลิงก์จากดีไซเนอร์
2เปิด Dev Modeโหมดสำหรับนักพัฒนา
3คลิก elementเช่น ปุ่ม การ์ด
4อ่านค่า / ลอก CSSHEX, ขนาด, ระยะห่าง

▶ เล่นอัตโนมัติ · ชี้เมาส์เพื่อหยุด · กดแถบด้านบนเพื่อข้ามขั้น

อ่านค่าจากดีไซน์ Figma ด้วย Dev Mode

ใช้ตอนไหน?

คุณได้รับลิงก์ดีไซน์จากทีมออกแบบและต้องนำไปทำจริง
คุณต้องการค่าสี HEX หรือระยะห่างเป็นพิกเซลที่ตรงกับดีไซน์
คุณต้องดึงไอคอนหรือรูปจากไฟล์ดีไซน์มาใช้

ความหมาย

Figma เป็นเครื่องมือออกแบบ UI ที่ทำงานบนเบราว์เซอร์ คนทำงานทั่วไปมักได้รับลิงก์ไฟล์ดีไซน์มาเพื่อดู spec (รายละเอียดค่าสี ระยะห่าง ฟอนต์) และส่งออก asset (ไฟล์ภาพ/ไอคอนที่ดึงไปใช้ต่อ) โดยไม่ต้องเป็นนักออกแบบเอง

เปิดไฟล์และดู spec

เปิดลิงก์แล้วใช้โหมดดูอย่างเดียว (view/Dev Mode) เพื่ออ่านค่าและส่งออก asset

1. เปิดลิงก์ไฟล์ -> ถ้าเป็นผู้รับเชิญแบบดูอย่างเดียวก็เพียงพอ
2. คลิกที่วัตถุ (object) ใดๆ -> แผง Inspect ทางขวาแสดงสี/ขนาด/ระยะ
3. กด Alt (Win) ค้างแล้ว hover เพื่อวัดระยะห่างระหว่างวัตถุ
4. เลือกชิ้นงาน -> Export ทางขวาล่าง -> เลือก PNG/SVG -> Export

ตัวอย่างการใช้

ดึงค่าสีปุ่มหลัก