화면 전이도 툴 2018년 결정판 Overflow를 아십니까?

유명 앱의 화면 사양을 조사하기 위해 화면 천이도를 만들고 있습니다만, 조금 전까지는 Sketch 플러그인의 User Flows 를 사용하고 있었습니다.
그로부터 조금 틈이 비어서, 현재는 Overflow라는 툴이 인기가 되고 있었기 때문에, 사용해 보았더니 굉장히 쓰기가 좋았으므로, 이번 그것을 소개하고 싶습니다.
　

전제

Overflow는 독립적인 툴입니다만, 다른 디자인 앱과 제휴해 사용할 수 있어 그것이 메리트의 하나이기도 합니다.
2018년 7월 현재 베타판이 되고 있습니다만 이용할 수 있는 것은 macOS만으로, 제휴 어플리케이션은 Figma, Sketch만입니다만, 장래적으로 windows나 Adobe XD, Photoshop도 대응 예정입니다.
이번 기사에서는, Sketch와의 제휴를 주로 소개해 갑니다.
　

설치

Overflow
이 공식 페이지에서 설치하십시오.
설치가 끝나면 Sketch 화면의 오른쪽 상단에 플러그인 업데이트 아이콘이 표시되므로 클릭하여 업데이트하십시오.
그러면 Sketch 메뉴에 Plugins에 Overflow sketch panel이 표시됩니다.

Sketch => Overflow

Sketch의 Artboard에서 Overflow로 화면을 동기화합니다.
설치에서 설명한 Plugins에서 동기화하는 방법과 Sketch 화면의 오른쪽 하단에있는 Overflow를 클릭하여 동기화 할 수 있습니다.



동기화하면 아래와 같이 Sketch의 각 Artboard가 나란히 표시됩니다.

Overflow 작업

여기에서 실제 화면 천이도의 작성입니다만, 기본적으로 화살표를 연결하는 것만으로 직관적인 조작으로 완료합니다.
천이원의 아이템을 호버했을 때에 나오는 4 방향의 화살표의 어떤 것인가로부터 천이처의 아이템에 드래그＆드롭의 요령으로 연결할 뿐입니다.



화살표를 두 번 클릭하면 해당 선에 주석을 달 수 있습니다.



또, 선의 종류도 여러가지 준비되어 있어, 커스터마이즈 해 자작의 선종을 만들 수도 있습니다.





이 외에도 프레젠테이션 모드에서 화면 전환을 쉽게 확인할 수 있습니다!

바삭바삭하고 싶은 분에게도 추천입니다! !