ProtoPie Tutorial | Ultimate Guide to Making An Accordion Dropdown Menu

[@ProtoPie]

If you're stuck with making your Pies or have a specific topic you'd like us to cover in a tutorial, drop us a message 👉 bit.ly/3zEXO7E

[@osks]

Very nicely done!

[@jonbernbach8704]

This is very helpful in other instances of design. For example, a social media feed - You might tap on "show comments" and everything below needs to adjust. The elephant in the room is that Auto Layout would help a lot here. But, until that feature makes its way into a release we need to do this sorta thing. This is great practice though for working the brain. I need to watch this (and build) a few times to get it to sync. Thanks Jeff for these UI-centric tutorials. Love to see more!

[@johnnyliu3D]

Very smart and helpful tutorial！Im trying to build something similar and it saves me a lot of time

[@ProtoPie]

Hi JohnnyLiu 3D! Thanks for tuning in. ✨ Share your pies with the ProtoPie Community so others can get inspired as well. Happy prototyping! community.protopie.io/home

[@ladezonepb]

Very well crafted tutorial. Even after 2 years of its release date. Thanks for making and keeping it online!

[@ProtoPie]

Thank you so much for tuning in and the kind words! 💗 We now have ProtoPie School where you can access more learning content like this for free. learn.protopie.io/ See you in class!

[@annet5375]

Thank you so much! This helped a lot, I have a question though, I have a background that must move while accordion expanding. Where do I add a condition? May be you have a separate tutorial for it?

[@markogalic5956]

You helped me a lot with this, thank you sir!!! :)

[@ProtoPie]

Hi Marko - Come join us at ProtoPie School for more free learning content. See you in class! learn.protopie.io/

[@Ilseej9216]

Really liked this! Very helpful. Just wondering, because i have some bold text and regular text and some links in my 'bodytext', how you would fix that? I tried it in my scene and it will only allow me to change the whole text block. Do I have to make separate ones for that or is there an easier way to do this?

[@Ilseej9216]

Would also like to know how this accordion could work together with for instance a footer at the end op the page. So, it doesn't overlap with the footer etc.

[@ProtoPie]

Hi @@Ilseej9216 ! Hope this helps. You can use multiple text fields with specific formatting applied to each one while grouping them into a container to make things a bit more manageable! Alternative: precompose some formatted text, (in Figma or Photoshop) and export it as an image as long as you don’t need the text editable. For the clickable links, layering an invisible rectangle over the link portion of the image and adding a Tap trigger to it should do the trick!

[@olegkoselev6975]

Hello )) thank you for this tutorial )) I got an addition question. I am trying to do accordion menu. 1st lvl would be a title of accordion and 2nd whats inside. The inside text can variate from 3-7 links. And the question is can I one master and later on decide how mane links will be inside to expand and contract properly? I would be really glad for a help ))

[@ProtoPie]

Of course, you can do further customization based on your needs after setting the first step of the components.

[@olegkoselev6975]

@@ProtoPie How can I do it?? ))

[@jatinraj4974]

First and foremost, protopie is a fantastic tool and loved this video, however I'm terrible at creating custom screen transitions😂😂. I'd like to create a transition where when I click on the search bar, it expands and spans the entire screen, transforming into a complete search screen, like - gmail app on android. Can you please make a video on that?

[@ProtoPie]

Hi Jatin! We've answered your question in this tutorial. kzbin.info/www/bejne/d2K2oqWHjcmNh6c Hope you find it helpful. ✨

[@philipmeyer66]

THanks for the tutorial. Really like it a lot. I have a question about resizing the component after you've built it. When I change the height of my component after it's built, it pushes up the lower bodytext layers, so that you can see it when it's collapsed. Is there a way to lock in the y-value so that this doesn't happen? It seems like when you're doing it (around the 8:00 mark) you don't have an issue with it. I've checked my constraints and they seem the same as yours. Any ideas why the text fields move around inside the component?

[@philipmeyer66]

Actually, I was able to work with your file and get it to work. Thanks; great tutorial!

[@ProtoPie]

@@philipmeyer66 Good to hear, was just about to ask you to send your pie and have us take a look. Please don't hesitate to reach out in case you get stuck again or have any specific tutorials you're looking for. Our line's always open! bit.ly/3zEXO7E Happy prototyping 🙌Very excited to see what you can create using this!

[@SamyLarbi1]

Hi thanks for that video, but I can't reproduce it on my design, specially the base element, furthermore I can't display Mask feature. I think I've missed something about the process. Do you have a tutorial with a file ?

[@ProtoPie]

Hi Samy! The complete file is right here. cloud.protopie.io/p/c2391a0605 You can send us your .pie over this form so we can check what's wrong and assist you better. Thank you! www.protopie.io/form/ask-protopie

[@sheriffdeenadesokan3962]

my protopie app is not leaving the sign in page even after signing in

[@ProtoPie]

Please contact us in our ProtoPioneers community for further support: community.protopie.io/

[@innehlemuel886]

When I reduced the main component size to 60, it affected an icon in my design. The icon became smaller, how do I fix it?

[@ProtoPie]

Hi Inneh. Jeff here. Sounds like what you are describing is a result of constraints in action. You'll find settings for constraints in the properties panel and they work similarly to how you might use them in Figma or Sketch. Try setting the constraints for the icon to a fixed height and fixed width.

[@GeorgeLathem]

Holy hell this is so much easier and faster than figma! The amount of time that I spent on figma to do these and they could of all been done with a few clicks 😭

[@ProtoPie]

Hi H! Glad to have you tuning in our tutorials. If you want to learn ProtoPie from A to Z, head over our learning platform and let our instructors help you along the way! learn.protopie.io/ Or join the ProtoPie community! See you there :) On Slack: bit.ly/protopie-community-slack On Discord: bit.ly/protopie-community-discord

[@timostick]

How is that easier than Figma? In Figma you can just use auto layout

[@adrestuc]

Is it just me, or is this demo broken in the latest version of ProtoPie (7.5.0)? It seemed to work for me a couple days ago, but today when I try the completed file, the expand and collapse distances are all messed up and the items overlap each other

[@ProtoPie]

Hi Alex! Thank you for bringing this to our attention. Our dev team is now working on this as we speak. Shall keep you posted!

[@annraven749]

Yeah, I switched text resize option, and it adjust text block size on scene, but not in preview. Finished Pie from a description doesn't work to. But everything else is awesome, and really nice tutorial.