[피그마 공부] 메타코드 강의별 스터디 후기 (오른쪽 프로토타이핑 메뉴)

 

 

이번 피그마 강의에서는 화면을 이어서 애니메이션을 걸어주는 것을 배운다.

클릭하는 프레임에 연결될 것을 이어주면

화살표 아래 애니메이션 값을 상세하게 설정할 수 있는 박스가 나온다.

애니메이션 모양, 방향, 심지어 속도까지 디테일하다.

 

 

디테일하게 애니메이션을 설정하면

실행하기 전에 미리보기로 보여주기 때문에

부분적으로 여러가지를 보면서 고를 수 있다.

내가 설정한 값으로 바로바로 보여주기때문에 비교가 쉬울 것 같아서

유용한 것 같은 기능이다.

 

 

오른쪽 상단 플레이버튼을 누르면 새 창으로 이동하여

프로토타이핑 화면이 새로 생성된다고 한다.

클릭을 하면 걸어놓았던 애니메이션이 실행된다.

이를 Share 버튼을 통해 공유할 수도 있고 Options 버튼을 통해 다양한 크기로도 확인이 가능하다.

 

 

프로토타이핑 화면을 디바이스로 끼워보고자한다.

프로토타입의 Show prototype settings를 클릭해서

다양한 디바이스 중 보고싶은 것을 클릭해서 확인할 수 있다.

어느방향으로 볼지 가로세로 방향도 설정가능하고이를 설정하고 플레이버튼을 누르면 그에맞는 설정값에서 화면을 볼 수 있다.

 

 

피그마에서는 디바이스의 모델컬러와 그것이 놓여진 배경컬러도 설정이 가능해서

내 디자인을 더 잘 보여줄 수 있게 설정하면

시연해보거나 다른사람들에게 소개해 줄 때

굉장히 유용하게 쓰일 수 있겠다고 생각했다.

 

 

부분적인 UI에 대한 변화를 설정해놓아도

즉각적으로 프로토타이핑 화면에 반영된다는 점에서

즉시수정이 가능한 것도 보여주었다.

피그마는 빠름빠름을 좋아하는 한국인한테 정말 딱인 속도!

 

 

디자인을 하고 애니메이션까지 보여주는 프로토타이핑 화면은

메타코드에서 이번 강의를 통해 처음 접했다.

피그마에서는 디자인만 할 수 있는 줄 알았는데 애니메이션도 보여주고

게다가 코드로 전환까지 자동으로 해줄 수 있다니!

피그마를 전세계사람들이 많이 쓰는 데에는 이유가 다 있다.

 

: https://mcode.co.kr/

메타코드M

본 내용은 메타코드 Figma 서포터즈 강의 후원을 받아 작성되었습니다.