Figma 모달 팝업, 탭 메뉴, 인디케이터와 좌우 슬라이딩 배너 구현하기

1. 부모프레임과 자식프레임간 버튼 클릭하면 모달 팝업 띄우기 구현하기

1) 모달열기 버튼을 선택하고 ‘prototype’ 패널에서 ‘부모 프레임'과 연결한다.

출처: Figma

연결하면 애니메이션 설정 옵션이 뜨는데, 여기서 Open overlay를 활용한다. 모달 팝업의 노출 유형에 대한 상세 설정을 하고, 부모 프레임을 선택하여 Preview 해보면 모달 팝업이 뜨는 것을 볼 수 있다.

 

※ 닫기 버튼 클릭 시에도, 닫기버튼을 선택해 두고 '부모프레임'과 연결하면 애니메이션 설정 옵션이 뜨는데,

출처: Figma

여기서 Close overlay를 설정해 주면 팝업 창 닫기 애니메이션이 자동으로 구현된다.

 

2) 프로토타입의 이벤트 설정은 ‘on Click’ 또는 ‘on Tap’, 화면전환은 ‘open Overlay’, 프레임 이름은 ‘모달윈도’, 효과는 ‘dissolve’, 속도는 ‘ease in and out back’, 300

 

3) 옵션 체크는 close when clicking outside, add background 모두 체크하고, 배경 색상은 투명도 50~70%로 설정한다.

 

2. 탭 메뉴 구현하기

각 탭 메뉴를 클릭하면 해당 배너로 화면이 전환되는 것을 구현해 보자.

출처: Figma

1) 각 메뉴 그룹과 해당 사진이 포함된 디자인을 한다.

2) 첫 번째 메뉴 그룹과 사진을 모두 선택하여 컴포넌트로 등록한다.
3) 2, 3, 4번도 등록한다.
4) 컴포넌트 4개를 모두 선택하여 결합한다.(Combine as Variants) - 그럼 모든 개체들이 한데 묶여서 점선으로 나오게 된다.
5) 프로토타입 탭에서 메뉴 간 연결하여 각 메뉴 간의 인터랙션을 설정해 준다.(On click, change to 컴포넌트 1, 2, 3, 4 화면, instant)

6) Assets에서 인터랙션 설정한 전체 그룹 컴포넌트를 꺼내와서 활용한다.

 

3. 좌우 슬라이딩 배너 구현하기(인디케이터 인터랙션)

출처: Figma

1) 하나의 프레임 안에(중요!) 좌우 슬라이딩할 배너 이미지 4개를 모두 넣어놓는다.(프레임 밖으로 초과되는 이미지는 clip content 체크박스를 해제하여 가시화한다.)

2) 배너 셋을 그룹 지정하여 각각의 프레임 4벌을 만들고, 각 인디케이터 터치 시 나타날 이미지가 위치하도록, 각 그룹의 위치를 조정한다.

3) 4개의 프레임마다 각각 컨트롤 버튼을 선택하여 해당 프레임으로 프로토타입 탭에서 인터랙션을 준다. On click 이벤트를 연결한다.

 

출처: Figma

4) 프로토타입 설정은 이벤트 'move in'으로 설정(화살표 방향 ←이면 오른쪽에서 왼쪽으로 간다.) - 효과와 방향을 설정한다.

5) 시간은 'ease out', 300ms으로 설정한다.

6) 옵션 animate matching layers를 체크하여 컨트롤 버튼은 움직이지 않게 한다.

 

※ 컨트롤 버튼 서식 변경 시에는 copy하여 색상을 변경하지 말고, 색상을 직접 변경하여 설정한다.
(왜냐하면 피그마가 컨트롤 버튼에 대한 서식(위치)을 기억하고 있어서 최종 결과물이 꼬일 수 있다.)

 

※ 배너를 자동 롤링시키고 싶다면 프레임과 프레임 사이에 인터랙션을 after delay 이벤트를 주어서 자동으로 이동시키면 된다.(1번 슬라이드 → 2번 슬라이드 → 3번 슬라이드...)