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.
Figma Learning Resources
That’s it for handoff and testing tips–further your Figma learning with our series of courses:
- Hat tip to Carmel DeAmicis and Valerie Veteto for their regular community tips roundups—go and check them out!
-
blog.figma.com
-
www.figma.com
- Figma Mirror App
The UI kit used in this tutorial is fully compatible with Figma and available from Envato Elements:
Learn Figma
We've built a complete guide to help you learn figma design, whether you're brand new to Figma's design tools, or you want to take your skills to the next level.
