Skip to main content

Use packages and third-party libraries

You can extend your code in Figma Make and Figma Sites using packages and third-party libraries.

Manually add packages and libraries​

npm packages (Figma Make)​

note

Note: Support for packages in Figma Make is rolling out over the next few weeks.

In Figma Make, using the package.json file at the root of your app or prototype, you can include packages that you want to use to enhance functionality, such as including a design system package.

All users can include packages from the public npm registry.

If you’re on a paid plan, you can also publish and include packages from your organization’s private npm registry provided by Figma. Packages published to your organization’s private registry are Customer Content and are covered by the Terms of Service or your agreement with Figma.

Third-party libraries​

Third-party libraries can be included using a normal import string. For example:

import * as THREE from 'three'

Make uses esm.sh to import libraries and automatically maps your import statements to use the content delivery network (CDN). Because we automatically do the mapping, you don't need to specify an esm.sh URL in your import statements.

You can then use tools delivered by the library as you would normally with React. For example:

import React from 'react'
import * as THREE from 'three'

export default function Layer() {
  const containerRef = React.useRef(null)

  React.useEffect(() => {
    let renderer, scene, camera, geometry, material, cube;
    try {
      scene = new THREE.Scene();
      camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
      ...

Prompt for third-party libraries​

Using the AI chat in Figma Make and Figma Sites, you can prompt the model to include third-party libraries to support your functional prototypes, web apps, code layers, and code components. The same support applies to the code editor in both products.