- Видео 126
- Просмотров 579 055
Soren Iverson
США
Добавлен 18 янв 2014
This channel teaches you what I've learned in my last ten years as a designer. I'll show you how to use design tools and break down more high-level concepts like presentation and visual design. Right now I design the investing experience at Cash App.
I've been designing for over a decade. I got my start doing branding and videos for bands but transitioned to art direction, web, and finally digital product design. I've worked on everything from visual and interaction design to design systems, user research, and branding.
I've been designing for over a decade. I got my start doing branding and videos for bands but transitioned to art direction, web, and finally digital product design. I've worked on everything from visual and interaction design to design systems, user research, and branding.
How to User Smart Animate in Figma | Figma Smart Animate Prototyping Design Tutorial
In this video, I walk through how to use the Smart Animate tool in Figma to change the position, scale, opacity, rotation, and color of elements when prototyping. Smart animate is an incredibly powerful tool I use in almost all of my design projects.
New to Figma? Sign up here:
psxid.figma.com/xogqvqq7ah54
0:00 - Intro
0:15 - How to change scale with smart animate
3:37 - How to change opacity with smart animate
5:00 - How to change position with smart animate
7:28 - How to change color with smart animate
8:58 - How to change rotation with smart animate
10:58 - Smart animating multiple properties at once
12:38- Wrapping Up
Music for this video is by Cordio, you can learn more here: www.cortes.us/musi...
New to Figma? Sign up here:
psxid.figma.com/xogqvqq7ah54
0:00 - Intro
0:15 - How to change scale with smart animate
3:37 - How to change opacity with smart animate
5:00 - How to change position with smart animate
7:28 - How to change color with smart animate
8:58 - How to change rotation with smart animate
10:58 - Smart animating multiple properties at once
12:38- Wrapping Up
Music for this video is by Cordio, you can learn more here: www.cortes.us/musi...
Просмотров: 13 477
Видео
How to Create a Responsive Image Slideshow Component in Framer | Framer Gallery Design Tutorial
Просмотров 15 тыс.Год назад
Framer is a web based design tool that makes it easy to create websites without knowing how to code. In this tutorial, I explain how to create an interactive slideshow of images for desktop, tablet, and mobile. Music for this video is by Cordio. You can learn more about their music here: www.cortes.us/music 0:00 - Intro 0:27 - Setting up a basic slideshow module 2:03 - Putting images into the s...
How to Create Responsive Overlay and Modal Components in Framer | Framer Responsive Design Tutorial
Просмотров 17 тыс.Год назад
Framer is a web based design tool that makes it easy to create websites without knowing how to code. In this tutorial, I explain how to use the overlay tool to create a responsive sign in/sign up modal. Music for this video is by Cordio. You can learn more about their music here: www.cortes.us/music 0:00 - Intro 0:09 - How Overlays work in Framer 0:53 - Setting up the modal design 2:17 - Adding...
Light & Dark Mode Styles in Framer | Create Colors in Framer Respond to Dark and Light Mode Settings
Просмотров 3,1 тыс.Год назад
Framer is a web based design tool that makes it easy to create websites without knowing how to code. In this tutorial, I explain how to create styles that respond to dark and light mode device settings. Music for this video is by Cordio. You can learn more about their music here: www.cortes.us/music 0:00 - Intro 0:15 - Setting up the card layout 1:29 - Styling the review card 3:24 - Applying sp...
How to Create a Responsive Website Footer in Framer | Framer Desktop, Tablet, Mobile Tutorial
Просмотров 8 тыс.Год назад
Framer is a web based design tool that makes it easy to create websites without knowing how to code. In this tutorial, I walk through how to create a responsive footer. You can learn more about Framer here: www.framer.com/ Music for this video is by Cordio. You can learn more about their music here: www.cortes.us/music 0:00 - Intro 0:20 - Building the Desktop Footer Structure 1:33 - Building th...
How to Create a Responsive Website Hero in Framer | Framer Desktop, Tablet, Mobile Tutorial
Просмотров 5 тыс.Год назад
Framer is a web based design tool that makes it easy to create websites without knowing how to code. It's very similar to Figma. In this tutorial, I walk through how to create a hero section. You can learn more about Framer here: www.framer.com/ Music for this video is by Cordio. You can learn more about their music here: www.cortes.us/music 0:00 - Intro 0:18 - Designing the Desktop Hero Struct...
How to Create a Responsive Navigation Component in Framer | Framer Desktop, Tablet, Mobile Tutorial
Просмотров 24 тыс.Год назад
In this video, I walk through how to design a basic responsive navigation for desktop, tablet, and mobile devices in Framer. Framer is a tool similar to Figma where you can create designs and view live prototypes on the web. You can learn more about here: www.framer.com/ Music for this video is by Cordio. You can learn more about their music here: www.cortes.us/music 0:00 - Intro 0:22 - Designi...
How to Quickly Add Icons to Figma with Font Awesome | Add Icons and Logos to Figma Tutorial
Просмотров 33 тыс.Год назад
In this video, I walk through how to quickly add icons to Figma using Font Awesome. Rather than going to find an icon online or looking through a list of components you can simply type the word of the icon you need and it will automatically generate within Figma. Get started with Font Awesome: fontawesome.com/start Browse all of their icons: fontawesome.com/icons New to Figma? Sign up here: psx...
How to Design a Tooltip Component in Figma | Material Design Tooltip Component Tutorial
Просмотров 3 тыс.Год назад
In this video, I walk through how to design a tooltip in Figma. This is a component used in Google's material design system, which you can learn more about here: m2.material.io/components/tooltips Figma file: www.figma.com/community/file/1203703753054458490 Music for this video is by Cordio. You can learn more about their music here: www.youtube.com/@UClb_E9xtNgW... New to Figma? Sign up here: ...
How to Design a Time Picker Component in Figma | Material Design Time Picker Component Tutorial
Просмотров 3,3 тыс.Год назад
In this video, I walk through how to design a time picker in Figma. This is a component used in Google's material design system, which you can learn more about here: m2.material.io/components/time-pickers Figma file: www.figma.com/community/file/1203703753054458490 Music for this video is by Cordio. You can learn more about their music here: www.youtube.com/@UClb_E9xtNgW... New to Figma? Sign u...
How to Design Tab Components in Figma | Material Design Tabs Component Tutorial
Просмотров 6 тыс.Год назад
In this video, I walk through how to design tabs in Figma. This is a component used in Google's material design system, which you can learn more about here: m2.material.io/components/tabs Figma file: www.figma.com/community/file/1203703753054458490 Music for this video is by Cordio. You can learn more about their music here: www.youtube.com/@UClb_E9xtNgW... New to Figma? Sign up here: psxid.fig...
How to Design Switch Components in Figma | Material Design Switches Component Tutorial
Просмотров 1 тыс.Год назад
In this video, I walk through how to design switch components in Figma. This is a component used in Google's material design system, which you can learn more about here: m2.material.io/components/switches Figma file: www.figma.com/community/file/1203703753054458490 Music for this video is by Cordio. You can learn more about their music here: www.youtube.com/@UClb_E9xtNgW... New to Figma? Sign u...
How to Design Snackbar Components in Figma | Material Design Snackbar Component Tutorial
Просмотров 1,6 тыс.Год назад
In this video, I walk through how to design snackbars in Figma. This is a component used in Google's material design system, which you can learn more about here: m2.material.io/components/snackbars Figma file: www.figma.com/community/file/1203703753054458490 Music for this video is by Cordio. You can learn more about their music here: www.youtube.com/@UClb_E9xtNgW... New to Figma? Sign up here:...
How to Design Slider Components in Figma | Material Design Slider Component Tutorial
Просмотров 3,5 тыс.Год назад
In this video, I walk through how to design sliders in Figma. This is a component used in Google's material design system, which you can learn more about here: m2.material.io/components/sliders Figma file: www.figma.com/community/file/1203703753054458490 Music for this video is by Cordio. You can learn more about their music here: www.youtube.com/@UClb_E9xtNgW... New to Figma? Sign up here: psx...
How to Design Bottom Sheet Components in Figma | Material Design Bottom Sheet Component Tutorial
Просмотров 2,1 тыс.Год назад
In this video, I walk through how to design bottom shees in Figma. This is a component used in Google's material design system, which you can learn more about here: m2.material.io/components/sheets-bottom Figma file: www.figma.com/community/file/1203703753054458490 Music for this video is by Cordio. You can learn more about their music here: www.youtube.com/@UClb_E9xtNgW... New to Figma? Sign u...
How to Design a Radio Button Components in Figma | Material Design Radio Button Component Tutorial
Просмотров 2 тыс.Год назад
How to Design a Radio Button Components in Figma | Material Design Radio Button Component Tutorial
How to Design Progress Indicators and Loaders in Figma | Material Design Loader Component Tutorial
Просмотров 1,9 тыс.Год назад
How to Design Progress Indicators and Loaders in Figma | Material Design Loader Component Tutorial
How to Design a Navigation Drawer Component in Figma | Material Design Side Nav Component Tutorial
Просмотров 4,8 тыс.Год назад
How to Design a Navigation Drawer Component in Figma | Material Design Side Nav Component Tutorial
How to Design List Components in Figma | Material Design Single Two Three Line List Tutorial
Просмотров 10 тыс.Год назад
How to Design List Components in Figma | Material Design Single Two Three Line List Tutorial
How to Design a Image Lists Component in Figma | Material Design Image List Component Tutorial
Просмотров 1,8 тыс.Год назад
How to Design a Image Lists Component in Figma | Material Design Image List Component Tutorial
How to Design a Divider Component in Figma | Material Design Divider Component Tutorial
Просмотров 6 тыс.Год назад
How to Design a Divider Component in Figma | Material Design Divider Component Tutorial
How to Design Dialog Components in Fimga | Material Design Component Dialog Tutorial
Просмотров 1,4 тыс.Год назад
How to Design Dialog Components in Fimga | Material Design Component Dialog Tutorial
How to Design a Date Picker UI in Figma | Material Design Date Picker Component Tutorial
Просмотров 8 тыс.Год назад
How to Design a Date Picker UI in Figma | Material Design Date Picker Component Tutorial
How to Design and Prototype Data Tables in Figma | Material Design Component Tutorial
Просмотров 12 тыс.Год назад
How to Design and Prototype Data Tables in Figma | Material Design Component Tutorial
How to Design a Navigation Rail Component in Figma | Material Design Navigation Rail Tutorial
Просмотров 1,1 тыс.Год назад
How to Design a Navigation Rail Component in Figma | Material Design Navigation Rail Tutorial
How to Design Chip Components in Figma | Material Design Tutorial
Просмотров 4 тыс.Год назад
How to Design Chip Components in Figma | Material Design Tutorial
How to Design Checkbox Components in Figma | Material Design Selected Unselected Checkbox
Просмотров 1,1 тыс.Год назад
How to Design Checkbox Components in Figma | Material Design Selected Unselected Checkbox
How to Design Card Components in Figma | Material Design Card Component for Music App
Просмотров 6 тыс.Год назад
How to Design Card Components in Figma | Material Design Card Component for Music App
How to Design Floating Action Button Components in Figma | Material Design FAB Components
Просмотров 4,4 тыс.Год назад
How to Design Floating Action Button Components in Figma | Material Design FAB Components
How to Design and Prototype Buttons in Figma | Material Design Primary Secondary Tertiary Components
Просмотров 15 тыс.Год назад
How to Design and Prototype Buttons in Figma | Material Design Primary Secondary Tertiary Components
How does it work with the disabled?
This is truly excellent. So much clearer than any other nav bar video. Nice work !
Hey, just a quick question. Why do you always "add stack" & remove frame?
most of them dont . on the free plan, is there any earlier setup you did to figma ?
Thank you for uploading this video. I appreciate your effort in creating this tutorial. It was very helpful.
Bruh is Savior💥
Best Framer Nav tutorial out there!!!
Thanks a lot
thank you but I have a different option. it's "Rename selection" not "Rename selected layers" and the page appearing was smaller with less info and options. How come, was I doing something wrong? Was I on a different section of the platform?
Some icons doesn't seem to work, e.g. Home/House
most of them dont . on the freee plan
@khaouladjouabi7270 Actually you have to switch the typography of the font from "Regular" to "Solid" inside Figna to get all the icons.
How do you make the nav sticky - animate it in and out as the user scrolls.
Hi Soren, thanks for sharing this. Super helpful. Do you know if there is a way to create an animation when you scroll to change the scale of the primary image in the slider?
I think youtubers deliberately make their videos a little bit difficult to understand to increase the number of replays
It could have been an awesome tutorial. But you where too fast
Thank you
I did not understand! At the top moment of the video there are two voices overlapping!!!
Thanks so much for the video! God of UX, shall forgive me for ignoring such an important 'foundational' lesson.
Piggy is backing off the rest of the comments. These videos are fantastic! They have a perfect pace and flow. I'm not sure I agree with the pov that you need to add logic or rationale behind the demos. These videos aren't a Framer 101 course. Thanks again!
Bro your teaching is so hard to follow 😢
Thanks man it was so much helpful ❤
Is this plugin better than the "Rename feature" built in figma ?
It can be done by selecting and creating a new component set, Correct me if I am wrong
I cant tell how much you helped me, thanks a million Soren!
not working your method use option+comand+c or v
What is I want to use them as svg’s and with a 2px space?
how do u changed the icons so easily? 2:43 (How, by just typing?)
he is too fast
I watched 10 Nav bar videos, this was straightforward and easy. Thank you, tons.
My nav bar doesn’t shrink
Thanks a lot
Is card shadow from a plugin?
thanks for this lesson. I have to play these at 0.75 lol so fast
When I do the mobile closed version and change the visibility from yes to no it doesnt shrink, any fix?
How come when i change the mobile layout it messes up and changes the layout of the desktop and tablet variants?
Honestly I was expecting to see dialogs activation, not dialogs creating. Because creating is kind of obvious...
you have a pro plan i think that's why you grow 🤔
But, hey what about TRIANGLE ? it doesn't show independent corners ...
Can I change the positioning of the hero slider dots? I want it offcentered and not in the center
You go way too fast and dont let us see what you're doing. Even if I pause the video. Its klke you're talking in one big run on sentence
Thank you so much for this helpful video. Can you please explain how to display three toggles with the fourth toggle moving along the screen to the right? Thanks again
Thanks very much, Can you please help writing multiple text with dashes. ` square-up-right ` thanks!
thank you!!!
thanks buddy
shadows color styke do not exist
thank you thank you
very informative and helpful.... thanks Soren!
Genius, thank you very much
Best video so far for this topic
How can I then convert that bouncy button to a component so I can use it through my website?
THANK YOU SO MUCH SIR!! MY KITTEN ACCIDENTALLY DELETED MY ASSETS BUT I KNOW IT'LL BE FIXED AND THANKFULLY I FOUND YOU
Thanku very much