Giters

chrisvxd / story2sketch

Convert Storybook into Sketch symbols 💎

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Address failing Sketch import

chrisvxd opened this issue · comments

commented

Initial discussion #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

  1. Document failing cases (on-going)
  2. Addressing the failing cases, whether in story2sketch or upstream in html-sketchapp, with regression tests
  3. Add test coverage to catch other cases #52
  4. Provide better error messaging in story2sketch during generation
  5. Provide better error messaging in html-sketchapp during generation and plugin

Known Failure Cases

  1. Unknown case (identified in #59)
commented

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.

commented

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 🙂

commented

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.

commented

Closed by #103, thanks @itsderek23!