This document aims to address the difficulties domestic users face due to the lack of Korean resources while learning Framer by translating the official blog content into Korean and adding useful practical information. We hope this is of some help to all of you using Framer.

How to Control Visibility with “Is Set”

The most basic method of condition control in Framer is the "Is Set" condition.
When you set the "Is Set" condition, the image will be displayed if it is uploaded to the CMS, and it will automatically be hidden if there is no image.
For example, on a team introduction page, if some team members have profile pictures and others do not, you can automatically hide the elements for those without pictures to prevent the layout from breaking.

When to Use It?

• Display only when there is an image, and automatically hide it when there isn’t one.

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

How to Set “Is Set”

1. Click the + button next to the Visible item

2. Select Set Variable menu > Choose "Is Set" condition

What is a Text-Based Condition?

Framer also offers conditional display features based on text values, beyond just the "Is Set" condition.
For example, if you want to display a banner at the top only when the category field in the CMS has the value “Notice,” you can use the Equals: Notice condition.

• Equals / Doesn’t Equal

• Starts with / Doesn’t Start with

• Ends with / Doesn’t End with

• Contains / Doesn’t Contain

When to Use It?

• When you want to determine whether to display a specific banner or element based on the text value in the CMS

• Display a specific section only when the category value is “Event.”

How to Control Visibility Using Option Fields

In Framer, you can add option fields and apply them to designs to show various layouts based on content conditions.

Step 1: Adding Option Fields

1. Go to the CMS.

2. Click Edit Fields.

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

4. Select Option from the dropdown menu.

5. Enter the desired option list, such as "Display 1 Image" or "Display 3 Images".

These options help specify different layouts or whether to display elements for each CMS item.

Step 2: Applying Option Field Conditions to Design

1. Select the element whose visibility you want to control

2. Click the + icon next to the Visible item

3. Select Set Variable, then set the Option condition

Key Options

Examples

• Variant A: A layout showing only 1 image

• Variant B: A layout showing 3 images

Using the Convert option, you can automatically display either A or B depending on the CMS’s option field values. This method is particularly useful when you need to process a single component’s branching for various conditions.

Using Toggle Fields for Simple Conditions

In Framer, it is most effective to use a Toggle Field for handling simple conditions such as Yes/No or On/Off.

• When you want to set whether to display certain images or banners

• To easily control event banner visibility from the CMS

Advanced Control Using Conditional Statements and Variants

By combining Framer’s conditional statements and conversion functions, you can more finely control the components of CMS detail pages. Particularly, the Transform function allows you to automatically switch a component’s variant based on conditions, making it adaptable to complex content structures.

• Almost all elements with the + icon can have conditions applied, and

• You can create dynamically changing layouts based on the content using these conditions.

This article is translated and adapted content based on Framer's official blog post, ‘How to create flexible CMS detail pages’.