Border Mockup

About this plugin

✏️ Please, drop your suggestions in the comments! It'll help make the plugin even better and more useful.

Description

In certain situations, layouts blend into white backgrounds, making them difficult to distinguish. Adding a border helps improve the readability of frames in layouts.

This Figma plugin allows you to easily add borders to top-level frames, including frames inside sections but excluding their child elements. You can customize the border thickness, corner radius, corner smoothing, and border color.

Instructions

1. Install and Launch the Plugin:

- Install the plugin in Figma via the Figma Community.

- Launch the plugin through the "Plugins" menu in Figma.

2. Configure Settings:

- Thickness: Enter a value for the border thickness. The minimum value is 0.

- Corner Radius: Enter a value for the corner radius of the frame. The minimum value is 0.

- Corner Smoothing (%): Enter a value for corner smoothing in percentage (from 0 to 100).

- Border Color: Choose a color for the border.

3. Preview Changes:

- Changes to the settings are automatically applied for preview on top-level frames.

4. Apply Changes:

- Click the "Apply" button to apply the border settings to all top-level frames and close the plugin.

- A notification will appear, confirming that the border has been successfully applied.

5. Cancel Changes:

- If you close the plugin without clicking the "Apply" button, the changes will not be saved, and all frames will revert to their original state.

By following these steps, you can easily and quickly customize stylish borders for your top-level frames in Figma.

Made by Sergei Goltsov