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.
- Blur effects: Flinto for Mac doesn’t support blur effects, so these will not import unless first flattened into bitmaps within Sketch.
- Masks: Flinto for Mac isn’t compatible with Sketch’s masking system. Masked layers will be flattened automatically.
- Blending Modes: Flinto for Mac 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 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.