프로토타이핑

피그마 프로토타입 동영상 재생 구현

피그마 오픈카톡방2026. 3. 7.

질문사항

피그마로 웹사이트 프로토타입에 동영상을 넣고, 썸네일과 재생 버튼을 눌러 동영상이 재생되도록 구현할 수 있나요?

피그마에서 동영상 재생 기능을 구현하는 방법은 다음과 같습니다.

썸네일 및 재생 버튼 프레임 준비: 동영상 썸네일 이미지와 재생 버튼을 포함하는 프레임을 만듭니다.

동영상 프레임 준비: 실제 동영상이 재생될 프레임을 만듭니다. 이 프레임에는 Figma의 `Video` 레이어를 사용합니다. `Video` 레이어는 유료 플랜(Professional, Organization, Enterprise)에서만 사용할 수 있습니다.

프로토타입 연결: 썸네일 프레임의 재생 버튼에서 동영상 프레임으로 프로토타입 연결을 만듭니다. `Interaction`은 `On click`으로 설정하고, `Animation`은 `Dissolve` 또는 `Instant` 등으로 설정할 수 있습니다.

동영상 설정: 동영상 프레임에 삽입된 `Video` 레이어의 속성에서 `Autoplay`, `Loop`, `Mute` 등을 설정할 수 있습니다.

이 방법을 통해 썸네일을 클릭하면 동영상이 재생되는 프로토타입을 구현할 수 있습니다.