Design System
How to guides

Figma iframe embed tests

Testing Figma Embeds

Desktop component

Mobile component

Dynamic height components

The iframe embeds must be set to a fixed height that accommodates the expanded height of the contained component.

Editor must be allowed to override iframe heights.

Component set up in Figma

The components examples on this page are Figma components, embedded in this microsite page using the iframe method.

Component preperation in Figma

  1. Wrap an instance of a component in a frame
  2. Apply autolayout to the frame
  3. Apply the desktop width, or mobile width to the frame
  4. Appy height hug to the frame
  5. Add a prototype flow from the frame
  6. Name the frame: 'Component-name-desktop-embed' or 'Component-name-mobile-embed'

Generate iframe code in Figma

  1. Play the prototype flow created in #5 above
  2. Press share button, then choose 'Get embed code'
  3. Copy and replace the first part of the 'src' url, make sure to inclide the url and node ID:
    https://embed.figma.com/proto/8wwg19mTSX6Y7S3qZ2wN2H/Croydon-Design-System-2024?node-id=5583-20070
  4. Copy and replace the starting-point-node-id towards the end of the url
  5. Copy and replace the page-id towards the end of the url

Use this iframe example as the starting point

For mobile components change the class on the div to 'embed-wrapper-mobile'

<div class="embed-wrapper-desktop">
<iframe class="iframe-embed" height="SET HEIGHT HERE"
src="https://embed.figma.com/REPLACETHIS?node-id=REPLACETHIS&viewport=REPLACETHIS&hide-ui=1&scaling=min-zoom&content-scaling=fixed&embed-host=share&starting-point-node-id=REPLACETHISID&page-id=REPLACETHIS" allowfullscreen></iframe>
</div>

iframe parameters

Note the parameter hide-ui=1 hides all the Figma UI controls.

If UI controls are required on some prototypes, we can remove the hide-ui=1 parameter, and introduce these:

&viewport-controls=true
&footer=true
&show-proto-sidebar=true

CSS in this page

Class applied to iframe to make it fill it's container:

.iframe-embed {
display: flex;
border: 2px solid rgba(0, 0, 0, 0.3);
width: 100%;
}

Class applied to div that wraps iframe, with max width for desktop:

div.embed-wrapper-desktop {
width: 100%;
height: auto;
max-width: 768px;
min-height: 200px;
}

Class applied to div that wraps iframe, with max width for mobile:

div.embed-wrapper-mobile {
width: 100%;
height: auto;
max-width: 370px;
min-height: 200px;
}

Page sections spacing fix

.paragraph--type--cds-design-system-text-section h2{
margin-top: 2rem;
}