pocka
IDEA: Expose DevMode resources
Hi pocka, love what you did with this project!
I think it could become a great way to embed Figma frames in live documentation sites (Storybook, Starlight, Vitepress, etc.) as an alternative to paid solutions that often have a very basic Figma embed.
If I were to host Figma frames in a custom-made site with one of the above tools, one of the first things my developers would want is access to CodeConnect. It helps them implement the component properly by selecting the right syntax for Figma variables, so that their CSS is correct.
Another great potential avenue for improvement would be to redo the playground UI that Figma has, which lets you select props and view the outcome. This would allow developers to configure a Figma component and use the right markup, even if the component isn't fully developed yet or if the dev team doesn't have a code playground.
I suspect the latter would require integration with a REST API client though? If that's the case, I'd be happy to help :)
I don't/won't use their Dev Mode but from seeing their docs, Dev Resource is an annotation consists of name and URL that is attached to a node (or frame), right? Then it's implement-able.
- Create a sample Figma file with Dev Resource set
- Export the file via Figma REST API or helper script in this repo
- Export Dev Resources via Figma REST API
- Redact the exported data if necessary (I don't think those files contains sensitive info but extra care doesn't harm)
- Upload the files here, or Put those under
website/examples/demo-dataand create a new example then open Pull Request - Add a property that takes a response of "GET dev resources" endpoint (like
devResourcesApiResponse) and implement UI
Only someone with access to Dev Mode can do 1~5.
I suspect the latter would require integration with a REST API client though? If that's the case, I'd be happy to help :)
This library does not call Figma REST API: it's caller's (embedder's, such as @storybook/addon-designs's) responsibility. From README:
The components are designed to work on Figma REST API result. This library does not provided a functionality to invoke Figma REST API endpoints.
