Figma UI Design Tutorial - How To Redesign Any Website (A Beginner's Guide)
ฝัง
- เผยแพร่เมื่อ 25 มิ.ย. 2024
- 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 TH-cam channel for more Workshop / Facilitation Skills/ Career / and Design Sprint videos: ❤️ th-cam.com/users/AJ&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 TH-cam, 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
🤔Do you have any more questions about this process or Figma in general? Please leave them in the comments below ⬇
✅ Join our FREE FACILITATION COMMUNITY 👉 facilitatorclub.com/ where hundreds of facilitators and designers share their facilitation tricks, techniques, and resources.
This is the kind of content I want from TH-cam!
yeeeeeeee
I had a lot of fun recording this, some of my favorite Figma plugins working overtime here :)
This video is 🔥
So cool. I use Figma but didn't know about importing website this way!
Thank you a lot!
Thanks Johan, you are truly amazing! Would love more content from you! Very insightful!
Saved to my "good to have" playlist! Great production quality!
Awesome, thank you! 😍
Amazing work bro! So helpful and easy to understand
Love ❤the ability to follow along
Think I understand why EVERY employer wants people to know Figma now. Thanks for putting this together.
Great content, guys. Made me fall in love with the page. One more subscriber 🎉
Thanks for this Johan, really helpful and easy to follow
Thanks Josh!
I LOVE THIS VIDEO!
Thank you this is awesome
Very insightful and practical.
Thank you Charles! Glad you liked the video!
thanks for that!
Thank you 😊👍
Thank you sir.
THANKS BRO !
NEWBIE ❤
saved my life
Are the buttons actionable? Like lead to email, purchasing or interaction capability?
I keep getting pulled back to Figma (which I've never used, but a WordPress ninja 100 for years)... Is that insane import plugin option not available in the free Figma accounts? I was just looking for in mine which I hadn't logged into for some time and not done much in but would LUV to go down the road of your amazing tutorial!!
Can i use this technique and this vdo for building up my figma portfolio
Question, I'm trying to edit a text but it's not showing on the display. I think it's behind the shape thing, but I can't bring it to front.
Curious what your video and audio setup is?
I don't have Halvetica font in my Figma. Is that something I need to download? And if so, where do I download it from?
Can we use url in our portfolio? It will be okay ?
can you also export as html file?
How do you clean up the website I mean which option do you use to remove that
okay.... WOW
Hey Man, I just watched your video and I must say that it was really informative and well-made. I loved your videos. I was wondering if I could help you edit your videos and also make highly engaging shorts for you?
Are the buttons clickable AJ?
I copied that icon into Figma as you did, and pasted it into Figma, however it never appeared
got lotta question to ask tho
What do you mean design skills arn't needed? I wanna use my skills
exactly lol
how to import your redesign website into live , using Wordpress?
As a 1st day beginner in Figma, I wanted to familiarize myself with a few beginner videos like this one. Then I realized with disbelief that third-party plugins are required to be able to export the project to HTML. Are they serious or do I not get it? 🤔
I'm unable to import the website. Whenever I do it it says "TypeError: Cannot read properties of undefined (reading 'map')". what do I do?? can you please help?? also I have a free account
The image didn't appear on mine after deleting the rectangle
I can't import website with this plugin I mean he give me blank space what to do?
6.50
The tutorial is a bit too extensive for me. I'm mentioning it only because like I would think most people who'll watch this video will already be very familiar Figma and/or similar apps, so spending much of the video going through its basics maybe isn't the best idea (unless it was a general Figma tutorial).
But the plugin showcase is great. I didn't know about this one and it'll make my job a lot easier. Thanks! :)
Thanks for the feedback Adrian! Yeah the intro to Figma part of the video might be a bit redundant for people who are more familiar with the tool already. However we would like for people with different backgrounds to be able to use this skill as it is very useful. Hopefully people with more experience can make use of the chapters in the video to skip to the parts that they consider more beneficial for them. I'm glad that you found the plugin showcase great! Cheers and thanks again!
Perfect for me as total beginner
very useful