UI Design in Figma - How to Import Figma Design Files into Storyboard

In today’s competitive market, user experience (UX) has become a crucial component of any successful product, regardless of the industry it serves. Ensuring that the vision of the UI/UX designer is translated as it is into the final GUI application is essential for achieving this goal.

However, as design tools evolve, the challenge lies in bridging the gap between the designer’s vision and the final embedded product. Valuable development time is often lost in trying to recreate the designer’s original vision, leading to products that reach the market with underwhelming UI/UX experiences. This reduces user satisfaction, ultimately impacting product sales.

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

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 accompany design iteration. This allows product teams to work more effectively on optimizing the end-user experience (UX) because design changes do not delay or break development work. This reduces the time consumed from development to testing, helping companies reach to market faster.

While Storyboard did not have a native Figma import file feature until its last version, Figma users were able to use Storyboard and import their Figma UI design files into it by exporting the layer and dealing with a location in Storyboard, converting the design files from Figma design to Photoshop, and exporting the designs from Figma to Sketch. This was a somewhat lengthy task and used to consume more time.

However, with the latest release of Storyboard 8.1, we have introduced the ability to directly import and re-import the native files from Figma. By directly importing these files into Storyboard, development teams no longer need to spend countless hours of coding to try and recreate the vision created within Figma, greatly speeding up the development of creating beautiful, distinctive GUIs, that users desire and can help drive product differentiation.

Importing Native Figma Design File Directly into Storyboard

In Storyboard the appearance of the UI after using the Figma file import feature will depend on properties and attributes that are set from Figma. The content and organization of a Storyboard project can vary depending on the preparation of the Figma file prior to import.

Requirements for importing Figma files

Your Figma design files must be hosted within a Figma Team. To import a design file from Figma, the Team Link/ID and an Access Token are required. Local copies of standalone Figma files (.fig) cannot be imported.

Naming conventions to consider when importing Figma files into Storyboard

Content within the Figma node hierarchy not placed inside a parent group folder using the _layer naming convention will be automatically assigned to a Storyboard layer. These auto-generated Storyboard layers will receive default names like “Layer,” “Layer1,” “Layer2,” and so on.

Re-importing Changed Figma Design Files

With Storyboard's latest version, not only importing but even re-importing your changed and improved Figma design files is possible. This capability not only enhances the design process but also eliminates the need for cumbersome adjustments or manual tweaks. This feature guarantees that adapting GUI applications to evolving user needs is swift and remarkably efficient, saving time and effort.

To know more on Figma to Storyboard import you can download our datasheet: Figma to GUI Development Datasheet