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.

Output Via the Code Tab

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

Generate Code Ready For Pasting

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.

Test on Mobile With Figmas Mirror App

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.

Use Figmas Mirror App in the Browser

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.

Turn on Pixel Preview to Check Raster Output

Figma Learning Resources

That’s it for handoff and testing tips–further your Figma learning with our series of courses:

The UI kit used in this tutorial is fully compatible with Figma and available from Envato Elements:

Finance Mobile App Template UI Kit
Finance Mobile App Template UI Kit

Posted by Web Monkey

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.