Framer HotKeys

2024 年 12 月 22 日

Post Views: 232

Framer is a very popular design tool, widely used in areas such as interface design, prototyping, and interactive design. In order to improve efficiency, Framer provides a wealth of shortcut keys to help designers create and edit more efficiently.

Framer Window Shortcuts

Tools

Shortcuts	Function Description
`T`	Text
`F`	Frame
`U`	Circular
`Z`	Soar
`G`	Graphic
`Ctrl` + `C`	Sample Color
`Shift` + `S`	Page Stack
`C`	Comment
`I`	Insert
`L`	Interaction
`Ctrl` + `/`	Library

Components

Shortcuts	Function Description
`Ctrl` + `K`	Create Component
`Shift` + `Ctrl` + `K`	Create via Code

Views

Shortcuts	Function Description
`Ctrl` + `1`	Zoom to Fit
`Ctrl` + `+`	Zoom in
`Ctrl` + `Ctrl` + `N`	Night mode
`Ctrl` + `0`	Zoom to 100%
`Ctrl` + `2`	Zoom to selection
`Ctrl` + `R`	Show ruler
`Ctrl` + `-`	Zoom out
`Ctrl` + `G`	Show layout grid
`L`	Switch interface

Editing

Shortcuts	Function description
`Ctrl` + `D`	Copy
`Ctrl` + `A`	Select all
`Ctrl` + `R`	Rename
`Ctrl` + `Z`	Undo
`Shift` + `Ctrl` + `Z`	Redo
`backspace`	Delete
`Alt` + `Ctrl` + `A`	Select all subitems
`Alt` + `Ctrl` + `V`	Paste style
`Ctrl` + `;`	Hide
`Ctrl` + `L`	Lock
`Alt` + `Ctrl` + `C`	Copy style
`Shift` + `Ctrl` + `A`	Select all siblings

Image

Shortcuts	Function description
`Ctrl` + `G`	Group
`Shift` + `Ctrl` + `G`	Ungroup

Text

Shortcuts	Function description
`Ctrl` + `I`	Italic
`Ctrl` + `U`	Emphasize
`Ctrl` + `B`	Bold

Layout

Shortcuts	Function description
`Alt` + `Ctrl` + `up`	Forward
`Alt` + `Ctrl` + `↩`	Add Stack
`Alt` + `Ctrl` + `down`	Move Backward
`Ctrl` + `↩`	Add Frame
`Alt` + `backspace`	Remove Package

Publish

Shortcuts	Function Description
`Alt` + `S`	Add Frame

Files

Shortcuts	Function Description
`Alt` + `Ctrl` + `N`	New
`Alt` + `Ctrl` + `I`	Upload Image

Framer MacOS Shortcuts

Tools

Shortcuts	Function Description
`C`	Comment
`⌃` + `C`	Sample Color
`⇧` + `S`	Page Stack
`L`	Interaction
`I`	Insert
`T`	Text
`⌘` + `/`	Library
`G`	Graphic
`Z`	Soar
`U`	Circular
`F`	Frame

Views

Shortcuts	Function Description
`⌃` + `⌘` + `N`	Night Mode
`⌘` + `1`	Zoom to Fit
`⌘` + `-`	Zoom Out
`L`	Switch Interface
`⌘` + `+`	Zoom In
`⌘` + `0`	Zoom to 100%
`⌘` + `R`	Show Rulers
`⌃` + `G`	Show Layout Grid
`⌘` + `2`	Zoom to Selection

Editing

Shortcuts	Function Description
`⇧` + `⌘` + `Z`	Redo
`⌘` + `;`	Hide
`⌥` + `⌘` + `C`	Copy Style
`⌥` + `⌘` + `V`	Paste Style
`⌥` + `⌘` + `A`	Select All Children
`⌘` + `D`	Copy
`⌘` + `R`	Rename
`⌘` + `L`	Lock
`⌘` + `Z`	Undo
`⇧` + `⌘` + `A`	Select All Siblings
`⌫`	Delete
`⌘` + `A`	Select All

Files

Shortcuts	Function Description
`⌥` + `⌘` + `I`	Upload Image
`⌥` + `⌘` + `N`	New

Image

Shortcuts	Function Description
`⌘` + `G`	Group
`⇧` + `⌘` + `G`	Ungroup

Layout

Shortcuts	Function Description
`⌘` + `↩`	Add Frame
`⌥` + `⌘` + `↓`	Move Backward
`⌥` + `⌘` + `↑`	Move Forward
`⌥` + `⌫`	Remove Wrap
`⌥` + `⌘` + `↩`	Add Stack

Text

Shortcuts	Function Description
`⌘` + `U`	Emphasize
`⌘` + `I`	Italic
`⌘` + `B`	Bold

Publish

Shortcuts	Function Description
`⌥` + `S`	Add Frame

Components

Shortcuts	Function Description
`⇧` + `⌘` + `K`	Create by Code
`⌘` + `K`	Create Component

About Framer

Framer is a full-featured interface design and prototyping tool that supports design, animation, interaction and code integration, and is a powerful assistant for designers and developers. Framer provides powerful visual design and prototyping features that can help users quickly build high-fidelity design works. Framer allows designers to implement interactive and animated effects directly in the tool without relying on developers. Whether on the Web, iOS or Android platform, Framer can help users create excellent user experiences.

Framer official website information

Official website address: Framer official website
Download address: Framer download
Shortcut address: Framer shortcut

Framer shortcut FAQ

How to restore the default shortcut settings?

Enter the settings and click the "Restore Default Settings" option to restore the default shortcut settings.

Does Framer support custom shortcuts?

Yes, Framer allows users to customize shortcuts according to their own habits.

What are the differences between Framer's shortcut keys in Windows and MacOS?
- The main difference is that Windows uses the Ctrl key, while MacOS uses the Cmd key.
Can I export Framer shortcut keys?
- Currently, Framer does not support exporting shortcut key settings, but you can view all shortcut keys in the settings.
Are there shortcut key icons for Framer?
- Yes, Framer's official website provides shortcut key icons for users to understand more intuitively.
How do I quickly switch tool panels?
- Use Ctrl+1 to Ctrl+9 (Windows) or Cmd+1 to Cmd+9 (MacOS) to quickly switch between different tool panels.
How do I quickly delete objects in Framer?
- After selecting an object, simply press the Delete key to delete it.
How do I use shortcut keys to switch between different view modes?
- You can switch view modes by pressing Ctrl+Tab (Windows) or Cmd+Tab (MacOS).

Summary

Framer's shortcut keys greatly improve the work efficiency of designers and developers. By mastering these shortcut keys, users can complete design work in a shorter time and improve productivity. If you are a Framer user, you may wish to familiarize yourself with these shortcut keys to make your work more efficient and smooth.