Icon - Image Metadata Annotator

Import images into Figma with automatic filename and dimension annotations

A Figma plugin that imports images and automatically adds metadata annotations including filename and dimensions.

Features

• Drag & Drop Import: Easily import images by dragging them into the plugin UI
• Multiple Format Support: PNG, JPG, SVG, WebP, GIF
• Auto Annotations: Automatically adds chips showing filename and dimensions
• Grid Layout: Images are arranged in a grid for easy viewing
• Metadata Extraction: Parses actual image dimensions from file headers

Installation

Development

1. Clone the repository
2. Install dependencies:

   npm install

3. Build the plugin:

   npm run build

4. Watch for changes:

   npm run watch

Running in Figma

1. Open Figma
2. Go to Plugins → Development → Import plugin from manifest
3. Select the manifest.json file from this repository

Usage

1. Open the plugin in Figma
2. Drag and drop images or click "Browse Files"
3. Select one or more images (PNG, JPG, SVG, WebP, GIF)
4. Click "Import Images"
5. Images will appear on the canvas with filename and dimension annotations

Available Scripts

• npm run build - Compile TypeScript
• npm run watch - Watch mode for development
• npm run lint - Run ESLint
• npm run lint:fix - Fix ESLint errors

Tech Stack

• TypeScript
• Figma Plugin API
• ESLint with TypeScript support

License

MIT