[Figma] 화면의 flow를 직관적으로 확인 가능한 Prototype

Figma의 최대 장점은 직관적으로 화면 설계한 것들을 볼 수 있다는 것인데요.

Flow를 잘 나타내면 개발자와의 제작 과정에서 불필요한 소통을 줄 일 수 있다는 장점이 있어서 피그마의 해당 기능을 많이 사용합니다.​

바로 Autoflow와 Prototype라는 두 가지 방식으로 flow를 나타낼 수 있습니다.

‍

1. Autoflow : Plugins 설치 기능

Plugin에서 기능을 다운 받아서 사용 하면 Shift 키를 누르고 두 object를 연결하면 됩니다.

해당 flow는 가시적으로 flow를 나타낼 수 있습니다.Autoflow는 가시적으로 나타내기 위해서 자주 사용합니다.

‍

2. Prototype 을 이용한 flow 나타내기

해당 flow는 실제로 동작하는 것 처럼 나타낼 수 있다는 것이 피그마의 수많은 장점 중 하나입니다.

이 플로우를 설정할 경우 재생했을 경우 실제 프로토타입 처럼 구동합니다.

이전, 다음 등 다양한 function 또한 제공합니다.

우측 상단의 재생 키를 누르면 해당 프로토타입이 실제 어플 처럼 구동가능합니다.

로그인 클릭시 01_로그인 페이지로 넘어가게됩니다. 또한 <- 뒤로 가기 button을 누를 경우 이전 페이지로 이동합니다.

Navigate to, Back, Scroll 과 같은 기능들로 prototype을 재생시 실제 어플 작동과 같은 느낌을 줍니다.

위의 두가지의 방법으로 화면의 flow를 확인해봐요~!

‍