Dynamic Component Resizer
by Daniel Maddock
With this plugin, you'll be able to setup components and resize their instances while maintaining the spacings that you've set in the master. This is done to m…
Installs
4,286
Likes
49
Users
4,000
Views
6,365
Preview
About this plugin
With this plugin, you'll be able to setup components and resize their instances while maintaining the spacings that you've set in the master. This is done to maintain spacing for when the height of an element has changed in the instance, i.e. if you have text change from 1 line to 2.
Requirements:
Master components are required to have a frame, the plugin looks for this. Within the frame you must have 2 elements; these are the ones that you'll fill up with content and will change from instance to instance. This usually is a "header" and "body copy" (see artwork picture above).
The frame must have the following settings:
- Either contrained "top and bottom" or "scale" (vertical)
The top element must have the following settings:
- Constrained to the top
- Grow vertically (for text)
- Align top (for text)
The bottom element must have the following settings:
- Contrained to the bottom
- Grow vertically (for text)
- Align bottom (for text)
If you've done this setup, open up the plugin modal, select the element or elements you want to resize and click "run".
The plugin will run it's magic. It will maintain the space between the two elements within the frame (in the example in the artwork, 20px). If you want to change the spacing, adjust the master, then select the elements and return the plugin.
I will create an automatic resizer when figma allows for long lasting plugins.
Any other feedback, feel free to email me at daniel_maddock@intuit.com
More software development plugins
View allBuilder.io - Figma to Code & AI Apps (React, Vue, Tailwind, etc)
by Steve Sewell
Export designs to clean, responsive code or turn Figma screens into AI apps and prototypes.
Anima: Convert Figma to HTML/CSS/React/Tailwind,Vibe code,DevMode Inspect/Run React/HTML,App builder
by Anima
Anima - AI Design to code, Vibe code, Vibe design
SkewDat
Paidby Unfold
Skew any layer or group with all layers preserved to edit.
Zeplin
Paidby Zeplin Crew
Design tools are for designing. Zeplin is for clear, structured design delivery.