Framer, a must use tool for designers?

Vigneswar Raj
4 min readSep 2, 2020

After reading the title, you might think ‘haven’t this guy used the sketch, XD, and Figma.’ Well, I have used it all, and this question popped in my mind a few days back after making a few prototypes using Framer Web. I think, it could be the future.

History of tools

Macromedia Flash 5, miss those keyframes, Image source : https://www.webdesignmuseum.org/old-software/macromedia-flash/macromedia-flash-5-0

In the past 15 years I had used various tools from Macromedia Flash 4, Macromedia Fireworks, Adobe Photoshop 5, Adobe Indesign(quite popular for wireframes and documentation), Macromedia Dreamweaver(sometimes we prototype directly using HTML, CSS, and JS). The vast transition happened when Steve Jobs wrote the popular memo that killed Flash and unnecessary digital world glitters. Things got streamlined, and Sketchapp gained popularity for encouraging the minimal and efficient design process, and it killed the process of designing interfaces in Photoshop. The question arose, why Adobe is not getting into the UX/UI world? After a vast gap, Adobe XD, Figma, and Principle apps were launched with a very minimal set of features with its uniqueness.

Framer

Framer studio, design interfaces with the coffee-script, Image source: Framer Team

But, before all this, Framer was out there. It wasn’t popular among the designers because it never had an interface where you can design an interface. You have to design the interface using a coffee-script, later they launched a plugin where you can import sketch layers, but you can’t see the interface. You should enable layers one by one using a code. It was fun. I loved it, you can build a kickass prototype with it, but the problem is time. Then they launched an update where you could design an interface, and later they advanced it to a different level and launched FramerX, also upgrading the coding platform to Typescript(ES6), and all my coffee-script learnings went for a toss. I was so pissed. But, well, we got to keep moving forward, but it had its cons. It lacked basics. For eg., they didn’t have a ruler. Come on, a design tool without a flipping ruler, later they introduced it :-P. Also, the Sketch’s design system and flexibility is so advanced. Another challenge with Framer is the organization adoption; when the whole product team is on Sketch’s design system, which easily integrates with Zeplin, it is tough to convince the team to use Framer. Also, Framer doesn’t work with Zeplin, another pain in the ... Meanwhile, XD, Figma were scoring much better among the designers, but deep down, I knew Framer is the only tool in the market which can build cool prototypes that can evaluate and sell the work much better.

Framer web

And then comes the Framer web, a much-needed tool, with a live collaboration like Figma, and much cooler, a magic motion animations like Adobe XD, but still lacking Sketch’s flexible design system and integration with Zeplin. When I saw this, I couldn’t get my hands on as tied up with releases, no time to experiment.

Framer Web, Image Source: Framer Team

A couple of days back, I had to prototype a quite complicated feature sets, and I was not convinced with the output. So, I thought of giving it a shot in the Framer web. Trust me, and it was bliss. The output was not so great, but I achieved the vision I had in my mind, I used only less than ten lines of code, and I got what I needed. And, the collaboration was so so cool. Still, they had a long way to go. I am glad that they are bringing things together. I won’t say that they got everything perfect. They got a split desktop app, which is annoying. The experience is broke, for eg., you can’t export artboards in the web version. You have to download and export using the framer desktop version. There’s no sync between the web version and desktop version, every time you have upload-download and download-upload. I do love the fact that I can prototype on my iPad.

To Team Framer

But, if you got a powerful vision and want to sell it, I can guarantee that Framer is the tool. The business and the user had to feel the experience quite real, that can be achieved only by the Framer for now. So, what Team Framer should do to make the ‘could be a tool’ to a ‘must-use tool’ for designers. From my view,

  1. Flexible design system and integrations with Zeplin
  2. UI feature focus on graphics, importing SVGs, gradients, typography, etc.,
  3. Sync between Framer web and desktop
  4. Support Angular workflow
  5. Individual artboard renders and exports
  6. Solid Live mobile preview, it is buggy and time consuming now
  7. Shortcuts, bro, shortcuts!
  8. Design to Development workflow, it is quite confusing now
  9. Integrated User Testing

Prototyping is an art. Few tools out in the market kills that art and make the designers lazier. We got to push our boundaries, and I believe Framer is the enabler of it.

I wish the designers worldwide make a close to real product prototypes that help the business, users, and developers understand the designer’s vision properly so that they are well aware of the future.

Framer Team, over to you!

--

--

Vigneswar Raj

Product and Design Leader. Designer turned PM. Currently managing AI/ML Platform, Products and Services