Figma & Storyboard

Currently, Storyboard (SB) does not have Figma integration (as of April 2022). But this does not mean that if you are a Figma house you cannot use Storyboard, you just need to plan for how you will bring in your content. 

Here are 3 ways you can handle this 

1. Export the layer and deal with location in SB 

1. Export the Figma design to Sketch 

1. Convert the Figma design to Photoshop 

Here we will quickly walk through each of the possibilities and discuss the Pros and Cons of each. 

1 - Export the layer and deal with location in SB 

Figma makes exporting a design easy and allows a lot of control on what level or layers in the design to export. You can set up the Figma export to copy the desired export layers directly to the “images” directory inside the Storyboard application. 

The downside to this approach is you will not get all the automatic layout of design within Storyboard and will need to build up the layers and controls yourself. This sounds like a lot of work but Storyboard makes this process easy and quick with lots of standard layout tools, and with proper use of SB layers you will usually find the UI (User Interface) element reuse is exceedingly high. 

Also note that if the design is still in progress and you continue to export updates from Figma to the SB application images directory in your project, the updates to used images will automatically be applied. However new elements, positions and size changes will need to be managed by the developer. 

2- Convert the Figma design file to Photoshop 

Storyboard has great built-in support for importing Photoshop PSD files. Figma does not provide any built-in plugins today for converting and exporting a Figma design to a PSD file. However, there are online resources that can help with this for a fee. Here is one that we have used before with positive results.  

https://xd2sketch.com/converter/figma-to-psd 

The downside to this solution is there are fees per use, and you still need to do a little PSD file cleanup before importing into SB. The upside is you get all the layout and import features you would have with a standard PSD import in SB and can also take advantage of SB’s re-import features. 

3 - Export the Figma design to Sketch (Mac only) 

The last solution we have tested is converting the Figma design file to Sketch. There is a free plugin that makes this extremely easy to use and we have had great results with it.  

https://www.hypermatic.com/convertify/ 

The biggest downside to this solution is that you need to be on a Mac to use this since you need a copy of Sketch on your system, and it only runs on Mac. The upside, if you are a Mac user, is the import is clean and simple, you can iterate multiple times without any fees and you can also leverage the SB re-import features.