Bano

About this plugin

[ BETA ]

Bano is an combo-abbreviation of the words 'Batch' + 'Annotation'.

Transform your design handoff workflow with powerful batch annotation capabilities!

What is Bano?

Bano is a Figma plugin that supercharges your DevMode workflow by allowing you to batch create native annotations across multiple selected elements. No more tedious one-by-one annotation creation – select artboards, components, and shapes, then add comprehensive annotations to all of them at once!

🎯 Key Features

⚡ Lightning-Fast Batch Processing

1. Select multiple nodes and add annotations to all of them simultaneously
2. Works with artboards, components, shapes, text, and more
3. Real-time selection updates as you change your selection in Figma

📝 Rich Annotation Content

1. Plain text or Markdown support for rich formatting
2. Smart pattern insertion with dynamic content:
3. `$&` - Insert current element name
4. `$nn` - Auto-incrementing numbers (01, 02, 03...)
5. `$nn↓` - Auto-decrementing numbers (03, 02, 01...)

⚛️ Comprehensive Property Pinning

Pin any of these properties directly in your annotations:

1. Dimensions: Width, Height, Min/Max constraints
2. Visual: Fills, Strokes, Effects, Corner Radius, Opacity
3. Typography: Font Family, Size, Weight, Line Height, Letter Spacing
4. Layout: Padding, Item Spacing, Layout Mode, Alignment
5. Grid: Row/Column gaps, spans, and anchor points
6. Components: Main component references

🏷️ Smart Category Management

1. Auto-detect existing categories from your Figma file
2. Create new categories with custom colors
3. Organize annotations by project, feature, or team
4. Refresh categories on-demand to stay in sync

🎨 Native Figma Experience

1. Pixel-perfect UI that matches Figma's native interface
2. Dark theme optimized for DevMode
3. Intuitive controls with visual icons and clear labeling
4. Responsive design that works in any panel size

💡 Perfect For

1. Design Systems: Annotate component libraries with consistent property documentation
2. Handoff Workflows: Speed up developer handoffs with comprehensive annotations
3. Design Reviews: Add context and specifications to design iterations
4. Documentation: Create living documentation within your Figma files
5. Team Collaboration: Standardize annotation practices across your team

🚀 How It Works

1. Select multiple elements in your Figma file
2. Configure your annotation content and properties
3. Choose or create a category for organization
4. Apply annotations to all selected elements instantly
5. Clear annotations when needed with one click