⌨️ 30 Framer shortcuts ที่รู้ไว้งานไวแน่นอน

เคยไหม… ออกแบบใน Framer แล้วเสียเวลาหาเครื่องมือทีละปุ่ม? จำคีย์ลัดหลัก ๆ ได้ งานออกแบบและพรีวิวจะไหลลื่นขึ้นมาก รวมมาให้ 30 ตัว (Mac เปลี่ยน Ctrl เป็น Cmd, Alt เป็น Option)

เครื่องมือ

1. V — Select เลือก

2. F — Frame

3. T — Text

4. R — Rectangle

5. O — Oval

6. P — Pen

7. K — Component (สร้าง/แทรก)

8. Enter — เข้าแก้ไของค์ประกอบ

จัดการวัตถุ

9. Ctrl+C — คัดลอก

10. Ctrl+V — วาง

11. Ctrl+X — ตัด

12. Ctrl+D — ทำซ้ำ

13. Ctrl+G — Group

14. Ctrl+Shift+G — Ungroup

15. Ctrl+L — Lock

16. Ctrl+Shift+H — ซ่อน/แสดง

17. Ctrl+] — เลื่อนขึ้นชั้น

18. Ctrl+[ — เลื่อนลงชั้น

19. ลูกศร — ขยับทีละ 1px

20. Shift+ลูกศร — ขยับทีละ 10px

21. Alt+ลาก — ก๊อปปี้วัตถุ

มุมมองและพรีวิว

22. Ctrl+Enter — Preview

23. Spacebar+ลาก — เลื่อน canvas

24. Ctrl++ / Ctrl+- — ซูมเข้า/ออก

25. Ctrl+0 — ซูม 100%

26. Shift+1 — Fit ทั้งหมด

27. Shift+2 — ซูมไปวัตถุที่เลือก

ข้อความ

28. Ctrl+B — ตัวหนา

29. Ctrl+I — ตัวเอียง

30. Ctrl+Z — ย้อนกลับ

จำกลุ่มเครื่องมือ (1–8) กับ Ctrl+Enter พรีวิวให้ขึ้นใจก่อน แล้วงานออกแบบเว็บจะเร็วขึ้นเห็น ๆ 🚀

6/15 แก้ไขเป็น

... อ่านเพิ่มเติมการที่เราจำคีย์ลัดหลัก ๆ ในการใช้งาน Framer ได้นั้น ช่วยให้งานออกแบบของผมลื่นไหลได้อย่างมาก เพราะไม่ต้องเสียเวลาคลิกหาปุ่มเครื่องมือในแต่ละขั้นตอน ผมแนะนำให้ฝึกจำคีย์ลัดกลุ่มเครื่องมือพื้นฐานตั้งแต่ V, F, T, R, O, P, K และ Enter ซึ่งเป็นคีย์ลัดสำคัญที่ใช้บ่อย รวมถึง Ctrl+Enter สำหรับพรีวิวผลงาน เพื่อให้เห็นภาพการทำงานแบบเรียลไทม์ อีกเรื่องที่ผมชื่นชอบคือการใช้คีย์ลัดจัดการวัตถุ เช่น Ctrl+C/V/D/G/L และคีย์ลัดที่ช่วยเลื่อนชั้นวัตถุหรือซ่อนวัตถุ ทำให้การจัดองค์ประกอบในงานออกแบบแม่นยำและเร็วขึ้น โดยเฉพาะการใช้งานร่วมกับการกด Shift หรือ Alt ที่ช่วยเพิ่มความสามารถ เช่น ขยับทีละ 10px หรือก๊อปปี้วัตถุอย่างรวดเร็ว นอกจากนี้ คีย์ลัดสำหรับมุมมองและพรีวิว เช่น การซูม Ctrl++/-, Fit ทั้งหมด, ซูมไปวัตถุที่เลือก และการเลื่อน canvas ด้วย Spacebar เป็นอะไรที่ขาดไม่ได้ เพราะช่วยให้การตรวจสอบระดับความละเอียดของงานออกแบบสะดวกมากยิ่งขึ้น ส่วนคีย์ลัดที่เกี่ยวข้องกับข้อความอย่าง Ctrl+B หรือ Ctrl+I ก็ทำให้การจัดแต่งข้อความง่ายและรวดเร็วขึ้นมาก จากประสบการณ์จริง ผมพบว่าเมื่อจำและใช้คีย์ลัดเหล่านี้จนชำนาญ จะช่วยประหยัดเวลาได้มากและทำให้งานออกแบบดูเป็นมืออาชีพขึ้น นอกจากนี้ หากคุณเป็นผู้ใช้ Mac ให้สลับการกด Ctrl เป็น Cmd และ Alt เป็น Option ตามที่บทความแนะนำด้วย จะใช้งานได้ลื่นไหลไม่สะดุดเลย สุดท้ายอย่าลืมว่าการฝึกใช้คีย์ลัดบ่อย ๆ จะทำให้คุณทำงานกับ Framer ได้เร็วขึ้นโดยไม่ต้องเปิดเมนูบ่อย ๆ ส่งผลให้อรรถรสในการออกแบบและความคิดสร้างสรรค์ของคุณไหลลื่นขึ้นตามไปด้วยครับ