Welcome to this tutorial! We're going to build a prototype for a podcast app. In the onboarding flow, users select one or

more topics of interest. The app then offers a collection of recommended podcasts that align with the user-selected

preferences. Our podcast app is a high-fidelity design and it's ready for user testing. We want our users to be able to

interact with our prototype just like they'd be able to use the real app, so we need to plan for each path and decision

in our prototype. In this tutorial, we'll use features such as variables, interactive components, and conditional logic. But why are we using advanced

features for this design? After all, couldn't we just design a frame for each possible iteration of user selections?

Of course, we could. However, we're choosing to use variables and conditional logic in this case because it saves us

valuable time. Instead of creating countless frames and prototype connections, we only need a few key frames. This helps us keep our canvas

clean and requires less memory usage, too. It also makes maintenance easier. Let's get started! To follow along with this

tutorial, grab a copy of the playground file linked in the video description. We've already created a few of the key elements we'll need for our

app, including a 'Get Started' page where users can select one or more topics that interest them, and a homepage which

displays related podcast cards based on their selections. We also have a loading page and some initial prototyping

connections set up. We have an interactive component set to represent our topic buttons. It has a 'false' variant representing the

unselected state and a 'true' variant representing the selected state. There are four instances of the 'false' variant

on our 'Get Started' page; each instance represents one of our available topics: music, food and drinks, product design, and

Now, how can we store information about the selected state of each of these topics so that we can display that

information on our next frame? This is where Boolean variables come in. Boolean variables are variables that have a true or false value. Because our variants also

have true and false values, we can assign a Boolean variable to each instance. Let's create Boolean variables for each of the topics you select.

Select everything from the canvas and click on 'Local Variables' from the right-side panel. We'll create a Boolean variable

called 'hasMusic' and set its default value to false. Let's create three more Boolean variables. We can do that by

clicking on the 'Create Variable' button, or we can simply use the shortcut to duplicate the variable. We'll name the

variables 'hasFood', 'hasDesign', and 'hasNews', all with false values. Let's close the modal and assign the variables to

our topic button instances. From the right-side panel, click on the 'Assign Variable' icon to assign the 'hasMusic' variable. Now the variant value is

associated with the value of the Boolean variable. Let's apply the remaining variables to the rest of the topics. Nice! If we look at our component

set for our topic button, we already have some interactions set up. Every time you click the 'false' variant of the button, it

changes to the 'true' variant. Since we have assigned the Boolean variable to the topic instance, it will change its associated Boolean

variable from false to true as well. Think of it like a chain: the instance is linked to the Boolean variable; we can

then link the Boolean variable to other elements in our design. This is a crucial step to help us change the properties of

other objects in our design. Now we can control the visibility of podcast topic cards on the home screen based on user

selections. Let's stay on the 'Get Started' screen to do a quick test to see how Boolean variables work with layer

For visibility, we'll create four squares with different colors and assign our Boolean variables to their visibility by right-clicking on

the 'i' icon in the layer section of the right-side panel. Now let's test out the prototype with inline preview. We'll open inline

preview using the shortcut Shift + Space. When we select the music topic, the square with the `hasMusic` variable

assigned appears on the frame. If we unselect it, the square disappears. Clicking on other topics will do the

same. This is because when the attached Boolean variable is true, the layer is visible, and when it's false, the layer

disappears. Now that we know the interaction works, let's go to the home screen design and apply the Boolean

variables to the podcast cards. We'll select all the music-related cards by holding the Shift key and right-

clicking on the 'i' icon to assign the `hasMusic` variable to them. Let's do the same for the other

cards. Open the inline preview again and test it out. Let's select the music and product design topics and click "Continue".

As we can see, only music and product design related cards are populated on the home screen. Let's restart our

prototype, and this time we can select another topic. Looks like it works! Now, how are users going to get from the "Get Started"

page to the homepage? After they select one or more topics, they'll click the "Continue" button. The "Continue" button

should only be enabled when we have one or more topics selected. This means we'll need some conditional logic and simple

math. Let's break it down: every time we click a topic, the number of selected topics will increase by

one. If the number of selected topics is greater than zero, we will set the button from disabled to enabled.

To achieve this, we will need two variables: a number variable to represent the number of selected topics and a string variable to represent the disabled or enabled state of the continue button. We can open our local variables model from the side panel to create the

new variables, or we can directly create them from the Prototype interactions panel. To do that, let's switch to

Prototype view. We'll add a new action on the "false" button variant and set it to "Set Variable." Then, click on the plus icon

next to the local variables to create a new number variable. In the same variable collection, we'll name it "topicSelected"

and set its default value to zero. When the button is selected, we want to increase the topicSelected value by

one. So our prototype action will set the value of topicSelected to topicSelected + 1. Now we need to think about our

conditional: if the selected topic amount is greater than zero, we want to change our continue button from its disabled to

