피그마 실력 업그레이드/피그마 기능

피그마 프로토타이핑 - 모달창

HOYO_호요 2026. 1. 20. 14:14

1. 스크롤 옵션

1)고정과 스크롤

구현 : 네비게이션을 고정하고 컨텐츠 드래그시 스크롤하기

왼쪽: 위에 스테이션바 및 움직이면 안 될것 고정/ 오른쪽 : 부모 컨포넌트와 함께로 드래그시 움직이게 설정

설정 후 프레임을 눌러 흐름을 지정하여 영상으로 확인하기

 

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

 

 

1)모달을 띄어보자

구현: 피드백보기 버튼을 누를시 잘했다는 모달이 뜨고 확인 버튼 클릭시 원래 화면으로

모달 연결 상호작용 설정값

모달을 사용할때는 밑에 오픈 오버레이, 스와이프 오버레이, 클로즈 오버레이가 사용된다. 

모달 확인 버튼으로 끝는 상호작용 속성 값

위와 값이 적용하고 프로토타이핑 흐름의 처음 시작하는 프레임을 지정해야 값이 적용된다.

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

영상을 새로 보려면 R을 눌러 다시 재생시킨다.


새로알게된 피그마 단축키

1.피그마 컴퍼넌트 세트의 컴퍼넌트의 단축키Q 선택시 같은 이름의 컴퍼넌트가 선택된다.

2.프로토타입 영상을 새로 보려면 R

 


자세한 내용은 피튜브님 영상으로

https://www.youtube.com/watch?v=06kSIt8-w9s