3/24/2023 0 Comments Figma mirror![]() We measured our progress over the last 3 months for zooming and dragging in a complex document in terms of average and maximum frame times.Īs you can see from the charts below, both zooming and dragging frame times decreased. Tracking Figma’s average and maximum frame times We could instead look at a full histogram of frame times, but it would be difficult to chart our progress over time with so many variables. As we move towards that world, however, it’s helpful to monitor both of these metrics over time. In an ideal world, applications would never drop below 60fps. In the center animation, every 10th frame. In the left animation, however, the 167ms hitches happen every 28th frame. One of our design team’s guiding principles is “favor direct manipulation,” and nothing breaks the illusion of direct manipulation like delayed and infrequent feedback.Īverage frame times increase (from left to right) while maximum frame times stay the sameĪll three of these have a maximum frame time of 167ms, with most frames taking 33ms. There’s a huge experiential gap between a drag taking 500ms and getting no feedback until it’s complete versus a drag taking 500ms where you’re getting full visual feedback at 60 frames per second. With continuous operations like zooming and dragging, it’s smoothness we care about, not duration. That was super exciting.” Why we measure both average frame time & maximum frame time “I walked back to the office and several people had tested it and were seeing improvements in all cases. “You didn’t have to measure it, it was completely obvious,” Adam said. They saw an instantaneous uptick in the speed of component publishing and file loading. ![]() “It makes it feel like Figma is my product.”Īfter a few minutes diagnosing the issue with Adam in person, we enabled our new renderer for N3TWORK. “That’s one of the best things about Figma - I feel like I’ve built a relationship with people there, and we work through problems together,” he said. Their files are dense and packed with bitmap images, so their UX Design Director Adam Donkin came by in person to talk through performance. N3TWORK, a 100-person gaming and media company, particularly appreciated these improvements. We renewed our focus on improving the fluidity of these common behaviors, and since the beginning of the year, we’ve reduced the “hitches” you see when zooming or dragging. Two of the most common operations where Figma users need speed are zooming in/out and dragging layers. Of course, the importance of performance doesn’t end when your file has loaded. ![]() The impact of this is huge across the board. This includes the desktop app, Chrome, Firefox, and Safari on both macOS and Windows. “The speed at which your team hot fixes stuff is really encouraging, and we couldn’t be happier with the product." WebAssembly is now enabled in all the common places that our users work within Figma. ![]() "It’s considerably more lightweight and much more performant,” Kyle said. “We were stress-testing the limits of what Figma could do before we adopted it as our team’s primary tool,” Kyle Anderson, Senior Product Designer on the Fluent team, told us.įortunately, over the last 2 months WebAssembly optimizations and a collection of other changes helped us reduce the load time for a large realistic document from 29 seconds down to under 8 seconds. These seemingly simple operations add a lot of computational complexity, and load times suffered. The Fluent Design Team at Microsoft, for example, rebuilt every Windows native control in a single Figma document, capturing components in all possible states and permutations. Users push our tool to its limits, nesting components many layers deep to give them flexibility and power in their design systems. File loading speed in action, on a real design documentĪs our product matures, we’ve noticed teams at large organizations creating ever more complex design documents in Figma.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |