Figma UI Design Tutorial - How To Redesign Any Website (Step-By-Step Guide)

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.

📢 SPECIAL ANNOUNCEMENT❗️
AJ&Smart’s CEO Jonathan Courtney is going to be hosting a special FREE live training on Monday (March 27th) at 6pm CET, where he'll be sharing the story of how (and why) he went from a UX designer to a high-paid workshop Facilitator, who gets to work with some of the world’s best-known companies. Reserve your space here now https://go.ajsmart.com/ux-qa

In this video, Johan covers importing any website into Figma, editing text, inserting images and icons, and sharing your designs with your colleagues. He also shares many Figma tips and tricks to be more proficient in this design tool, and also all the plug-ins necessary to follow along with this video.

✅ Join our FREE FACILITATION COMMUNITY 👉 https://facilitatorclub.com/ where hundreds of facilitators and designers share their facilitation tricks, techniques, and resources.

🤔 Do you have any more questions about this process or Figma in general? Leave them in the comments below ⬇️

🛠 Free resources mentioned in this video:

1️⃣ Figma website - https://www.figma.com/

2️⃣ Builder.io to import websites https://www.figma.com/community/plugin/747985167520967365

3️⃣ Unsplash plugin for stock photos https://www.figma.com/community/plugin/738454987945972471

4️⃣ Pexels website for stock photos https://www.pexels.com/

5️⃣ Free Figma Icon Pack https://www.figma.com/community/file/1114001199549197320

6️⃣ Figma Practice File with the redesign shown in the video https://www.figma.com/community/file/1221054403908886053

⏰ 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

🔔 If you haven't yet subscribed to our Youtube channel for more Workshop / Facilitation Skills/ Career / and Design Sprint videos: ❤️ https://www.youtube.com/AJ&Smart?sub_confirmation=1😉

Thanks for watching!

----

#figmatutorial #figma #figmaplugins

📗If you want to learn even more about Workshop Facilitation grab our Free Facilitation Guidebook https://go.workshopper.com/facilitation-gb?&utm_content=what_is_a_workshop

Want more? Join 200,000+ people subscribing to our AJ&Smart YouTube, LinkedIn, and Instagram channels for free content to help you and your team do more valuable work.

AJ&Smart is the #1 design sprint firm in the world, the official Design Sprint training partner with Jake Knapp, inventor of the google design sprint, and partner of choice for the world's most successful brands.

Figma UI Design Tutorial - How To Redesign Any Website (Step-By-Step Guide)
https://youtu.be/LeRVFOhAkW4