UI 프로토타이핑 툴 피그마(Figma) - 2. 프로토타이핑 및 개발 도구

안녕하세요. 당근입니다. 오늘은 지난 포스팅에 이어서 UI 디자인 프로토타이핑 툴 피그마(Figma)에 관한 포스팅을 계속해보겠습니다. 지난번에 아래처럼 간단한 오브제들을 만들고 배치해봤는데요. 오늘은 프로토타이핑까지 연결해서 동작시켜보겠습니다.

지난 포스팅 설치 및 간단한 화면구성에 대한 포스팅은 아래 링크를 클릭해주세요.

UI 프로토타이핑 툴 피그마(Figma) - 1. 설치 및 버튼 만들기

UI 프로토타이핑 툴 피그마(Figma) - 1. 설치 안녕하세요. 당근입니다. 오늘은 UI 프로토타이핑 툴 피그마(Figma)를 설치하고 사용해보려고해요. UI 프로토타이핑 툴은 Adobe XD와 스케치(+제플린)이 또 유명한데..

nicecarrot2.tistory.com

Figma 유튜브 튜토리얼에 따르면 Getting Started 목록에서 7번째 영상이 되겠습니다. 지난 튜토리얼은 1~4까지의 영상이고 5~6번째 영상은 팀워크에 관해 협업하는 내용이므로 관련된 내용을 보시려면 5,6번째 영상을 보세요.

저는 실습은 하지않고 이런 기능이 있구나 하면서 보고 건너뛰었습니다.

1. 프로토타이핑

자 그럼 프로토타이핑을 실행해볼까요?

오른쪽 상단에 재생버튼을 누르면 프로토타입의 view 화면으로 넘어갑니다.

별다른 애니메이션이 없을 때에는 아래 화살표를 눌러가면서 페이지를 넘겨보실 수 있습니다.

프로토타이핑은 사실 다른 UI 디자인 프로토타이핑 툴이 대부분 그렇듯이 간단합니다.

해당 오브젝트를 클릭하면 오른쪽에 파란색 단추가 생겨요. 그걸 연결하고 싶은 페이지에 끌어다 놓으면 화살표가 생깁니다. 그럼 연결이 끝난거예요.

아까처럼 상단에 재생 버튼을 눌러 보시면 시작하기 버튼을 누르면 다음 페이지로 넘어가는 걸 보실 수 있어요.

간단한 애니메이션 등을 만질 수도 있고 내비게이션과 같은 메뉴를 상단에 고정시키는 등 여러 옵션을 설정할 수 있습니다.

2. 개발 도구

개발 도구 역시 간단합니다.

역시 오른쪽 탭에 프로토타입 대신 Code를 선택해보시면 선택한 오브젝트에 대한 코드들이 나와요.

CSS라고 적힌 부분의 리스트를 누르시면 css형태 뿐 아니라 ios, 안드로이드까지 편리하게 보실 수 있습니다.

3. 이미지 출력

그 다음은 Export 부분인데요. 해상도에 따라 대응하기 위해서 이미지를 배수로 출력하는 UI가 튜토리얼 상에서는 개발 도구인 Code 탭에 있지만 제가 사용해보니 Design 탭에 제일 하단에 있습니다.

+버튼을 누를 때 마다 배수가 올라가면서 항목이 자동으로 추가돼요. Export master를 누르면!

압축 파일이 다운받아지면서 배수별로 출력됩니다. 짝짝.

이렇게 간단히 피그마 유튜브 튜토리얼의 도움을 받아 페이지를 구성해보고 프로토타이핑을 연결해봤습니다. 이 정도만 보셔도 대충 피그마의 UI가 얼마나 쉽고 간단한 지, 또 협업툴로 얼마나 가능성이 있는 지는 눈치를 채셨을 거예요.

스케치와 제플린 조합이 비교적 많이 쓰이지만 피그마에서 스케치로 작업한 파일들이 호환이 되고, 브라우저 기반이라 운영체제에 제한이 없으니 좋은 툴이네요!

앞으로 틈날 때 마다 플러그인과 활용 팁들을 찬찬히 둘러봐야겠어요.

그럼 UI/UX 디자인 툴 피그마! 간단한 리뷰를 마치겠습니다.

당근이었습니다.

[피그마] 테두리 한쪽 면만 할 수 있는 피그마 플러그인 : Border (1)	2020.04.21
[figma] 피그마 미러mirror 앱으로 디자인 모바일 환경에서 보기 (2)	2020.04.13
피그마figma 데스크탑 앱으로 설치하기 및 작업파일(*.fig)로 공유하기 (0)	2020.03.18
[피그마figma] 텍스트 길이에 따라 변하는 플렉서블flexible 버튼 만들기 (8)	2020.03.03
UI 프로토타이핑 툴 피그마(Figma) - 1. 설치 및 버튼 만들기 (0)	2020.02.25

친절한 당근 블로그