Hi, I’m new to using Figma - and need to make a dynamic asset that is essentially just a “thermometer” bar that goes up in increments of 1 until it hits 100.
I have no idea how to do this, I have tried using Auto Layout, and looking at some of the articles on Components, but can’t seem to get my head around it. Any advice would very helpful!
Thank you!
It depends on what you want to do with this component. If you want to animate it in the prototype, you can use Smart Animate transitions. If you want to make a component for developers to implement, you can simply create two states: max and min temperature. Developers will then implement the behavior you are describing in code. And finally if exactly what you want is to create a behavior, where it can only move in increments of 1 and max out at 100, there is no way to define this in Figma. You can use something like ProtoPie for that. Or just give it to developers to implement, if you don’t need to prototype a super detailed interaction.
Thank you for the speedy reply! Very useful. I am making it for the developers to implement - Do I need to create two separate files for the max & min states, or all on one? Thanks!
I often do something similar with progress bars. For the purposes of prototyping, you can make ‘variants’ of a single component, i usually make versions for 0%, 25%, 50%, 75% and 100% progress. Then when making a list of these in a design, i randomly switch between each variant on each row to create a realistic looking prototype. Thats all developers really need. You can use smart animate to animate between these different variants (which looks cool but isn’t really necessary to communicate a design).
They should be in one file. One file usually contains all project information, mockups, prototypes, etc. And if the project you are working on is too big, the mockups can be split up into multiple files.
Very helpful, thank you so much for this! Really appreciate it!
Great!! Thank you 