Figma

Browse, search, and insert image assets into your Figma designs quickly and easily via the imgix Asset Manager.
Invalid date imgix/figma-plugin

Installation

The plugin can be added to your Figma app via the link here.

Configuration and Functions

Configure the plugin using an API key generated via the imgix Dashboard upon installation. Ensure that the generated key has the following permissions: Sources and Asset Manager Browse.

Under Resources / Plugins, you will be able to Run the imgix integration. Once you click Run, go to Settings and enter the API key from Dashboard.

Figma Plugin Settings Example

Here, you will also have configuration options for the following:

  • Fill Format: Sets the image format to use when importing an image from imgix to Figma. Auto-detect will attempt to keep the image in its original image format if Figma supports it.
  • Fill Maximum Size: This is the maximum size of the image you import from imgix to fill an object. The imported image will not be upscaled, only downscaled to fit this constraint. Figma's maximum size is 4096x4096 pixels. Set this value to something lower if you want to improve the speed at the expense of quality for large images.
  • Show Transparency Grids: Check this box to display a transparency grid behind image thumbnails so that you can determine if they have transparency.
  • Show Image Details: Check this box to show additional details underneath each image thumbnail.
  • Max Images At A Time: Set the maximum number of images to return each time images are loaded (e.g., when clicking 'Load More Images'). Decrease this value if loading images is taking too long.

Browse and Select Images

From Figma, open the imgix app from the Resources menu and click Run. Select the desired source to browse images. To load more images, scroll to the bottom of the plugin and click Load More. To insert an image into your design, click on it. Click on a different image in the plugin to replace the image.

Search for Images

The imgix plugin enables users to conduct a keyword search across assets in a source. Using the search box near the top of the modal will execute a search across multiple pre-determined fields: file origin path, image tags, and categories. To learn more about these fields, see our Asset Manager documentation.

Upload Designs

To upload designs into Asset Manager, select the objects in Figma you want to upload, then click Upload Your Current Figma.

Figma Upload Button Example

Operations

The following operations are available when clicking on an asset inside of the imgix Figma plugin:

Command Description
Left Click If a fillable object (or objects) is selected, replace it with the image asset clicked on. Otherwise, place a new rectangular object filled by the image asset that you clicked on.
Shift + Left Click Always place a new rectangular object filled with the image asset you clicked on.
Right Click Copy the serving URL of the image asset you clicked on.
Shift + Right Click Open the serving URL of the image asset clicked on in a new browser tab.

FAQ

Why do only some of my Sources show up in the Source dropdown list?

We only display Sources that have support for imgix Asset Manager enabled. Supported Sources include Google Cloud Storage, Amazon S3, Microsoft Azure, and web folders (read-only).

Why are there no upload or export buttons for my Source?

Either your Source does not have configured upload credentials (for details, see our upload docs), or your Source is a read-only Source type, such as a web folder. Instructions for upload configuration can be found here.

Why am I only seeing some of my assets?

Currently, we only display assets identified as images, animations, or vectors determined to be renderable by Figma. Support for other asset types (i.e., video and documents) will be evaluated in the future.

Why does my uploaded file have a random suffix in its filename?

We do not currently support overwriting existing assets in imgix Asset Manager. Therefore, every uploaded file must have a unique filename, so we append a random string.

Does the imgix Figma plugin support animated GIFs?

Currently, animated GIFs show in the plugin UI but as a static image of the first frame in Figma. We are working on adding support for placing animated GIFs.


More Plugins