@radnolan: Prototyping with @figmaofficial, let's go! Today, we'll design an interaction with a card slider that triggers a new design. We’ll cover prototype devices, overflow scrolling, and smart animation. Overflow scrolling is how you make card sliders in Figma prototypes. Start with a horizontal list that is wider than the screen. Drop that into your screen, then set the size to fixed and set the width to the size of the screen. It’s best if you first give it an auto layout so that you can add some horizontal padding. This makes it so your cards have a consistent padding. Now we’ll make sure Clip Content is checked. Then, you’ll head to the prototype tab and change the overflow setting to horizontal scrolling. Can you say 🎤CARD SLIDER ✨ One more step before animating is to deselect all of your designs, go to the Prototype tab, and change the device to a phone that matches the size of your screens. Now, you’ll have a fancy phone frame and a circle cursor. The next step is to make a new state to transition to. Duplicate the screen and make your design changes. Just make sure to keep the layer names consistent so that Smart Animate can do its magic. The only thing left to do is select your element, grab the blue circle on the frame edge, and drag it to the next screen. Set the transition to Smart Animate, and  🎤OOOOH THAT’S PROTOTYPING 🔥 #designtutorials #figmatutorial #prototyping #uiux

Nolan Perkins | Product Design

Open In TikTok:

Region: US

Monday 24 April 2023 18:04:00 GMT