Show HN: Ditto – Sync copy from Figma to production

Jess and Jo here, and we're excited to share Ditto with you all (https://dittowords.com). Ditto is a way to manage and componentize product text from design to development. Think of a headless CMS but with the text from your design files.

We think product copy, or the text found on user interfaces, is the most under-leveraged part of product development today. Even more so than the visuals, the text users read is critical to shaping their understanding of how things work. Copy often gets coupled as a part of design, but it's worked on so cross-functionally — from design to legal to marketing to engineering.

Jo and I have been on teams at both small startups and tech giants, and at every place we've seen product copy being written ad-hoc and scattered across mockups, docs, sheets, and tickets. The back and forth required just to fix a simple typo in production often included a backlogged ticket, several Slack conversations, and a ton of wasted engineering time better spent on building.

At its core, we wanted to build a way to treat product text as a system, with the ability to componentize text for reuse (just as we do for development or design!). We spent the last year building out and iterating on Ditto, deciding first to tackle how copy was managed between design files and content writers with our web-app and Figma integration. However, our intent from day one has been to build a single source of truth from end to end.

Initially, we took a stab at integrating into development by building a Github app that created pull requests for copy edits made in Ditto. This somewhat did the job (democratizing access to making text edits in development), but we saw users struggle with the maintenance it required and realized it was a piece-meal solution to a system-level problem.

Over the last few months, we built out an API (with a companion CLI and React SDK) so that Ditto could function similarly to a headless CMS and sync text from design all the way to production. The API/CLI fetches up-to-date product copy from Ditto into local directories as structured JSONs with unique IDs. As a locally hosted and updated JSON, you always own your copy, can see copy diffs on commits, and won't have to worry about latency (we're not a CDN).

Building tools for copy inherently means building tools to improve existing design and development workflows — and we'd love to hear what you think and how it can be improved. Jo and I are roommates (and have been since college!), and we'll be sitting next to each other answering comments.

To check it out (with a quick 3 min video of me talking through the features): https://www.dittowords.com/developers.

We also have instructions for setting up / playing around with a sandbox Figma file and React app here: https://developer.dittowords.com/getting-started/use-our-cli....