Skip to main content
In this tutorial, you will learn how to import Figma design and generate App using AppStudio

​
What are we going to build?

We are building an app from Figma design:
  1. Build all the screen available in the Figma
  2. Navigate to other screen

​
Requirements

  • Figma for the design
  • Correctly tagged Figma element

​
Step 1: Prepare Figma project

You can use your current Figma or If you don’t have any, you can create one Sign up for free in Figma
Figma project overview
Figma project overview

​
Step 2: Tagging Figma element

Tagging in this context is a term that refers to adding specific labels or identifiers to Figma elements to define their roles in the app’s layout. This helps the app generator, like AppStudio, recognize and categorize each element correctly.
  • Organizational Clarity: Tagging layers with names like [FirstScreen] or widget tags such as [ASColumn] makes the structure clear for both designers and developers. It indicates the purpose and function of each element, reducing guesswork during implementation.
  • Automated App Generation: AppStudio relies on tags to understand how to convert Figma elements into app components. For example, [ASRow] tells AppStudio to treat an element as a row structure, making it easy to map Figma designs to app widgets.
  • Design Consistency Across Devices: Proper tagging, combined with using flexible layouts (like Flex or Auto layout), helps ensure that the app’s UI adjusts smoothly across various screen sizes, minimizing breakages and display inconsistencies.
  • Exclusion of Non-Essential Elements: Adding [SKIP] to certain layers tells AppStudio to ignore them, allowing for a cleaner, more efficient UI generation without unnecessary elements.
It is very important for Designer to use Flex or Auto layout when designing the Figma’s screen, element so the screen would work for all different screen size / dimension.
Restrict to use fixed number as last option because it would cause the generated app UI to break on different devices. For example: Image or Button height can be fix number.Please test your design on different screen size.

​
Tagging screen:

  • The Layer name will be the screen name. Ex: Dashboard, SendAndTransfer
  • The App need to know which Layer is the 1st screen. Add [FirstScreen] to it’s name to let AppStudio know it’s the first screen. There’s only 1 [FirstScreen] in the Figma project.
    Image
Figma project. On the left hand side. You can see Pages and Layers, inside Pages there are Layers. Figma Adapter will loop through all the Layers to generate the screen in each Page

​
Tagging widget element:

  • AppStudio will read the Figma element and recognize the tag and import that element as a widget
  • Add the coresponding tag after Figma element’s name [Widget name, put a space between element name and the tag . Ex: Frame 123 [ASColumn],Frame XYZ [ASRow], Username fields [ASTextField], Password field [ASPasswordTextField],…
  • Add [SKIP] to the Figma element name will skip importing it
  • Check this Symplr Widget Library for the list of available Widgets
Let’s go into each (Layer) details. We’ll use Login screen as an example:
Image
Login screen and element tree of the screen on the left hand side
NOTE:
  • color should be SOLID, not GRADIENT_LINEAR
  • The border of the widget should be set to the root (outmost) element
WidgetDescription
ASColumnImage 1This Figma Frame to contain the Text and 2 Textfields vertically. So we can tag as[ASColumn]. All it’s styling (padding, border radius, background color,…) will be applied to the [ASColumn]
  • Avoid using fix number for height / width cause UI might break on other screen size. Use Fill for height / width to make it fill the available space. Or Hug to wrap around the child element