This document aims to assist Korean users learning Framer who face difficulties due to a lack of Korean resources. By translating the content of the official blog into Korean and adding practical information, we hope to provide some help to those using Framer.

How to control visibility with "Is Set"

In Framer, the most basic method for condition control is the "Is Set" condition.
When you configure the "Is Set" condition, the image will be displayed if it's uploaded to the CMS, and automatically hidden if it isn't.
For instance, on a team introduction page, if some team members have profile pictures and some don't, you can automatically hide the elements for members without photos to prevent the layout from breaking.

When should you use it?

• Only display when an image is present, and automatically hide when there isn't one.

• Control display solely based on existence, without creating separate CMS fields.

How to set "Is Set"

1. Click the + button next to the Visible item.

2. Select the Set Variable menu > choose the "Is Set" condition.

What are text-based conditions?

Besides "Is Set", Framer offers text-based conditional display features.
For example, if you want to display a banner at the top only when the CMS has a category field value of "Announcement," you can use the Equals: Announcement condition.

• Equals / Doesn’t Equal

• Starts with / Doesn’t Start with

• Ends with / Doesn’t End with

• Contains / Doesn’t Contain

When should you use text-based conditions?

• To determine whether to display certain banners or elements based on CMS text values.

• To show specific sections only when the category is "Event."

Controlling visibility using option fields

In Framer, you can add and apply option fields in the design to show various layouts depending on content conditions.

Step 1: Add an Option Field

1. Go to CMS.

2. Click Edit Fields.

3. Click the + icon to add a new field.

4. Choose Option from the dropdown menu.

5. Enter your desired option list like "Display 1 Image", "Display 3 Images", etc.

These options help specify different layouts or element displays for each CMS item.

Step 2: Apply Option Field conditions in design

1. Select the element whose visibility you want to control.

2. Click the + icon next to Visible.

3. Select Set Variable, then configure the Option condition.

Main Options

Example

• Variant A: layout showing only 1 image

• Variant B: layout showing 3 images

Using the Convert option allows automatic selection of A or B based on CMS option field values. This method is especially useful for branching a single component across various conditions.

Using toggle fields for simple conditions

For handling simple conditions like Yes/No or On/Off, using Toggle fields in Framer is most effective.

• When you want to set the display of specific images or banners.

• To easily control the display of event banners from CMS.

Advanced control using conditions and variants

By utilizing Framer's condition statements alongside transformation features, you can precisely control CMS detail page components. The Transform feature allows automatic variant switching based on conditions, making it adaptable to complicated content structures.

• Conditions can be applied to almost every element with a + icon,

• creating dynamically changing layouts based on content.

This article is a translation and adaptation of Framer's official blog post 'How to create flexible CMS detail pages'.