@figspec/react

What is @figspec/react?

@figspec/react is a React component library that allows you to embed Figma designs directly into your React applications. This can be particularly useful for design reviews, documentation, and collaboration between designers and developers.

What are @figspec/react's main functionalities?

Embed Figma Design

This feature allows you to embed a Figma design into your React application. You need to provide the Figma file key, node ID, and an access token.

import { FigspecViewer } from '@figspec/react';

const App = () => (
  <FigspecViewer
    fileKey="your-figma-file-key"
    nodeId="your-figma-node-id"
    token="your-figma-access-token"
  />
);

Interactive Design Viewer

This feature allows you to make the embedded Figma design interactive, enabling users to zoom in, zoom out, and pan around the design.

import { FigspecViewer } from '@figspec/react';

const App = () => (
  <FigspecViewer
    fileKey="your-figma-file-key"
    nodeId="your-figma-node-id"
    token="your-figma-access-token"
    interactive={true}
  />
);

Custom Styling

This feature allows you to apply custom styles to the Figma viewer component, making it adaptable to different layout requirements.

import { FigspecViewer } from '@figspec/react';

const App = () => (
  <FigspecViewer
    fileKey="your-figma-file-key"
    nodeId="your-figma-node-id"
    token="your-figma-access-token"
    style={{ width: '100%', height: '500px' }}
  />
);

Other packages similar to @figspec/react

react-figma

react-figma is a React renderer for Figma. It allows you to build Figma components using React. Unlike @figspec/react, which focuses on embedding Figma designs, react-figma is more about creating Figma components programmatically using React.

figma-api

figma-api is a Node.js wrapper for the Figma API. While it doesn't provide direct embedding capabilities, it allows you to interact with the Figma API to fetch design data, which you can then use in your applications. It requires more manual setup compared to @figspec/react.

README

@figspec/react

A React binding for @figspec/components.

Installation

# npm
$ npm i @figspec/react

# Yarn
$ yarn add @figspec/react

# pnpm
$ pnpm add @figspec/react

Usage

See the docs at @figspec/components.

This bindings enables you to use the CustomElement's property via React's component props. You don't need to use kebab-case attributes :camel::dash:

import { FigspecViewer } from "@figspec/react";

const logSelectedNode = (ev) => {
  console.log(ev.detail.selectedNode);
};

<FigspecFrameViewer
  nodes={nodes}
  renderedImage={renderedImage}
  zoomMargin={200}
  onNodeSelect={logSelectedNode}
/>;

Changelog

[2.0.0] - 2023-09-06

Changed

• Upgrade @figspec/components to ^v2.0.1.
• Upgrade @lit-labs/react to ^v2.0.0.

Removed

• CommonJS files.