피그마에서 영상구현 방법

안녕하세요. Manjin님,

좋은 질문 감사드립니다.

저도 피그마로 프로토타이핑을 하면서 영상을 넣어본 적이 없어서 리서치를 해봤어요.

보니까 Anima라는 플러그인을 활용하면 프로토타입에 영상을 넣고 재생을 할 수는 있는 것 같습니다.

* 피그마에서 설치할 수 있는 Anima 플러그인 링크

테스트를 해보니, 모든 케이스에 대해서 잘 작동할지는 모르겠지만, 한 화면만을 디자인하는 등의 단순한 케이스에서 작동이 되네요. 그리고 프로토타입을 Preview하는 것은 피그마의 프로토타입 preview가 아닌 브라우저를 통한 Anima 웹사이트에서 재생하는 거라 몇가지 결함도 있는 것 같고 완벽하게 돌아가지는 않는 것 같아요. 혹시 지금 디자인하시는 케이스에 대해서 잘 돌아가는지 확인이 되시거나 더 좋은 방법을 찾게 되시면 말씀주세요~^^;;

.

제가 테스트해본 방법입니다. 

1. 해당 플러그인을 설치하시고, Anima 회원가입을 해야 합니다. 

2. Frame을 만든 후, 그 안에 동영상이 들어가게 될 영역을 지정해주기 위해 Rectangle을 만듭니다.

3. 해당 Rectangle을 선택한 후 Anima 플러그인을 통해 Video/Gif/Lottie 선택 -> 동영상 URL 복사 -> 저장

4. 해당 Rectangle이 들어가 있는 Frame 선택 후 Anima에서 "Preview in Browser"를 누릅니다.

5. Anima에서 제공하는 Preview 웹사이트가 뜨고 디자인한 화면에서 영상이 재생 됩니다.

테스트해본 과정 캡쳐해서 영상 첨부합니다. (애니마 회원가입 과정은 생략했습니다.)

아래는 하나의 화면만을 만들고 테스트해본거에요.

아래는 두개의 화면을 연결해놓고 테스트해봤습니다.

제가 생각할 때에 Anima 외에도 다른 좋은 툴이 있지 않을까 생각되지만, 일단 테스트해본 방법 공유드려요.

관련해서 참고하실만한 영상이 있어 첨부해요. 영문이지만, 직접 시범을 보여주는 영상이라 따라해보시는 건 가능할 것 같아요.

이건 GIF를 첨부하는 데모 영상입니다.

감사드리고, 추가적으로 질문이 있으시면 언제든지 말씀주세요.^^

자세하게 설명해주셔 정말 감사합니다!

영상까지 제작해주실줄은.. ㅠ

Figma페이지에서 anima 웹페이지로 넘어와서 작동을 하는건 좀 아쉽긴 하네요.

시연하거나 공유할때 Figma를 활용할수 없다는건데..

좀더 보완한 툴이 나오지 않을까 기대합니다. 

그래도 일단 시연이 가능한 방법이 있다는 걸 알았네요. 감사합니다~!

저도 혹시 더 좋은 방법이 찾아진다면 바로 공유드리겠습니다. 

귀한 시간 내서 설명해 주셔서 정말 감사드려요~^^

네, 말씀하신대로 피그마로 공유하는데 한계가 있을 것 같군요. Manjin님께서 처음 이 질문을 하셨을때 저도 궁금증이 생겼고 덕분에 리서치해보면서 새로운 정보를 얻었습니다^^ 좋은 질문 다시 한번 감사드려요~