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. A footer will appear if this property is not empty.
panX number 0 Current value of viewport translate for X axis, in pixel. Scaling applies after the translate.
panY number 0 Current value of viewport translate for Y axis, in pixel. Scaling applies after the translate.
scale number 1.0 Current value of viewport scaling (zoom), where 1.0 = 100%;
zoomSpeed number 500 How fast viewport zooms when user performs Ctrl + wheel scroll or pinch in-out gesture. You can specify between 1 to 1,000.
panSpeed number 500 How fast viewport translates when user performs wheel scroll. This does not affect to the speed of drag with middle button (wheel button) pressed. You can specify between 1 to 1,000.
selectedNode SizedNode | null null Selected node object.
zoomMargin number 50 The minimum margin for the preview canvas in px. Preview element uses this value for default zoom value (scale).

Attributes

Name Description
link A corresponding attribute for the link property.
zoom-speed A corresponding attribute for the zoomSpeed property.
pan-speed A corresponding attribute for the panSpeed property.
zoom-margin A corresponding attribute for the zoomMargin property.

Events

Name Description
scalechange Fired when a user performs zoom-in or zoom-out on the preview.
positionchange Fired when a user performs pan on the preview.
nodeselect Fired when a user selects or unselects a node.

<figspec-frame-viewer />

Properties

Name Data type Default Description
nodes FileNodesResponse | null null Required. A response of the "GET file nodes" API.
renderedImage string | null null Required. An URL for the frame image rendered by "GET image" API.
documentNode SizedNode | null null Readonly. A root drawable node.

Attributes

Name Description
nodes A corresponding attribute for the nodes property. Parsed as a JSON string.
rendered-image A corresponding attribute for the renderedImage property.

<figspec-file-viewer />

Properties

Name Data type Default Description
documentNode FileResponse | null null Required. A response 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.
selectedPage Canvas | null null Currently selected page object.

Attributes

Name Description
document-node A corresponding attribute for the documentNode property. Parsed as a JSON string.
rendered-images A corresponding attribute for the renderedImages property. Parsed as a JSON string.

Examples