Figma Format
by Kazushi Kawamura
Figma Format let's you format your canvas by grouping them by the names. ■ How it works It will check the names of each layer and group them by the text before…
Installs
5,939
Likes
88
Users
5,825
Views
10,291
Preview
About this plugin
Figma Format let's you format your canvas by grouping them by the
names.
■ How it works
It will check the names of each layer and group them by the text before the separator (by default "/") and layout nicely by their groups.
■ Customization
You can customize how you want to format your cavas.
- Spacing for X and Y axis
- Grouping seprator (by default "/")
- Vertical or Horizontal Layout
■ Example
If we have 5 frames named the following
- "Article/List"
- "Article/List"
- "Account/My Page"
- "Account/Settings"
- "Account/Settings".
And formats using this plugin, it will be layouted like this:
| Account/My Page | Account/Settings | Account/SettingsB |
| Article/Detail | Article/List |
■ Feedback
If you have any feedback feel free to open an issue!
https://github.com/kawamurakazushi/figma-format/issues
■ Project Roadmap
[x] Sort the Layers
[ ] Customization Options
[x] Spacing for x-axis and y-axis
[x] Separator (default is"/")
[x] Number of element in a row / column.
[x] Horizontal / Vertical
[ ] Postion of the seprator, for grouping (default is 1)
■ Support
Like on Figma, or Star on Github is always a motivation :D
https://github.com/kawamurakazushi/figma-format
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.