Placeholders

When agents use a template, they want it to automatically populate their personal and listing data. This is where placeholders come in.

We are going to pull up a designed Listing template in Figma:

There are information on this template that need to be connected to user's account:

  • The listing Photo

  • The website on left

  • The phone number

  • Number of beds, baths and square footage

Image Placeholders

Let's start by connecting the listing image.

  1. Open up the Rechat plugin

  2. Select your photo by double-clicking on it

  3. Navigate to the placeholders tab where you'll see this:

  4. Click on Listing Placeholders

  5. Click on Listing Photo

This tells Rechat that this picture should be replace with listing's picture when opened up by agents.

Note that shapes or svg's cannot be placeholderized.

Note that you can use the similar method to input Brokerage Logo, Team Logo or Agent Placeholders.

Text Placeholders

Next is placeholderizing texts.

  1. Select a piece of text in Figma by double clicking on it.

  2. Open up the Rechat plugin

  3. Go to Placeholders tab

  4. Select the appropriate placeholder

Partial Texts

Look at the design below:

In a case like this what we need is to make only parts of the text as placeholders.

  • 4 in 4 Beds

  • 3 in 3 Baths

  • 2,300 in 2,300 SQFT

The plugin allows you to placeholderize partial pieces of a text.

  1. Open up Rechat plugin

  2. Double click your text to select it

  3. Using your mouse cursor, highlight the piece of text you want to placeholderize

  4. In Rechat plugin, select the placeholder

You can select different pieces of your text and connect them to different placeholders.

Manipulating existing placeholders

On top of the Placeholders tab, you can click on the Highlight Placeholders button. This will draw a purple line under all placeholders you have already defined.

If you select your main frame, you will be ableto see thelist of all placeholders you've currently selected on your template.

When you placeholderize texts, Rechat has to store information within them on a link. This makes editing them in Figma a little annoying, as every time you click on a placeholder, a new tab will open.

In order to prevent that behavior, you can use ⌘+Click to select the text.

PreviousExporting your first designNextLocks

Last updated

Was this helpful?