Sketch and Figma are a popular vector graphics tools that are well suited for UI design. Flinto provides a Sketch and Figma import feature which allows for the easy import of multiple screen designs from Sketch or Figma into Flinto. Designs can be updated and re-imported after the initial import to update the content inside Flinto.

Importing from Sketch

Before importing, make sure the Sketch file you want to import is open in Sketch. Sketch import works on the frontmost document and current page in Sketch, and requires at least one artboard to be present. Activate Sketch import by clicking the "Import" toolbar button and choosing "Sketch".

The Sketch document will be imported into your current Flinto document using the screen size and pixel density set in the Flinto document. If those dimensions are incorrect you can edit them in Flinto’s document properties sidebar at any time. Each artboard in your Sketch document will turn into a screen in Flinto.

Importing from Figma

Click the import button in the toolbar, then click "Figma". The first time you access this window, you'll be asked to authorize Flinto to access your Figma account in your Web browser. Once authorized, a list of your Figma documents will be shown. Select a document and click "Import". You can also choose whether screens should be sized to match the current document's screen size, or to another size you can choose from a drop-down menu.

Import characteristics

Rasterizing and Flattening

Flinto’s Sketch import will import layers as vector shapes and editable text when possible, and converts them to bitmaps otherwise. Flinto supports vector shapes with a single fill, border and shadow. If a vector shape layer has properties that Flinto doesn’t support, it will be flattened into a bitmap when imported.

You can force a group to be flattened by adding “+flinto” to the end of the group”s name in Sketch.

Limitations

Some features of Sketch and Figma are not available in Flinto.

  • Blur effects: Flinto doesn’t support blur effects, so these will not import unless first flattened into bitmaps within Sketch.
  • Masks: Flinto isn’t compatible with Sketch’s masking system. Masked layers will be flattened automatically.
  • Blending Modes: Flinto doesn’t support blending modes, you can flatten groups with layers that use blending modes in order to preserve the effect.

Re-import

After sending designs to Flinto from Sketch or Figma, you may find yourself updating your source designs. To send those changes to Flinto, repeat the same process you used initially. Your Flinto file will be updated and links will be maintained.

New layers will be added, and deleted layers will be removed. Newly added artboards will be added as new screens but deleted artboards will be left as screens within Flinto, leaving you the option to delete them manually.

If you make lots of changes in both Sketch/Figma and Flinto, there could be a conflict and you may get unexpected results. After re-import, check that things look ok, if they don’t you can always undo to get back to the previous state. You may wish to save a copy of your file if it is particularly complex.