Back to Plugins
Dynamic Component Resizer

Dynamic Component Resizer

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 [email protected]

utilityspacingresizeline heightinstancecomponents

Plugin Preview

Dynamic Component Resizer 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 [email protected]

Plugin Details

Version4
CreatedJuly 19, 2019
Last UpdatedAugust 13, 2019
CategorySoftware development
CreatorDaniel Maddock
Stats4244 installs, 48 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:code-primative.js