[Notice] We've confirmed that some of the code in the lectures no longer works due to the Framer reorganization on May 24th to [Framer-Site]. While this may be inconvenient, we ask that those attending the lectures create a new project at http://framer.com/projects/new .

🤔 Prototype ? Why bother?

From participating in planning meetings to handoffs and managing design assets... I think all product designers can agree that designers have a plethora of things to worry about beyond just design. If you're thinking , "Identifying user issues and crafting a great design is already a struggle, and now a prototype ?" I completely understand... But why not take this course and reconsider?

👨‍💻 Is this... this is how you make it?

Unless you're building a service solely with developers, communication is essential. The larger the service, the higher the communication costs. Most issues can be resolved via Slack messages. For more complex issues, a Zoom meeting might suffice. However, if you're completely pivoting the product, making changes that involve very detailed details, or if verbally explaining the problem is impossible , building a prototype might be the fastest way to resolve the issue.

❗️Is there a reason why I absolutely have to use a primer ?

Chapter 3: Trying Out the Code - Reference Site Video

ProtoPie, InVision, Oven, Balsamic, etc.... We live in an age where prototyping tools are more prevalent than ever. Even design tools like Figma and Sketch are competitively adding prototyping features, making it possible to implement simple user flows in these tools. However, these tools are GUI-based, meaning they're mockups of the final product before it's even built. Developers need to interpret these mockups based on the completed screens and the designer's explanations. However, Framer is a React-based prototyping tool. The products you create with Framer are actually functional . The finished product can be deployed on PaaS platforms like Netlify, and developers can even inspect the source code . This means you can create web products that can be modified in real time , anytime, anywhere !

I recommend this to these people

• Anyone who wants to test whether their design is developable
• People who want to modify prototypes in real time and reflect feedback
• People who want to implement designs through code

What do you make with a primer ?

Okay!

Framer can create any screen that can be implemented with React ! (Of course, the more complex it is, the more difficult it is... 😂) In this lesson, we'll create a stock-related service that has recently been receiving a lot of attention worldwide. From a developer's perspective, we'll brainstorm ideas, draw screens, and do a little 🤗 coding . We'll also go through the process of improving the product in real time through user testing .

Primer , isn't it too difficult...?

Primer Web Official Introduction Video

While Primer is a code-based prototyping tool, it 's completely usable even without any coding experience ! This course will slowly increase the difficulty level, helping you understand and master the tool. As the saying goes, getting started is half the battle. The goal of this course is to enable you to easily and simply create the prototypes you desire. If you're passionate about it and don't give up, it will become a unique skill that you can fully utilize in your career.

Here is a lecture example .

This course was created using Figma and Framer Web. Framer Web for personal use is free ! You'll find it much easier to follow the course if you preview the examples below. 😉

Figma: https://www.figma.com/file/YKbkOiYWBVSNfUZXQY6ENP/jonbeo
Framer: https://framer.com/projects/xFiRc8OAux01S6z56OMj-ephJU