Felipe for Sketch - Magically turn Wireframes into UI

over 4 years ago from Ariel Verber, Product Designer

Hi guys, I just released a new Sketch plugin called Felipe.

Felipe started as an idea in the Design Tools Hackathon 2018. We basically thought, "what if instead of designing a button, you could simply draw a rectangle and your design tool would auto-detect your initial goal?".

We started working on it, and during the process we understood we shouldn't be limited to buttons only, it can work with many types of layers and with any design system. It ended up as a plugin that can turn wireframes into complete pixel-perfect design, using any existing design system.

The MVP won 1st place in the hackathon, but I felt like I wanted to put this idea out there to the design community, so I kept working on it and released it as Felipe.

Now, Felipe is released for everyone with a 'pay what you want' pricing.

Read the full story here. I honestly think this concept would change the ways design tools work today.

Would love any feedback.

20 comments

Zsolt Kacso, over 4 years ago
This looks great, nice work!
4 points
Juan Maguid, over 4 years ago
This is sooooo cool man! And (of course) got me wondering: would it work with Sketch2React since it seems to do some really smart things and would save tons of time. And gosh me 1000000 times - it does!!!! Check this out: https://www.dropbox.com/s/2ljis2ov5m37dta/one.gif?dl=0
And here's the whole demo folder with the Sketch file, the rendered index.html file: https://www.dropbox.com/sh/wnxnfk3ismaymad/AAC0CFbYueHuJTynqAf0baGxa?dl=0
3 points
- Ariel Verber, over 4 years ago
  This is super cool. Thanks for sharing!
  2 points
  - Juan Maguid, over 4 years ago
    You’re totally welcome man - thank you for this amazing plugin. I’m going to add it to our Docs, we have a special section for apps and plugins that work remarkably well with our framework and Sketch
    2 points
  - Juan Maguid, over 4 years ago
    https://sketch2react.gitbook.io/sketch2react-io/learn/3rd-party-plugins#felipe
    2 points
  - Juan Maguid, over 4 years ago
    Was so excited I needed to create a tutorial about it hehehe
    0 points
Valentin de Bruyn, over 4 years ago
Super cool. Looks a bit like what https://teleporthq.io/ and https://uizard.io/ are building right now.
But your feature seems somewhat more applicable to our actual UX/UI Designers workflow. In a way, I think that this is actually easier and faster to draw simple shapes in our design apps than to sketch on paper and then take a picture etc.
Looking forward to see this kind of features integrated natively into our design softwares. Anyone from XD Team listening? ^{^}
Also, if you could take size into account when interpreting the shapes to render images, buttons etc. This would be a major improvement.
Congrats!!
2 points
- Ariel Verber, over 4 years ago
  Thanks! I definitely see this implemented in Sketch / Figma / XD in the future. One of them needs to make this step and the rest will follow.
  Complicated design systems already exist, there is no need for us to memorize our library and browse to look for a specific symbol, and then stretch it so it would fit the right size. Automatic suggestions should be part of our workflow, and they should be powered by a smart algorithm that helps achieve that.
  3 points
- Burak Donertas, over 4 years ago
  Actually Adobe Comp has a feature like "draw something and convert a symbol" I use for wireframe on ipad pro. https://helpx.adobe.com/in/mobile-apps/how-to/comp-to-magazine-cover.html
  1 point
  - Dustin Koop, over 4 years ago
    The problem with Adobe Comp is that you can only have one screen per document.
    2 points
chris casey, over 4 years ago
real nice! When drawing a rectangle how does it know the difference between a button, photo and footer?
1 point
- Ariel Verber, over 4 years ago
  Thanks Chris.
  Tl;dr: The current naive approach is by reading the rectangle size and position.
  If you want to understand better:
  - A footer is defined as a full-width rectangle at the bottom of the screen.
  - A button is a rectangle within a specific range of width & height.
  - A photo is a rectangle that's not anything else.
  - A header is the same as a footer, but at the top of the screen.
  - A card is the same as photo, but has no fill but has a simple border.
  0 points
Jason Festa, over 4 years ago
Nice!
1 point
Burak Donertas, over 4 years ago
Hey thats cool. Nice.
1 point
Account deleted over 4 years ago
That is a really awesome idea. Nice.
1 point
Stan Marsh, over 4 years ago
This is pretty freaking cool. I wonder if there would be a way to translate paper wireframes to get the same results. I find it easier to sketch wireframes on paper so I don't find much value as it stands.
0 points
Corin Edwards, over 4 years ago
Whoah! This is like emmet for visual design, what an amazing idea!
edit: And I'm stuck in a gumroad you've already downloaded this loop. ¯\(ツ)/¯
Oh well...
0 points
- Ariel Verber, over 4 years ago
  Thanks! And yup, Emmet was definitely an inspiration. And if you really want to try it send me an email.
  1 point
  - Corin Edwards, over 4 years ago
    Thanks, but I tricked it in to giving it to me! SO I'm good. Can't wait to give it a try.
    0 points
Jan Semler, over 4 years ago
This is sweet, Runner light :-D
Would be nice to have some sort of more control of which symbol should be used to be replaced. But definitely a cool and inspiring idea! let it evolve...
0 points

Designer News

Join Us

Felipe for Sketch - Magically turn Wireframes into UI

20 comments

Join Us

Login to Comment

Register Today