In this Figma UI Tutorial for beginners, Product Designer, and Workshop Facilitator Johan Holst shares a stepbystep guide on how to redesign any website using Figma without any design skills needed.

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 plugins 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.

If you want to check out what Johan Holst is up to, you should definitely go to his profile. He's always sharing great insights about product design and workshop facilitation ➡   / johholst  

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/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

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_...

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/facilitati...

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 (StepByStep Guide)
   • Video