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

Видео

How to Create a Responsive Image Slideshow Component in Framer | Framer Gallery Design Tutorial
Просмотров 10 тыс.Год назад
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
Просмотров 12 тыс.Год назад
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
Просмотров 2,6 тыс.Год назад
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
Просмотров 5 тыс.Год назад
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
Просмотров 3,9 тыс.Год назад
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
Просмотров 16 тыс.Год назад
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
Просмотров 24 тыс.Год назад
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
Просмотров 2,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
Просмотров 2,4 тыс.Год назад
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
Просмотров 5 тыс.Год назад
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
Просмотров 836Год назад
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,3 тыс.Год назад
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
Просмотров 2,7 тыс.Год назад
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
Просмотров 1,6 тыс.Год назад
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
Просмотров 1,6 тыс.Год назад
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,5 тыс.Год назад
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
Просмотров 3,7 тыс.Год назад
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
Просмотров 8 тыс.Год назад
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,5 тыс.Год назад
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
Просмотров 4,9 тыс.Год назад
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
Просмотров 983Год назад
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
Просмотров 6 тыс.Год назад
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
Просмотров 10 тыс.Год назад
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
Просмотров 831Год назад
How to Design a Navigation Rail Component in Figma | Material Design Navigation Rail Tutorial
How to Design Chip Components in Figma | Material Design Tutorial
Просмотров 3 тыс.Год назад
How to Design Chip Components in Figma | Material Design Tutorial
How to Design Checkbox Components in Figma | Material Design Selected Unselected Checkbox
Просмотров 872Год назад
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
Просмотров 4,7 тыс.Год назад
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
Просмотров 3,1 тыс.Год назад
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
Просмотров 11 тыс.Год назад
How to Design and Prototype Buttons in Figma | Material Design Primary Secondary Tertiary Components

Комментарии

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

    gold. thanks a lot

  • @chethanms3863
    @chethanms3863 2 дня назад

    why its not working for me. even though I had followed the same steps

  • @NidheeshChandran-y5u
    @NidheeshChandran-y5u 12 дней назад

    Malayalam in font list :)

  • @NidheeshChandran-y5u
    @NidheeshChandran-y5u 12 дней назад

    Malayalam MN in Font list :)

  •  16 дней назад

    U could make it faster so nobody can understand. There is some people down below that understands the video. What a shame 🙃

  • @estilan-cro
    @estilan-cro 16 дней назад

    How can I take a spreadsheet of data and fill this data table layout so I don't have to type in each row? Do you have any ideas?

  • @shotaro421
    @shotaro421 19 дней назад

    Thanks for the great video. Is there a reason why you inserted a column stack at the beginning? Could it be something else?

  • @minkhantz7286
    @minkhantz7286 22 дня назад

    Bro I can't find close overlay

  • @scottfarmer230
    @scottfarmer230 26 дней назад

    The process if fine. The delivery is horrible. If you are new and trying to learn, this does not help. Presenter goes to fast... is a low talker (and tone fades out like he is talking to himself) and he is not very explanatory of the menu item changes. He presents as if his audience is a 10 year professional... Just keep that in mind as you have to watch each section over and over just to hear what he said or see what he did. Craaaazy.

  • @ThaRealIansanity
    @ThaRealIansanity 27 дней назад

    Amazing how difficult it is to find this shortcut googling. Thanks

  • @juleonasefi5230
    @juleonasefi5230 27 дней назад

    Hi Soren, do you have any videos on how to use buttons directly from the MD3 Figma kit and how to update the local style settings so that they can be used in your designs?

  • @simeonshaffar982
    @simeonshaffar982 27 дней назад

    You cut a bunch right as you were generating your labels, when I create the properties it just groups everything into one variant instead of 4 different variants of 2 properties. I can only change the variants of that one group of all 4 icons, and can't separate them out. What did you do after you created the property? Your cuts removed that invormation

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

    I can't add a property to an item within the component. It shows me onlye Parent component, as I select one item. Please help

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

    Soooo...no slider in the FIgma file?

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

    How do I make the extended top bar change to the regular top bar on scroll?

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

    Hi Soren, excellent video. Helped me a lot. I have managed everything, however when checking the result I see in the "Phone" section the following: When clicking on the menu icon, the navigation bar shoots away to the top (out of sight). I see only a few menu items. Any idea how I can fix this?

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

    omgg tysm for sharing this! cos ive struggle how to make this nav

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

    Thank you for the video! Do you know how to make it both display the tooltip and have the button click to a new frame?

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

    Nice content but i'm finding it difficult to make the caret down symbol. also i don't know how you made duplicate of the united states text inside the container.

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

    why my desktop view is not sync with my tablet and phone view... how can i solve this?

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

    Sorted! Thanks you

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

    waste of time

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

    literally the best tutorial ever. The world would have been a much better place if all the youtubers made their tutorials like yours. Here's a heart for you

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

    I just duplicate it and add layer blur to the bottom shape

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

    not good , you have email validation warning in inputs

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

    So beautiful... And how to send and collect the infos of all fields? How to make it functional? please, Soren! :(

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

    Soren - this short clip was really nicely targeted to one specific and very useful situation we might want to create in Figma in an extraordinarily helpful and quickly consumable way. Thank you SO much for recording and posting this micro-tutorial ... you rawk!

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

    Only working on professional figma ( Paid version) now

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

    Successfully restored dude, thanks a ton

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

    THANK YOU. HERO.

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

    easy and straightforward. Good one

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

    Thank you

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

    Thanks thanks sir your teaching skills are really really amazing I am learning a lot ❤ from your videos

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

    What keyboard keys to you click to sellect multiple things like that? Im using a Mac. Thanks in advance!

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

    super slick thanks!!

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

    I am trying to copy an item from an old version and place it on the current version. I did duplicate the old version and copied the item, but it doesn't paste over the current file. I did exactly how it's explained in the video. I tried several times. Any clues as to what's going on?

  • @las-nish
    @las-nish 3 месяца назад

    You just earned a subscriber

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

    I got completely lost after 3:43. My version would change the whole nav bar when I switched pages. Someone help, please!

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

      I had to play the video very slowly to figure out he'd grouped each row before making them a component set. So annoying.

  • @user-ru5eb3sn4u
    @user-ru5eb3sn4u 3 месяца назад

    way of expression was confusing. I'm sorry. When you teach a subject, your audience is those who are not professionals.It would be great if you pay attention to these points.

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

    Hey @soren_iverson, is there a way to create an overlay multi step form?

  • @hussein-alemam
    @hussein-alemam 3 месяца назад

    thank you bro

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

    how can i make a fade effect

  • @RaffiRexer-dp4qt
    @RaffiRexer-dp4qt 3 месяца назад

    Thanks Soren beautiful video! How about on the left side have a logo and a slogan on the right side just next to the logo instead of just the text 'My Framer Site' Should I first stack the logo and the slogan text?

  • @FeliciaOmotayo-ru8ni
    @FeliciaOmotayo-ru8ni 3 месяца назад

    Your shorts are very neat. Please which software do you use to record?

  • @2255.
    @2255. 4 месяца назад

    how do you make a gif or animated background from one of these?

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

    Too fast.

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

    Nice Tutorial. Could you explain how I import buttons with variables from Figma to Framer?

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

    great tutorial pal, better than Framers responsive nav.

  • @viking.karwur
    @viking.karwur 4 месяца назад

    Thanks Soren! Very helpful to learn!

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

    Thank you thank you thank soooooooooooooooo much sir ...