25 Advanced Figma Tips That Will Transform Your Workflow

Introduction

You know the basics of Figma. Now it's time to work like a pro. These 25 tips will speed up your workflow, help you create more flexible designs, and impress your teammates. Let's level up.

Auto Layout Mastery

1. Absolute Positioning in Auto Layout
Add elements that float over auto-layout content without breaking the flow:

Add your element to an auto-layout frame

Select it and set position to "Absolute" in the right panel

The element is now positioned absolutely within the auto-layout parent

2. Negative Gap Values
Create overlapping elements in auto-layout:

Set a negative value for gap (e.g., -8)

Elements will overlap by that amount

Perfect for avatar stacks and card groups

3. Min/Max Width in Auto Layout
Create responsive components that adapt within constraints:

Select an auto-layout child

In the right panel, click the three dots for min/max width

Set minimum and maximum values

The element will resize within these bounds

4. Auto Layout Wrapping
Create flexible grids that reflow:

Enable "Wrap" in auto-layout settings

Content will wrap to new rows when container shrinks

Combine with fill width for responsive behavior

5. Space Between on Specific Items
Add extra space between specific elements:

Add an empty frame as a spacer

Set its size to the extra space needed

The auto-layout will respect this spacing

Components and Variants

6. Expose Nested Instance Properties
Surface controls from nested components:

Select the nested instance

In properties panel, click the plus to expose properties

Customize which properties appear at the parent level

7. Boolean Properties for Visibility
Create show/hide toggles:

Create a boolean property

Apply to the element's visibility

Control whether elements appear without extra variants

8. Instance Swap Properties
Swap nested components flexibly:

Set up an instance swap property

Link it to a nested component

Users can swap the nested component from the parent

9. Preferred Values for Instance Swaps
Limit swap options to prevent mistakes:

Select the instance swap property

Click "Edit preferred values"

Choose which components are available to swap

10. Component Descriptions
Add usage guidance directly in Figma:

Select a component

Add description in the properties panel

Appears when hovering over component in assets

Shortcuts and Speed

11. Quick Actions (Cmd/Ctrl + /)
Search for any command:

Press Cmd/Ctrl + /

Type what you want to do

Execute without remembering shortcuts

12. Scale Tool (K)
Resize proportionally including strokes:

Press K for the scale tool

Drag to resize

Strokes, radii, and effects scale together

13. Measure Distances (Alt/Option)
See spacing instantly:

Hold Alt/Option while hovering

See distance to nearby elements

Click and drag for specific measurements

14. Copy Properties (Cmd/Ctrl + Alt + C/V)
Copy specific properties between elements:

Copy: Cmd/Ctrl + Alt + C

Paste: Cmd/Ctrl + Alt + V

Choose which properties to apply

15. Batch Rename (Cmd/Ctrl + R)
Rename multiple layers efficiently:

Select multiple layers

Press Cmd/Ctrl + R

Use patterns: $N for number, $& for current name

Layout and Organization

16. Use Sections for Organization
Group related work without affecting layers:

Create sections to organize your page

They appear in the layers panel but not the design

Great for organizing design explorations

17. Lock Guides to Frame
Keep guides attached to specific frames:

Create guides by dragging from rulers

Right-click guide and select "Add to frame"

Guides move with the frame

18. Smart Animate Between Frames
Create smooth prototype transitions:

Name layers identically between frames

Use Smart Animate as the transition

Matching layers animate automatically

19. Layout Grids on Components
Build responsive systems:

Add layout grids to component frames

Instances inherit the grid

Update grid once, update everywhere

20. Use Numbers for Constraints
Precise responsive behavior:

In constraints, enter specific pixel values

Example: "Left 24, Right 24" for consistent margins

More predictable than percentage-based constraints

Advanced Techniques

21. Vector Networks for Complex Shapes
Edit complex paths more flexibly:

In vector editing mode, use the Bend Tool

Create points with multiple connections

Build complex shapes impossible with traditional paths

22. Component Set Thumbnails
Improve component browsing:

The first variant (top-left) becomes the thumbnail

Arrange variants with most common first

Rename to organize in assets panel

23. Interactive Components
Build hover, press, and focus states:

Create variants for each state

Add interactions within the component

Prototype behaviors are reusable

24. Variables for Dark Mode
Swap entire color systems:

Create color variables for both modes

Switch modes to see dark/light versions

One design, multiple color schemes

25. Branching and Merging
Version control for design:

Create branches from the main file

Experiment without affecting production

Merge changes back when ready

Bonus Workflow Tips

Use Plugins Strategically
Essential plugins to consider:

Iconify: Access thousands of icons

Lorem Ipsum: Better placeholder text

Autoflow: Visualize user flows

Contrast: Check accessibility

Keyboard Shortcut Sheet
Print and post these until memorized:

V: Move tool

F: Frame tool

R: Rectangle

T: Text

C: Comment

Shift + A: Auto layout

Cmd/Ctrl + G: Group

Cmd/Ctrl + Alt + G: Frame selection

File Organization
Keep files clean:

Use emoji prefixes for pages: 📱 Mobile, 🖥️ Desktop

Archive old work to separate pages

Use thumbnail covers for easy browsing

Conclusion

These tips separate efficient designers from everyone else. You don't need to implement all 25 today—pick a few that address your current pain points and add more as they become habits. The investment in learning these techniques pays dividends every time you open Figma.