Skip to content

Latest commit

 

History

History
81 lines (61 loc) · 2.85 KB

README.md

File metadata and controls

81 lines (61 loc) · 2.85 KB
Raw

Figma REST API HTML Generator

Generate HTML files from files fetched through the Figma REST API.

Example output discussed

example

Screenshot of button.html as rendered by Firefox

<div
  data-figma-name="Viewport=Desktop, Type=Primary, Hover=False, Focus=False, Disabled=False"
  data-figma-id="1:19"
  style="
    background: var(--Other-Green);
    color: var(--Background);
    font: var(--Desktop-Paragraph-Body);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8px 12px 7px;
    display: flex;
    position: absolute;
    inset: 23px auto auto 17px;
    box-shadow: inset 0 -2px #002d18;
  "
>Button</div>

The CSS used to format the HTML is inline on each HTML tag. No attempt is yet made to use CSS stylesheets or assign helpers like CSS classes.

Some absolute positioning and absolute sizing is used where it can't be avoided. Using auto-layout mostly prevents that as it gets converted to flex-box. In the example above absolute positioning is used to position the outer <div> as the component-set itself doesn't use auto-layout.

No fallback fonts are specified.

Vectors are replaced by an SVG placeholder.

Semantic HTML elements aren't used. Everything is a <div> or <svg> (for vectors). Component appropriate elements like <button> or <input> are not used.

The unusual formatting is to keep indentation and newlines within HTML tags so that the text content can safely have white-space: pre-line applied.

Direction

I'm undecided to if this is going to be:

  • A general purpose HTML generator.
  • A generator designed to adapt to peculiarities of a few designs (for example ones I use at work).
  • A tool designed to be flexible with lots of configuration.
  • An inspiration from which other generators can be built. These could even in other languages like TypeScript since I generate types.

Usage

cargo run --release -- to-html 213:6 < example-figma-files/gov-uk-design-system.json > example-figma-files/gov-uk-design-system-components/button.html

You can get the node id from the URL when using the web-ui.

Screenshot of Gov UK design system in Figma web view with Button component selected and node-id=213-6 highlighted in the address bar

The HTML can be piped through additional commands to add fallback fonts and to format the HTML.

cargo run --release -- to-html 213:6 < example-figma-files/gov-uk-design-system.json \
	| sed 's/font-family: GDS Transport Website;/font-family: GDS Transport Website,arial,sans-serif;/g' \
	> example-figma-files/gov-uk-design-system-components/button.html