Link Search Menu Expand Document

Import from Figma

Install Figma Plugin

You will need to install the Export to Kodika Plugin through the Official Figma Community Plugins.

Notes:

  • You will need to have Kodika Studio on your Mac. Kodika on iPad is not supported yet.
  • You will need to use Figma App on your Mac. Figma on web does not support copy elements.

How to Import your designs

In Figma App:

  1. Select the element(s) that you want to import/copy.
  2. Go to Plugins > Export to Kodika.io Studio > Copy Selected Elements.

In Kodika Studio:

  1. Open the Screen or the Cell that you want to paste into.
  2. Optional: Select the Group that you want to be the parent of the pasted Views. Root/Top view will be used if nothing is selected.
  3. Right-click and select Paste.
    Tip: You can use the CMD+V shortcut.

Supported Elements

Frame

You can copy only one Frame each time. Frames are pasted as a new Group.

Group

You can select one or more Groups. Imported groups will keep their size and position.

Exportable

Every Figma Element that has been marked as Exportable, will be imported as Image Asset and then will be displayed using an Image View.

Text

You can select one or more Texts. Texts inside Groups will be copied automatically. Each Text element is imported as a Label and its text style is applied in the Label’s properties.

Imported properties

  • Font. If you do not have a Font installed in the Kodika Studio, an alert will be displayed. Tip: You can Install custom fonts from the Install Fonts feature in Application Info.
  • Text Color
  • Horizontal and Vertical Alignment
  • Auto size

Shape

Shares are pasted either as Views (if possible) or are imported as Image Assets.

Imported properties

  • Fill Color
  • Opacity
  • Border
  • Shadow
    Note: If Fill Color can not be imported into Kodika, an Image Asset will be imported instead.

Constraints

If you have enabled Constraints in Figma, they will be imported as Pin Constraints in Kodika.

Limitations

Ordering between the Selected Elements is unspecified as described in Figma Developers, so we suggest always select one Element if the order between them is crucial. The children elements of the selected ones will be copied successfully and with correct ordering.

What’s next?

After you have successfully imported your Designs, you can connect your Screens using Screen Navigations and populate them with data from Kodika Server using a Datasource.