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.
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 👉 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 - www.figma.com/
2️⃣ Builder.io to import websites www.figma.com/community/plugi...
3️⃣ Unsplash plugin for stock photos www.figma.com/community/plugi...
4️⃣ Pexels website for stock photos www.pexels.com/
5️⃣ Free Figma Icon Pack www.figma.com/community/file/...
6️⃣ Figma Practice File with the redesign shown in the video 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 KZfaq channel for more Workshop / Facilitation Skills/ Career / and Design Sprint videos: ❤️ kzfaq.info&Smart?sub_...
Thanks for watching!
----
#figmatutorial #figma #figmaplugins
📗If you want to learn even more about Workshop Facilitation grab our Free Facilitation Guidebook go.workshopper.com/facilitati...
Want more? Join 200,000+ people subscribing to our AJ&Smart KZfaq, 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)
• Video