We've added a few keyboard shortcuts to make navigating projects in the web-app easier.
These include:
For a full guide on keyboard shortcuts in Ditto, check out this help guide!
We recently made some changes to help improve navigation within a project, especially for large files!
Frames navigation: We'll now keep the Frames list open on the left hand side as a navigation panel for the project. We'll also default to showing a single page of frames at a time, rather than frames from all pages in a Figma file. You'll still be able to click-to-scroll to frames, pin frames, and toggle the page that you're viewing from the frames list!
Frames management: Instead of hiding/unhiding frames, you can click the "Manage" button in the Frames list to unselect or select additional frames from your project. (You can also add frames via our Figma plugin!) If your project previously had lots of hidden frames, resyncing should now be faster!
Import: Similar to the frames management modal, we've improved the user experience of selecting frames for import via the web-app. Searching and selecting frames to start a project should now be easier!
As always, please let us know if you have any questions or feedback about this.
We've added the ability to reorder blocks! To move a block up or down, click the up and down arrows when hovering over a block.
We've added the ability to swap components!
Just click the "Swap" arrow icon next to the component name of a selected instance in either the web-app or Figma plugin. This will change the component that a text item is attached to without having to detach and re-attach.
Today, we're excited to launch Variants in Ditto, which allow teams to write and preview text variations for frames in their projects.
We build Variants in Ditto to be flexible enough for all of the different ways we've heard teams want to write and maintain variant text, including translations/localization, user segment-based copy, and text explorations.
For a video of how Variants in Ditto work and more information, click here!
We're super excited about the roll-out of Variants and wanted to send a token of gratitude for the support for Ditto as it grows. 💘
If you mention how you or your team uses Ditto on Twitter (@dittowords) or LinkedIn, we'll send over a Ditto mug and some other fun things. 🤗
Over the last 10 months, we've seen teams use Ditto 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 surface components from your library most similar to text in a design file.
On our blog, we dive into how you can use component suggestions to integrate your team's content system with designs.
When selecting text in Figma, you can hide them all at once in Ditto with on our "Selected" tab. This will hide the text in the project view in our web-app and allow teams to more easily organize their text in Ditto!
Since launching our plugin last January, we've been so excited to see it grow and be used by thousands of people to manage text in their mockups. On our blog, we take a deep dive into how we built a few of our core features under-the-hood. Read more
When multi-selecting in the web-app, you can now create a block with multi-selected text items.
You can now draft Ditto Components in your Component Library, without having to create Components from existing text in Figma files! This means being able to create a content component library directly in Ditto that anyone from your team can bring into their projects.
To draft a component, just click the "+ New Component" button in the top right of your Component Library. Drafted components not yet attached in projects will appear as yellow.
Just like projects, you can now export your team's Component Library!
The export is currently available as both a structured JSON and as a CSV (spreadsheet).
Want to set up a web-app to sync text from Figma? ⚡️
We've just published all the pieces you need to build the same web-app we show in our demo video!
This includes:
If you need any help with this or just want to learn more, feel free to schedule some time with our team!
After months in beta, we're so excited to launch Ditto's API and developer integrations! 🤩
Our API/CLI allows you to keep copy in sync from design all the way to production. Forward this to your favorite engineer and say goodbye to the copy and paste. 👋
We dive into how it works, how to get set up, and what's next in our latest blog post.
You can get started by following the instructions in our developer documentation. Getting a project set up to sync text end-to-end shouldn't take more than 10 minutes!
To get a demo of our developer integrations, click here. We hope you're as excited as we are. Happy editing! 😊
Say goodbye to triple-clicking into nested layers to edit a specific text box! When you select a layer in your Figma file, we’ll now show a list of all the text items in that selection. You’ll also be able to bulk edit all of that text or click into a specific item to view and edit its details.
