Sketch to React Native (github.com)
over 5 years ago from Nils Hoenson, Developer
over 5 years ago from Nils Hoenson, Developer
Hey everyone, this is my library - thanks for the interest! Let me know if you have any questions, or run into any bugs... It's a new library, so I'm working hard to make it better all the time!
I've been waiting for something like this for a while, I know there are plenty of people working on similar applications but I've yet to see one actually working. I'm excited to try this thing out!
If I’m reading this correctly, you’re using a neural network to filter out status bars and keyboards... If so that’s ridiculous and amazing and insane and I want to know more!
Yep! The plan is to do much more as well: I should be able to detect things like buttons vs text inputs vs sliders vs switches, etc. Right now though - you're correct, it just detects status bars and keyboards and tries to filter them out of the design.
It uses TensorFlow - here is a starting exercise for that: https://codelabs.developers.google.com/codelabs/tensorflow-for-poets/
Beyond that, fast.ai has a great practical (vs math based) course to get started with deep learning: http://course.fast.ai/
Looking good so far. How does this handle layouts in landscape and portrait? Will you have to do some adjustment to the code to support different devices?
It tries to convert the absolute positioning of Sketch into a flexBox based layout, so it should handle portrait or landscape; but it's mostly been tested on portrait layouts, and there are plenty of bugs still :)
That means it should work on different devices as well, but it still has some trouble figuring out when to make things a fixed width, or when to make them take up all available space and apply margin/padding to the outside. So it sometimes doesn't handle multiple devices sizes very well yet.
Hey, Nils. Excited to try this out.
I'm a noob so I'm confused about one of the steps. Could you explain what you mean here:
Use that SVG file as the argument for convert.js
node convert.js input-file.svg
Thank you!
It means run the command "node convert.js [svg output of Sketch]" in the terminal, this will produce your code.
Thanks, Phil!
No prob Pablo, loved your talk at the Flinto meetup in SF this summer!
Hey Pablo, it's not my library, I just shared it :) All credits go to Chris.
Designer News
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.
Have feedback?
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now