Figma Borderless Export 🛹🚫

Remove strange borders when exporting images with figma

✨ Features

Export images without borders with the following options.

• Extension: [PNG, JPG]
• Scale: [0.5x, 0.75x, 1x, 1.5x, 2x, 3x, 4x]

💭 Motivation

When exporting images in figma, sometimes a 1px white border is added to the edge of the image. It is difficult to notice that and also troublesome to remove the borders after export.
With this plugin, We can export images without strange borders!

🛠️ How to use

1. Install the plugin
2. Select the frames you want to export
3. plugin → Borderless Export
   • Export with UI
   • Export as PNG 1x, 1.5x, 2x
   • Export as JPG 1x, 1.5x, 2x (beta)

📝 Note

There are two main causes of strange borders when exporting with figma.

1. When the width/height of the export target is a non-integer values due to scaled export (ex. 0.75x, 1.5x, ...)
2. when the target frame is not on a grid point on figma

This plugin solves both cases in most cases.

JPG exports rarely leave borders, which can be solved by changing to PNG export or moving the image to a grid point.

We plan to improve the algorithm for border detection in the future.

💻 Development

Build plugin

git clone [email protected]:kj455/figma-borderless-export.git
cd figma-borderless-export

pnpm install
pnpm dev

Import plugin

1. Open Figma App
2. Import plugin
   figma > plugins > development > new plugin > import plugin from manifest
3. select manifest.json in figma-borderless-export directory