- Configuration and Functions
- Browse and Select Images
- Search for Images
- Upload Designs
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:
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.
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.
To upload designs into Asset Manager, select the objects in Figma you want to upload, then click Upload Your Current Figma.
The following operations are available when clicking on an asset inside of the imgix Figma plugin:
|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.|
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.
- ContentfulbuildBrowse, search, and add assets into your content quickly and easily via the imgix Asset Manager.TypeScript 9 < 1 day ago
- Craft Image OptimizeAutomatically create & optimize responsive image transforms, using either native Craft transforms or a service like imgix, with zero template changes.PHP 235 12 days ago
- Imager X for CraftAn image manipulation plugin for the Craft CMS that supports imgix URLsPHP 22 2 days ago
- Nuxt ImagePlug-and-play image optimization for Nuxt apps. Resize and transform your images in your code using your imgix images.TypeScript 889 a day ago
- Statamic PluginAn add-on for integrating imgix into Statamic sitesPHP 17 2 years ago
- Superbig Craft PluginA plugin for the Craft CMS that adds full access to the imgix API for manipulating imagesPHP 13 5 months ago
- wp-imgixA WordPress plugin that connects to your storage (Amazon S3, Google Cloud, & others) and provides imgix URLs for your site's imagesPHP 9 a month ago