Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 2

Summary

This tutorial series guides viewers through transforming a sigma design into a functional website using HTML, CSS, and JavaScript. The video begins by instructing how to set up the project by downloading a Figma file and creating necessary files in a development environment. It then details linking CSS and JavaScript to the HTML file, obtaining font links from Google Fonts, and setting up color variables in CSS. The final steps involve exporting images and icons from Figma for the website, with a focus on maintaining quality through SVG format for icons. The video promises to delve into coding in subsequent episodes.

Takeaways

• 😀 The tutorial series aims to convert a Figma design into a functional website using HTML, CSS, and JavaScript.
• 🔗 A Figma file link is provided in the description for downloading, and viewers are instructed to open it in the Figma application.
• 💻 For those without Figma, the script suggests downloading it from Google and creating a free account to get started.
• 📁 The script outlines the creation of necessary files: an HTML file (index.html), a CSS file (style.css), and a JavaScript file (main.js).
• 🔗 The tutorial explains how to link the CSS and JavaScript files to the HTML file using the appropriate HTML tags.
• 🖌️ The script details the process of obtaining font links from Google Fonts for the 'Railway' and 'Poppins' fonts in various styles.
• 🎨 The video demonstrates creating CSS variables for colors in the 'style.css' file, pulling color codes from the Figma design.
• 📎 CSS variables offer the advantage of easy color updates across the website, as they can be changed in one place.
• 🖼️ The process of exporting images and icons from the Figma file is described, including the use of PNG for images and SVG for icons to maintain quality.
• 📁 Images and icons are to be saved in an 'images' folder within the project directory for easy access and organization.
• 🔍 The script emphasizes the importance of exporting all necessary images and icons from Figma to prepare for coding the website.
• 👍 The video concludes with an invitation for viewers to ask questions, like the video, and subscribe for updates.

Q & A

What is the main purpose of the tutorial series mentioned in the script?

The main purpose of the tutorial series is to convert a sigma design into a real website using HTML, CSS, and JavaScript.

What is the first step suggested in the script to begin the project setup?

The first step is to download and open the provided Figma file in the Figma application.

How can someone who does not have Figma installed access it?

They can search for 'Figma' on Google, download it from there, and create a free account to get started.

What are the three main files that need to be created for the project according to the script?

The three main files to be created are an HTML file named 'index.html', a CSS file named 'style.css', and a JavaScript file named 'main.js'.

How are the CSS and JavaScript files linked to the HTML file in the script?

The CSS file is linked within the 'head' section of the HTML using a 'link' element, and the JavaScript file is linked just before the closing 'body' tag using a 'script' element with the 'src' attribute.

What are the two fonts mentioned in the script that need to be used in the project?

The two fonts mentioned are 'Railway' and 'Poppins'.

How can one obtain the necessary font files from Google Fonts?

One can visit fonts.google.com, search for the required fonts, select the specific font weights needed, and use the provided link to include them in the HTML file.

What is the advantage of using CSS variables for colors as mentioned in the script?

The advantage of using CSS variables for colors is that if you need to change a color later, you can do so in just one place, and the change will be reflected everywhere the variable is used.

How does the script suggest exporting images and icons from the Figma file?

The script suggests selecting the image or icon in Figma, using the 'Export' option in the 'Design' tab, choosing the desired format (PNG for images, SVG for icons), and saving them to the project's images folder.

What should be done with the exported images and icons after they are saved in the images folder?

After exporting, the images and icons should be used in the project as needed, ensuring that the website design matches the Figma design.

What is the final step mentioned in the script before starting to write the actual code?

The final step mentioned is to export all the necessary images and icons from the Figma file to prepare for the coding process.

Outlines

00:00

📝 Project Setup and File Creation

The video begins with an introduction to a tutorial series focused on converting a design into a functional website using HTML, CSS, and JavaScript. The first step outlined is to download and open a provided Figma file using the Sigma application, with a link to the file provided in the video description. Viewers are instructed to install Figma if they haven't already and to create a free account. Subsequently, the tutorial covers the creation of the essential files for the project: an HTML file named 'index.html', a CSS file named 'style.css', and a JavaScript file named 'main.js'. These files are to be created within a folder called 'responsive home page' using VS Code. The video also demonstrates how to link the CSS and JavaScript files to the HTML file within the basic HTML5 structure.

05:03

🎨 Font and Color Setup for the Website

This paragraph delves into the specifics of setting up fonts and colors for the website. The tutorial refers to the Figma file to identify the required fonts: 'Railway' in black and thin versions, and 'Poppins' in regular and bold versions. It guides the viewers to acquire these fonts from fonts.google.com, demonstrating how to select and link the necessary font styles directly into the HTML file. Following the fonts, the video moves on to the creation of CSS variables for the website's colors, extracted from the Figma design. The process includes copying the hex codes for various colors and defining them as CSS variables within the root selector in the 'style.css' file. This approach allows for easy color changes across the entire website by simply updating the variable's value. The paragraph concludes with the task of exporting all necessary images and icons from the Figma file to the project's 'images' folder, with a demonstration of how to export an image and an icon in different formats, emphasizing the use of SVG for icons to maintain quality at different sizes.

