39

Felipe for Sketch - Magically turn Wireframes into UI

5 years ago from , 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, 5 years ago

    This looks great, nice work!

    4 points
  • Juan Maguid, 5 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
  • Valentin de Bruyn, 5 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 VerberAriel Verber, 5 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 DonertasBurak Donertas, 5 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, 5 years ago

        The problem with Adobe Comp is that you can only have one screen per document.

        2 points
  • chris caseychris casey, 5 years ago

    real nice! When drawing a rectangle how does it know the difference between a button, photo and footer?

    1 point
    • Ariel VerberAriel Verber, 5 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 FestaJason Festa, 5 years ago

    Nice!

    1 point
  • Burak DonertasBurak Donertas, 5 years ago

    Hey thats cool. Nice.

    1 point
  • Account deleted 5 years ago

    That is a really awesome idea. Nice.

    1 point
  • Stan Marsh, 5 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 EdwardsCorin Edwards, 5 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 VerberAriel Verber, 5 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 EdwardsCorin Edwards, 5 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 SemlerJan Semler, 5 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