Canvas & Wireframes

Canvas is a Figma-like design tool built into IndigiCoder. Create prototype screens, wireframes, and mockups — then collaborate with your team using comments and real-time editing.

What You Can Do

• Create prototype screens — Design mobile and web UI screens
• Use 100+ components — Buttons, forms, navigation, cards, and more
• Generate wireframes with AI — Describe what you want, AI builds it
• Leave comments — Give feedback at specific locations on the canvas
• Collaborate in real-time — See team members' cursors as they work

AI Wireframe Generator

Let AI create complete screen designs for you:

1. Click "Generate Wireframe" in the canvas toolbar
2. Describe what you want to build:
   Example: "Mobile login screen with email, password, and social login buttons"
3. AI generates a complete screen with 10-20 professional components
4. Edit and customize the generated design

Example prompts:

• "User profile with avatar, name, stats, and settings menu"
• "E-commerce product page with image, price, and size selector"
• "Dashboard with stats cards, charts, and recent activity"
• "Settings page with toggle switches and account options"

Components Library

Drag and drop from 100+ pre-built components:

• Basic: Rectangles, circles, lines, text
• Buttons: Primary, toggle, icon buttons, button groups
• Forms: Inputs, checkboxes, toggles, sliders, dropdowns
• Navigation: Navbars, tabs, breadcrumbs, menus, bottom tabs
• Data Display: Tables, lists, cards, charts, calendars
• Media: Images, videos, avatars, badges, icons
• Device Frames: iPhone, Android, iPad, browser windows

Template Library

Start faster with pre-built templates:

• Mobile login screens
• Bottom navigation bars
• Content cards (social media style)
• Website hero sections
• Navigation bars

Comments & Feedback

Leave feedback directly on the canvas:

• Position-aware comments — Click anywhere to leave a comment at that spot
• Threaded replies — Have conversations on specific design elements
• @Mentions — Tag team members to notify them
• Resolve comments — Mark feedback as addressed
• Like comments — Show agreement with feedback

Real-Time Collaboration

• Live cursors — See where teammates are working
• Instant sync — Changes appear immediately for everyone
• Presence indicators — Know who's currently on the canvas

Canvas Tools

• Drag and drop — Position elements with pixel-perfect control
• Resize — Adjust element sizes
• Multi-select — Select multiple elements at once
• Layers panel — Manage element order (bring to front/send back)
• Grid snapping — Align elements to a grid
• Undo/Redo — Reverse or restore changes
• Zoom & Pan — Navigate large canvases (0.1x to 5x zoom)

Styling Options

Customize any element:

• Colors (fill, border, text)
• Borders (width, style, radius)
• Shadows
• Text properties (font size, alignment)
• Rotation

Supported Screen Sizes