ItsJonQ
commented
4 years ago OoOo.
I checked out the library. At a glance, it looks like it uses React to create Figma shapes, rather than outputting React components.
To expand upon that, I mean,.. you would use <Rectangle /> to create a rectangle in Figma.
But it doesn't look like you can render something like Button from @wordpress/components in Figma.
(I may be wrong)
Taking a step back... I think the ultimate goal is to have a (two-way) relationship like this:
Code <-> Design
Rather than...
Design -> Code
or
Code -> Design
That way, Design and Code can influence each other (rather than dictate).
From my experience + research, it seems like the most effective and reliable (albeit manual) way is for individuals/teams to work very closely together in a cross-disciplinary way. With the understanding that components and systems are first-class priorities rather than a means to an end.
Somewhat related... I've started seeing some places do this. Where they'll embed the Figma component showcase within their documentation:
https://designcode.io/design-system
This is to help encourage synchronization between the moving parts.
I'd love a non-manual way of keeping our Figma library(ies) up to date with our code — the code should be the source of truth — to make it easier to toy with ideas in a non-code environment.
Google shows a handful of others trying to do the same, including this: https://github.com/react-figma/react-figma