Handling Plurals

If you have copy that changes based on the count of items it's referring to, you can define those different versions using Ditto's pluralization feature. For example:

  • "1 result found" vs. "No results found"
  • "1 second left" vs. "30 seconds left"

With Ditto's pluralization feature, you can ensure plural versions of text are always written and get displayed in production.

Pluralization basics

You can define plurals for any text in Ditto, whether it's a workspace component or a regular text item. You can also create, edit, and view plurals anywhere you can edit text in Ditto — in projects, in the Figma plugin, and in the your team's component library.

Plural Forms

In English, you usually only need two plural forms: singular and plural. You use one form if there's one of something ("1 page") and another form if there's more than one ("2 pages").

Other languages, however, have different rules and can require anywhere from 1 to 6 plural forms. As an example, Arabic has 6 plural forms — there's one form for describing 1 of something, another for 2, another for 3-10, another for 11-99, and so on. Russian uses one form when referring to 1-21 of something, but a different form when there's 11.

The plural forms and rules for each language have been standardized by something called the  Unicode CLDR project. They've named the 6 possible plural forms as follows: Zero, One, Two, Few, Many, or Other. In Ditto, we follow these conventions and allow you to add any subset of these 6 plural forms to your text.

Turning on pluralization

By default, text in Ditto will not have pluralization enabled. You'll have to explicitly turn on pluralization for text you want to define additional plural forms for.

To turn on pluralization for text, hover your mouse next to the "Text" label in the edit panel and click the "+ Plurals" button. By default, this will assign the current text to the Other plural form (Other is the most common plural form for English). You can update this to any of the 5 other forms by choosing from the dropdown. Make sure to click "Save edits"  for the entire Edit panel to save the pluralization you added.

Adding/removing plural forms

Once you enable plurals for a piece of text, you can add additional plural forms by clicking "Add plural." The input for the newly-added form will come pre-populated with the value of the default text, including any variables. You can edit that text to whatever you want, and change the plural form using the dropdown. Again, make sure you click "Save edits" to save your changes!

As described earlier in this guide, you can add any subset of the 6 standard plural forms to your text: Zero, One, Two, Few, Many, or Other. English usually only requires 2 forms: singular (One) and plural (Other). All languages use the Other form as the default, so it's a safe bet to assign that one if you're not sure which form to use.

For example, if you have text that is currently "2 projects deleted" and you want to define a version of copy for when no projects are deleted, you could do the following:

  1. Hover next to the "Text" label and click the "+ Plural" button.
  2. "2 projects deleted" would correspond to the Other plural form, so that default setting can remain the same.
  3. Click "+ Add Plural" and fill in the new indented text box with "No projects deleted."
  4. Since this text is shown when "zero" of something is deleted, click the plural form dropdown and switch it to Zero.

Note: you can also do all of the above directly in our plugin!

Like other types of edits, updates to plural forms can also be synced to duplicates in your project when you check the "Sync edits to duplicates in project" checkbox.

To remove a plural form, hover above the plural form you want to delete and click the X that shows up. If you only have one plural form, you'll be able to turn off pluralization for the text as a whole by clicking "Remove pluralization" in the dropdown.

Plural forms added after turning on pluralization will get added underneath the first "default" text. This default text is what gets displayed on frames in the project and in the component library, and is also what gets synced back to Figma. Text with plurals will display a badge indicating the number of plurals it has:

Using plurals in development

Because every language has different rules and forms required for pluralization, managing plurals in code can get complicated quickly. With Ditto, you can streamline this process using our developer integrations.

When fetching copy via our developer integrations (API, CLI, and JSON export), any plural forms that are defined for a piece of text will show up in a plurals field for that text object. Each plural form will be its own entry with the plural form name as the key, so developers can easily fetch the correct form.

For example, this text item that has 2 plurals in Ditto:

will show up like this in the full and structured JSON formats:


{
	"text": "{{numDeletedProjects}} projects deleted.",
	"variables": {
		"numDeletedProjects": {
			"example": "2",
		},
	"plurals": {
		"other": "{{numDeletedProjects}} projects deleted.",
		"zero": "No projects deleted."
	}
	... //additional fields like notes, status, and tags will still get included as usual
}

Variables used in any of the plural forms will all show up in the variables field.

Note: we don't currently support plurals in variant text, but we hope to follow up with this soon. Feel free to reach out if you would like to get notified, or if you have any other suggestions!

Didn't find what you were looking for?
Contact Support