Translations

Overview

When you publish a spec from Figma to Interplay you can

• inspect any code components that were used in Figma (via the Interplay plugin) to compose the screen, viewing exactly the same props as the designer used

• inspect any Figma design components as HTML markup with css styles, to help in implementation of new design components in code.

Translations go one step further, and allow you to configure translations of your design layers into your custom code components, based on rules.

Translations

In Interplay, a Translation is a mapping rule which states that when a certain configuration is found in your Figma design, then an equivalent code component configuration should be output in the code view of the spec.

The rules are created in a file stored in your code repo and imported into Interplay using the Interplay CLI, usually together with your code components.

A translation has 3 parts:

• name describing the translation

• rule that specifies what to match in Figma

• value that specifies what component to substitute and what props it should have

Here is an example translation that:

• has a rule which matches any component or frame in the Figma design with Autolayout mode set to horizontal or vertical

• tells Interplay to substitute in the Reactstrap Container component, with children and fluid props populated.

This translation converts a Figma frame or component to a code component. We could also translate Figma text to a Text component with particular props, and use design tokens to populate props on the components we output.

Matching

Your Translations configuration will usually be made up of multiple translations. These are applied to design layers as follows:

• Translations are applied to each design layer in the order you specify the translations in your config file.

• The first translation to match an item is applied and the remaining translations ignored for that layer.

This allows you to make specific substitutions first, then have more general translations to catch other cases.

For example, we might create specific translations mapping certain Figma text sizes/styles to different components such as Heading1, Heading2, CategoryHeading and CategorySubheading, then have a general translation to Body for any remaining text.

Configuring the CLI

To add translations to your design system:

1. Enable Translations for your Workspace under workspace settings in Interplay

2. Use the CLI to import your code components to Interplay. This makes your code components available in Interplay to translate to, and initialises the CLI config file .interplay/interplay.config.js in your repo

3. Create a file to contain your translations using the format below e.g. .interplay/translations.js .

4. Add the translationsPath setting to interplay.config.js specifying the location of your translations file

When you next run the CLI, it will parse your translations to create JSON configuration and then deploy this configuration to Interplay together with your code components.

This allows you to maintain your translations in your repo with your code, and deploy updates as part of your normal build process.

Translations reference

Here is an overview of the structure of translations Creating your translations file alongside your CLI settings allows you to be guided by imported typedefs in your code editor as in the example gif above.

// @ts-check
/** @typedef {import("./config").InterplayTranslations.Translation} InterplayTranslation*/
/**
 * @returns {InterplayTranslation[]}
 */
module.exports = () => [
    {
        name: "Autolayout to Reactstrap Container",

			// rule specifies the conditions for the translation to match
			// must pass all conditions for the translation to be applied
        rule: {
					
				// the Figma component to run the translation for
          component: {
            in: [
                "@figma/COMPONENT",
                "@figma/FRAME"
            ],
          },

					//props are like the 'where' clause to add conditions
          props: {

					// can match exactly e.g.
					"layoutMode": "HORIZONTAL",

					// match any
          layoutMode: {
             in: [
                "HORIZONTAL",
                "VERTICAL"
                ]
	           }

					// match where not a particular value
					"propB": { not: 'ABC' }

					// match where like a valie
					"propC": { like: 'ZZZ' }

          }
        },

				// the value is the result of the translation
        value: {

					// translates matched layer to this component (packagename/componentname)
          component: "reactstrap/Container",

					// props to output for the component
          props: {

						// output property called 'fixed', populated with 'testing'  
						"fixed": "testing",		
						
						//populate props using formula value e.g.
            children:  ({node}) => node.props.children,
            fluid: ({css}) => !!css.flexDirection,
				
						// the following variables are in scope for the functions and formulas
						// node === the interplay node
						// css === the styles object calculated from the design node
					  // tokens: {
				    //   findByValue: (value: any, path: string) => Token,
				    //   findByClosestValue: (value: any, path: string) => Token,
				    //   byPath: (path: string) => Token,
				    //   findAll: (path: string) => Token[],
					  // }
						
						// available utility functions
						// allSame  utility function to check values are the same
					  // omit === lodash/omit
					  // parseInt ===  Math.parseInt
					  // console.log
          }
        }
    },
]