Napkin is a tool for turning UI sketches drawn on napkins, whiteboards, pieces of paper and many other things into UI layouts.
Check out this video to see how it works:
- Navigate to https://mjvesa.github.io/napkin-app
- Choose the camera you want to use
- Align your sketch so that it is straight and fits in the picture
- Tap on the image and see that the rectangles have correct tags
- Tap on generate to create the layout
- Scroll down to see your layout
- Tap on share to share the layout as a Unide project
The sketch should be drawn in dark color on white background. The white background should encompass the entire image. Check the component example image for all components that are supported. Also, the syntax definition below gives a more formal treatment. Note that even though the syntax mentions other layouts, only vertical and horizontal layouts are supported right now via flexbox.