Ditto’s web app is your team’s home for projects, reusable component library, and workspace settings. Use the web app to collaborate and iterate on text, configure developer integrations, and manage your team and workspace all in one place.
This guide will get help you get started with Ditto and walkthrough the different areas of the web app.
Log into the web app
If it’s your first time using Ditto, head to the web app and sign up to a free account and complete the onboarding tasks.
Log into Ditto:
Go to Ditto's web app: https://app.dittowords.com/
Sign into Ditto with Google, Azure AD, or SSO (Enterprise only).
Web app tour
The following will introduce the key features in Ditto’s web app.
Home
Home: Brings you to the web app home page
Developers: Manage your developer integrations
Search: Perform a global search of everything in your workspace
Library: Go to your component library
Projects: Go to your projects
Variants: Go to your variant library
Variables: Go to your variable library
Invite a teammate: Invite a new user to your workspace
Integrations: Manage any integrations with third party software
Help: Access Ditto’s help guides and chat with our support team
Notification center: See all your notifications from your teammates
Settings: Access your personal and workspace settings
Recents: A list of your recent projects and components
Assigned to you: See all text items assigned to you
Discussion: Any active comment threads you are part of
Project
Left side bar: A hierarchical list of the project text items
Design preview mode: Switch between Text view and Frame view in Design Preview mode
Hide fields: Hide specific text item fields in your project
Filter: Filter for specific text items in your project
Context panel: An organized list of all the text items in your project
Details panel: UI to edit and collaborate on the selected text item
Manual sync: Trigger a manual sync between Ditto and the connected Figma file
Share: Share the project with your teammates
Search: Perform a search of everything in your project
Design preview: Toggle on the design preview mode
Workspace settings
Team members: Manage your workspace users
Resources: Summary of your workspace’s components, projects, variants, and variables
Tags: Manage your workspace tags
AI functionalities: Manage Ditto’s AI functions
Log out: Log out of your Ditto account
User settings
User: Your Ditto user information
Figma connection: Connect your Figma account to Ditto
Permission groups settings
Permission groups: Dashboard of your workspace’s permission groups
Create: Create new permission groups
Billing settings
Payment: Your Ditto payment information
Update billing information: Update your billing and payment information
Invoicing: List of all previous and upcoming invoices
Seats: Overview of your workspace’s seats
Update subscription: Manage your workspace’s subscription