Keywords

💡Figma

Figma is a cloud-based design tool primarily used for user interface and user experience (UI/UX) design. It allows multiple users to collaborate in real-time, which is crucial for team projects. In the video, Figma is used to create the design of the website, and the audience is instructed to download and open a specific Figma file to view the design they will be converting into a website.

💡HTML

HTML, or HyperText Markup Language, is the standard markup language for creating web pages and web applications. It is composed of a series of elements, which are the building blocks of all web pages. In the video, HTML is one of the core technologies used to create the structure of the website, with an 'index.html' file being created as the entry point of the website.

💡CSS

CSS, or Cascading Style Sheets, is a stylesheet language used for describing the presentation of a document written in HTML or XML. It provides a way to control the look and feel of web content, including layout, colors, and fonts. In the video, a 'style.css' file is created to apply styles to the HTML elements, making the website visually appealing.

💡JavaScript

JavaScript is a high-level, interpreted programming language that is commonly used to enhance web pages with interactive elements. It can manipulate the Document Object Model (DOM) to dynamically change content and control multimedia, among other features. In the script, a 'main.js' file is created to add interactivity to the website.

💡Responsive Design

Responsive design is an approach to web design that makes web pages render well on different devices and screen sizes, from desktop computer monitors to mobile phones. The video's project folder is named 'responsive home page,' indicating that the website being created will adapt to various screen sizes.

💡VS Code

VS Code, or Visual Studio Code, is a popular source-code editor made by Microsoft for Windows, Linux, and macOS. It includes support for debugging, embedded Git control, syntax highlighting, intelligent code completion, and more. In the video, VS Code is used as the integrated development environment (IDE) for writing the code for the website.

💡Font Linking

Font linking is the process of including external fonts in a web design, allowing for a consistent typography across the site. In the script, the fonts 'Railway' and 'Poppins' are linked from Google Fonts, which provides a variety of free-to-use fonts for web projects.

💡CSS Variables

CSS Variables, also known as custom properties, are a way to store values that can be reused throughout a stylesheet. They make it easier to manage and update the design of a website. In the video, CSS variables are created for colors, allowing for easy color theme changes across the site.

💡Google Fonts

Google Fonts is a library of free licensed font families, an interactive way for designers and developers to experiment with typography. In the video, Google Fonts is used to select and link the 'Poppins' and 'Railway' fonts to the project, enhancing the typography of the website.

💡Exporting Images

Exporting images from a design tool like Figma involves saving them in a specific format to be used in web development. The video instructs viewers to export images and icons from Figma in formats like PNG and SVG for use in the website's 'images' folder.

💡SVG

SVG, or Scalable Vector Graphics, is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. SVGs do not lose any quality if they are zoomed or resized. In the video, icons are exported in SVG format to maintain quality at different sizes.

Highlights

Introduction to the tutorial series on converting a Figma design into a responsive website using HTML, CSS, and JavaScript.

Instructions on downloading and opening the Figma file for the project.

How to create a free Figma account and set up the project workspace.

Creating the necessary HTML, CSS, and JavaScript files for the project.

Using VS Code to organize project files and folders.

Linking the CSS and JavaScript files to the HTML file.

Importing and linking Google Fonts 'Poppins' and 'Railway' to the project.

Explanation of selecting font weights and styles from Google Fonts.

Adding CSS variables for colors in the project for easy management.

Importing color codes from the Figma design into CSS variables.

Advantages of using CSS variables for easy color management.

Exporting images and icons from Figma to the project's image folder.

Technique for exporting images in PNG format and icons in SVG for quality retention.

Guidance on exporting various icons and images required for the website.

Finalizing the setup by exporting all necessary images and icons from Figma.

Invitation for viewers to ask questions in the comments section for doubts.

Encouragement to like and subscribe for the latest video updates.

Closing remarks and sign-off with a thank you note to the viewers.

Transcripts

hi everybody welcome to gt coding in

this tutorial series we are converting

this sigma design into a real website

using html css and javascript now in

this video we will set everything up for

our project and from the next video we

will start writing the code so let's get

started

[Music]

now the first thing you have to do is

download and open this figma file in

your sigma application

so i will leave the link of this sigma

file in the description so you can go

ahead and download from there and then

just open it in your figma application

now if you don't have figma already

installed you can just google for figma

and just download it from there and then

you can just create a free account and

get started all right now the next thing

we will do is we will create the html

css and javascript files so here i've

created this folder called responsive

home page and i just opened it with vs

code and i also have a folder called

images over here to store all the images

right now let's go ahead and create the

files so let's click on new file

and let's create an html file i'll just

name it index.html

now let's create a css file so let's

click on new file

and let's name it style.css

and we also need to have a javascript

file so let's click on new file

and let's name it main.js

all right now the next thing we will do

is we will link the css and the

