Address failing Sketch import

chrisvxd / story2sketch

Convert Storybook into Sketch symbols 💎

Other

402 stars 32 forks source link

Address failing Sketch import #60

Closed chrisvxd closed 3 years ago

chrisvxd commented 5 years ago

Initial discussion https://github.com/chrisvxd/story2sketch/issues/59

Overview

Various storybooks result in the following message when importing into sketch:

This likely occurs under a variety of circumstances where html-sketchapp is failing to convert the markup to sketch nodes for currently unknown reasons.

The goal of this issue is to document and track the failure cases, and provide a path forwards to addressing them.

Tasks

Document failing cases (on-going)
Addressing the failing cases, whether in story2sketch or upstream in html-sketchapp, with regression tests
Add test coverage to catch other cases https://github.com/chrisvxd/story2sketch/issues/52
Provide better error messaging in story2sketch during generation
Provide better error messaging in html-sketchapp during generation and plugin

Known Failure Cases

Unknown case (identified in https://github.com/chrisvxd/story2sketch/issues/59)

SuneRadich commented 4 years ago

I was struggling with only one of my stories importing correctly in Sketch. Until I changed the querySelector configuration option.

I am running an Angular storybook, so all my stories were wrapped in angular components.

When I added

querySelector: '#root storybook-dynamic-app-root ng-component',

All my stories were imported in Sketch.

Paul-Hebert commented 4 years ago

I needed to solve a couple issues to resolve this:

If I don't set a font family and use the browser defaults the import will fail. Setting the font-family to a locally installed font fixed this error
I had background shapes. html-sketchapp was giving them a border of thickness null. Changing the thickness to 0 solved that issue.

By making those 2 changes I was able to get imports to work correctly. Hopefully this is helpful 🙂

itsderek23 commented 3 years ago

This likely occurs under a variety of circumstances where html-sketchapp is failing to convert the markup to sketch nodes for currently unknown reasons.

As @chrisvxd wrote, this was an issue w/an underlying dependency (sketchapp-json-plugin) and not story2sketch (at least in my case).

I was seeing the same (none of my layers could be imported) with both story2sketch and html-sketchapp. After installing the asketch2sketch.sketchplugin generated from html-sketchapp v4.4.1, things started working again.

There's background on the cause in the html-sketchapp repo.

chrisvxd commented 3 years ago

Closed by #103, thanks @itsderek23!