Figma Cheatsheet

Shortcuts to speed up common Figma practices

Hide/Show UI

command /

Type show, then check/uncheck the box for hideshow UI.

Command / is like the master command in Figma. If you run that command and then just start typing whatever you’re after you can find it easily.

Add a comment to a figma file

type c to enter comment mode type C to exit comment mode

Adding comments to UI blocks is crucial for our development process. Project managers should go through each block in the figma file and add a comment to all blocks which are global or have some specific funcitonal requirement.

Hide / Show comments

Shift C

Show / Hide the layers panel

Shift command \

Hide / Show rulers

Shift r

Frame selection

command option g

More resources:

The design system approach

more info more info

Switch to the Rectangle tool.

The humble rectangle tool is awesome and therefor insanely popular.. I think its trending. Switch to it with ease with the letter r.

Hide those wierd red columns overlayed over the file

They are actually called layout grids and they are used for designing UI’s that fit perfectly into a 12 column layout. Which is a convention for bootstrap style layouts.

Shift G

Hide/Show UI

The screen can become cramped and distracting with all the UI side panels. This is one of my favs to quickly hide all the clutter and increase focus on your design.

command /

Type show, then check/uncheck the box for hideshow UI.

Command / is like the master command in Figma. If you run that command and then just start typing whatever you’re after you can find it easily.

Add a comment to a Figma file

Type c to enter comment mode Type C to exit comment mode

Adding comments to UI blocks is crucial for our development process. Project managers should go through each block in the figma file and add a comment to all blocks which are global or have some specific funcitonal requirement.

Hide / Show comments

Shift C

Show / Hide the layers panel

Shift command \

Hide / Show rulers

Shift r

Frame Selection

command option g

Naming Components

Name your components name/value to create options of components which are easily selectable from the right hand side menu.

For example btns/outlined and btns/filled

Generate website sitemap with Figjam

FigJam is an excellent tool for creating a website sitemap, as it offers a wide range of templates, shapes, and collaboration features. Here’s a step-by-step guide on how to create a website sitemap using FigJam:

Getting started

1. Go to FigJam and sign in with your Figma account (or create one if you don’t have it).
2. Click on the + button to create a new file.
3. Choose the Template option and search for “sitemap” or “website map”.
4. Select a template that suits your needs, such as the “Simple Sitemap” or “Website Structure” template.

Creating the sitemap

1. Start by adding the main pages of your website to the canvas:
   • Use the Rectangle tool (or other shapes) to create boxes for each page.
   • Label each box with the page’s name (e.g., “Home”, “About”, “Contact”).
2. Organize the pages into a hierarchical structure:
   • Use the Connection tool to link related pages together.
   • Create a clear hierarchy by grouping similar pages under main categories (e.g., “Products” > “Product 1”, “Product 2”, etc.).
3. Add subpages and secondary links:
   • Use smaller boxes or shapes to represent subpages or secondary links.
   • Connect these subpages to their parent pages using the Connection tool.
4. Refine your sitemap by adding more details:
   • Include page descriptions, keywords, or other relevant information.

Tips and tricks

1. Use different colors, shapes, and sizes to differentiate between main pages, subpages, and categories.
2. Experiment with various layouts and arrangements to find the most intuitive structure for your website.
3. Consider using FigJam’s Frames feature to create a responsive design and test how your sitemap would look on different devices.
4. If you need to collaborate with others, use FigJam’s real-time collaboration features to work together in the same file.

Exporting and sharing

1. Once you’re satisfied with your sitemap, click on the Share button (top-right corner) to generate a shareable link.
2. You can also export your sitemap as an image (PNG or JPEG) or PDF by clicking on the File menu > Export.
3. Share your sitemap with stakeholders, designers, or developers to help them understand the website’s structure and plan for development.

That’s it! With FigJam, you can create a clear, visual representation of your website’s structure, making it easier to plan, design, and develop your online presence.

More resources:

The design system approach

more info more info