Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 2
Summary
TLDRThis 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
📝 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.
🎨 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.
Mindmap
Keywords
💡Figma
💡HTML
💡CSS
💡JavaScript
💡Responsive Design
💡VS Code
💡Font Linking
💡CSS Variables
💡Google Fonts
💡Exporting Images
💡SVG
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
Ver Más Videos Relacionados
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 3
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 5
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 7
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 1
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 4
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 12
5.0 / 5 (0 votes)