Tips & restrictions when creating & importing your Sketch file
Our Sketch import allows you to fully design your entire publication in Sketch, before importing it to Maglr to make it interactive. While this is a great timesaver, there are some things you need to keep an eye on while designing your Sketch file to successfully convert all its elements to Maglr.
Your artboard in Sketch will be converted to a scene after importing it to Maglr. Keep this in mind when preparing your Sketch file if you’re going to divide the eventual page into multiple scenes in Maglr Pro.
Maglr will automatically convert your canvas/scene size to fit the Artboard size in Sketch. This means that there is no need to match the size of your Maglr canvas with the Sketch artboard before performing the import.
While the scene size in Maglr automatically adjusts to match the Artboard in Sketch, the safe zone settings do not. The safe zone settings need to be manually adjusted (if necessary) after performing the import.
Applying interactivity (animations, effects & actions) is done via the Maglr Pro editor. If you’re creating interactive pop-ups for example, a best practice would be to create only one of them in Sketch. Then perform the import and apply interactivity to the the pop-up via Maglr, before duplicating it as many times as necessary. While you wouldn’t use Sketch to manually design the pop-up, applying the interactivity features would only be done once, saving time in the end.
While we do our best to import every element & feature into Maglr, there are some restrictions when it comes to performing these actions in a web browser. At this moment, the following situations can’t be imported or won’t work as expected:
When creating a combined shape with a rotated element inside of it, the bounding box surrounding your shape will not update correctly in Sketch. This will also show incorrectly after importing it into Maglr, but can be solved quite easily by moving the rotated element after importing it.
Boolean operations like Union, Substract, Intersect and Difference have to be ‘flattened’ before performing the import.
‘Tint’ or ‘colour’ overlays on elements can’t be imported.
'Flipped' groups (horizontal/vertical) in Sketch won't show up flipped in Maglr. It is necessary to manually flip the elements inside these groups via the Maglr Pro editor.
This does not apply to flipped elements, as they are imported correctly.
Custom line ends, such as ‘dots’ or ‘arrows’, will not show after importing them.
Rotated groups aren’t currently supported by Maglr yet, causing them to show up unrotated after importing them.
Group resizing in Maglr works different from Sketch, so grouped graphics need to be ‘flattened’ before importing them if you would need to resize them in Maglr.
It’s not possible to use multiple fills on a single element in Sketch. When importing these elements, Maglr will use the ‘first available active one’.
While it’s possible to use multiple effects on a single element in Sketch, these effects can’t be imported to Maglr. When importing elements with multiple effects, Maglr will use the ‘first available active one’.
‘Angular’ gradients aren’t supported yet.
For ‘blurs’ in Sketch, only ‘Gaussian blur’ works with Maglr.
‘Blend modes’ only work on layers, not on ‘fills’ or ‘effects’
Colour adjustments such as Hue, Saturation, Brightness and Contrast are not supported by Maglr.
Gradients applied to texts aren’t supported. Heading-elements in Maglr can however be filled with a gradient.
For vector shapes that have a border applied to them, the border can only be imported to Maglr when it's set to 'center'. If needed, a second shape can be added in Sketch to 'fake' the outer or inner borders in Maglr.
Borders within a shape are not included when using the element as a mask.
Things to note when designing your Sketch file
Your artboard in Sketch will be converted to a scene after importing it to Maglr. Keep this in mind when preparing your Sketch file if you’re going to divide the eventual page into multiple scenes in Maglr Pro.
Maglr will automatically convert your canvas/scene size to fit the Artboard size in Sketch. This means that there is no need to match the size of your Maglr canvas with the Sketch artboard before performing the import.
While the scene size in Maglr automatically adjusts to match the Artboard in Sketch, the safe zone settings do not. The safe zone settings need to be manually adjusted (if necessary) after performing the import.
Applying interactivity (animations, effects & actions) is done via the Maglr Pro editor. If you’re creating interactive pop-ups for example, a best practice would be to create only one of them in Sketch. Then perform the import and apply interactivity to the the pop-up via Maglr, before duplicating it as many times as necessary. While you wouldn’t use Sketch to manually design the pop-up, applying the interactivity features would only be done once, saving time in the end.
Features of Sketch we do not support (yet)
While we do our best to import every element & feature into Maglr, there are some restrictions when it comes to performing these actions in a web browser. At this moment, the following situations can’t be imported or won’t work as expected:
When creating a combined shape with a rotated element inside of it, the bounding box surrounding your shape will not update correctly in Sketch. This will also show incorrectly after importing it into Maglr, but can be solved quite easily by moving the rotated element after importing it.
Boolean operations like Union, Substract, Intersect and Difference have to be ‘flattened’ before performing the import.
‘Tint’ or ‘colour’ overlays on elements can’t be imported.
'Flipped' groups (horizontal/vertical) in Sketch won't show up flipped in Maglr. It is necessary to manually flip the elements inside these groups via the Maglr Pro editor.
This does not apply to flipped elements, as they are imported correctly.
Custom line ends, such as ‘dots’ or ‘arrows’, will not show after importing them.
Rotated groups aren’t currently supported by Maglr yet, causing them to show up unrotated after importing them.
Group resizing in Maglr works different from Sketch, so grouped graphics need to be ‘flattened’ before importing them if you would need to resize them in Maglr.
It’s not possible to use multiple fills on a single element in Sketch. When importing these elements, Maglr will use the ‘first available active one’.
While it’s possible to use multiple effects on a single element in Sketch, these effects can’t be imported to Maglr. When importing elements with multiple effects, Maglr will use the ‘first available active one’.
‘Angular’ gradients aren’t supported yet.
For ‘blurs’ in Sketch, only ‘Gaussian blur’ works with Maglr.
‘Blend modes’ only work on layers, not on ‘fills’ or ‘effects’
Colour adjustments such as Hue, Saturation, Brightness and Contrast are not supported by Maglr.
Gradients applied to texts aren’t supported. Heading-elements in Maglr can however be filled with a gradient.
For vector shapes that have a border applied to them, the border can only be imported to Maglr when it's set to 'center'. If needed, a second shape can be added in Sketch to 'fake' the outer or inner borders in Maglr.
Borders within a shape are not included when using the element as a mask.
Updated on: 08/02/2023