Back to Plugins
Tidy Components

Tidy Components

<p>Tidy Components is a Figma plugin that organizes all of the components and variants in alphabetical order on your page in a tidy manner.</p><p><br></p><h1>Getting Started</h1><p>When you first open the plugin, you are presented with a set of pre-defined parameters that can be used as-is to show you what is possible.</p><p><br></p><h1>Options</h1><ul><li><strong>Direction:</strong> The direction in which the component groups will be laid out.</li><li><strong>Levels: </strong>The hierarchy levels in which your components will be organized.</li><li><strong>Margin: </strong>Distance between each group in pixels.</li><li><strong>Gutter: </strong>Distance between each component.</li><li><strong>Display Title: </strong>The parent category name that will be displayed before each group.</li><li><strong>Rename Duplicates: </strong>If multiple components have the exact same name, they will be renamed with incremental numbers.</li><li><strong>Zoom to Center: </strong>After cleaning up your&nbsp;💩, view will zoom out to show all components.</li><li><strong>Sort Alphabetically: </strong>Tidy will sort your components and variants alphabetically.</li></ul><p><br></p><h1>Found a bug or have an idea?</h1><p>This is a team of&nbsp;one, but if you have any good ideas or constructive feedback, please do not hesitate to share your thoughts&nbsp;<a href="https://github.com/cross-team/figma-tidy-components/issues/new" rel="noreferrer noopener nofollow" target="_blank">by creating a new issue</a>&nbsp;- screen captures are welcomed.</p><p><br></p><h1>Show your support</h1><p>If you find this plugin useful, feel free to&nbsp;<a href="https://www.patreon.com/mpaiva" rel="noreferrer noopener nofollow" target="_blank">buy me a&nbsp;🍺</a>&nbsp;at my Patreon page. Thanks!&nbsp;🙏</p><p><br></p><h1>Contribute</h1><ul><li>Run&nbsp;<code>yarn</code>&nbsp;to install dependencies.</li><li>Run&nbsp;<code>yarn build:watch</code>&nbsp;to start webpack in watch mode.</li><li>Open&nbsp;<code>Figma</code>&nbsp;&gt;&nbsp;<code>Plugins</code>&nbsp;&gt;&nbsp;<code>Development</code>&nbsp;&gt;&nbsp;<code>New Plugin...</code>&nbsp;and choose manifest.json file from this repo.</li><li>Create a Pull Request for your branch</li></ul>

ui kitsortcomponentsorganizetidydesign systemproductivitycomponentsorganizer

Plugin Preview

Tidy Components preview

About this plugin

Tidy Components is a Figma plugin that organizes all of the components and variants in alphabetical order on your page in a tidy manner.


Getting Started

When you first open the plugin, you are presented with a set of pre-defined parameters that can be used as-is to show you what is possible.


Options

  • Direction: The direction in which the component groups will be laid out.
  • Levels: The hierarchy levels in which your components will be organized.
  • Margin: Distance between each group in pixels.
  • Gutter: Distance between each component.
  • Display Title: The parent category name that will be displayed before each group.
  • Rename Duplicates: If multiple components have the exact same name, they will be renamed with incremental numbers.
  • Zoom to Center: After cleaning up your 💩, view will zoom out to show all components.
  • Sort Alphabetically: Tidy will sort your components and variants alphabetically.


Found a bug or have an idea?

This is a team of one, but if you have any good ideas or constructive feedback, please do not hesitate to share your thoughts by creating a new issue - screen captures are welcomed.


Show your support

If you find this plugin useful, feel free to buy me a 🍺 at my Patreon page. Thanks! 🙏


Contribute

  • Run yarn to install dependencies.
  • Run yarn build:watch to start webpack in watch mode.
  • Open Figma > Plugins > Development > New Plugin... and choose manifest.json file from this repo.
  • Create a Pull Request for your branch

Plugin Details

Version3
CreatedDecember 11, 2020
Last UpdatedDecember 28, 2020
CategoryFile organization plugins
CreatorMarcello Paiva
Stats2488 installs, 93 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:dist/ui.html
  • main:dist/code.js