Figma 에서 음성 첨부하는 방법

피그마에서 프로토타입을 만들다보면 음성이나 영상을 첨부해야하는 상황이 있을 수 있는데, 피그마의 기본 기능에서는 첨부가 불가능합니다. 이때 Figma의 플러그인을 사용하면 해결할 수 있습니다. 

 

먼지 모르는 메뉴 아이콘

 

피그마의 메뉴아이콘>plugins>Browse plugs in community에 들어가서 Anima를 검색해서 설치해줍니다.

 

 

이후에 음성 첨부가 필요한 프레임의 element를 오른쪽 마우스로 클릭해, 플러그인 중 애니마를 선택해주면 아래와 같은 화면이 나타나게 됩니다. 먼저 프로젝트 이름을 입력해서 새 프로젝트를 생성해 준 뒤, embededCode를 통해서 음성을 첨부합니다.

Anima

<audio id="myAudio">	
<source src="호스팅 된 음성파일의 url">
</audio>
<button style="height:100%; width:100%; left:0px; border:none;" onclick="playAudio() background-color:yellow;"  type="button"></button>
<script>
var x=document.getElementById("myAudio");
function playAudio(){
x.play();
}
</script>

 

Anima

 

아래는 첨부하는 코드입니다. 이렇게 코드를 써주고 save한 뒤에 브라우저로 미리보기 버튼을 눌러주면 제대로 결과가 적용됐는 지를 확인할 수 있습니다.

background를 yellow로 줘서 이렇게 되는데 별로 보기 예쁜 그림은 아닙니다.. 버튼이 안보였음 좋겠다 싶으면 opacity:0% 를 버튼 부분 코드에 추가해주면 됩니다. 근데 그러면 버튼이 어딨는 지를 알 수 없게 됩니다. z-index를 적용시켜봤는데 안먹히길래 포기했습니다. 저는 그럴 때는 그냥 클릭이 되는 부분을 아래에 만들고 투명도를 준 뒤에, 아무 기능없는 클릭이미지를 올려줬습니다.