Your favourite is back! It’s time for the Figma tips and tricks of the year. Be sure to explore the previous Figma tips and tricks articles, covering everything from prototyping to components and general hidden gems. Now, let’s dive into my favourite helpers of this year — some familiar, some brand new you may not have discovered yet.

Did you know that you can open dev mode directly within VS Code? The Figma for VS Code extension offers a convenient method for developers to access and examine designs directly within VS Code. You can explore and analyze design files, collaborate, monitor changes, and expedite design implementation — all within the development environment without needing to switch tools.

💥Tip: You can also open Figma directly from within VS code by opening the extension.

While the dev mode toggle is handy, you can optimize your workflow by swiftly toggling dev mode on and off with Shift+D.

Instead of navigating through the dropdown to set auto layout to ‘auto’, double-click on the alignment menu or use cmd + x to toggle between auto and a fixed pixel value seamlessly. Additionally, cmd + b allows you to set it to ‘align text baseline’, otherwise located within the advanced auto layout menu.

On a side note: I am a little upset about auto layout’s ‘space between’ now being called ‘auto’ and being hidden in the spacing dropdown, as to me, this is such an important part of auto layout. It’s Flexbox, and designers should learn about it and use the correct terms, just…