First Code Component in Framer Web

Hi all 👋,

If you like creating prototypes with Framer Web and want to achieve more complex interactions, this is the tutorial for you! I've worked on this short tutorial series to help you understand code components in Framer Web. This is the beginning of that journey.

❓ What we'll make

Throughout the series, we'll be making some screens you might see in a mobile banking app. The code components we'll build together in this part is a line item and bar chart. We'll build these in code and then put them onto the canvas like any other component.

🔨 Why is it useful

Framer Web is a great prototyping tool but it can be even better when you know a little bit of code. I'll help you take the first step. If you've coded a little bit, this will be a breeze. If you're a professional web developer or have React knowledge then you'll see how you can leverage your existing skills in Framer Web.

We’ll cover the basics of a React component, styling your components in JSX and how to leverage default props all within the context of Framer Web. The skills you learn here are applicable to React apps too. You can take your prototypes from Framer Web into code and that’s just what we’ll be doing throughout the series.

🗺️ Where to go from here

The skills you learn here are applicable to Framer Web but they're also many of the same skills you'll need if you want to create React components. I even show you how to go beyond Framer Web and take your project into a separate code project. This makes handoff to other developers easy and will help you build better collaboration between design and engineering.

I hope you found this useful and can't wait to see what you create! If you're new to Framer Web, give it a shot. If you're a long time user, I hope this is useful for trying something new.

🙌 Thanks for reading and watching!