Main

Figma tip: Sections and prototyping

In this Figma tip, we cover how to use sections with your prototypes to help preserve the state of a given flow. This allows a tester to exit and reenter portions of a prototype and continue where they may have left off. Figma is free to use. Sign up here: https://bit.ly/3msp0OV ____________________________________________________ Find us on ⬇️ Twitter: https://twitter.com/figma Instagram: https://www.instagram.com/figma LinkedIn: https://www.linkedin.com/company/figma Figma forum: https://forum.figma.com/ ____________________________________________________ #Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems #Config2023 Prototyping

Figma

8 months ago

Miggi: Hi everyone, Miggi from Figma here. Today I'm gonna be talking about what sections in Figma means for your prototypes. So the first thing I'm gonna show you, if I press shift S, you can generate a new section and sections can now contain frames. So think of it as a way to organize or frames components and other things in Figma. So it's just another kind of primitive for housing elements, but what it means for prototyping is actually way more intriguing. because you can now remember the st
ates of areas of your prototype. And what that means is this, let's say here I have this prototype. I have a little pet finder app, and when I click on this cat section and I navigate through, when I go back home and click back in, it's always gonna start me at that first point. So same here. When I go and I start with the dogs and I go back home, and if I go back in, it doesn't remember where I was in that given section, so, Now with sections what you do is you have the ability to remember the
states of a given section of a prototype. So the way that that works, each of these are kind of like their own little galleries going back and forth. And now I can have this one targeted directly to this whole section and this section. Going right over here to the left. So this image, when I click on it, it'll go to the cat gallery, but it'll remember which cat I'm currently on when I revisit that section. So let's start that over again. Let's hit that prototype. When I click on these cats, I go
1, 2, 3, 4, 5. I go back home and I click on this, or members that I was on five. So now with these dogs, I click on it 1, 2, 3. When I go back home and I click on the dogs or members, I was on three. When I click on cats, I was on five. So the reason that this is important is that it can drastically simplify your prototypes. You no longer require the complexity necessary to try to trick Figma into remembering a current state of a given section of a prototype. So, give that a shot. Let me know
what you think. And as always, happy designing.

Comments