Figma Advanced ➤ Good to know

Useful Plugins + Links + Widgets + Hotkeys + Features

Drawing from both my experience and recent completion of the Figma Advanced course, I’m excited to share key insights that can benefit anyone using Figma. In this article, I’ll cover essential tips and features to enhance productivity and workflows within the platform. Additionally, I’ll share valuable links to plugins, widgets, and other useful resources.

Useful Plugins

1. DesignDoc ➤ Measurements of components, spacing, margins, padding
2. Material Theme Builder ➤ Harmonize brand colors
3. IconScout ➤ Icons
4. Unsplash ➤ Free images from Unsplash
5. To Path ➤ Put any objects or text on a path
6. ARC ➤ Bend your type, curve a text upward, downward or into a circle
7. Invert Color ➤ Invert backgrounds, fills, strokes & effect colors
8. Content Reel ➤ Custom content
9. html.to.design ➤ Converts any website to editable Figma designs
10. LottieFiles ➤ Lottie animations
11. Check Accessibility Plugins ➤ Contrast, Stark, Adee
12. TinyImage Compressor ➤ Export compressed JPG, PNG, SVG, WebP…
13. EightShapes Specs ➤ Documentation, Anatomy & Layout and spacing

Useful Links

1. m3.material.io ➤ Material 3 Design Kit (Community)

2. Figma ➤ What’s New in Figma
3. Figma ➤ Release Notes

4. Rename Layers ➤ Use Regular Expressions (Advanced)

5. Fonts ➤ djr.com, klim.co.nz, cjtype.com, blazetype.eu

Widgets

1. Color Levels Generator ➤ Generate Color Styles based on variants from an original color
2. Checklist ➤ Todo lists, Checklists and Plans
3. DateStamp ➤ Helps to keep track

Hotkeys for Mac

Shift + Command + V ➤ Paste on top
Shift + Command + R ➤ Replace
Command + A ➤ Select All Layers (inside the Frame)
Command + D ➤ Duplicate
Command + Shift + A ➤ Select inverse
Command + P ➤ Search
Shift + 1 ➤ See Everything
Select Frame + Shift + 2 ➤ See Closer that Frame
Fn + arrows ➤ to move between the frames
hold SPACE button ➤ to move objects inside the selected frame

+ ➤ Zoom in
- ➤ Zoom out

Option + Command + K ➤ Create Component
Option + H ➤ Horizontal Alignment
Option + V ➤ Vertical Alignment

Move on 1 px with arrows and 10px with SHIFT + Arrow (In settings of Figma it is possible to set Small nudge and Big nudge)

Shift + G ➤ Show and Hide the Grid

Option + down Arrow ➤ Open all layers inside the Frame

Shift + H ➤ Flip horizontal
Shift + V ➤ Flip vertical
Option + Command + P ➤ Run the last plugin
Command + Option + C ➤ Copy paddings
Command + Option + V ➤ Past paddings

Shift + E ➤ Switch between Design and Prototype
Command + Option + Enter ➤ Run Prototype
Command + Space and Move the corner of Gradient
Command + Option + Shift + R ➤ Border around Component Variants
Option + 1 ➤ Layers
Option + 2 ➤ Assets
Shift + Space ➤ Run Small Preview Prototype

Command + Y ➤ Outline Mode View
Command + Option + G ➤ Create Frame of selected objects

Option + L ➤ Close All Layers
Option + Arrow Down ➤ Open All Layers in Selected Layer

Command + Shift + H ➤ Hide / Unhide Layers

Command + Shift + L ➤ Lock / Unlock Layers (does not work in browser version for me)

Select + Command + R ➤ Bulk renaming

Font:

Command + Option + <> ➤ to change the Weight of the font
Option + <> ➤ to change the Spacing of the text
Option + Shift + <> ➤ to change Line Height
Command + Shift + <> ➤ to change Size of the font

V ➤ Move
K ➤ Scale

Select Image + Option + Command + C => Select Text + Option + Command + V ➤ Make image as a fill for selected text

Option + Double Click on the text ➤ to see the Image Background (to move/resize)

Shift + X ➤ to Switch Fill and Stroke colors

Command + Shift + K ➤ Choose the image
Shift + Option + Move 1 padding ➤ Move all paddings

Variable Fonts

It is better to use Variable Fonts, because they offer unmatched versatility and efficiency compared to traditional static fonts. Their ability to adapt seamlessly to different design contexts and screen sizes reduces the need for multiple font files while ensuring typographic consistency. Additionally, variable fonts contribute to faster loading times and improved performance, making them ideal for modern design projects where responsiveness and creativity are key.

Components

1. Reset all changes of the instance of the component
2. Push changes to main component
3. Renaming of the components

Renaming

4. Detachment of all nested instances

5. Set properties for components instead of create variants of it!

6. Select all components with same properties very useful for prototyping

Features

There are some useful advanced settings in Figma for Auto layout:

• Setting of Min/Max width
• Setting of the First or the Last Layer on top
• Wrap

Auto layout settings

Variables & Design System

It is possible to create collection of variables for

• Prototyping
• Root Colors & Alias Colors
• Sizing Root & Alias Sizing

Design tokens in Figma are global variables storing design styles like colors, fonts, spacing, and line thickness. They ensure design consistency and streamline updates across projects.

If you have any questions or suggestions for exploring a specific topic in more detail in another article, you are welcome to leave a comment about this. If my information was useful for you, leave your feedback please I will appreciate it and also you can check my Behance case:

Project on Behance

Thank you and good luck!