Figma UI Design Tutorial - How To Redesign Any Website (A Beginner's Guide)

Video Description

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 👉 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 ➡️ https://www.linkedin.com/in/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/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