html-sketchapp: X layers couldn't be imported and were skipped.

Hey, thanks for the tool, this is a really cool idea!

I’m running into a couple issues when using the plugin to import generated files. I get an “X layers couldn’t be imported and were skipped.” error in some cases. It generally still imports some of my layout and styles correctly but often fails to import things like background colors.

There are related issues on the sketch2story project but it seems like these maybe need to resolve here. (I’m getting these errors without using that project but thought I’d share in case they were related):

I was able to track down two root issues that were causing issues for me:

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
If I have background shapes html-sketchapp gives them a border of thickness null. Changing the thickness to 0 in my JSON solved that issue.

I’m not sure of the best fix for the font family issue… Maybe fetch the font the browser is actually using instead of the font defined in CSS?

The background shape issue seems easier to fix. Should we set the thickness to 0 instead of null? Or can we omit the border completely?

Let me know if I can help out. Thanks!

html-sketchapp version: 4.4.0

minimal example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>Hello World</h1>

    <script src="etchasketch.js"></script>
  </body>
</html>

screenshot from the browser:

screenshot from Sketch:

About this issue

Original URL
State: open
Created 4 years ago
Reactions: 1
Comments: 15

Commits related to this issue

Update html-sketchapp to the latest Need the latest version to address https://github.com/html-sketchapp/html-sketchapp/issues/196. — committed to itsderek23/html-sketchapp-example by itsderek23 4 years ago

Most upvoted comments

Hey! this is caused by sketchapp-json-plugin. FIx is already there but package itself is not published. We’ll be forking this package to fix this issue. Sorry you had to wait so long.

Before it happens you can fix it locally:

Clone repo https://github.com/darknoon/sketchapp-json-plugin
Go to repo and install deps npm i
Build: npm run build
Link library to your html-sketchapp local repository: a) Go to sketchapp-json-plugin repository folder b) Link it to global folder: npm link (you may need sudo) c) Go to you html-sketchapp repository folder. d) Link sketchapp-json-plugin: npm link sketchapp-json-plugin e) If everything went well you should see linked lib in your html-sketchapp. Run npm ls -g --depth=0 --link=true, you should see something like:

/usr/local/lib
└── sketchapp-json-plugin@0.1.2 -> /Users/xxx/Sources/sketchapp-json-plugin

Build html-sketchapp repo: npm run build. You should have new skech plugin. Import it to sketch and now it should work.

coderitual on Sep 21, 2020

Build html-sketchapp repo: npm run build. You should have new skech plugin. Import it to sketch and now it should work.

RTFM 😃.

After installing the newly generating asketch2sketch plugin (v4.4.1), both of the previously mentioned projects now import layers w/o this warning.

Thanks @coderitual!

itsderek23 on Oct 29, 2020