Start here
Editing and styles
Media and content
Tutorials
Site and publishing
Layout and navigation
Forms and services
The Sitely Export Plugin transfers a Sketch design into a new page in a Sitely project. Use it as an editable starting point, then add the website’s links, controls and device layouts in Sitely.
Use Sketch and Sitely for Mac on the same computer. Download the current Sitely Export Plugin 2.1, unzip the download and open the .sketchplugin package to install it in Sketch.
The current plugin uses Sketch’s frame-based workflow. If the command is missing, check Sketch’s plugin settings and that the plugin version is suitable for your Sketch release.
The four walkthroughs below cover export, buttons, frame sizing and full-width artwork.
Select the frames you want to transfer in Sketch, then choose Plugins > Sitely > Export Frame(s) to Sitely. Older plugin versions call this Export Artboard(s) to Sitely.
Switch to the intended Sitely document and choose Edit > Paste, or press Command-V. The transfer creates new page content; it does not keep a live connection to the Sketch file. Check the result before exporting the same design again.
A visual button may arrive as a background box and text, possibly inside a group. Select the parts that belong together and choose Convert To Button from the context menu. Then set its On Click action and check its normal, hover and pressed appearance.
Importing a visual design does not automatically configure every website interaction. Add real links, menus and form behavior in Sitely.
The imported frame is scaled to the current Sitely device width. Start with a source width close to the layout you intend to build. If the result is consistently too small or too large, review the Sketch frame bounds and the target device before trying another transfer.
Review text wrapping, fonts, image crops and any artwork imported as a single vector or image. Matching the overall width does not guarantee that every detail will need no adjustment.
Artwork that spans the exported frame’s width can arrive as full-width content in Sitely. Inspect those elements and their Full page width setting, especially backgrounds that should reach both browser edges.
Preview at more than one browser width and review the other device layouts. A desktop design transfer is a starting point for responsive work, not a completed phone layout.
Please report any shortcoming in this documentation and we’ll fix it as soon as possible!
Updated for Sitely 8
Powerful and refreshingly simple, at home on Mac, finding new freedom on iPad.
This website makes use of cookies.
Please see our privacy policy for details.
