스케치 앱 튜토리얼 5편 마무리 - (총 5편)

presentation

우리의 디자인을 전달할 준비하기!

Part 5 (이 시리즈를 끝내는 것)는 꽤 짧을 겁니다. 이유는, Zeplin은 사용하기가 매우 쉽기 때문입니다.
우리는 3 가지 디자인 (아트 보드)을 모두 완벽한 픽셀로 보았습니다. 이제 우리는 그것을 개발자에게 전달할 예정입니다.
거기에 당신을 위해 스타일 가이드를 만들 수있는 몇 가지 스케치 플러그인이 있습니다. 우리는 과거에 몇 가지를 사용했고, 그들은 충분한 일을합니다.
저는 멋진 Zeplin 앱에 빠져 들었습니다. Zeplin 앱은 디자인을 전달하고 스타일 가이드와 assets을 완성하는 과정을 훨씬 더 간단하게 자동화합니다.
이제 https://zeplin.io/ 방문하여 새 계정에 가입하십시오 (무료 계정으로 시작할 수 있습니다)

presentation



디자이너라면 Mac용 앱을 다운로드 할 수 있습니다.
(우리가 곧 다운로드하여 설치할 것 입니다.)

개발자가 Windows 또는 Linux를 사용하는 경우에도 웹 응용 프로그램에 액세스 할 수 있으므로 프로젝트에서 공동 작업 할 수 있습니다. 가금 받는 질문이
저는 'Sketch를 사용하고 있습니다.하지만 개발자는 Windows 컴퓨터를 사용하고 있습니다.'

라는 질문을받습니다.
presentation
앱을 설치하고 실행하십시오.
그리고 첫 번째 프로젝트를 만듭니다.

presentation


웹 옵션을 선택하십시오.
이것은 (우리의 경우) 단지 웹 사용과 관련된 세부 사항을 유지합니다. 예) px로 측정, CSS 등에서 색상 내보내기 ...
presentation
다음 화면에서 새 프로젝트를 만든 후 프로젝트 제목을 입력하고 오른쪽에있는 inspector panel 을 클릭하여pixel density를 요구 사항에 맞게 변경하십시오.
presentation
여기에는 Zeplin 프로젝트를 공유 할 수있는 여러 가지 방법과 회원을 프로젝트에 참여하도록 초대하는 옵션도 있습니다.
presentation
이제는 Sketch에서 artboards을 Zeplin으로 내보내는 아주 간단한 부분으로 넘어갑니다.
참고 사항 : Zeplin 앱을 설치하면 Sketch에 플러그인이 설치됩니다 (잘하면ㅋ).
Sketch로 돌아가서 이전에 만든 3 개의 artboards (데스크톱, 태블릿, 모바일)를 선택합니다.
그런 다음 Cmd + E를 선택하거나 Plugins > Zeplin > Export Selected Artboards를 선택하십시오.
방금 생성 한 Zeplin 프로젝트를 선택하고 Import를 클릭하십시오.
마술처럼 실행되지요!?
presentation
우리의artboards를 Zeplin으로 가져 왔습니다.




presentation


더블 클릭하면 각각의 아트 보드 / 디자인으로 이동하여 해당 아트 보드에 대한 자세한 정보를 볼 수 있습니다.
여기에서 가이드 라인 / 스타일 가이드로 가져갈 색상을 (색상 오른쪽의 작은 물방울 아이콘을 클릭하여) 선택할 수 있습니다.

presentation
Sketch에서 내보낼 수있는 assets (이미지 등 ...)을 확인하십시오.
assets 언급에 대해 신속하게 백업하겠습니다.
예를 들어 우리가 만든 디자인을 사용하면 다른 assets 사이에서 메가폰 아이콘을 내보낼 수 있습니다.이 아이콘은 artboard에서 간단히 선택하고 Make Exportable를 클릭하면됩니다.

presentation


Zeplin이 프로젝트 유형, 프로젝트 밀도 등에 따라 자동으로 파악할 수 있으므로 Sketch에 표시되는 옵션을 터치 할 필요가 없습니다.
꽤 멋지죠?
presentation
디자인에서 Cmd + Click 클릭하여 개발자가 의견을 남길 수도 있습니다.

presentation


그리고 Sketch와 마찬가지로 artboard에서 오브젝트 간 거리 측정 값을 쉽게 볼 수 있습니다.
이렇게하면 개발자가 손쉽게 스케치 설계에 설정 한 측정 값을 픽셀까지 볼 수 있습니다 (특히 스케치 사본이없는 경우 매우 유용함).
presentation
그리고 Zeplin에서 레이어를 선택하면 인스펙터 패널에서 해당 레이어의 자세한 개요를 볼 수 있습니다.
당신의 개발자는 행복한 개발자 일 것입니다.

presentation


Guideline 탭에서 프로젝트에 사용 된 글꼴의 개요와 이전 화면에서 선택한 색상 (색상 이름을 쉽게 클릭하여보다 적합한 이름으로 바꿀 수 있음)을 얻을 수 있습니다.
Font Book aspect의 경우는 약간의 작업이 필요합니다.
Zeplin 팀이 이부분을 향후 업데이트시 개선하려고 하고있답니다.
Sketch와 함께 Zeplin은 진정으로 시간을 절약 해 주며, 당신과 개발자를 동일한 페이지에
두고 완벽한 조화를 이루도록 도와 줍니다..


Sketch에 대한이 5 부 튜토리얼 시리즈를 끝까지 읽어 주셔서 감사합니다.
Sketch가 디자인 프로세스를 실제로 향상시킬 수있는 방법에 대한 더 나은 환경을 제공하고, Zeplin과 같은 앱과 함께 사용하면 디자인과 코드 간의 관계를 더 편리하게 할 수 있기를 바랍니다.
이 튜토리얼을 끝까지 읽어 주셔서 감사합니다.
번영글 원본 링크입니다.