피그마로 프레젠테이션 만들기 for 개발자
안녕하세요 지니입니다.
저는 사내에서 발표할 때 피그마로 프레젠테이션을 만드는데요,
피그마로 프레젠테이션을 만들면 유용한 점을 공유해볼게요!
(좋은 건 다같이) (개발자 위주임)
# 유용한 점
1. 슬라이드 배치 자유자재
피그마는 PPT 처럼 이전 슬라이드/다음 슬라이드를 추가하는 형식이 아닙니다.
내맘대로 슬라이드 순서나 위치를 구성할 수 있어요.
그래서 구조화하면서 프레젠테이션을 만들기 좋습니다.
예를들어 저는 주제별로 한줄로 배치하고 생각날때 마다 각 주제의 줄에 가서 슬라이드를 추가하는 식으로 만듭니다.
2. DesignKit ! 재사용 !
폰트, 컬러, 뷰, 슬라이드 등을 컴포넌트화 해서 재사용할 수 있어요!
Create Component Button (주황 네모) 를 누르면 컴포넌트 등록 완료!
이제 Assets 에 컴포넌트가 뜨고 이걸 클릭하면 insert instance 가 나옴!
아주 간단하고 편하게 재사용할 수 있습니다.
더 심화과정으로 Presentation Design Kit 이라는 피그마 파일을 별도로 만들어서
모든 파일에 공통으로 import 해서 쓰는 방법도 있음! (방법은 생략)
3. 슬라이드 내에서 스크롤 가능
세로로 긴 무언가를 보여줘야한다! 할때 스크롤을 시킬 수 있습니다.
예를들어 이렇게 긴 사진을 스크롤하면서 한 슬라이드에서 보여주고 싶다고 해볼게요~
frame 을 하나 추가하고 scrollable frame 이라고 네이밍 해줍니다.
prototype > overflow 에 가서 vertical 을 선택해줍니다. (overflow 되는 콘텐츠가 있으면 verticl scroll을 하겠다~)
지금은 overflow 되는게 없으니 느낌표가 뜹니다.
그리고 긴 이미지를 scrollabe frame 안으로 넣어주면 됩니다.
프레젠테이션 모드로 PLAY 해보면 스크롤이 잘되는 것을 보실 수 있어요.
4. 코드블럭 플러그인
피그마 커뮤니티에서 여러개의 code highlighter 플러그인을 다운받을 수 있어요~
저는 Code Syntax Highlighter 를 쓰고 있는데
우클릭 > Plugins > Code Syntax Highlighter 를 선택한 후,
코드를 복붙합니다. theme / font / language 를 선택한 후, Run Plugin 을 눌러줍니다.
그럼 코드블럭이 슬라이드에 추가됩니다.
프레임으로 래핑되어서 추가되기때문에 프레임에 scroll 까지 적용해주면 (위에서 배움)
코드를 스크롤하면서 설명할 수도 있겠죠? (이거 너무 좋음 눙물..)
5. 각종 플러그인
위에서 본 코드하이라이팅 뿐만 아니라 유용한 플러그인이 많아요!
예를들어 아이콘 추가 플러그인 (구글링 안해도 됨), 더미 이미지/텍스트 플러그인 ..
https://www.figma.com/community/plugins
6. 파일이 아니라 링크로 공유
피그마 만의 장점은 아니긴 하지만,
파일이 아니라 링크로 공유가능함 (최최종.keynote 이런 거 불필요)
같이 프레젠테이션 편집할 사람을 초대할 수도 있음.
# 아쉬운 점
물론 아쉬운 점도 있습니다..
1) 발표자용 script 를 별도로 볼 수 있는 기능이 없다.
https://forum.figma.com/t/presenter-note-functionality-in-prototypes/8524
2) 슬라이드에 동영상 첨부를 못한다.
그래서 저는 gif 로 변환해서 넣었던 기억이..
==> 그래도 저의 경험 상, 개발자용 프레젠테이션으로 피그마는 충분하다고 느껴집니다 (하트)
또한 위의 두 아쉬운 점을 보완해주는 Pitchdeck Presentation Studio 도 있으니 참고해주세요
