Giters

pocka / figspec

Unofficial Figma spec viewer: Live Embed Kit - Live + Guides + Inspector

Home Page:https://pocka.github.io/figspec/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

When displaying complex frames the figspec viewer selection becomes really slow and displays visual artifacts

Tim-arts opened this issue · comments

commented

Affected design types

  • figma
  • figspec
  • link
  • image
  • iframe

Describe the bug

The Figspec viewer selection utility is very slow while displaying a complexe frame, as much that it becomes impossible to maneuver in the frame. There's a video describing the issue: https://youtu.be/OZe-T3u_acE

On Firefox it's not as worse as shown on Chrome, you can feel the lag but there won't be any artifact

How to reproduce the bug?

Create a complex frame in Figma and load it into Storybook through the Figspec viewer (the component/symbol shown in the video has 580 variants)

Expected behaviour

The viewer display the information as it should without latency and visual artifacts.

Environment

  • Chrome / Chromium / Chromium based browsers
  • Firefox
  • macOS Safari
  • iOS Safari
  • Samsung Internet
  • Other

Affected versions

6.2.1

Storybook versions

6.4.9

commented

I have a similar issue even with relatively small number of nodes.
The issue I have is it is super laggy when inspector is open as shown below
output

commented

Could you share a Figma file that causes the performance issue? (Figma file URL or JSON&SVG pair)

commented

Hello @pocka , I've invited you to join a Figma file where you have full access

commented

I'll take a look at the file and see if a fix for #37 improves performance issues.

commented

It seems there are many factors causing this poor performance:

  • Lit's render function iterates every nodes twice per property change (including internal ones, such as scaling factor)
  • SVG images -- SVG rendering + CSS transform is not performant enough for this usage
  • Guideline strokes needs to be updated on every scale changes

I tested on a WIP plain DOM implementation (removed Lit to minimize update) with the largest frame from Twemoji file (frame JSON ... 13MB, frame SVG ... 7MB). The newer implementation is slightly more performant than the current implementation, but still unusably laggy/sluggish.

Probably WebGL is the only1 choice... though it takes a lot of effort to implement.
Turned out, with guidelines disabled, the performance is okay. I would pursue an efficient guideline mechanism.
If it's still slow even with the performant guideline, you should use PNG instead of SVG.

Footnotes

  1. WebGPU and fallback WebGL renderer using wgpu would be more performant, but using WASM makes package structure/publishing/usage too complicated. If this was a standard application, Worker + WASM is definitely the way to go. ↩

commented

Fixed in v2.0.0 (release note, npm)