javascript files into our html file

so let's go over here to index.html and

in vs code you can just press

exclamation and press tab and you will

have this basic html5 code right now

here let's link our css file so here

i'll just type link and press tab

and here in the hr values tab style.css

and now let's link our javascript file

over here inside the body

so here i'll just type script colon src

and press tab

and here i'll just type main.js

all right now the next thing we will do

is we will get the link of the fonts so

if we go back to our figma file we can

see that we are using two fonts over

here one is this font called

railway

so here we can see for railway we need

to have the black version and then we

have the next font over here called

poppins so we need to have the regular

version and you also need to have a bold

version

i think this is also poppins so here we

can see for pop-ins we also have a bold

version and let's scroll down and let's

see whether we have any more phones

so i think this is

a railway font so let's double click

over here

and here we can see we have a railway

font for the thin version as well so we

need to get these four styles of phones

we need to get the railway thin and the

railway black

and we also need to get the poppins

regular and the bold versions so for

that let's go to phones.google.com

all right so here i'm in

phones.google.com and uh here we can see

we have the poppins font so let's click

on this

and we need to get the regular and the

bold versions so i'll just select this

one right here regular 400

and let's scroll down and let's also

select

ball 700

right now let's search for the next font

which is railway so let's go back

and let's search for railway

and let's click on this font

and here also we need to select two

styles so we'll select this light 300

version

and let's scroll down and let's also

select

the bold 900 so let's select this

all right now let's click on this icon

called viewer selected families and here

we can see the link that we can add in

our html so i'll just copy this from

here

and let's go to our html so

here in the html i just pasted the link

in the head section

all right that's it with the phones now

let's go ahead and add the colors to our

website so we'll create some css

variables for that so let's go to our

style.css file and here we'll just

create a root selector so i'll just type

colon root

and in here we will add all the css

variables for the colors now when we add

the css variables inside the root it

will be accessible everywhere so let's

go back to our figma file and let's get

the code of our colors so let's scroll

up and here we can see we have the

colors so let's click on this color and

here we can see the hex code for the

color so i'll just copy this

and let's go back to our css and here

we'll just create a variable so i'll

just name it orange color

and here i'll just add the hex code so

just type hash and paste the code over

here

so this is our first variable now the

advantage of using a css variable is

that if you want to change the color

later you can go ahead and change it in

just one place

and it will be changed in all the other

places because we're going to use this

css variable name as the color all right

now let's go ahead and get the second

color so let's go back to figma file

and let's select

this color right here and let's copy

this hex code

now let's go back

and we'll just name it dark blue color

and here let's type hash and paste the

hex code

right now let's go back to figma file

and let's select the next color so i'll

just select this color right here and

i'll just copy this code

and let's

create a color called dark color

and i'll just paste it over here

and i don't think we have this color in

our website so let's scroll down

and i don't think we have that color in

our website so i'll just keep this color

right here

let's select the next color and let's

copy this hex code and let's go back and

here i'll just name it

light color

and i'll just paste the code over here

right now let's go back and let's select

this color right here and i'll just copy

this code

let's go back

and we'll just name it light blue color

right that's it with all the colors in

our website now the last thing we will

do is we will export all the images from

the figma file into this images folder

over here so i'll just show you how to

export a couple of images and then you

can go ahead and export all the other

images now to export an image you can

just select the image so i'll just

double click over here to select this

image

and then you can go over here to this

design tab and just scroll down and you

can find this option called export and

you have to click on this plus icon over

here

and then here you can click on preview

to see how the image looks and then you

can go ahead and select the image format

so i'll just select png and then you can

click on export

and you can browse to your project

folder and i'll just select this images

folder

and i'll just name it hero image dot png

and let's click on save

and now if you go to this images folder

we can see that we have this hero image

now in the same way you can go ahead and

export all the other images and you need

to export these icons as well so if we

double click over here

we can see this is an image so if we

scroll down

here we can see we have the preview of

the image now when you're exporting

icons you can just select the image

format as svg instead of png because svg

will maintain the quality of the image

even if we increase the size of the

image so whenever you have an icon or

shapes like this you can just export it

as svg so i'll just click on export and

i just name this

enroll icon

dot svg and let's save it

now in this way you can go ahead and

export all these images so you can

export the star icon

you can export these two images

and you also need to export these

thumbnail images

and also these icons for app store and

google play store and also these two

icons over here you can export these as

svgs

right now let's go to the ipad version

and

we don't have any new icons over here

so let's go to the mobile version and

here we can see we have this icon for

the menus

so you can just double click over here

and export this icon as an svg

and you also need to export this close

icon

and let's see whether we have any icons

remaining

and we also need to export this icon

over here for the clock

so these are all the images and icons

you need to export from figma and once

you export all these images you'll be

ready to get started with the code so

that's it for this video if you have any

doubts you can ask in the comments below

and if you like this video please click

on the like button and subscribe to this

channel to get the latest video updates

thanks a lot for watching have a nice

day

[Music]

you