The NoCode Diary

## About Framer & Framer Handshake

**[Framer](https://www.framer.com/)** 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

### **Framer Sites**

Framer sites is a new feature or we can say a new tool where you can design and build landing pages and websites really really fast. Framer has also provided us with premade templates which we can use and build the website rapidly.

You can access Framer Sites by clicking the link below and getting access to it.

**[Framer: Design beautiful websites in minutes](https://www.framer.com/sites/)**[ \n ](https://www.framer.com/sites/)*[Design beautiful websites in record time.](https://www.framer.com/sites/)*[www.framer.com](https://www.framer.com/sites/)

 \n 

## Framer Sites tool and Layout

Once you open Framer Sites and Launch a new document by clicking on the New button on your recent projects. You are greeted with the Framer Sites Layout

 ![](https://cdn-images-1.medium.com/max/2400/1\*VIE_2hp5O0lRc_ikNZGwiA.png)

## Framer Sites Layout for New Document

You are now in the homepage of the Framer Sites and you can explore around in the tool. 


1. **Canvas**: Canvas is the playground for your website and also you can drag and drop components in the canvas and make changes to them 
2. **Insert Menu:** This is the most important division in Framer Sites. Framer sites have given us N number of premade templates to use in our Websites and also it has given us Integrations with a lot number of already existing platforms like Youtube, Spotify, FormSpark, Mailchimp etc by just dragging and dropping 

Please feel free to explore the Layout and get used to it. Check out all the integrations framer has, I have only mentioned a very few.

## Building a Simple Landing Page with Templates 

## Layout & Insert Menu

I will show you how you can make a simple Landing page using the already premade templates Framer has given us.

If you can see in the left insert menu, You have multiple things in it 

 ![](https://cdn-images-1.medium.com/max/1600/1\*VIE_2hp5O0lRc_ikNZGwiA.png)


1. Basic Elements: Basic elements are like small elements you can use in your websites. For Example, you have link texts, video elements, icon elements etc.
2. Hero Sections: You also have website elements like Navigation, Hero, Header, Footer and other things 
3. Integrations: At the bottom, you can see, Framer provided us a lot of integrations and you can check them out

## Inserting Component and Changing Settings

Now let's understand how you Drag & Drop components and change some settings in the Settings Panel.

I will drag and drop an element from the hero elements and drop it on my Desktop in the canvas

 ![](https://cdn-images-1.medium.com/max/1600/1\*xPKoSYEQS7nr1EsuXM8myA.png) ![](https://cdn-images-1.medium.com/max/1600/1\*W84N6gWRqSVNph_2d-IKcA.png) ![](https://cdn-images-1.medium.com/max/1600/1\*cdcdqu2k2KYZUIueE3skcA.png)

So, Now I have dragged and dropped the component into the Canvas. 

To **Edit the component**, Double click on the component and you will be into the component builder from Framer itself if you already used framer. Once you are in the component builder you can change the texts and other things in the component and also delete if anything is unnecessary.

I have changed my title by clicking it and typing in some texts in the area.

 ![](https://cdn-images-1.medium.com/max/1600/1\*Foa6C9lPoJIPlG-MnL-TJQ.png)

Now you can click on Home and check the changes also have changed in the canvas too.

## Example Website Landing Page

Now let me drag and drop some elements from the insert menu and make a simple website.

 ![](https://cdn-images-1.medium.com/max/2400/1\*wuiV6AHjVZHj0K_4xcJsvQ.png)

Simple Landing Page

I have made a simple landing page design using all the templates in framer and made little changes in the component.

## Publish Website & Check

Now we are in the final part and most importantly the very exciting part of the tutorial.

To Publish the website, you can click on the Publish on the right-hand top corner of the tool. Within some seconds, Now you can get a temporary link to access anywhere on the internet, share with friends and family your newly created website.

You can access the website done in our tutorial in this link **<https://expanded-minimalist-542790.framer.app/>**

 ![](https://cdn-images-1.medium.com/max/2400/1\*-SUs3sgNWDFYx675iDwCSQ.png)

Congratulations, you have now published your first website using Framer Sites. 

In the next tutorial, we will learn how responsive design is done and also how you can make custom components so that you can make custom websites on Framer Sites.

 \n Cheers ✌️

Create a Landing Page with Framer Sites — Part1

 ![The Power of  NoCode Diary](https://storage.googleapis.com/papyrus_images/f47eb9d30523bf3261142b5999ad2f1b "left-50")

The NoCode Diary Newsletter talks about new and awesome design and no-code tools. Design, Discuss and debate on no-code technologies and everything around them. New article every week.

**Subscribe to this newsletter for** 


1. Latest Tools  & Technologies emerging in the NoCode space
2. Tutorials on How to make apps or websites with NoCode
3. Templates on making your dream app/website come to reality 

\
\


Welcome to The NoCode Diary

 ![](https://storage.googleapis.com/papyrus_images/d4da622927c0a3545a31066aef74a741)

\
# About Framer & Framer Handshake

**__[Framer](https://www.framer.com/)__** 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

 ![](https://storage.googleapis.com/papyrus_images/84ee5f0be6634ffd5fc4ccd109f2e92f)

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

 ![](https://storage.googleapis.com/papyrus_images/d1a6a89e3f5dc11fd02bf3eedf9d82a4)

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

\
 ![](https://storage.googleapis.com/papyrus_images/720ff007b60a8cc53c326ca665c494a1)


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 

About

Links

Create a Landing Page with Framer Sites — Part1

Welcome to The NoCode Diary

Production-ready NextJS component without code using Framer Handshake

About