romannurik/sketch-flowexporter

A Sketch prototype HTML exporter

Flow Exporter plugin for Sketch 49+

This plugin exports prototype flows (artboards you link together) to HTML, which you can then host using any web host (such as Firebase Hosting) and share with users, design stakeholders, etc.

Installation

• Download the latest release and double-click the .sketchplugin file to install.

• Or you can install the plugin with Sketch Runner.

  

Build instructions

This plugin was created using skpm. For a detailed explanation on how things work, checkout the skpm Readme.

sketch-flowexporter's Issues

Plugin output assets should be 2x on retina displays

The output seems low resolution on HIDPI displays.

Hotspots from bottom-fixed elements do not work

Hi Roman, how are you?

When you add a link to an element that's fixed on the screen, it doesn't work :(

Thanks for this awesome plugin!

bug_scroll.zip

[macOS High Sierra] There was no reaction at macOS High Sierra

sketch 51
macOS High Sierra 13.4
There was no response after running the command

Hotspots inside symbol masters aren't exported

Can be reproduced by doing File > New from Template > Prototyping Tutorial in Sketch and exporting... the tab bar at the bottom isn't interactive in the exported prototype.

Should be easy-ish to fix at first glance..

Width fixed at 1440px

Hi,

I noticed that width is fixed at 1440px in index.html
Do you know if I can change it, and how ?

Regards
Fran6koS

feature request : Export as User flow diagram

feature request: Export as User flow diagram, this would be very handy for some old school developer.

How to set a page as the first page?

Hello,
I am really appreciate this plugin, and it is easy to use. But I don's know how to select a specific page as the first page?
For example, I am designing a website, which includes a login page and a home page. I exported the artboards from Sketch with Sketch-FlowExporter,and then, I opened the index file with browser. The website started from home page, not login page, which was not I expected.

How to set a specific page as the first page?

Hello,
I am really appreciate this plugin, and it is easy to use. But I don's know how to select a specific page as the first page?
For example, I am designing a website, which includes a login page and a home page. I exported the artboards from Sketch with Sketch-FlowExporter,and then, I opened the index file with browser. The website started from home page, not login page, which was not I expected.

how to export 2x img

how to export 2x img

How to select an artboard?

First of all, this is a great plugin. Very helpful. I have a couple of (probably dumb) questions:

How do you select a different artboard in the exported prototype site? I only see one of my prototype flows.

How do you specify which artboard to export?

Export starts on random artboard

Hi,

I am experiencing the behavior, that the plugin export starts with a "random" chosen artboard, not with the artboard that is the on top of the sketch layer list, neither with the one sorted by alphabet. Is this a bug or just a not defined behavior within your plugin?

sketch 51 Headers & Footers

In Sketch 51, Hope to support headers and footers

Support sticky headers/footers in Sketch 51

Apparently Sketch 51 adds sticky headers/footers to prototypes, we should support that

Add an option for resizing browser window to prototype size on load, or center prototype on dark background.

Thanks for this awesome plugin which helps us to stay away from Sketch Cloud. But left aligned prototypes look awful in browser window.

Respect the "Maintain scroll position" property

If I'm not mistaken, the setting of the "Maintain scroll position after click" checkbox does not influence the scrolling behavior within the exported prototype. However, for certain use cases this could be very beneficial.

I imagine that each hotspot could have an additional property/flag, indicating if the "Maintain scroll position after click" flag is true or false. Based on that flag, the hotspot click event would send along the current scroll position or simply reset them to zero.

Nice to have: The user can choose in the "Set Prototype Export Options", if the setting for maintaining the scroll position should be preserved during the prototype export.

PS, this open pull request on the SketchAPI would probably be needed/make things simpler.

Exporting prototypes fail due to error when trying to analyze/flatten symbols

Sorry, for adding another one… 😅

Description
As of Sketch 80+ the export fails, due to some error in the /command-export-html.js. It seems like the plugin has some trouble analyzing the Sketch document.

Outcome

• The export fails and no error or success message is displayed within Sketch.
• The export destination (folder) only contains an image of the first screen. Indicating that the export failed already on the first screen/artboard.
• Within the Sketch document, the element that lead to the failure of the export (e.g. an navigation header symbol), has been duplicated and detached from the original symbol.

Screenshots
Below I've added two screen grabs from the Sketch DevTools console:

How to export a specific page in a multi-page Sketch project?

Sorry if I'm missing something here, but I couldn't figure out how to export a specific page in a multi-page project.

For example, if I have a project with 5 pages and I want to export the 5th page, it seems like the only way to do that is by temporarily moving the 5th page into the 1st position (so that the exporter will find it first)?

Just wondering if there was an easier way to do this.

No HTML and .json file since update to Sketch Version 65.1

I use Sketch Version 65.1, after the update the flow export folder contains only the png-files, nothing else. Can you check and help? Thanks!

Converts shape layers to combined shapes.

Open new file from Prototype Tutorial template. Export directly. You'll see almost all shape layers turn into combined shapes.

Plugin does not work with Sketch 69 and newer

Since Sketch 69 update the plugin does not work anymore. It does not start exporting the artboards.

Plugin doesn't work with latest version of Sketch in non-English environment

Because of this issue, there will be an error when exporting HTML, can you please upgrade @skpm/dialog and publish a new version?

The plugin no longer seems to work with macOS Catalina 10.15

"Export Prototype to HTML" seems to cause no action. No finder dialog opens to save the HTML output.

Support slide animations in exported prototype

[macOS Sierra] Set Prototype Export Options does nothing

The options dialogue does not appear when "Set Prototype Export Options" is selected from the menu.
Sketch version 50.2 (latest).

Option to set background color in settings 🎨

It would be great to be able to set the background color in the settings panel in order to make the prototype stand out more.

Something like this would be much appreciated:

[macOS El Capitan] Plugin doesn't work on macOS 10.11 El Capitan

I downloaded the latest version and installed the plugin, linked the paths, and set the default screen. but when I click on "export prototype to html", nothing happens. ,No error, no output.

Not exporting multi-page Prototype

Open new file from Prototype Tutorial template. Create a new page, move Watch List and Player artboards to new page. Preview works fine but FlowExporter exports only one artboard, no others, no html.

Hotspots don't seem to be showing up on iOS devices

fs.rmdirSync() doesn't delete non-empty directories

Hello there... I'm back on your GitHub trying to learn how to write sketch plugins... this repo has been the most useful (I'm trying to write a Sketch-to-VectorDrawable plugin).

