Tally Guide for Designers

Welcome to the Tally Guide for Designers. This page gives you a clear path to master Tally, the low‑code UI tool that bridges design and code. Follow the sections below to learn concepts, set up your workspace, build core workflows, explore advanced patterns, and avoid common mistakes.

Table of Contents

1. Conceptual Overview
2. Setup and Installation
3. Core Workflows
4. Advanced Patterns
5. Common Mistakes
6. FAQ

Conceptual Overview

What Tally Is

Tally is a visual UI builder that outputs functional React components. It lets designers prototype, iterate, and hand off clean code without writing boilerplate. Think of it as a bridge between Figma and your codebase.

Core Principles

• Component‑First – Build reusable blocks.
• Zero Code – Drag, drop, and configure.
• Export‑Ready – Get React code instantly.

Typical Use Cases

• Rapid prototype for stakeholder demos.
• Design system documentation.
• Front‑end hand‑off to developers.

Setup and Installation

1. Sign Up

1. Visit tally.so.
2. Click Get Started and sign up with email.
3. Verify your email and log in.

2. Install the CLI (Optional)

The CLI lets you run Tally locally and export code.

npm install -g tally-cli
tally init my-design
cd my-design
tally start

3. Create a New Project

1. In the dashboard, click New Project.
2. Select a template: Blank, Login Flow, or E-commerce.
3. Name your project and hit Create.

4. Import Assets

• Drag images into the Assets panel.
• Use SVGs for icons; they export cleanly.

Core Workflows

1. Building a Form

1. Drag a Form component to the canvas.
2. Add Input fields: name, email, password.
3. Configure validation: required, regex.
4. Set submit button text.

2. Creating a Navigation Bar

1. Add a Flex container.
2. Insert Link components for each menu item.
3. Apply Hover and Active styles.
4. Use Responsive settings to collapse into a hamburger on mobile.

3. Exporting to React

1. Click Export in the top bar.
2. Select React as the target.
3. Download the ZIP file.
4. Unzip and import components into your project.

4. Collaboration Workflow

• Invite teammates via email.
• Use Comments to annotate design decisions.
• Track Version History and revert if needed.

Advanced Patterns

1. Responsive Grid

Tally’s grid uses flex-basis and media queries. Define columns=12 and assign span=4 to a card. The grid auto‑wraps at 600px.

2. Dark Mode Toggle

1. Add a Switch component.
2. Bind its state to a CSS variable --theme.
3. Define light and dark styles in the Theme panel.

3. Animation Library Integration

Use Framer Motion snippets. Drag the motion.div component and set whileHover={{ scale: 1.05 }} in the settings panel.

4. Accessibility (a11y)

• Ensure aria-labels on form fields.
• Use semantic HTML: nav, form, button.
• Check contrast ratios via the Contrast Checker tool.

5. Component Library Export

Create reusable components in a Library. Export once and import into multiple projects. Use export default to keep naming consistent.

Common Mistakes

1. Over‑Chunking Components

Too many tiny components increase maintenance overhead. Group related UI into a single component.

2. Ignoring Responsive Breakpoints

Design for desktop only. Then test on 375px and 768px to confirm layout breaks.

3. Exporting Without Clean Code

Make sure Auto‑format is on in the export settings to avoid messy JSX.

4. Skipping Accessibility

Missing alt text on images or lack of tabindex breaks user experience for screen readers.

5. Not Using Version Control

Export the generated code into a Git repo. Commit after every major change.

FAQ

What is Tally?

Tally is a low‑code UI library that lets designers build interactive prototypes without writing code.

Do I need coding experience to use Tally?

No. The visual editor allows you to drag, drop, and configure components.

Can I export Tally designs to React?

Yes. Tally exports clean React code that can be integrated into your project.

How does Tally handle responsive layouts?

Tally uses a flex‑based grid that automatically adapts across breakpoints.

What are the pricing plans for Tally?

Tally offers a free community plan with core features. Pro plans start at $29/month with advanced components and collaboration.

Thank you for reading the Tally Guide for Designers. Use this reference to transform your design workflow, hand off clean code, and collaborate seamlessly. Happy prototyping!