Troubleshooting render issues

Here are some common issues with rendering code components in Figma. If you are still having issues please email support@interplayapp.com

Example renders no visible UI

This error message is displayed if your component does not vender any visible UI elements to the page. This can occur for a number of reasons:

  • The component preset has no content Some components are meant to be containers of content, but do not have any UI elements themselves. e.g. div elements. To resolve this issue, add content into the example.
  • The component preset has no width or height Some components do not force a min-width and instead fill the container space. However, as the preview container does not have any defined width by default, this means nothing is displayed. To resolve this error, set a width on the example by either dragging the drag handles in the preview, or by setting the width or height property.
  • This is a non-visual component If this is the case, we recommend deleting the preset as there is nothing to display

Missing Theme Wrapper

Some component libraries require a wrapping Theme provider component to wrap all component instances. If this is the case you can add a wrapping component by doing the following:

  1. Go to the Project Settings page.
  2. Go to the Includes page
  3. Select the component you wish to wrap all examples in the Wrapping Component dropdown.

Note: You may wish to re-generate all preset snapshots after updating these settings. To do so, simply click on the "Regenerate Thumbnails" button at the end of the page.

Missing Stylesheet or Fonts

Some component libraries require external css style sheets of custom fonts to be included on the page. If this is the case you can add a wrapping component by doing the following:

  1. Go to the Project Settings page.
  2. Go to the Includes page
  3. Add the URLs to the Include File URLs section. If the files are generated as part of the build process, you can specify a relative include path as part of the CLI settings.

Note: You may wish to re-generate all preset snapshots after updating these settings. To do so, simply click on the "Regenerate Thumbnails" button at the end of the page.