<p>Published on <a href="https://blog.prototypr.io/get-better-at-figma-7-tips-4fa90f004010?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Johan Ronsse </p>
<p><em>Figma is an awesome design tool that works on both the Mac and Windows. It allows you to work collaboratively in a smooth way. This post contains some tips about functionalities in Figma you might not know about yet, or ways to work efficiently with Figma.</em></p>
<h3>1. Component overrides</h3>
<p>You can override components, just like you can override Symbols in Sketch.</p>
<p>The way it works is that if you embed a component inside another, you can replace it with another in a dropdown list on the righthand side of the screen.</p>
<p>When you use slashes (/) in your component names, they become neatly grouped when you choose them from, for example, the override dropdowns.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*nGE1yMoWQPy120cNQUK0Zw.gif"></p>
<h3>2. Make use of constraints to provide resizable components</h3>
<p>This might sound obvious to Figma experts, but there so much power in constraints.</p>
<p>When you set up a component make sure to resize it and see how it behaves, and adjust the constraints accordingly.</p>
<p>The trick to working with constraints effectively is to use frames, not groups, for setting up your constraints. It is not very obvious how to this at first but some experimentation led to being able to create a fully scalable modal box.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/921/1*-fY1-Ez72AOVPc39y9slzA.gif"></p>
<h3>3. Use shortcuts</h3>
<p>A lot of shortcuts, like color picking with Ctrl+C (on Mac), work exactly like in Sketch. You can open the shortcuts menu from Help and Account &gt; Shortcuts.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*JhQolhHCsG0IjWRq1xbTmw.png"></p>
<h3>4. Share an embedded artboard — live!</h3>
<p>You can embed an artboard in an iframe, which is useful for developer specifications. Simply click the artboard and press “share”.</p>
<p>One of the apps where you can use this is Dropbox Paper. Here is an example GIF:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*TSH0xrAFmEgDGK7KxB0kWQ.gif"></p>
<h3>5. Copy layout grids</h3>
<p>In order to use an existing layout grid on another artboard, you can copy paste it. Click the layout grid in the right panel. When it turns blue, hit ⌘+C (or Ctrl+C on Windows). Now paste the grid on another artboard with ⌘+V(Ctrl+C on Windows.)</p>
<h3>6. Scale tool</h3>
<p>Press K to switch to the scale tool, this will scale text and vectors proportionately. This is useful for resizing logos. Unfortunately you cannot enter a numerical value to resize to, like in Sketch.</p>
<h3>7. Change the global background</h3>
<p>You can change the general background behind your artboards. You can do this for prototypes as well.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Vxz8t0f0SAXVkcYHD6WFHw.gif"><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=4fa90f004010" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/get-better-at-figma-7-tips-4fa90f004010">Get better at Figma — 7 tips</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Get better at Figma — 7 tips

Top Stories