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

Background of figspec is too dark

yannbf opened this issue · comments

commented

One thing I noticed after trying component variants was now I can just link the component selection rather than create a frame to wrap all components. The designers I spoke with are not creating frames around component variants.

On figspec, when loading a variant node directly which has no frame, it's sometimes not very readable:

image

When I tried addon-designs with figma type instead, I got this, which is much more appealing to the eye:

image

I wonder if we can just change the background of figspec to the same color as the Figma one. WDYT @pocka ?

commented

I think the background color should match the Figma canvas' one. Maybe this is easy when dealing with Figma files but hard with frames or components, b/c the backgroundColor is configured for canvas, not frames.

The latter (frames and components) could be done in storybook-addon-designs.

  1. fetch the whole file the frame is belonging
  2. find the canvas containing the frame by iterating all canvases
  3. pick the background color
  4. find the frame node and render it (same as previous)
commented

Makes sense! I didn't think of that but it would be better to have the color matching exactly how designers customised in Figma. You really think of everything!

So I guess figspec can receive a backgroundColor property, passed either via storybook-addon-designs or another consumer that is using figspec as a web component, and maybe default to Figma's default canvas background color (#E5E5E5) in case nothing is passed?

commented

So I guess figspec can receive a backgroundColor property, passed either via storybook-addon-designs or another consumer that is using figspec as a web component, and maybe default to Figma's default canvas background color (#E5E5E5) in case nothing is passed?

Yes! BTW I'm not sure why I put #666 as the default bg value... will change to Figma's default.

commented

Is this fixed or is it coming later? My designers are complaining it's too dark aswell

commented

Fixed in @figspec/components@v0.1.9. Closing as the canvas-specific background colour is customizable via --figspec-viewer-bg custom property.