Automate Figma documentation

[lukasoppermann]

This is the very beginning of adding figma to the new docs.

👀 Preview

Changes

• removes figmaUrl and replaced with figmaId
• store figma data in graphQL
• provide data to components through props

Todo

• currently data is loaded in the components from an npm module, this should be replaced so that it is available via gatsby @josepmartins @danielguillan can you do this?
• currently component.thumbnails.prop is an object with dynamic props. We should replace this with an array of entries ['propertyName', 'propertyValue'] so that it is graphQL compatible @danielguillan @josepmartins
• some components, like actionList are not available. I think this may be, because it is not a component set CC: @danielguillan?
• Pictures don't show up, this is either figma and they are gone, or an issue with access rights / cors, etc. @colebemis any idea?
• individual properties should be added automatically, we need to have a list of all properties in gatsby to loop over the props and add the components.
• somehow the anchor nav does not show up
• fix inconsistent spacing below headlines
• images don't show up
• we should probably remove the last edited by section in the overview, right?
• spacing in overview (to section below yellow note) should be adjusted to fit to react page
• components should be cleaned up and named better.

[emilybrick]

Thank you for taking this on @lukasoppermann ! 👏 🙏 so excited to have all component docs in one place.

Questions about task list, what do these two refer to?

• spacing in overview (to section below yellow note) should be adjusted to fit to react page
• components should be cleaned up and named better.

[lukasoppermann]

• spacing in overview (to section below yellow note) should be adjusted to fit to react page

This is partially improved. It is the spacing between the badge and the variants at the very top

• components should be cleaned up and named better.

This is just how the figma react components are named and build

[colebemis]

@lukasoppermann The image issue looks like a permissions problem:

Where you and @josepmartins able to get the images working in another prototype?

[lukasoppermann]

@lukasoppermann The image issue looks like a permissions problem:

This is actually normal for figma images. They don't allow browser get somehow. It used to work here: https://primer-af96a7b598-26441320.drafts.github.io/guides/figma/components/banner

But it is broken there to. I think @josepmartins and @danielguillan will have a look once josep is back from his vacation.

[colebemis]

This looks amazing! 🚀

[colebemis]

How does this data get updated?

[danielguillan]

We've set up a workflow that updates the JSON file daily (can be triggered on demand too). Also, we're planning to hook it up to the Figma library release process that is being worked on, so it's also triggered automatically when a new release is published.