When using figui3 in a Figma plugin, the standard import method doesn't work due to Figma's embedded iframe architecture. This requires workarounds that could be eliminated with a bundled distribution.
Environment
- figui3 version: 1.9.1
- Context: Figma plugin (embedded iframe via
figma.showUI())
The Problem
1. CSS @import fails in embedded contexts
fig.css uses @import statements:
@import url("base.css");
@import url("components.css");When the HTML is embedded as a string in Figma plugins, these imports fail because the referenced files aren't accessible from the embedded context.
Current workaround: Manually read and concatenate CSS files in the build process:
const figui3BaseCSS = fs.readFileSync('./node_modules/@rogieking/figui3/base.css', 'utf8');
const figui3ComponentsCSS = fs.readFileSync('./node_modules/@rogieking/figui3/components.css', 'utf8');
const combinedCSS = `${figui3BaseCSS}\n\n${figui3ComponentsCSS}`;
// Inject into HTML before embedding
html = html.replace('<head>', `<head>\n<style>${combinedCSS}</style>`);2. <fig-tabs> doesn't manage content panels
The documented usage suggests tabs manage their content:
<fig-tabs>
<fig-tab label="Tab 1">Content 1</fig-tab>
<fig-tab label="Tab 2">Content 2</fig-tab>
</fig-tabs>
However, in practice I needed to implement manual tab switching with separate content panels and custom JavaScript.
3. <fig-radio> requires accessing internal elements
To get the selected value from a fig-radio group, I had to reach into the internal input element:
const selectedRadio = document.querySelector('fig-radio[name="my-group"] input:checked');
const value = selectedRadio?.value;Feature Request
Would it be possible to provide:
- A pre-bundled CSS file (
fig.bundle.css) that doesn't use @import
- A pre-bundled IIFE JS file (
fig.iife.js) optimized for Figma plugins
- Tab content management built into
<fig-tabs> component
- Cleaner value access for form components like
<fig-radio>
Thanks for the great library! The Figma UI3 styling is excellent.
When using figui3 in a Figma plugin, the standard import method doesn't work due to Figma's embedded iframe architecture. This requires workarounds that could be eliminated with a bundled distribution.
Environment
figma.showUI())The Problem
1. CSS @import fails in embedded contexts
fig.cssuses@importstatements:When the HTML is embedded as a string in Figma plugins, these imports fail because the referenced files aren't accessible from the embedded context.
Current workaround: Manually read and concatenate CSS files in the build process:
2.
<fig-tabs>doesn't manage content panelsThe documented usage suggests tabs manage their content:
However, in practice I needed to implement manual tab switching with separate content panels and custom JavaScript.
3.
<fig-radio>requires accessing internal elementsTo get the selected value from a fig-radio group, I had to reach into the internal input element:
Feature Request
Would it be possible to provide:
fig.bundle.css) that doesn't use@importfig.iife.js) optimized for Figma plugins<fig-tabs>component<fig-radio>Thanks for the great library! The Figma UI3 styling is excellent.