Figma Handoff and Testing Tips

Smooth collaboration with developers is a huge part of what Figma offers designers, so in this collection of tips and tricks we’ll be looking at handoff and testing!

Watch Tips

1. Output Via the Code Tab

When your designs have reached a point where they need to be handed off and coded up, look in the Code tab to the left of the screen. You’ll find there’s all kind of code which can be automatically generated for you. With an item selected you’ll be able to see CSS code, iOS code, and Android code.

2. Generate Code Ready For Pasting

Figma lets you generate code and have it put directly onto your clipboard so that it’s ready for pasting into a code editor. To do so, select and object then go to Menu > File > Copy as then Copy as CSS, Copy as Text, or Copy as SVG.

3. Test on Mobile With Figma’s Mirror App

Figma provide a mirror app (available on Android and iOS) which will help test your design on mobile. Once downloaded, sign in to the app using the same account you’re using on your computer. Select a frame from your design on your computer and you’ll see it “mirrored” on your mobile device.

4. Use Figma’s Mirror App in the Browser

You can also use Figma’s Mirror app in the browser by visiting www.figma.com/mirror (no longer figma.com/mirror-app as mentioned in the video). Just like with the actual mobile app, select a frame in your Figma design and see it displayed in the mobile browser emulator in another browser tab.

5. Turn on “Pixel Preview” to Check Raster Output

You can check your vector graphics to see how they’ll look exported as raster graphics. To do so, make sure nothing in your design is selected (which will give you access to the universal settings for the document), then check Pixel Preview in the Design panel.

By default the resultant preview will give you a 1x version, but you can also select 2x to give you a preview of how pixels will be rendered on high DPI devices.