Anyway... I have been reading your code and I noticed that there is a call to fs.rmdirSync() that doesn't seem to handle the case where the deleted directory is non-empty:

https://github.com/romannurik/Sketch-FlowExporter/blob/master/src/command-export-html.js#L114

Just wondering if that was intentional...

Plugin only exports png

I love the idea of this plugin. Unfortunately, I can't get it to work.

System: MacOS 10.13.3
Version: Sketch 49.1

Steps to replicate

1. Add the prototyping links.
   

2. Test prototype in Sketch to make sure the flow works. (optional)

3. Set a page as a starting point.
   

4. Plugins > Flow Exporter > Export prototype to HTML

5. Confirm folder for export

Result
Folder with pngs.

Example

Expected result
A HTML file that I can open in a browser.

FlowExporter does not work with Sketch 92 and later anymore

Hello Roman,

unfortunately, your great plugin gets stuck somewhere and does no export anything anymore when using it with Sketch version 92 or later.

Could you may be have a look and provide a fix for that issue?

Best regards
Martin

Exporting fails for prototypes with deeply nested symbols

It seems that since updating to Sketch 75+ the export fails, if the prototype includes deeply nested/complex symbols (2+ levels of nesting). Below I've added a screen grab of the error I get in the console (using skpm log -f).

Flow Exporter not working in Sketch 53

When you try to export your Sketch prototype from Sketch 53+ it only exports the first page of the prototype and does not attempt to create the index.html or any links. I have tried changing names of the artboards, the export parameters for the artboards and even breaking the links into hotspots, but nothing seems to fix this issue. We love using this Plugin, but for now have to switch to using "Exporter" which is not as good.
Please fix this ASAP.
Thanks
Mark Bertinetti

Consider adhering to artboard presets to determine scrolling

Right now, scrolling depends on an artboard's size relative to the starting artboard. We should consider adhering to the standard approach [seemingly] of scrolling based on artboard presets and whether or not the artboard is 'resized':

Scroll bars when viewing prototype in browser

.prototype-container should have overflow:hidden; instead of overflow:scroll;