Framework export options

[sawyerclick]

Add options to export for specific frameworks:

• [x] Svelte
• [ ] React
• [ ] Vue
• [ ] Angular

[andrewmilligan]

Hi there! This might be too out-of-left-field for you to want to think about, but if you're still considering adding support for more front-end frameworks, a really helpful intermediate step would be to provide something like a JSON export format that exports structured information about the global styles, the details of each artboard, any scripts included, etc. Then, even if this tool can't export a ready-made React component, say, it would be really easy for a user to write their own component and hook it into whatever build system they're using (without having to fall back to things like dangerouslySetInnerHTML).

Even something that's relatively low-level and unopinionated could be really helpful — something along the lines of

{
  centered: true,
  fluid: false,
  maxWidth: 800,
  artboards: [
    {
      id: 'f2h-frame-768',
      maxWidth: 768,
      minWidth: 320,
      aspectRatio: 2.146,
      image: {
        src: 'figma2html/768px.png',
        preloadSrc: 'data:image/gif;base64,R0lGODlhCgAKAIAAAB8fHwAAACH5BAEAAAAALAAAAAAKAAoAAAIIhI+py+0PYysAOw==',
        with: 768,
        height: null,
        alt: 'Image alt text',
      },
      text: [
        {
          text: 'Hello world',
          customAttributes: {
            class: 'custom-class',
          },
          classStyle: 'font-family: Inter; font-style: normal; font-weight: 400; font-size: 32px; text-decoration: none; text-transform: upper; line-height: normal; letter-spacing: 0px; color: rgba(0, 0, 0, 1); mix-blend-mode: normal;',
          inlineStyle: 'top: 46.94%; left: 42.15%; opacity: 1; width: auto; transform: translate(0%, 0%) rotate(0deg); transform-origin: left top; text-align: left;',
          // Alternatively, you could just expose Figma values here directly
        },
      ],
    },
    // ...
  ]
}

Granted, this gets the most complicated with the text segments, especially considering spans where the styling changes within a text segment — but even if this were just exposing all the internal Figma values and you put the burden on the user to render it how they choose, that would be a really powerful option. E.g.,

text: [
  {
    customAttributes: {
      class: 'custom-class',
    },
    x: '42%',
    y: '57%',
    width: 'auto',
    opacity: 1,
    rotation: 15,
    horizontalAlignment: 'LEFT',
    verticalAlignment: 'CENTER',
    segments: [
      {
        text: 'hello ',
        fontName: 'Inter',
        fontWeight: 400,
        fontSize: 12,
        textDecoration: 'NONE',
        textCase: 'ORIGINAL',
        lineHeight: 'auto',
        letterSpacing: '2px',
        fills: '...',
        textStyleId: '...',
        fillStyleId: '...',
        listOptions: '...',
        indentation: '...',
        hyperlink: '...',
      },
      {
        text: 'world',
        fontName: 'Inter',
        fontWeight: 700,
        fontSize: 12,
        textDecoration: 'UNDERLINE',
        textCase: 'UPPER',
        lineHeight: 'auto',
        letterSpacing: '2px',
        fills: '...',
        textStyleId: '...',
        fillStyleId: '...',
        listOptions: '...',
        indentation: '...',
        hyperlink: 'https://www.figma.com/',
      },
    ],
  },
]

Of course, the plugin would/could still provide more opinionated outputs for various frameworks so that users don't have to deal with all the nitty gritty rendering themselves, but users of unsupported frameworks would have all the structured data they would need to roll their own front-end. Heck, pair that with an NPM library that provides some helpful primitives for converting Figma text values to CSS, and you'd have an incredibly robust jumping off point for all kinds of custom front-ends!

Maybe in an ideal world, the plugin would convert the Figma into this intermediate structure and then each output option would some transformation on top of it, making it simpler to add first-class support for additional output formats — thought that would probably require more of a refactor than you're interested in.

Anyways, I've been dreaming of doing something like this for ai2html for a long time, so as I've been digging into figma2html a bit more I just thought I'd share.

[sawyerclick]

Great idea! We already do a fair amount of processing on our end. While we likely can't do such an extreme abstraction for the text, we could give a json file that contains the js, css and html as objects As a team we're focused on other projects for the time being but we'll be revisiting this plugin and others in a couple of months.

I'll pitch this to the team and see what we can do!