Figspec

Unofficial Figma design viewer

Figspec is an unofficial Figma design viewer primarily developed for embedding usage.

Live demo

This is a working demo of <figspec-frame-viewer/> displaying a frame of sample Figma design.

Install

Install @figspec/components package from NPM.

npm i @figspec/components

Usage

This package registers two custom elements: <figspec-frame-viewer/> and <figspec-file-viewer/>. As the names describe, the frame viewer displays a specific Figma Frame and the file viewer displays an entire Figma file.

Once you installed the package, import the package entrypoint from your JavaScript file, which registers the two custom elements. 

import "@figspec/components";

Now, you can use the custom elements in your HTML/DOM.

<body>
  <figspec-frame-viewer nodes="..." rendered-image="..."></figspec-frame-viewer>
</body>

API

Common

These APIs are available both in <figspec-frame-viewer /> and in <figspec-file-viewer />.

Properties

Name Data type Default Description
link string An URL for the Figma frame or containing file.
preferences Preferences Default preferences Preferences object. Figspec itself does not save/restore user preferences. A user of Figspec (page author) is responsible for preference persistence.

Attributes

Name Description
link A corresponding attribute for the link property.

Events

Name Description
nodeselect Fired when a user selects or unselects a node. [event].detail.node is a node object, null for unselects.
preferencesupdate Fired when a user changes preferences. [event].detail.preferences is a preferences object.

CSS Custom Properties

Name Acceptable value Description
--figspec-font-family-sans List of font family Font family for sans serif text.
--figspec-font-family-mono List of font family Font family for monospace text.
--figspec-font-size <length> Base font size. Default to 1rem.
--figspec-spacing-base <length> Base spacing size.
--figspec-spacing-scale Unit-less number Size of spacing scales.
--figspec-spacing_{-5,-4,-3,-2,-1,0,1,2,3,4,5} <length> Spacing size values.
--figspec-action-overlay <color> Background color for actions (e.g. button) on hover.
--figspec-action-border <color> Border color for actions (e.g. button).
--figspec-action-horizontal-padding <length> Left and right padding of actions (e.g. button).
--figspec-action-vertical-padding <length> Top and bottom padding of actions (e.g. button).
--figspec-action-radius <length> Border radius of actions (e.g. button).
--figspec-canvas-bg <color> Canvas color for Frame background and files without background color set.
--figspec-fg <color> Foreground color, mainly for text.
--figspec-bg <color> Background color.
--figspec-subtle-fg <color> Foreground color for non-primary elements, such as description text.
--figspec-success-fg <color> Foreground color for OK/success elements.
--figspec-error-fg <color> Foreground color for NG/error elements.
--figspec-z-index Unit-less number Base z-index value for the element. Internal elements creates UI stack on top of that.
--figspec-code-{bg, text, keyword, string, number, list, comment, literal, function, unit} <color> Syntax highlighting colors.
--figspec-guide-thickness <length> Stroke thickness of node guides.
--figspec-guide-color <color> Stroke color of node guides.
--figspec-guide-selected-color <color> Stroke color for the outline of selected node.
--figspec-guide-tooltip-fg <color> Text color of the distance tooltip.
--figspec-guide-selected-tooltip-fg <color> Text color of the dimension tooltip for a selected node.
--figspec-guide-tooltip-bg <color> Background color of the distance tooltip.
--figspec-guide-selected-tooltip-bg <color> Background color of the dimension tooltip for a selected node.
--figspec-guide-tooltip-font-size <length> Font size of tooltips.
--figspec-snackbar-fg <color> Text color of snackbars.
--figspec-snackbar-bg <color> Background color of snackbars.
--figspec-snackbar-radius <length> Border radius of snackbars.
--figspec-snackbar-font-size <length> Font size of snackbars.
--figspec-snackbar-font-family Comma separated list of font families Font family used in snackbars.
--figspec-snackbar-shadow Valid value for box-shadow Box shadow applies to a snackbar.
--figspec-snackbar-margin Valid value for padding Margin applies to a snackbar.
--figspec-snackbar-padding Valid value for padding Pading applies to a snackbar.
--figspec-snackbar-border Valid value for border shorthand Border applies to a snackbar.

<figspec-frame-viewer />

Properties

Name Data type Default Description
apiResponse GetFileNodesResponse | null null Required. Response body of the "GET file nodes" API.
renderedImage string | null null Required. An URL for the frame image rendered by "GET image" API.

<figspec-file-viewer />

Properties

Name Data type Default Description
apiResponse GetFileResponse | null null Required. Response body of the "GET file" API.
renderedImages { [nodeId: string]: string } | null null Required. A record of rendered images, where key is an ID of the node and value is an URI of the image. images property in the response of "GET image" API.

Examples