01 / Chrome
จับสิ่งที่เห็นตรงหน้า
เปิดหน้าที่ต้องการแก้ไข คลิก Snapture บนแถบเครื่องมือ Chrome แล้วเลือกพื้นที่ที่จะจับภาพ
จากหน้าเว็บ
สู่เลเยอร์ที่แก้ไขได้ใน Figma
จับภาพหน้าที่เปิดอยู่ รวมถึงหน้าหลังเข้าสู่ระบบ แล้วแก้ไขข้อความและเลย์เอาต์ใน Figma
จับภาพฟรีเดือนละ 10 ครั้ง โควตารีเซ็ตทุกเดือน
ฟีเจอร์
ใช้หน้าจอปัจจุบันเป็นจุดเริ่มต้นของงานแก้ไข
02 / HTML + CSS
จาก HTML และ CSS
ดูตัวอย่างโค้ด ปรับความกว้าง แล้วจับภาพ
03 / Figma
Auto Layout
แก้ไขต่อด้วย Auto Layout ในส่วนที่สามารถคงเลย์เอาต์เดิมไว้ได้
คอมโพเนนต์และสไตล์
องค์ประกอบซ้ำที่มีโครงสร้างตรงกันอาจเปลี่ยนเป็นคอมโพเนนต์ ข้อความ สี และตัวแปรสี CSS ที่รองรับจะกลายเป็นสไตล์และตัวแปรภายในไฟล์
04 / Viewport
ทุกความกว้างหน้าจอ
จับเลย์เอาต์ที่แสดงจริงในแต่ละความกว้างหน้าจอ
กราฟ แผนที่ 3D
กราฟ แผนที่ และเนื้อหา 3D อาจถูกนำเข้าเป็นรูปภาพ จึงแก้ไขส่วนเหล่านี้เป็นข้อมูลกราฟหรือโมเดล 3D ไม่ได้
จับเป็นชุด
วางรายการ URL หรือดึงจาก sitemap ของเว็บนั้นเอง แล้ว Snapture จะเปิดและจับให้ทีละหน้า สูงสุด 30 หน้าต่อรอบ
วิธีใช้
- 01
จับสิ่งที่เห็นตรงหน้า
เปิดหน้าที่ต้องการแก้ไข คลิก Snapture บนแถบเครื่องมือ Chrome แล้วเลือกพื้นที่ที่จะจับภาพ
- 02
คัดลอกสำหรับ Figma
หลังจับภาพ ให้คัดลอกสำหรับ Figma หรือบันทึกเป็นไฟล์แล้วลากลงในปลั๊กอินก็ได้
- 03
แก้ไขใน Figma
เปิด Snapture Import ในไฟล์ Figma แล้ววางด้วย Cmd/Ctrl+V เลือกเลเยอร์ข้อความเพื่อเริ่มแก้ไข
ราคา
เลิกวาดซ้ำสิ่งที่มีอยู่แล้วกันเถอะ
เพิ่มส่วนขยาย Chrome ก่อน หลังจับภาพแล้วเปิด Snapture Import ใน Figma เพื่อวางผลลัพธ์