Incredible! Finally i can add hover and click interactions without "hacking" it. Great work!!

@sammackay9112

3 жыл бұрын

what's the best method for adding reusable buttons with built in hover effects? is it possible?

@tikshow87

3 жыл бұрын

How?

@ikinozuka91

3 жыл бұрын

Yes how?

Great! I noticed it would be useful to have a "swap to" interaction that applies to all components even if they are not overlays, it would be like components states on adobe xd, but without hiding the inactive states on edit view ! (that means more organized for sharing to other team member)

That is what I was waiting for! 👍🏻

Very easy and explained in one go! Thanks!

There is a mistake on 0:40 - the shortcut to enter prototyping is Alt/Option + 9, not Shift + 9.

Thanks... Need full tutorial about Prototyping

I would love to see if the preview mode in Figma can be responsive too.❤

Hi thank you for this! Does anyone know if there is a way to prototype a drag and drop list on figma?

anther basic one.. thnx!

Thanks, Nice app

the first screen has an icon that flows on its own seemingly withouth clicking the mouse ...how do i do that on my icon/ animations to have then play with outh me clicking on a button for the next screen to come in !?

Narrators voice become more robotic. I loved friendly voice from old videos.

@bradmacdonald6591

Жыл бұрын

agreed

when you are showing the examples of the transitions, did you use a motion design program like After effects? or is there a feature in Figma where it records your interaction and converts into a motion file?

@Figma

3 жыл бұрын

The animations to create this video are done using AE, however all of the animations of the prototype itself are done using Figma. Figma can't export a prototype as a video file or animation file, so we just use screen recording software to record walking through the prototype. When we do the 50/50 split screen with the animation previews, those are matching the in-app animation previews you'll see when adjusting settings for transitions.

is there a way to animate text (0:09) in the email address field or is that simulated with another shape layer that's masking and revealing the text?

@Figma

3 жыл бұрын

Hey Peter, you're right on with the masking idea. That's the trick I used in my prototypes. I've also used masks this way to expose things like graphs on a dashboard, or contents on a slide deck.

Why does the animation after sign up look different in the figma file provided for follow along ? 🤔

Please produce more non-mobile focused content. The bulk of my day-to-day work, and I would wager most designers work, is still primarily heavily desktop based.

@Figma

3 жыл бұрын

Hey John, thanks for the feedback! One advantage of using mobile examples is that we can showcase device frames in Presentation view. Another is that since they're thinner, we can often show mobile side-by-side with other content, like the Figma Editor. I totally agree that we've been leaning a lot on mobile, and happy to say that some of our upcoming tutorials will be using a desktop design. It will be a few months before you see them, though!

@jmddotfm

3 жыл бұрын

@@Figma Glad to hear it, sounds good. FWIW it wouldn't even have to be full screen desktop designs. Something I struggled with recently was prototyping a simple web app dashboard navigation bar (with an on hover state, an active state, and active with hover state), and I just couldn't get it to work - so you could break out examples like that even as a tutorial for desktop design.

@wheelsLife2078

Жыл бұрын

​@@jmddotfm sir are you still doing figma currently?

I'm missing the 'Animate' option from the Prototype panel - why? Please help!

I'm in Figma looking at the Interaction details panel, and under the trigger drop down, I don't see "On Tap". I have on click and then on drag. I imagine it is set somewhere to web and not mobile. Is this correct and if so where is that setting? Or please advise. Thank you!

Can i create a video prototype? Export video of the interaction with the prototype

Hey! If my Figma Play isn't displaying complete and proportionate prototype what might be the issue? Please reply!

Great! How do I export this to a gif or mp4?

🤘

The video basically read through the whole thing, I want to see more animation in action.

Thank you. Why not share the Figma file related to this video so that we can review the details?

No component states in Figma? That's gonna be alot of frames to connect to demo transitions on single UI objects like switchers, forms etc. Why doesn't the text bounding box actually wrap the text in Figma? There's always this top and bottom space between the text and the bounding box edge making it impossible to generate correct markup in code specs tools such as Avocode, Zeplin etc cause the margins outside the text will be totally wrong. It's also very hard to see distance between the actual text and other UI elements in my design when the bounding box doesn't wrap tight around the text. Why can't I just select any frame and then immediately see that in prototype mode? Always being forced to add that blue select icon to the frame I wanna use in my prototype is hopeless. There's so many different frames in my project and they are not always connected to the same userflow. All I want to do is to select a frame and open it to see the prototype features of that starting point. Just like in XD. Are there no distance guides in Figma? When I nudge an object around I wanna see how far it is from its surroundings, just like in XD. It's very helpful. I can't see any numbers pop up when moving objects around in my design. All I have is snapping guides but that's not the same. I really miss some reference to distance measured in px when I move anything around. Why am I unable to add more than one on click event to the same frame? The only action I'm left with is drag when an existing link on the same frame is on click. The plugin admin is a web only service and not inside the local application? So annoying having to switch to a browser whenever I wanna deal with plugins and install or delete them when I'm working in Figma as a desktop application. I'm trying to grasp the logic of Figma but I find it so quirky to use. Coming from XD it's a hard transition. I'm forced to use Figma in a project now and I'm constantly missing neat features from XD. I think the collaboration aspects are good in Figma but as a UI layout tool I think it's cumbersome at best.

how did did the email appear in log in

3:34 how did you do that

Where can I get a copy of this design file??

@Figma

3 жыл бұрын

Hey Peter, you can find a copy here: www.figma.com/community/file/767122733527420957

Figma is becoming Hulk

ye must give number to your video so that it will easily understand, prototype tutorial 1, 2 3

why i dont see on tap on figma anymore 😢😢

Give some love to desktop

I want to watch instruction video but the background music is just a bit too loud and competes with the instructions.

I don't understand what easing means. They all look the same

@w0mblemania

9 ай бұрын

It wasn't well demonstrated at all. Easing just means whether there is acceleration/deceleration when moving/transitioning something, instead of instant go-stop motion. Easing helps provide a more natural feel.

I was expecting the last voice

Please create translate in leanguage indonesian