Sketch is a popular vector graphics tool that is well suited for UI design. Flinto provides a downloadable Sketch plugin which allows for the easy import of multiple screen designs from Sketch into Flinto. Sketch files 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.

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.

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 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, you may find yourself updating your source Sketch file. 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 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.