About Framer & Framer Handshake

Framer is an all-in-one tool that helps teams design every part of the product experience. Start in Framer and get to a functional output faster than ever — no code required. It helps in very advanced prototyping techniques and provides tools to accomplish them. Framer is also very popular in the development community with Framer motion.

If you are new to Framer, the below video will give you an intro about Framer and its features

https://www.youtube.com/watch?v=2j4wTf1KL64

Recently Framer has launched a new beta feature called Framer Handshake where you can import Framer components into production-level React components and use them.

You can check Framer Handshake below

Step 1: Design & Build a Card Component in Framer

Let’s start by designing a component in Card Component in Framer as you would normally do in any design tool such as Figma or Adobe XD

1. Start by creating a component from the component button from the top of the navigation items

2. Design your component i.e, Card component here with an Image, A Title for the card and a Description

Once you have the component ready as shown in the below Image, Let’s start assigning variables

Step 2: Assigning Variables to the Card Component

If you hearing or listening to variables for the first time, Don’t worry, It’s just a way to tell React JS that these are the values of the component which needs to be dynamically filled when data comes in. That’s it, as simple as that.

So, now we have 3 variables in the card component,

1. Image — A image URL to make the image appear once the data is fetched

2. Title Variable

3. Description Variable

Start by assigning an Image variable to the Image, by clicking on the fill image control from the right-hand side, you can assign a variable to the image. similarly, assign variables for title and description too.

That’s it, your component is ready, Woohoooo !!!. Let’s use Handshake to import this component to Next JS

Step 3: Import Component to NEXT JS

Nice, you have finished designing and assigning variables to your component. Let’s import it to the code.

Here, Designers, you have never coded before can take the help of your development friends or just see a couple of youtube videos on Next JS and you will be the best coder in life, trust me, I feel the same.

Before we import the component, there are a couple of steps we need to follow which you can check on the below link

https://www.framer.com/docs/guides/handshake/

or just clone the Github repo and get started https://github.com/framer/next.js

Now, Let’s import the Component

1. Click on the Handshake button on the top right corner of the screen

2. Click on copy import from the popup that appeared, you can also check on how to use the component in the code in the same popup

3. Clone the Github or follow the instructions as said in the Guide

4. Open Pages folder and index.js, paste the code, on the top of the index.js file

5. Use the card as shown in the popup & That’s it, Start the Dev server there you have the component

Use it as you normally use a React or Javascript component.

In the Next Article, We will discuss how to ingest live data to the card component and make an employee list in an organization.

Cheers \n