Missing Instructions on How to Insert Figma Design into MDX Docs Page

[KenACollins]

Hi,

Thanks for creating your designs add-on. I have successfully followed your documentation to get a Figma URL to load on the Canvas panel > Designs tab of a Storybook 6 implementation using MDX story files.

Now, I am looking at your Design Doc Block page, where you show that a Figma URL can be embedded on an MDX page, and I can't figure out how you are making this work. The documentation is not clear. Details are missing.

I see at the bottom, there is this line...

<Design storyId="internal-blocks-design--foo" />

...but where do you import the Design tag from? I can't find it in storybook-addon-designs or @storybook/addon-docs/blocks. You also mention Figma separately along with IFrame, Image, and PDF tags. See screen shot below.

How do you import those tags? What is the difference between all these?

Can you provide the complete code with import statement(s) to produce an embedded Figma iframe on an MDX page and eliminate the need for the Designs panel?

Thanks,
Ken

[pocka]

These Blocks exist in storybook-addon-designs/blocks.

import { Figma } from "storybook-addon-designs/blocks"

<Figma url="https://foo.bar/baz" />

And you're right, we should provide usable docs for these. I just opened an issue for that.

[KenACollins]

That was the detail I needed! Thanks.

[cco-rosselle]

These Blocks exist in storybook-addon-designs/blocks.

import { Figma } from "storybook-addon-designs/blocks"

<Figma url="https://foo.bar/baz" />

And you're right, we should provide usable docs for these. I just opened an issue for that.

If I have a custom outline for doc blocks and want to apply a Figma block to all my CSF component stories, how can I set each Figma URL? Or is that possible?

[KenACollins]

I don't understand your question. I have re-read it several times and cannot understand what you are asking. What is CSF?

I store my Figma URLs in a constants file and import the one I want, then dynamically set the url attribute on the Figma tag as follows in this example for a primary button:

import { Figma } from 'storybook-addon-designs/blocks';
import { DESIGN_BUTTON_PRIMARY_URL } from '../../constants/designURLs';

#### Figma Design
<Figma url={DESIGN_BUTTON_PRIMARY_URL} collapsible={true} defaultCollapsed={true} placeholder='Click Show button to display Figma design for this component.' />

I don't know if this is even close to answering your question, but this is how I use Figma on my MDX documentation pages.