Figma has knocked off the designs of the world by bringing along an interface with designing, prototyping, and collaboration so facile. Now is the right time to be an efficiently productive designer with mastering keyboard shortcuts in Figma. Here, you will get the complete list of shortcuts with both Mac and Windows versions to navigate Figma through unprecedented efficiency.
Table of Contents
Why Mastering Figma Shortcuts Matters
Keyboard shortcuts in Figma make the workflow fast, reduce mouse navigation dependency, and even ensure accuracy in most design tasks. The more a designer remembers the shortcuts, the more creative he or she becomes and less dependent on manipulating the tools.
General Figma Shortcuts
Mac – General Figma Shortcuts
- Undo: Cmd + Z
- Redo: Cmd + Shift + Z
- Copy: Cmd + C
- Paste: Cmd + V
- Cut: Cmd + X
- Duplicate: Cmd + D
- Select All: Cmd + A
- Zoom In: Cmd +
- Zoom Out: Cmd +
- Fit to Screen: Cmd + 1
- Actual Size: Cmd + 0
Windows – General Figma Shortcuts
- Undo: Ctrl + Z
- Redo: Ctrl + Shift + Z
- Copy: Ctrl + C
- Paste: Ctrl + V
- Cut: Ctrl + X
- Duplicate: Ctrl + D
- Select All: Ctrl + A
- Zoom In: Ctrl + +
- Zoom Out: Ctrl + –
- Fit to Screen: Ctrl + 1
- Actual Size: Ctrl + 0
Shape Tools Figma Shortcuts
Mac – Shape Tools Figma Shortcuts
- Rectangle Tool: R
- Ellipse Tool: O
- Line Tool: L
- Arrow Tool: Shift + L
- Polygon Tool: Shift + P
- Star Tool: Shift + R
Windows – Shape Tools Figma Shortcuts
- Rectangle Tool: R
- Ellipse Tool: O
- Line Tool: L
- Arrow Tool: Shift + L
- Polygon Tool: Shift + P
- Star Tool: Shift + R
Text Tools Figma Shortcuts
Mac – Text Tools Figma Shortcuts
- Text Tool: T
- Bold: Cmd + B
- Italic: Cmd + I
- Underline: Cmd + U
- Increase Font Size: Cmd + Shift + >
- Decrease Font Size: Cmd + Shift + <
Windows – Text Tools Figma Shortcuts
Text Tool: T
Bold: Ctrl + B
Italic: Ctrl + I
Underline: Ctrl + U
Increase Font Size: Ctrl + Shift + >
Shrink Font Size: Ctrl + Shift + <
Layer Management Figma Shortcuts
Mac – Layer Management Figma Shortcuts
- Group layers: Command + G
- Ungroup Layers: Command + Shift + G
- Bring forward:Command+] and [
- Send back word : command+[ and
- Bring forward:command+ Option+ and ]
- send backword: : Command+ Alt +and]
Windows – Layer Management Figma Shortcuts
- Group Layers:Control+ G
- Ungroup Layers: Control +Shift+G
- Bring forward: :control+and] and • send backward:control + and
- Send To Back: Ctrl + Alt + [
Alignment and Distribution Figma Shortcuts
Mac – Alignment and Distribution Figma Shortcuts
- •Aligned Left: Command + A
- Horizontally Center: Command + H
- Align Right:Command + D
- Align to Top: Command + W
- Align the middle vertically :Command + V
- Align Bottom: Command + S
- Distribute Horizontal Space :Command + Option + Shift + H
- Distribute Vertically Space: Command + Shift + V
Windows – Alignment and Distribution Figma Shortcuts
- Align Left :Alt +A
- Alignment horizontally center :Alt+ H
- Align Right :Alt+D
- Align to the top :Alt+W
- Middle Align (Vertical): Alt + V
- Bottom Align: Alt + S
- Distribute Horizontal Space: Alt + Shift + H
- Distribute Horizontal Space: Option + Shift + H
- Distribute Vertical Space: Option + Shift + V
Boolean Operations Figma Shortcuts
Mac – Boolean Operations Figma Shortcuts
- Union Selection: Control + Option + U
- Subtract Selection: Control + Option + S
- Intersect Selection: Control + Option + I
- Exclude Selection: Control + Option + X
Windows – Boolean Operations Figma Shortcuts
- Union Selection: Control + Alt + U
- Subtract Selection: Control + Alt + S
- Intersect Selection: Control + Alt + I
- Remove Selection: Control + Alt + X
Viewing and Navigation Figma Shortcuts
Mac – Viewing and Navigation Figma Shortcuts
- Show/Hide UI: Ctrl +
- Grid: Toggle : Ctrl + G
- Toggle Layout Grids: Ctrl + Shift + 4
- Show Outlines: Ctrl + Shift + O
- Quick Look: Space
- Toggle Full Screen: Ctrl + Ctrl + F
- Page Left: Fn + Up
- Page Right: Fn + Down
Windows – Viewing and Navigation Figma Shortcuts
- Show/Hide UI: Ctrl +
- Grid: Toggle : Ctrl + G
- Toggle Layout Grids: Ctrl + Shift + 4
- Show Outlines: Ctrl + Shift + O
- Quick Look: Space
- Toggle Full Screen: Ctrl + Windows + F
- Previous Page: Page Up
- Next Page: Page Down
Prototyping Shortcuts Figma Shortcuts
Mac – Prototyping Shortcuts Figma Shortcuts
- Present Prototype: Cmd + Option + P
- Zoom to Fit Prototype: Cmd + Shift + 2
- Cycle Through Device Sizes: Cmd + Shift +
- Copy Link to Frame: Cmd + Shift + C
Windows – Prototyping Shortcuts Figma Shortcuts
- Present Prototype: Ctrl + Alt + P
- Zoom to Fit Prototype: Ctrl + Shift + 2
- Cycle Through Device Sizes: Ctrl + Shift +
- Copy Link to Frame: Ctrl + Shift + C
Collaboration Tools Figma Shortcuts
Mac – Collaboration Tools Figma Shortcuts
- Share File: Cmd + Shift + S
- Open Comments Panel: Cmd + Option + C
- Add a Comment: Cmd + Enter
- Resolve Comment: Cmd + Shift + E
Windows – Collaboration Tools Figma Shortcuts
- Share File: Ctrl + Shift + S
- Open Comments Panel: Ctrl + Alt + C
- Add a Comment: Ctrl + Enter
- Comment: Ctrl + Shift + E
Plugins and Integrations Figma Shortcuts
Mac – Plugins and Integrations Figma Shortcuts
- Plugins Menu: Cmd + /
- Txt + Option + P: Last Plugin
- Txt + Shift + P: Manage Plugins
Windows – Plugins and Integrations Figma Shortcuts
- Txt + /: Plugins Menu
- Txt + Alt + P: Last Plugin
- Txt + Shift + P: Manage Plugins
Advanced Features Figma Shortcuts
Mac
- Txt + Option + O: Outline Stroke
- Txt + E: Flatten Selection
- Txt + Option + K: Component
- Txt + Option + B: Detach Instance
- Cmd + Option + M: Toggle Masking
- Cmd + Option + Shift + I: Swap Instances
Windows
- Outline Stroke: Ctrl + Alt + O
- Flatten Selection: Ctrl + E
- Make Component: Ctrl + Alt + K
- UnGroup Instance: Ctrl + Alt + B
- Toggle Masking: Ctrl + Alt + M
- Swap Instances: Ctrl + Alt + Shift + I
Tips to Remember Figma Shortcuts
- Practice Daily: Repetition is the key to muscle memory.
- Start Small: Master the shortcuts of the most common tasks first.
- Print a Cheat Sheet: Keep it handy during designing.
- Using the Help Menu of Figma: To know shortcuts from the application itself, use Cmd + / in Mac or Ctrl + / in Windows.
These are going to make the difference while creating a design by saving ample amounts of time and creativity. Go ahead, get into the list, and begin applying them to your Figma workflow right away!
Advanced Efficiency Tips in Figma Shortcuts
There is so much more to mastering shortcuts than knowing the shortcuts themselves. To get the most out of your time in Figma, here are some advanced efficiency tips:
1. Customize Your Workspace
- Panels and layers can be ordered to fit your workflow better.
- Use multiple windows or tabs for accessing different design components.
- Save assets used repeatedly in libraries for immediate access.
2. Making use of Components
- Reusable Components: Use reusable components for frequently occurring features such as icons, buttons, and others.
- Nested Components: Put a component inside another. It makes it easier to implement deeper designs
- Variants: Using variant components can enable different states of control, as in hover and disabled button variations
3 Master Auto Layout
- Auto Layout: Auto Layout is like magic with regards to enabling responsive design; elements within the frame are set automatically.
- Blend Auto Layout together with constraints, to create lively, adaptive design
4. Keyboard-Driven Navigation
- Cut between frames, layers, as well as groups using shortcuts
- Pulled layer management shortcuts together and navigation shortcuts towards smooth navigation among the complexities within the design project
5. Use Version Control
•figma tracks the history; if you need rolling back into other versions
•mark, or comment crucial updates for a track of importance
6. Collaboration Capabilities
- Live links with your mates
- Save comments within the design and address the team for any response on your feedback
- Pass back any comments on their response with labels
7. Figma Plugins
- Utilize plugins like Unsplash for stock images, Content Reel for placeholder content, or Iconify for scalable icons.
- Create custom plugins to fit team-specific needs using Figma’s plugin API.
8. Prototyping Advanced Interactions
- Use smart animate to animate between frames for smooth transitions.
- Overlays for modals and menus
- Interaction triggers: hover, click, drag to mimic real-life user behaviors
________________________________________
How to Stay Updated with Figma Features
Figma is always adding new features and improvements. Here’s how you can be on top of the list:
- 1.Subscribe to Figma Blog: Update about new releases, tutorials, etc.
- 2.Connect to Figma Communities: Engage with fellow designers for some hints and tricks
- 3.Webinars, Workshops: Take webinars and workshops conducted by Figma that enhance skills
- 4.Follow Release Notes: Keep up-dating frequently for Figma to get accustomed with the updates, new features
Advanced Collaboration Strategies in Figma
Collaboration is at the core of Figma’s design philosophy. To make sure your team comes up with maximum efficiency, use the advanced strategy as illustrated below
1. Real-time Collaboration
- Allow team members to view or edit files simultaneously.
- Enable color-coded cursors for tracking contributions in real-time.
- Comment directly on elements, frames, or prototypes for specific, detailed feedback.
2. Role-based Permissions
- Assign appropriate access management roles like Viewer, Editor, or Admin.
- Inks with restricted access are used for providing a safe shelter for confidentiality of file.
3. Design System Integration
- Reusable styles, components, and assets are stored in one design system.
- Team libraries help to achieve consistency in all projects.
- There is constant updating and maintaining the design system based on changing requirements
4. Smart Feedback Loops
- Review sessions with the team so that members can provide aggregated feedback.
- Use comments to keep the conversation on topic and to resolve them once the feedback is provided.
- Export prototypes to be used during stakeholder presentations so that one gets feedback before the meeting.
5. Best Practices in File Organization
- Frames, layers, and components shall use a naming convention for uniformity.
- Place related items into folders or frames to create an order.
- Archive finished projects or deprecated parts to clean up.
________________________________________
Automation to Save Time: Figma Plugins
The plugin library on Figma automates most of the boring stuff so you could focus on more creative work. Here are the most impactful ones you should use:
1. Content Plugins
- Content Reel: Instant placeholder text, images, or icons.
- Lorem Ipsum: Insert dummy text fast to mock-ups.
2. Image and Icon Tools
- Unsplash: Free high-resolution stock photo/ imagery available directly within Figma.
- Iconify: Browse and add scalable vector icons from popular libraries
3. Data Automation
- Google Sheets Sync: Connect your Google Sheets data to fill tables or graphs in your design
- Chart: Build dynamic, customizable charts and graphs directly in Figma
4. Design Utilities
- Stark: Run usability tests and color contrast tests for all designs.
- Rename It: Rename multiple layers and frames at once.
5. Prototyping Enhancements
- ProtoPie Plugin: Engaging with intricate interactions and animations that cannot be achieved directly in Figma.
- Overflow: Deep user flows with hardly any effort at all.
________________________________________
The Future of Designing in Figma
Figma is not a tool but an evolving platform responding to the demands of designers and teams. Along with the number of features and integrations increasing, designers will prepare for:
- AI Features: As machine learning was added, designers would receive suggestions to design, help complete tasks, and enhance creativity.
- Better Performance and More Features of Mobile and Tablet Interfaces
- Deeper Integration with the Dev Tool: Hand off to GitHub, VS Code, or straight into codebases
- For Larger Teams: New Tools for cross-departmental collaboration, better stakeholder presentations.
________________________________________
Get Started Today
Practice regularly, make new discoveries in its features, and complete the task of handling it within your workflow are the stepping stones to mastering Figma. It works that way:
- Download a Shortcut Guide: Master keyboard shortcuts.
- Explore Plugins: Try the ones that resonate with your workflow.
- Engage with the Community: Join forums, attend webinars, and meetups of Figma and learn from other people.
- Construct a Personal Design System: Start a library of reusable styles and components for the projects.
Figma is incredibly powerful. It will empower designers with creative thinking and collaborative work. With the methods and tips below, you should be able to take your practice of design up to the top. Dive right in, learn, and start unleashing full potential in Figma!
Figma Best Practice
To become a truly proficient Figma user, it is possible to improve your workflow, collaboration, and design quality by adopting the following best practices:
1. Optimize File Structure
- Frame Organization: Use frames to group related design elements in a logical manner. This helps both with navigation and export.
- Consistent Naming Conventions: Adopt a naming system for layers, components, and frames (e.g., btn/primary, icon/checkmark).
- Color Coding: Use layer colors to distinguish elements such as the live components, drafts, or locked layers
________________________________________
2. Apply Styles for Consistency
- Color Styles: Introduce global palettes for harmonized color on the project level
- Text Styles: Recyclable and reusable text style for headings, subtitles, body of text, captions
- Effect Styles: This is where your commonly used effect, such as drop shadows or blur, is easily reused
________________________________________
3. Design Responsively
- Constraints: Use constraints in Figma to have those elements resize for you.
- Auto Layout: A combination of constraints and Auto Layout to easily scale designs on devices
- Preview Responsiveness: Test designs on numerous screen sizes by using device preview in Figma
____________________________________
4. Component-Driven Design
- Reusability: Use reusable components for designs, such as buttons, cards, or navigation bars
- Variants: Use variants to manage component states (default, hover, active)
- Nested Components: Tear complex things into modular pieces for easy updates
____________________________________
5. Advanced Prototyping Techniques
- Interactive Elements: Apply interactive effects within elements to mimic real-world behaviors.
- Overlays Transitions: Use overlays for modals, dropdowns, or tooltips.
- Micro-Interactions: Apply Smart Animate for smooth transitions between frames.
________________________________________
6. Intelligent Collaboration
- Annotations: Comment or tag detailed designs to collaborate.
- Version Control: Make copies of files before major changes with easy tracking of iterations.
- Shared Libraries: Publish shared components and styles in team libraries with consistency from project to project.
________________________________________
7. Accessibility
- Color Contrast Testing: Test text readability with tools like Stark to check contrast ratios.
- Accessible Typography: Ensure readable font sizes, appropriate line heights, and sufficient spacing.
- Keyboard Navigation: Design with keyboard navigation and screen readers in mind for accessibility.
________________________________________
8. Performance Optimization
- Image Size Reduction: Compress images before uploading to Figma for better performance.
- Limit Plugins: Use only the necessary plugins to avoid slowing down your design environment.
- Orchestrate Elements: Organize unused elements or styles so your workspace isn’t cluttered.
_____________________________________
9. Learn Forever
- Trend Monitoring: Keep your designs timely and pertinent by being current on the latest trends in UI/UX.
- Figma Events: Attend webinars, workshops, or even design sprints hosted by Figma or community-led.
- Experimentation: Occasionally try new tools, plugins, or feature updates in Figma.
_____________________________________
10. Export like a Boss
- Asset Preparations: Naming conventions and slices make it easier to hand over to developers.
- Exporting the asset in different resolutions to fit the responsive design requirement
- SVG: Use SVG-based formats instead of raster format, which offers high quality, as well as a lot of scaling.
Mastering Figma is a combination of technical, creative, and collaborative mindset that will enable one to combine these best practices together to increase the productivity and achieve designs that are consistent, accessible, and impactful.
Remember, mastery of Figma requires a balance between learning and doing. Dive into projects, experiment with new techniques, and always seek feedback to grow as a designer. With dedication and the right tools, you can push the boundaries of what’s possible in design. Start mastering Figma today and transform the way you work!
Conclusion
Learning Figma shortcuts and advanced features is an investment in your design efficiency and creativity. With these tools integrated into your daily workflow, you can streamline your design process, reduce the time spent on repetitive tasks, and create stunning, professional-grade designs.
It is more than a design tool for Figma but a collaborative place that empowers designers to be innovative. Whatever your current status is-you are a starter or an old pro-you have to keep on learning and adapt in order to tap the entire potential of Figma.
Start now-download printable shortcut guide, practice regularly and share your designs with confidence.
