Start prototyping in 2 simple steps

Start prototyping in 2 simple steps

1. Watch the 10mins interactive onboarding tutorial

image

Framer has by far one of the best on-boarding experiences. Once you sign up you can go through an interactive on-boarding tutorial that teaches you how to use the tool. It presents you all the basic concepts and functionality with interactive examples.

Be careful! As I mentioned before, Framer can be used in very advanced ways if you want to. Don't overcomplicate things and don't try to learn the whole tool when you are getting started with it. Instead, focus on the basics to get your job done and you 'll learn all the rest along the way.

2. Start prototyping with a ready to use UI kit

Once you know the basics of how Framer works you are ready to start designing your prototypes.

At this point what I always do is to use a pre-made UI kit to speed up the process. I don't want to spend time designing buttons, input elements and so on.

If you already have a product with its own UI kit (aka design system), don't focus on finding or building a UI kit that is similar to the one you use in production. Unless if you really really need it. As I mentioned earlier your goal is to build dirty prototypes and simulate flows and interactions. Not to replicate what's on production. So focus only on what matters and on moving fast!

For web applications and websites

Default framer components

image

When you create a new prototype they will be there by default, and will provide almost everything you need (form inputs, buttons, icons, loading indicators, progress bars and so on)

Framer base kit package

Framer kit is built as a standalone React design system with additional support for Framer features like Shared Colors, Overrides and Property Controls. It provides all the components you'll need to start prototyping and two themes, dark and light.

For iOS apps

For Android apps