Copy components

💡 Heads up! Copy Components replace Linked Instances. Learn more about this change in the section below. Read the Copy Components official announcement.


Just like UX designers use Components in Figma or Symbols in Sketch, or developers use React or Angular components, content designers can use Frontitude’s Copy Components feature to create a library of approved copy and easily reuse it across their product.

Create or attach to a component

A Copy Component can be created out of any text that is uploaded to Frontitude. Here’s how you can do this:


In Figma

  1. Select a text element in Figma. If the text is not uploaded, read first on how to Upload content to Frontitude.
  2. Open the Edit tab in the plugin.

Creating a Copy Component using Frontitude's Figma plugin
Creating a Copy Component using Frontitude's Figma plugin


In web app

  1. Open a project in Frontitude.
  2. Select a text to open the editing panel.

Create a component from similar texts (suggestions)

In Figma

  1. Select a text element in Figma. If the text is not uploaded, read first on how to Upload content to Frontitude.
  2. Open the Edit tab in the plugin.

In web app

  1. Open a project in Frontitude.
  2. Select a text to open the editing panel.

Create a component that has no reference in the design

It is possible to create a component directly from the Copy Library for components that have no reference in the design, such as error messages, empty states, alt text, etc.

Create a new component that has no reference in the design
Creating a new component that has no reference in the design

In web app

  1. Open your Copy Library.
  2. Click on New Component
  3. Fill in the following fields:
    Text value
    - This one is the actual copy text.
    Name
    (recommended) - The name of the newly created component. Although it is optional, we highly recommend giving the component a meaningful name, following our supported naming conventions. Properly naming your copy will help you organize it and make it easier to reuse in the design.
  4. Click Create
  5. This component can now be reused in the design.


Detach text from a component

In case you want to detach a text from a component to stop sharing updates and other metadata with the rest of the instances, do the following:

In Figma

  1. Open the Edit tab in the plugin.
  2. Select a text element in Figma which is a copy component instance. You can identify connected instances by the purple background and the connected component displayed under the Copy component section.
  3. Under the Copy component section, click Detach.
  4. In the dialogue box, click Detach.
  5. Now on, this text will not get updates from the copy component, whether it’s value or metadata changes.

In web app

  1. Open a project in Frontitude.
  2. Select a text element in Figma which is a copy component instance. You can identify connected instances by the purple background and the connected component displayed under the Copy component section.
  3. Under the Copy component section, click Detach.
  4. In the dialogue box, click Detach.
  5. Now on, this text will not get updates from the copy component, whether it’s value or metadata changes.

Organize components

Frontitude allows you to organize your copy components intro a library, so you can have a clear view of your product copy. We work on enhanced organization features, but if you find a feature missing, please don’t hesitate to contact us!

Edit a component

Copy components allow you to set guidelines tags and unique key and automatically share them with attached text instances.

  1. Open the Library page on Frontitude.
  2. Select a copy component to edit.
  3. On the editing panel you’ll be able to add/remove tags, assign a unique key, and edit component guidelines. All these properties will be updated and displayed on all attached instances.

Delete a component

  1. Open the Library page on Frontitude.
  2. Select a copy component to delete.
  3. Click on the 3-dot menu, then click Delete.

View all component instances

In Figma

  1. Open the Edit tab in the plugin.
  2. Select a text element in Figma which is a copy component instance. You can identify connected instances by the purple background and the connected component displayed under the Copy component section.
  3. Under the Copy component section, click on the copy component label.
  4. Your copy library will be opened in a new window, with the component displayed in the editing panel.
  5. Click on the instances count next to the component label, or expand the Instances section to view all attached instances.

In web app

  1. Open a project in Frontitude.
  2. Select a text element in Figma which is a copy component instance. You can identify connected instances by the purple background and the connected component displayed at the top of the panel.
  3. Click on the copy component label.
  4. Your copy library will be opened in a new window, with the component displayed in the editing panel.
  5. Click on the instances count next to the component label, or expand the Instances section to view all attached instances.

To learn how to build and maintain an organized Copy Library with all your copy components, read this guide.

Copied!