Fig2WP Image Uploader
Pricing Get Plugins

Docs: Install and use Fig2WP Image Uploader

This guide covers the full workflow from WordPress setup to Figma upload, with screenshot placeholders so you can quickly add visuals later.

Overview

Fig2WP exports selected Figma layers, applies your output settings (format, quality, dimensions), and uploads files to WordPress Media Library via X-API-Key authentication.

Before you start
  • WordPress admin access (plugin install + settings access).
  • Figma account with permission to run plugins.
  • A reachable WordPress site URL using http:// or https://.
  • Layers selected in Figma that can be exported as images.
Step 1

Install the WordPress plugin

Option A: Install from ZIP (recommended)

  1. In WordPress Admin, go to Plugins → Add New Plugin.
  2. Click Upload Plugin and choose your Fig2WP plugin ZIP.
  3. Click Install Now, then Activate Plugin.

Option B: Manual install via files

  1. Copy the plugin folder to wp-content/plugins/fig2wp-image-uploader.
  2. Ensure fig2wp-image-uploader.php is in that folder.
  3. Activate Fig2WP Image Uploader in WordPress Admin.

Generate API key

  1. Go to Settings → Fig2WP Image Uploader.
  2. Click Generate API Key.
  3. Click Copy and keep this key for Figma settings.
  4. If needed, rotate the key with Delete API Key then generate a new one.
WordPress plugin list showing Fig2WP activated WordPress plugin list showing Fig2WP activated
WordPress menu and settings page for Fig2WP WordPress menu with Settings and Fig2WP Image Uploader
WordPress settings page with generated API key WordPress plugin setting page with generated API key
Step 2

Install the Figma plugin

  1. Open Figma and go to the plugin page in Figma Community.
  2. Click Install.
  3. Open a design file, then run Plugins → Fig2WP Image Uploader.
First open Fig2WP plugin in Figma First open Fig2WP plugin in Figma
Step 3

Configure plugin settings in Figma

  1. Open Settings in the plugin UI.
  2. Set WordPress Website URL (for example: https://your-site.com).
  3. Paste your WordPress API Key.
  4. Open Export Options and choose:
Domain note: Figma only allows plugin network requests to valid, reachable domains. Use a public HTTPS URL for your WordPress site. Local or .local domains will not work, except http://localhost or http://127.0.0.1 during local development.
  • Upload Mode: Crop or Original Image
  • Crop Size Scale: 1x, 1.5x, 2x, 3x, 4x (Crop mode only)
  • Format: png, jpg, webp (Pro)
  • Max Width / Max Height (pixels)
  • Quality from 1 to 100

Crop: Exports exactly what is visible inside the layer/frame bounds. Use this when you want the final image to match the selected area only.

Original Image: Exports the full source image without cropping to frame bounds, and keeps original image quality by default. Use this when you need the entire original asset at original quality. (If you set Quality lower for JPG/WEBP, that output quality setting will still apply.)

Tip: Settings are saved, so you usually configure once and reuse.

Settings panel with URL and API key fields Settings panel with URL and API key fields
Export options panel Export options panel with mode, format, quality, and dimensions
Step 4

Upload images from Figma to WordPress

  1. Select one or more image layers in Figma.
  2. In plugin UI, click Add to List.
  3. For each row, edit the title (used as title and alt text).
  4. Click Upload to Media Library.
  5. Wait for export, transform, and upload progress to finish.
  6. Review results: successful uploads show an Open URL link.

Important: If no layer is selected, the plugin cannot add items to the upload list.

Selected layers in Figma canvas Selected layers in Figma canvas
Click Add to List before upload Plugin selected image list before upload
Add title and alt text Selected image list with title and alt text
Click Upload to Media Library Upload in progress in Figma plugin
Upload success Upload success in Figma plugin
Step 5

Verify files in WordPress Media Library

  1. Open Media → Library in WordPress Admin.
  2. Confirm that new images are listed.
  3. Open an uploaded image and verify:
  • Title matches your plugin input
  • Alternative Text matches your plugin input
  • File type and dimensions match export settings
WordPress Media Library with newly uploaded files WordPress Media Library with newly uploaded files
Attachment detail view showing title and alt text Attachment detail view showing title and alt text
Step 6

Pro license and unlock

Use a Pro license key to unlock WebP, max dimensions, compression controls, and separate title/alt inputs.

  1. Purchase a Pro plan via the Upgrade button on the Figma plugin.
  2. After purchase, check your receipt email and find the line License key:.
  3. Copy the license key from the receipt email.
  4. Open Settings in the Figma plugin UI.
  5. Paste it into Pro License Key and click Validate.

Tip: You can toggle the eye icon to reveal the API key or license key while typing.

License key on receipt email Receipt email showing the license key line
Pro license key field Settings panel showing Pro license key field and validate button
Pro features unlocked Export options showing Pro features unlocked
Troubleshooting

Common issues and quick fixes

  • "Please set WordPress Website URL." → Fill URL in Settings.
  • "Please set WordPress API Key." → Generate/copy key from WordPress settings.
  • "URL must be valid http/https" → Include protocol, for example https://your-site.com.
  • "Unauthorized: invalid or missing X-API-Key" → API key mismatch. Regenerate and paste again.
  • Cannot reach WordPress endpoint → Verify site URL, endpoint access, SSL, and CORS response headers.
  • "No image added to the list." → Select layers and click Add to List first.
Upload failed: invalid or missing X-API-Key Upload failed because X-API-Key is invalid or missing
Upload failed: cannot reach WordPress endpoint Upload failed because plugin cannot reach WordPress endpoint