Try embedding figma in Website for documentation

[simoneb]

After discussing with @Filippoperl and @andreaforni about ways to create and integrate into the website designer-generated documentation for components, and realizing that generating such documentation is considerable effort for designers and also for developers who need to translate it into code, we went searching for other options.

• @Filippoperl found a Figma plugin which can automatically generate docs, similarly to what Nick did manually, which is clearly not the same quality but it's good enough.
• The next step was to figure out how we can then include these docs in the Website that @marceloFerreira90 is working on. Among the options we considered:
  • clearly, writing it manually
  • using a tool such as https://www.locofy.ai/ which generates React code from a figma page
  • embedding Figma into the website

We believe that the most promising option is to try embedding figma, which is natively supported. As an example, we were able to slightly tweak the embed code that figma generates to give it a look that would be reasonably good when embedded into a webpage, by changing the properties of the iframe, for example

<iframe
      style={{ width: "100vw", border: 0, height: 4000 }}
      src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FvIqNb3g23SIGRiYUUDf5yE%2FQuantum-Documentation-site%3Ftype%3Ddesign%26node-id%3D99%253A5284%26mode%3Ddesign%26t%3Du6DnEIfSpbweeSdD-1&zoom=false"
      allowfullscreen
    ></iframe>

The idea is to take this one step further and come up with an approach that allows us to integrate the figma docs without having to turn them into code.

[simoneb]

@marceloFerreira90 for your consideration