Soren Iverson
Soren Iverson
  • Видео 126
  • Просмотров 579 055
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...
Просмотров: 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

Комментарии

  • @aniloracsaitam
    @aniloracsaitam 16 часов назад

    How does it work with the disabled?

  • @awakelabs_
    @awakelabs_ День назад

    This is truly excellent. So much clearer than any other nav bar video. Nice work !

  • @HardiRiddhi
    @HardiRiddhi 4 дня назад

    Hey, just a quick question. Why do you always "add stack" & remove frame?

  • @khaouladjouabi7270
    @khaouladjouabi7270 6 дней назад

    most of them dont . on the free plan, is there any earlier setup you did to figma ?

  • @tutorial-f9u
    @tutorial-f9u 7 дней назад

    Thank you for uploading this video. I appreciate your effort in creating this tutorial. It was very helpful.

  • @TheInvisibleSecrets
    @TheInvisibleSecrets 8 дней назад

    Bruh is Savior💥

  • @scenestealer007
    @scenestealer007 9 дней назад

    Best Framer Nav tutorial out there!!!

  • @rhoima_
    @rhoima_ 12 дней назад

    Thanks a lot

  • @BlackPixel1
    @BlackPixel1 16 дней назад

    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?

  • @Diego01201
    @Diego01201 18 дней назад

    Some icons doesn't seem to work, e.g. Home/House

    • @khaouladjouabi7270
      @khaouladjouabi7270 6 дней назад

      most of them dont . on the freee plan

    • @Diego01201
      @Diego01201 6 дней назад

      @khaouladjouabi7270 Actually you have to switch the typography of the font from "Regular" to "Solid" inside Figna to get all the icons.

  • @sivuyilemabuto1794
    @sivuyilemabuto1794 25 дней назад

    How do you make the nav sticky - animate it in and out as the user scrolls.

  • @life_Of_Bowie
    @life_Of_Bowie Месяц назад

    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?

  • @ojikutuoladapo534
    @ojikutuoladapo534 Месяц назад

    I think youtubers deliberately make their videos a little bit difficult to understand to increase the number of replays

  • @ojikutuoladapo534
    @ojikutuoladapo534 Месяц назад

    It could have been an awesome tutorial. But you where too fast

  • @Karajo.design
    @Karajo.design Месяц назад

    Thank you

  • @posceve
    @posceve Месяц назад

    I did not understand! At the top moment of the video there are two voices overlapping!!!

  • @tagore4d
    @tagore4d Месяц назад

    Thanks so much for the video! God of UX, shall forgive me for ignoring such an important 'foundational' lesson.

  • @Newbourne10
    @Newbourne10 Месяц назад

    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!

  • @bear94699
    @bear94699 Месяц назад

    Bro your teaching is so hard to follow 😢

  • @PrashantSinghRawat-xw7eo
    @PrashantSinghRawat-xw7eo Месяц назад

    Thanks man it was so much helpful ❤

  • @feminapu
    @feminapu Месяц назад

    Is this plugin better than the "Rename feature" built in figma ?

  • @shivabijili
    @shivabijili Месяц назад

    It can be done by selecting and creating a new component set, Correct me if I am wrong

  • @charushilakadam1782
    @charushilakadam1782 Месяц назад

    I cant tell how much you helped me, thanks a million Soren!

  • @azimjondev
    @azimjondev Месяц назад

    not working your method use option+comand+c or v

  • @ST-fl5fy
    @ST-fl5fy Месяц назад

    What is I want to use them as svg’s and with a 2px space?

  • @fawadslifestyle4980
    @fawadslifestyle4980 Месяц назад

    how do u changed the icons so easily? 2:43 (How, by just typing?)

  • @yadavsuyog6723
    @yadavsuyog6723 Месяц назад

    I watched 10 Nav bar videos, this was straightforward and easy. Thank you, tons.

  • @mikeyitua7175
    @mikeyitua7175 Месяц назад

    My nav bar doesn’t shrink

  • @gorkemorg
    @gorkemorg Месяц назад

    Thanks a lot

  • @tylerking5985
    @tylerking5985 2 месяца назад

    Is card shadow from a plugin?

  • @tylerking5985
    @tylerking5985 2 месяца назад

    thanks for this lesson. I have to play these at 0.75 lol so fast

  • @ChiSportsCollective
    @ChiSportsCollective 2 месяца назад

    When I do the mobile closed version and change the visibility from yes to no it doesnt shrink, any fix?

  • @ChiSportsCollective
    @ChiSportsCollective 2 месяца назад

    How come when i change the mobile layout it messes up and changes the layout of the desktop and tablet variants?

  • @ArtiomNeganov
    @ArtiomNeganov 2 месяца назад

    Honestly I was expecting to see dialogs activation, not dialogs creating. Because creating is kind of obvious...

  • @iiamzaiid
    @iiamzaiid 2 месяца назад

    you have a pro plan i think that's why you grow 🤔

  • @itzJee1
    @itzJee1 2 месяца назад

    But, hey what about TRIANGLE ? it doesn't show independent corners ...

  • @Eric-Stein-Digital-Expert
    @Eric-Stein-Digital-Expert 2 месяца назад

    Can I change the positioning of the hero slider dots? I want it offcentered and not in the center

  • @IvanRamos2001
    @IvanRamos2001 2 месяца назад

    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

  • @nalsaher4613
    @nalsaher4613 2 месяца назад

    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

  • @zahid-n8p
    @zahid-n8p 2 месяца назад

    Thanks very much, Can you please help writing multiple text with dashes. ` square-up-right ` thanks!

  • @BreceLeeay
    @BreceLeeay 2 месяца назад

    thank you!!!

  • @King8527.......
    @King8527....... 2 месяца назад

    thanks buddy

  • @RikuplayzYT
    @RikuplayzYT 2 месяца назад

    shadows color styke do not exist

  • @koffeebear406
    @koffeebear406 2 месяца назад

    thank you thank you

  • @keepingupwithliberianteete6971
    @keepingupwithliberianteete6971 2 месяца назад

    very informative and helpful.... thanks Soren!

  • @4our_me
    @4our_me 3 месяца назад

    Genius, thank you very much

  • @OlufolakeVlog
    @OlufolakeVlog 3 месяца назад

    Best video so far for this topic

  • @darrenstrange2244
    @darrenstrange2244 3 месяца назад

    How can I then convert that bouncy button to a component so I can use it through my website?

  • @kimberlybasilio6067
    @kimberlybasilio6067 3 месяца назад

    THANK YOU SO MUCH SIR!! MY KITTEN ACCIDENTALLY DELETED MY ASSETS BUT I KNOW IT'LL BE FIXED AND THANKFULLY I FOUND YOU

  • @soumyaapatil
    @soumyaapatil 3 месяца назад

    Thanku very much