enabled state. Let's take a quick look at how our continue button component is set up. It has a variant property called "state" with

values for an enabled and disabled state. We can use a string variable in our conditional statement with the same

values. Let's open up our variables modal again. This time, we'll create a new string variable called "buttonState" and

give it a default value of "disabled," since this matches the value of the continue button variant property. Now we

can attach the string variable to the continue button instance on our "Get Started" frame. Select the button instance and click on the "Assign Variable" icon to

assign the buttonState variable to it. Notice that the button has updated to its disabled state after we assigned the

variable, since the default value of our variable is "disabled." Now that we have the variable set up, let's add it as a

Conditional statement on our topic button interaction. Click the connection and add another action and set it to conditional. The conditional is: if topic selected is

greater than zero, then we want to set the button State variable to enabled. Let's test it out in inline

preview. By default, the continue button is disabled, and clicking on it will not navigate to the next frame when we

select a topic, the button changes to its enabled state, and we're able to navigate to the next frame. Great, but we want to

make sure that the button will revert back to its disabled state when we unselect the topics. How can we do that?

Just like before, we can do that by adding actions to the topic button component set, but this time we'll add

the actions in the reverse direction. Let's break down the interactions we need to add. Every time we unselect a

topic, the number of selected topics will decrease by one. If the number of selected topics is less than one, we will

set the button back to disabled. Let's add the actions to our interaction on the true variant of the

topic button component. We'll add a new set variable action and decrease 'topic selected' by one. Then we'll add a conditional action

and set it to: if 'topic selected' is less than one, set button state to disabled. Let's test it out again. When we

select a topic, the button changes from disabled to enabled, and when we unselect a topic, the button reverts to the

disabled state. Now, what if a user wants to skip this onboarding process? We want to add a skip option in the 'Get Started' frame so

that all cards will populate on the screen. We already created a skip button in the button component set here. Let's

add the enabled variant to our design. We can add an interaction on the skip button component so that when a

If a user clicks it, they will navigate to the loading frame. The loading frame has its own interaction to automatically navigate to the homepage after a

delay. Then we'll add more actions to the skip button component to set the `hasMusic`, `hasFood`, `hasDesign`, and `hasNews`

variables to `true`. Let's check out the prototype again. When we click on the skip button, all of the cards show up on the home

screen frame. We're all set! Our podcast app prototype is complete and it's ready for user testing. Leave us a comment to

let us know how you're using variables and conditionals in your prototypes, and don't forget to subscribe to our YouTube

channel to see more Figma tutorials. [Music]

Prototype with variables: Create an onboarding flow

Figma

팟캐스트 앱 온보딩 흐름 프로토타입 제작 소개 및 목표

팟캐스트 앱 온보딩 흐름 프로토타입 제작을 위한 튜토리얼 시작.

사용자는 관심 주제를 선택하고, 앱은 관련 팟캐스트를 추천한다.

고충실도 디자인으로 사용자 테스트 준비 완료.

실제 앱처럼 작동하는 프로토타입을 위해 각 경로와 결정을 계획해야 함.

변수, 인터랙티브 컴포넌트, 조건부 로직 등 고급 기능 사용 이유 설명.

Boolean 변수를 활용한 주제 선택 상태 저장 및 관리

선택된 주제 상태 정보를 다음 프레임에 표시하기 위한 Boolean 변수 사용.

Boolean 변수는 true 또는 false 값을 가지는 변수이며, true/false 값을 가지는 변형과 연동 가능.

각 주제에 대한 Boolean 변수('hasMusic', 'hasFood', 'hasDesign', 'hasNews') 생성 및 기본값 false 설정.

Boolean 변수를 토픽 버튼 인스턴스에 할당하여 변수 값과 변형 값을 연동.

버튼 클릭 시 Boolean 변수 값이 false에서 true로 변경되는 연동 과정 설명.

조건부 로직을 이용한 '계속' 버튼 활성화/비활성화 제어

'계속' 버튼은 하나 이상의 주제 선택 시에만 활성화되어야 함.

선택된 주제 수를 나타내는 숫자 변수와 버튼 상태를 나타내는 문자열 변수 사용.

프로토타입 상호작용 패널에서 새로운 숫자 변수('topicSelected')와 문자열 변수('buttonState') 생성.

조건문 추가: 'topicSelected'가 0보다 크면 'buttonState'를 'enabled'로 설정.

주제 선택 해제 시 'topicSelected' 감소 및 'buttonState'를 'disabled'로 설정하는 상호작용 추가.

'Get Started' 프레임에 온보딩 건너뛰기 옵션 추가.

건너뛰기 버튼 클릭 시 모든 카드가 표시되도록 상호작용 설정.

로딩 프레임에서 홈페이지로 자동 이동하는 상호작용 설정.

건너뛰기 버튼 클릭 시 Boolean 변수들을 모두 true로 설정.