How to Import Figma Design Files into Storyboard

Figma is a cloud-based collaborative interface design tool that lets designers connect with their team members at every stage of the design process. It’s a browser-based tool which simplifies the design process by bringing together all the design phases on a single platform like ideation, creating prototypes, testing, and iteration. From designing a smartwatch app to a big e-commerce website, you can do it in Figma easily.

Real-time collaboration makes collaborative UI design in Figma simple. The journey of UI design from its ideation to development can further be shortened and simplified when UI designers can collaboratively work on the design part in Figma and import it to Storyboard to develop the GUI (Graphical User Interface). This can save a lot of time as Storyboard provides unique parallel workflows and decouples the designer and developer's working environments.

Additionally, Crank's embedded GUI framework - Storyboard eliminates the reluctance that used to come with design iteration, allowing product teams to work on optimizing the end-user experience (UX) more effectively because design changes do not delay or break development work. This reduces the time consumed from development to testing, helping companies reach the market faster.

While Storyboard does not have native Figma import, at the moment, this does not mean that Figma users cannot use Storyboard and bring their Figma UI designs into it. Below are the three ways how Figma files can be used in Storyboard.

1. Export the layer and deal with a location in Storyboard
2. Convert the design files from Figma design to Photoshop
3. Export the designs from Figma to Sketch

Let us briefly discuss the three possibilities and know the upsides and downsides of each.

1 - Export the layer and deal with a location in Storyboard

Figma makes exporting a design easy and allows much 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 that you will not get all the automatic design layout within Storyboard and will need to build up the layers and controls yourself. Although this may sound like a lot of work, Storyboard makes this process easy and quick with lots of standard design tools, and with proper use of Storyboard layers, you will find that you can reuse UI (User Interface) elements a great deal.

But you also need to note that if the design is in progress and you continue to export updates from Figma to the Storyboard application images directory in your project, the updates to used images will automatically be applied. Nevertheless, the developers will need to manage the new elements, positions, and size changes.

2- Convert the design files from Figma  to Photoshop (PSD)

As Storyboard doesn't have native Figma support but given Storyboard's great built-in support for importing Photoshop PSD files, you can always convert Figma design to a PSD file and use it with Storyboard.

Although Figma does not provide any built-in plugins today for converting and exporting a Figma design to a PSD file, there are online resources that can help achieve this format conversion. Here is one that we have used before with positive results. Figma to PSD converter.

To make importing PSD files into Storyboard easier, we have provided a couple of resources to help you. Alternatively, you can refer to the following guides, which explain the Storyboard application model, how Photoshop elements map to Storyboard elements and naming conventions:

• Reference card — Import Photoshop to Storyboard - The Application Model (PDF)
• White paper — Best practices to improve embedded GUI design & development efficiency

However, the downside of converting the Figma file to Photoshop and then to Storyboard is that you have to pay per use, and you still need to do a little PSD file clean-up before importing it into Storyboard. The upside is that you get all the layout and import features you would have with a standard PSD import in Storyboard and can also take advantage of Storyboard's re-import features.

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

This solution is for Mac users as they can convert the Figma design file to Sketch and then import Sketch file into Storyboard. A free plugin makes this extremely easy to use, and we have had impressive results with it.

The downside to this solution is that you need to be on a Mac to use it since you need Sketch on your machine, which only runs on Mac. The upside is the import is clean and straightforward. You can iterate multiple times without any fees, and you can also leverage the Storyboard re-import features.

Storyboard also allows Re-Importing of Photoshop and Sketch Content

Through the Content Re-Import feature, you can upload revised changes from a Sketch or Photoshop file onto an existing Storyboard application that was previously created by importing a Sketch or Photoshop file your project is complete.

With Storyboard's rapid design import and iteration technology, product teams can demonstrate their commitment to a great user experience and embrace frequent design iteration and validation - without the concern of losing valuable time replacing assets or impacting development work already completed.

For better understanding and improving Embedded GUI development efficiency using a collaborative workflow download our whitepaper: Best practices to improve embedded GUI design & development efficiency.