[Overflow] #2 - Overflow 사용하기!

 

https://motion-jb.tistory.com/3

[Overflow] #1 - Overflow 알아보기!

1편에 이은 2편 사용하기입니다.

 

 

Overflow 홈페이지에서 프로그램을 다운로드하고 Design Tool에 연동을 하면 아래와 같은 화면이 노출된다.

첫화면에서는 튜토리얼 / 샘플페이지 / Help페이지로 접근이 가능하다.

샘플페이지에서는 overflow측에서 작성해놓은 화면으로 예시를 확인 할수있다.

클라우드로 업로드하여, Web으로도 확인 가능하다.

전체적인 Flow확인 및 Design에서 Low타입의 프로토타입으로도 확인 가능하다.

 

작업 시작

SIde에 Board를 보여주고 상단에는 기본 Tool이 배치되어있다.

왼쪽 상단 버튼을 누를 경우 Sketch와 동일하게 메뉴가 구성되어있다.

 

 

Sketch에서 ovreflow로 작업할 Artboard를 선택합니다

(이 작업 이전에 Sketch에서 overflow가 활성화되어있는지 확인 부탁드립니다.)

 

ArtBoard선택 후 Sync버튼 Click

보내기 전 Background color을 체크해주어야 BackGround가 적용됩니다.

Sketch에서 ovreflow로 작업할 Artboard를 선택합니다. (다중 선택 가능)

 

 

Sketch에서 ovreflow로 작업할 Artboard를 선택합니다.

새로운 Board생성은 New Board를 선택하세요. (기존 작업하고 있던 파일이 있을 경우 선택하면 추가페이지가 늘어납니다.)

 

업로드 과정을 거치면 Sketch에서 확인한 파일이 overfolw로 업로드되었습니다.

 

 

Upload된 Sketch File은 Flow연결이 편리하다.

이미지를 선택할 경우 위의 이미지처럼 객체별로 선택이 됩니다.

좀 더 편리한 overflow를 사용하기 위해서는 Design Tool에서 레이어 정리를 한번 진행해 주세요.

(원하는 영역만큼 Layer을 미리 설정 / Sketch의 경우 symbol의 크기 확장)

 

Sketch에서 업로드 시 ArtBoard Name이 같은 경우는 "덮어쓰기"가 가능하지만, 이름이 기존 업로드된 AreBoard 명과 다를 경우

같은 디자인의 page가 추가됩니다.

(업로드 전 ArtBoard 이름 확인은 필수!)

 

Design이 업로드되었다면 본격적으로 화살표를 연결해주시면 되겠습니다.

Mouse Over를 할 경우 상, 하, 좌, 우 4곳에 화살표가 생기게 되며, Click → Drag & Drop을 하면 손쉽게 연결이 가능합니다.

 

 

간략하게 만들어본 예시로 Flow를 그릴 수 있었습니다.

 

화살표의 경우 상황에 따라서 종류를 다양하게 쓸 수 있으며, 수정 & 추가가 가능합니다.

 

우측 상단 화살표 아이콘을 누를 경우 클라우드에 업로드가 가능합니다.

업로드가 완료될 경우 미리보기와 링크가 뜨게 됩니다. 바로 복사도 가능하며, 링크 선택 시

overflow에서 작업한 화면이 Web으로 올라간 것을 확인할 수 있습니다.

 

하단의 icon 버튼을 선택하면, 전체 flow / low타입의 프로토타입으로 확인이 가능합니다.

모바일 작업을 했을 경우, 프로토타입으로 Design 된 화면을 확인하기 편리합니다.

 

 

필자의 경우는 업무에 강제(?)로 활용을 하고 있습니다.

신규 카테고리 디자인 작업할 경우 Design으로 빠르게 overFlow로 올려서 개발자에게 Zeplin과 함께 공유하고 있습니다.

Flow를 확인하려는 개발자의 시간 단축은 물론, 기획자 간의 원활한 소통 또한 가능하기에 만족하며 사용 중입니다.