Pick the right tool

Pick the right tool

The tools

  • Framer is the one that I use and suggest because it's the most powerful, well-designed and innovative prototyping tool that exists at this moment.
  • Figma is the next option in my list. It has a great team and product but it's not as advanced as framer. You cannot write any code and your prototyping features are limited.
  • Sketch is very popular in the design scene since it's the oldest tool in the industry. However its prototyping features are very weak and it's Mac OS only. It's too focused on static mockups and you have to use it in combination with other tools like Protopie and Origami.
  • UXPin is similar to Figma but more powerful when it comes to prototyping. I haven't used it much personally since Framer is more mature and has a more vibrant community.
  • Adobe XD is also powerful but it belongs to Adobe and personally I am not fan of Adobe's culture and vision. It's a big corporation with bad support and user experience. It doesn't represent my philosophy and values. Also it feels like a copycat of the existing tools.
  • Design in code - This is something that many devs like to use but I find it too time-consuming. Moving and tweaking UI elements in design tools takes seconds. But in code it takes minutes which makes you way slower. When you design in code, you design with limitations and this blocks your creativity all the time. That's why I love Framer because it's the middle solution between coding and designing. I would say think of "design in code" approach as the last resort. It's not wrong if you use it but most of the times it's not needed.

Why Framer is best tool to use in my humble opinion

It's built for prototyping. Not for designing in general.

image

Framer on the other hand is focused on prototyping more than every other tool in the industry. It provides everything all the other design tools provide, plus many more advanced features. Sketch is not positioned as a design tool but as a prototyping tool.

You can design visually and in-code at the same time.

image

Let's say you want to create a button. Here are three ways to do it.

  1. Draw it
  2. Code it
  3. Import it from a package from framer store or from a NPM package (for example a UI kit you installed or your production design system)

As you can see it's up to you to decide which approach to follow. You can even combine these approaches. Some buttons in your prototype can be made in code and some other can be drawn visually. It's not one way or another. That's the most cool thing with Framer. You can use it as a simple design tool or you can get crazy and build advanced prototypes with ReactJS code.

It has its own NPM-like store where the community shares free packages

image

You can take a look here https://packages.framer.com/

You can import and use public and private NPM packages

image

You can learn more about this here. One thing to note is that this is a paid feature because you need the desktop app.

Your prototypes have their own global state object

image

Each prototype file you create has a global javascript object called Data. You can use this object to share data between your prototype components and have a super simple React-like state management functionality.

Learn more here

You can hook custom JS functions to static design elements.

image

This is what framer calls overrides. Overrides are simple JavaScript functions that are assigned manually to UI elements you created by drawing or by coding and they get triggered when your prototype gets loaded in preview mode.

You can use them to add logic and functionality to your components. For example:

  • Change the value of a text layer when a button is clicked (communication between components)
  • Animate static components on hover

Learn more here

You can prototype animations easily with Framer Motion

image

Framer owns one of the best and easiest-to-use open-source animation libraries for ReactJS called Framer Motion. It's also fully integrated into Framer and you can use it when you design and code your prototypes.

Framer lives in your browser

image

Framer is a web app and works in all operating systems. It also has a desktop app for Mac OS where you can access some of its special features.

Learn more here

It's free and when paid, not expensive

Framer provides a free plan that covers most of the use cases you'll ever need. Also its paid version is affordable without any extreme pricing.

Learn more here

It's made by fellow veteran indie makers

Framer is founded by fellow indie makers, Koen Bok and Jorn Van Dijk, two design veterans of the indie hacking scene. They built Sofa design studio, where they created award-wining native apps and finally got bought by Facebook. A few years later they quit from Facebook and got into building indie products again. They are like us. They are approachable, they focus on creating products that are cool and fun to use and are not into the startup and exponential-growth madness.