Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@figspec/react

Package Overview
Dependencies
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@figspec/react

React binding for figspec

  • 2.0.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
690K
increased by12.07%
Maintainers
1
Weekly downloads
 
Created

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

Keywords

FAQs

Package last updated on 06 Sep 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc