#
서비스 기획
2022-12-21

[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를 확인해봐요~!

유익했다면! 이어서 읽어보기:)
알림 정의서 작성 팁

알림 정의서는 어떻게 작성해야 할까요?

피그마 그리드(grid)기능을 통해 깔끔한 디자인 하기

그리드를 통해 UI를 어떻게 깔끔하게 만들 수 있을까요?

인포메이션 아키텍처(IA)의 유형

인포메이션 아키텍처(IA)는 특정한 구조에 여러 정보를 입력하는 것입니다. 페이지를 가계도처럼 조직화하여 트리 형태로 구성하고 있습니다.

지금 바로 밸류랩스와
성공적인 협력을 시작해보세요.
Subscribe to our newsletter.
Thank you! Your submission has been received!
Oops!! Something went wrong while submitting the form.