At Ditto, we talk a lot about product text being thought of and implemented as a system, the same way product teams currently think about design and development. When we first released components in Ditto last June —a way to reuse text and sync edits across projects— we took the first step towards this ideal of allowing teams to use Ditto to build living content systems that integrated directly with both design and production.
Since then, we've built out numerous features for components, allowing for a way to create a robust, reusable content system directly in Ditto. In the past 10 months, we've also seen teams' component libraries grow with our tool, using components to sync across over 10,400 instances of text.
Taking what we learned from teams using Ditto components in their workflows, we wanted to build a way to intelligently bring components and content systems to life in design files. Today, we're launching component suggestions, which automatically surfaces components from your library most similar to text in a design file.
Component suggestions surface the components in your library most similar to text in your Figma file.
You can view and use component suggestions for a project in the "Components" tab of our Figma plugin. There, you'll be able to see the component from your library that's suggested, the percent match it is to the text identified as similar in your project, and have the option to attach the component to the suggested instances.
For all identified text, you can also select it to view where it's located in the project.
We built component suggestions so that teams can seamlessly and continuously integrate text components with designs. This means teams can:
With component suggestions, designers and writers can work together seamlessly — and without the overhead of constantly communicating and re-implementing changes to the team's content system. Ditto automatically finds all text in a project that should be integrated with your component library. Anyone using our Figma plugin can browse the suggestions and choose which ones make sense to attach.
The suggestions get continually updated, even as new text and screens get added to your design file.
Edits to components get propagated to all of its instances — across Ditto projects and their corresponding Figma files. This means easily future-proofing your team's mockups, even as text changes.
For example, if you've attached CTAs in multiple Figma files to a Ditto component, and then edit that component, all the text in those files will get updated with those edits.
In addition to identifying project text that matches existing components, component suggestions also surface approximate matches. This means that text in designs that vary slightly with your team's text components (i.e. spelling, casing, or punctuation differences), can be compared and attached to components.
With a robust component system, your team can use component suggestions as a light-weight linter for product copy.
To try out component suggestions, just open our Figma plugin in any file you're currently working from. In the plugin, navigate to the "Components" tab.
You'll also need to have a few components in your component library in order for suggestions to be generated for the project! You can create components from existing text, or you can draft new ones directly in our web-app. For a quick overview on components, check out our Components Help Guide.
