Figma UI Design Tutorial | How To Redesign Any Website complete guide
#figmatutorial #figma #figmaplugins
In this Figma UI Tutorial for beginners, Product Designer, and Workshop Facilitator Johan Holst shares a step-by-step guide on how to redesign any website using Figma without any design skills needed.
🛠 Free resources mentioned in this video:
1️⃣ Figma website - https://www.figma.com/
2️⃣ Builder.io to import websites https://www.figma.com/community/plugi...
3️⃣ Unsplash plugin for stock photos https://www.figma.com/community/plugi...
4️⃣ Pexels website for stock photos https://www.pexels.com/
5️⃣ Free Figma Icon Pack https://www.figma.com/community/file/...
6️⃣ Figma Practice File with the redesign shown in the video https://www.figma.com/community/file/...
⏰ Video Timestamps
0:00 Intro
0:36 Why is learning this skill useful?
1:42 Advantages of using Figma
2:24 Getting started with Figma
3:36 What type of website can you redesign?
3:57 Start the redesign of Uber’s website
4:27 How to install builder.io plugin
5:00 Importing a website to figma with builder.io
5:49 Cleaning up the import
7:15 Importing a website that’s behind a login using the builder.io Chrome extension
9:40 How to rename a frame
10:05 How to make a copy of the original import
11:14 How to edit TEXT
14:23 How to add IMAGES with pexels.com
15:48 How to add IMAGES with the UNSPLASH plugin
19:11 How to add ICONS with a free icon pack
24:34 How to SHARE your design
25:57 How to add COMMENTS
26:52 How to EXPORT your design
🔔 Please subscribe to our Youtube Channel for more interesting topics.
Thanks for watching!
#figmatutorial #figma #figmaplugins #website #webdesign #webdeveloper
Figma UI Design Tutorial - How To Redesign Any Website (Step-By-Step Guide)