Import from Sketch

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 for Mac. Sketch files can be updated and re-imported after the initial import to update the content inside Flinto.

Install the Send to Flinto Sketch plugin

Before installing Flinto’s Sketch plugin, be sure you have Sketch installed on your computer.

The “Send to Flinto” Sketch plugin can be downloaded from flinto.com/mac_sketch_plugin. A shortcut to this page is accessible from Flinto > Install Sketch Plugin. Once downloaded, double click the file and it will open in Sketch and be installed. You should update the Sketch plugin by re-downloading it and re-installing it from time to time, most new versions of Flinto for Mac are accompanied by an update to the Sketch plugin.

Using Send to Flinto

The Send to Flinto sketch plugin works for the current page in Sketch, and requires at least one artboard to be present. Activate the plugin from the Plugin menu inside Sketch or using the command + control + shift + f keyboard shortcut.

After activating the plugin, a window will appear where options about the Flinto file can be set. The plugin attempts to guess your target device size based on the size of your artboards in Sketch. You can choose a device size or enter your own custom dimensions if the default value is incorrect.

The scale value can be used to scale up your document to match the pixel density of your target device. For example, if you work at 1x pixel density and target a 2x pixel density device such as iPhone 6, you can set the scale to 200% which will scale your designs appropriately. Flinto for Mac uses bitmap layers, so the scale needs to be set before importing to avoid blurry looking graphics.

When you are ready, press “Send.” Each artboard in your Sketch document will turn into a screen in Flinto for Mac. Flinto for Mac will open and you will be presented with a new Flinto document, or asked if you would like to merge the Sketch file into an existing open document. This file is not saved initially, so you may want to save it as a first step after import.

Import characteristics

Rasterizing and Flattening

The Send to Flinto Sketch plugin keeps 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 for Mac.

Re-import

After sending designs to Flinto for Mac 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.