Start component name with either <md>_<md> or <md>.<md> to prevent it from independently publishing to the team library.

Start colour or text style name name with either <md>_<md> or <md>.<md> to prevent it from independently publishing to the team library.

Cut a published component with <md>⌘ X<md>

Open a different file and paste component with <md>⌘ V<md>

Publish the pasted component.

Go to Color Styles, Right-click on the respective style and select “Cut Style”

In destination library file, go to Color Styles, right-click any style and select “Paste Style”

Select multiple layers and click the <md>components<md> dropdown from the toolbar.

Select Create multiple components from the menu.

Open Quick Actions using <md>⌘ /<md>

Start typing <md>Detach all nested instances<md> to detach all instances within selection.

Add tags or related terms in component descriptions to search them in the figma asset panel.

Use the same layer name and hierarchy inside different components to preserve color property while swapping nested instances or components.

In main component, set variant property value to either <md>true/false<md>, <md>yes/no<md>, or <md>on/off<md> to generate a toggle switch for instance’s property displayed in the design panel.

To map text overrides, keep the exact name of respective text layers in different variants or components.

Delete the layer name and keep it blank to resync with the text layer's value.

Set constraints to pin object's position relative to its parent container while resizing.

For a fluid resizing behaviour, add Column Grid to parent frame and set child element’s horizontal constraint toleft and right.

Press and hold <md>⌘<md> and resize frame or layer temporarily ignoring the constraints.

‍

Select child of an auto layout frame and click icon (to the left) to enable absolute position.

Absolute positioned object pins relative to its parent auto layout frame on resizing.

Use 0.001 to set width or height to perfect 0.

Use <md>,<md> to define top and bottom padding in vertical padding field.

Use <md>,<md> to define left and right padding in horizontal padding field.

Select shape, hold down <md>⌥<md>and hover over the corner until its radius handle appears. Drag the icon below to adjust the radius.

Select a shape and press <md>⇧ X<md> to swap the fill and stroke

Select an object and press <md>⌥ ⌘ C<md> to copy its style, select a different object and press  <md>⌥  V<md> to apply the style.

Select a fill, stroke or effect property from design panel. Press <md>⌘ C<md> to copy. Select destination object and press  <md>⌥  V<md> to apply the style.

Select an object with desired property and set its property as default for all other new objects.

Select layer and type a number between <md>0<md> and <md>100<md> to change the opacity.

Press <md>0<md> once for 100% opacity and twice for 0% opacity.

Copy image to clipboard from external apps or select object and “Copy as PNG” in Figma.

To paste copied image as fill, select shape and press <md>⌘ V<md>

Choose multiple images and press <md>⇧ ⌘ K<md> to place images either on existing objects as fill or directly on the canvas.

Press <md>⌘ C<md> to copy an object.

Select objects and press <md>⌘ ⇧ R<md> to replace selected objects.

‍

Object -> Outline Stroke (press <md>⇧ ⌘ O<md>) converts the path into a vector object and separates stroke from the fill.

‍

Press <md>⌘ E<md>) to flatten rotation angle & corner radius.

Select an object and use round to pixel function to change positions from fractional to nearest whole pixels.

Union text layer with text or shape layer to apply corner radius while keeping text editable.

Double-click on text's bounding box to set both width and height to “auto”.

Press <md>⇧ ⌘ 7<md> to convert a text list to a numbered list.

Press <md>⇧ ⌘ 8<md> to convert a text list to a numbered list.

Select text layer and use the keyboard shortcut <md>⌘ ⇧ ><md> to quickly increase the font size.

Select text layer and use the keyboard shortcut <md>⌘ ⇧ < <md>to quickly decrease the font size.

Select a text layer or a selection of text and press <md>⌘ K<md> to create a link.

Press <md>⌘ ⇧ V<md> to ignore decorations and paste copied text as plain text.

Select text layer and press <md>⌘ ⌥ > <md> to quickly increase the font weight.

Select text layer and press <md>⌘ ⌥ < <md> to quickly decrease the font weight.

Press <md>K<md> to scale text, radius, strokes & effects proportionally.

Press <md>⌥ ⇧ ⌘ R<md> to re-adjust the dimensions of frame to its content.

Press <md>⌥ ⌘ G<md> to create a frame around a selected object.

Press <md>⇧ ⌘ G<md> to ungroup and clean up frame, autolayout or group.

Press <md>⌘ ▶<md> to increase width and <md>⌘ ◀<md> to decerase width.

