Hi everyone! I’m new to Figma, coming from XD. One of my favourite things in XD is animating progression circles, which can be done intuitively and in seconds.
I found out, not without surprise today, that this is impossible in Figma.
Maybe I heard too much about Figma and overbuild my expectations? Or maybe I’m not doing something right? Please, let me know if you know something I don’t.
Thanks in advance! 
Hey Ioan, this sounds like something you should be able to achieve in Figma. While it’s not an exact match of what you described (a “progression circle”), this 4m tutorial from Abraham John on how to create a circular loading animation might be of use. I believe the same principles and component structure would apply for a progression circle, just without having the animation loop back to the beginning.
Hi Alice and thank you for your answer!
However, what I want to animate is a “progression” circle, not a “loading” one. Loading circle is easy to make - you just slap gradient on a circle and rotate the whole thing.
Loading circle means to animate the vector shape of the circle itself. You can animate only parts (separate vector points) of an object. Like when you want to show quantitative data with a circle. When at 20%, the circle length 20% and when at 80%, the length increases accordingly. And this transition can be “animated” in XD.
It’s somewhat advance feature that I was sure Figma would have it too, being so praised. Figma let you manipulate circles when in “Design”, but when in “Prototype” does not let you animate it. Only transition from one state to the other.
To do that in Figma you would need two arcs and two masks. Initially you would rotate the first arc and then continue with the second one. So the first arc would reflect 0-50% progress and the second one is for 50-100%. Unfortunately there is no way to animate vector parts and props themselves
There was a post from @Gleb who kindly shared a file that has that implemented
Thank you Pavel!
What I’m doing here is comparing XD with Figma, to convince myself to switch. 
And so far I can’t find to many arguments in favour of Figma. If I have to resort to workarounds for something that I can do in seconds in my actual program, is just a bit depressing.
I honestly wonder why the big fuss with Figma and why Adobe bought it?!?
@Pavel_Kiselev great tip! I think I’ve found the community file you were referencing (@Gleb’s Prototyping Tips & Hacks, specifically the Progress Bar page).
@Ioan, the GIF below is Gleb’s progress circle from his community file. As Pavel described, this is achieved with two arcs and a mask.
Thank you very much @AlicePackard and @Pavel_Kiselev for the time you took to respond and help! I really appreciate it!!!
As I said earlier in the post, I am not necessary looking for specific solutions to do one thing or another. What I was looking were rather reasons to switch from XD to Figma, but I fond none so far. Just now, for example, I found out that you have no possibility to record a video of your prototype in Figma. I’m sure there are bunch of workarounds for this too, but the very need to resort to workarounds or the desktop recording of your computer is very outputting.
I guess one great thing about Figma is that is free. This is really great and maybe I’m asking too much from a free software. I keep forgetting this.
So, bottom line for me personally, I’m staying with XD for now. Let see what happen after is included into Adobe.
Thanks again very, very much!
Well, for me XD inherits this really dated mindset when designing things which is very inefficient comparing to Figma. I was using adobe products for two decades, Ps and Ai for UI design was a golden standard back in a day. XD is like Ai to me with lighter UI that focuses merely on single design direction. However everything under the hood is like Illustrator. You literally design things exactly the same outdate way.
Figma does it better in many aspects. Components and resource libraries, auto layout, functional layout grids, constraints just to name a few. Surely certain things done well in XD but it’s not good enough to keep up with modern way of software development
@Pavel_Kiselev I am sorry to spoil your enthusiasm regarding the Figma “modern” approach, but XD has components, resource libraries, auto layout (responsive layout) and functional layout grid. This are “must haves” for every UI program. So, I don’t really understand your point. Maybe you’re not very well familiar with Adobe XD.
Last time I tried there were no way to make button grow / shrink automatically when you change the text. Just checked and it is there indeed. I was able to have something very similar to Figmas auto layout.
I switched from Adobe products two years ago now I have no desire to use any of them for UI design. It’s a personal preference though, I still see these groups with rectangles inside and it hurts! )
Thanks for your input @Pavel_Kiselev ! For me is useful to know and evaluate any differences between this two programs, because as I said I want to switch.
Yes, we all have personal attachments and that happens to me too a lot. But this days I think the differences are in the details (like the one that started this discussion) and not in the big structural blocks of the programs. Nowadays everybody knows not to offer Ai as ui program (even Adobe 
) and what differentiate them are sophistication of tools.
Just out of curiosity, what do you mean by “seeing groups with rectangles inside hurts”?
For me is the fact that there is no frames as a concept, that’s the main difference. To give an element a backplate you would need to create a rectangle, layer some text on top and it is done. In Figma there is a frame that has the same properties as other graphical primitives. And it drives completely different mindset when you design stuff. It makes more sense to keen your designs nice, clean and properly structured. Figma drives that. Devs appreciate that. For very technical designers like myself this is a proper way to bridge the gap between design and development.
On the other hand in XD these techniques seems redundant. Designs are mess. Even official Adobe design system is a mess.
I agree it’s fiddly, I used an animated gif I made in Fireworks CS3 that still works today. I then thought XD is probably going to suffer the same fate.
For what it is worth, I’ve used XD exclusively for the last 2.5 years and I think Figma is a better program, hands down. Things that come immediately to mind are the ability to have multiple videos playing at one time, true responsive layout, easier to organize (select multiple objects and you have the ability to align them perfectly by row and column) and swap the order of objects (select multiple objects and you can swap each item’s position by drag and drop), branching of designs, setting properties such that each component can, from the side bar, have layer toggles and boxes for changing text on the fly, it offers more customizable interactions (like press to hold) and smart animations can be customized (via curve adjuster), it also supports multiple pages in one file, the file can be larger (2GB, compared to around 750 MB for XD in our experience) without bogging down, animations are smoother, you can comment in the actual file and integrate with Teams easily (comments show in teams and can be commented on there…useful integration…the XD integration is bad), it has extensive useful plugins, widgets, and an active community of designers who share great stuff. Also, you can track backend stuff (how a library is being used, who logged into a file to work on it, etc.).
I came here because I wanted to make an animated loader and could not do it easily in Figma. XD is also useful because it is not internet driven. We enter places where we test prototypes and internet is not available. Not ideal.