Press <md>⌘ ▼<md> to increase height and <md>⌘ ▲<md> to decrease height.

Press <md>⇧ H<md> to flip objects horizontally over the Y axis.

Press <md>⇧ V<md> to flip objects vertically over the X axis.

Select object and perform mathematic operations directly in design panel fields using <md>()<md>, <md>/<md>, <md>*<md>, <md>+<md>, <md>-<md>.

Select multiple objects and perform mathematic operations on all selected objects at once.

Select object and calculate values using <md>%<md> in design panel fields.

Select object and calculate values in multiple of default value by prefixing <md>x<md> in design panel fields.

Set custom small and big nudge amounts to use across both viewport or layer properties.

Press <md>⌥<md> | <md>Alt<md> over field and drag to increase or decrease the respective values.

Press <md>⇧ ▲<md> to increase value by big nudge. Press <md>⇧ ▼<md> to decrease value by big nudge.

Double-click on frame's name to edit without leaving the canvas.

Figma smartly handles hexcode shorthand notations.

Figma accepts x11 color name and converts it into respective hexcode.

Make a selection of different objects and quickly change the colors of selected objects from the design panel.

Press <md>⌘ D<md> to duplicate an object, or select object, press <md>⌥<md> and drag to create a duplicate object.

Select layer and press and hold <md>⌘<md> then use layer bounds to quickly crop the layer.

Use pencil tool from toolbar or press <md>⇧ P<md> to quickly annotate frames or objects on the canvas.

Press <md>⇧ ↩<md> to move layer selection inside nested layers to parent.

Press <md>↩<md> to move layer selection to direct nested child layers.

Double-click layer's icon to quickly re-focus viewport to respective layer's content.

Press <md>N<md> to switch to the next frame. Press <md>⇧ N<md> to switch to the previous frame.

Press <md>⇧ 1<md> to re-focus viewport to see everything on the current page.

Select a deeply nested child layer by left clicking while pressing the <md>⌘<md> key.

Right click the object while pressing <md>⌘<md> for quick layers hierarchy.

While dragging an object on viewport, press <md>spacebar<md> to prevent object to nest inside underlying frame or autolayout.

While dragging an object within a frame, press <md>spacebar<md> to preserve nesting.

Press <md>⌥ L<md> to collapse layers. Click on a layer while pressing <md>⌥<md> to collapse or expand nested child layers.

Select Frame and press <md>⌘ L<md>. If no frame is selected, the page link is copied.

Copy Figma file or frame link from your browser to clipboard and open it instantly within desktop app.

Press <md>⌥ ⌘ \<md> to hide multiplayer cursors

Press <md>⇧ C<md> to hide comments.

Enter cursor chat mode using <md>/<md> keyboard shortcut.

Press <md>C<md> to select the comment tool, click and drag to highlight an area for the comment.

Use <md>:<md> inside comment field to wrap emoji shorthand like:<md>ok_hand:<md> for 👌

Select the first object, hold <md>⌥ ⌘<md> and hover over the second object to see the measurement.

Select the first object, hold <md>⌥<md> and hover over the second object to see measurement.

Go to <md>view<md> -> <md>Frame Outlines<md> to improve visibility of frames against the background.

Press <md>⌘ \<md> to hide toolbar, sidebars, rulers, and other figma panes to focus on your work.

Press <md>⇧ E<md> to quickly toggle between Design and Prototype Panel.

Select a layer and activate Color Picker with <md>⌃ C<md>. Click and hold to start hovering on viewport to see real-time color preview on the selected object.

Press <md>⌘ R<md> to select layers and use keyboard shortcut to batch rename.

To import an SVG image,directly copy SVG code to Figma's canvas.

Switch with respective tab index <md>⌘<md>  <md>1-9<md>

Switch to next tab <md>⌃ Tab<md>.

Switch to previous tab <md>⌃ ⇧ Tab<md>

Keep track of current file resource use to avoid memory outage in large-sized files.

Open File in “View Only” mode and copy layers from respective page to a new file.

In Figma's browser version, set all links to open directly in desktop app. <md>Preferences<md> -> <md>Open Links in Desktop App<md>

Open Quick Actions using <md>⌘ /<md> keyboard shortcut. Start typing “Hide Help UI” to toggle this on or off.

Figma desktop app defaults to Unmanaged Color Space, which leads to color mismatch in exported image assets.

Type figma.new in browser's address bar to quickly create a new figma design file.