도움말 - 글감 수집하기 (인용)

도움말 - 부분 리뷰 작성하기

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



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

Part 5 (이 시리즈를 끝내는 것)는 꽤 짧을 겁니다. 이유는, Zeplin은 사용하기가 매우 쉽기 때문입니다.

우리는 3 가지 디자인 (아트 보드)을 모두 완벽한 픽셀로 보았습니다. 이제 우리는 그것을 개발자에게 전달할 예정입니다.

거기에 당신을 위해 스타일 가이드를 만들 수있는 몇 가지 스케치 플러그인이 있습니다. 우리는 과거에 몇 가지를 사용했고, 그들은 충분한 일을합니다.

저는 멋진 Zeplin 앱에 빠져 들었습니다. Zeplin 앱은 디자인을 전달하고 스타일 가이드와 assets을 완성하는 과정을 훨씬 더 간단하게 자동화합니다.

이제 https://zeplin.io/ 방문하여 새 계정에 가입하십시오 (무료 계정으로 시작할 수 있습니다)


무료 새 계정에 가입하십시오

디자이너라면 Mac용 앱을 다운로드 할 수 있습니다.

(우리가 곧 다운로드하여 설치할 것 입니다.)

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

저는 'Sketch를 사용하고 있습니다.하지만 개발자는 Windows 컴퓨터를 사용하고 있습니다.'

라는 질문을받습니다.


맥앱 또는 웹앱을 선택하세요



앱을 설치하고 실행하십시오.

그리고 첫 번째 프로젝트를 만듭니다.


새로운 프로젝트를 생성하세요

웹 옵션을 선택하십시오.

이것은 (우리의 경우) 단지 웹 사용과 관련된 세부 사항을 유지합니다.
예) px로 측정, CSS 등에서 색상 내보내기 ...


연관된 프로그램을 선택하세요


다음 화면에서 새 프로젝트를 만든 후 프로젝트 제목을 입력하고 오른쪽에있는 inspector panel 을 클릭하여pixel density를 요구 사항에 맞게 변경하십시오.


new project 이름을 입력하세요 


여기에는 Zeplin 프로젝트를 공유 할 수있는 여러 가지 방법과 회원을 프로젝트에 참여하도록 초대하는 옵션도 있습니다.


여러분의 Zeppelin 프로젝트에 초대를 할수있습니다.


이제는 Sketch에서 artboards을 Zeplin으로 내보내는 아주 간단한 부분으로 넘어갑니다.

참고 사항 : Zeplin 앱을 설치하면 Sketch에 플러그인이 설치됩니다 (잘하면ㅋ).

Sketch로 돌아가서 이전에 만든 3 개의 artboards (데스크톱, 태블릿, 모바일)를 선택합니다.

그런 다음 Cmd + E를 선택하거나 Plugins > Zeplin > Export Selected Artboards를 선택하십시오.

방금 생성 한 Zeplin 프로젝트를 선택하고 Import를 클릭하십시오.

마술처럼 실행되지요!?


프로젝트에 가져올 Artboards를 선택하십시오.


우리의artboards를 Zeplin으로 가져 왔습니다.



제플린으로 들어오는 artboards

더블 클릭하면 각각의 아트 보드 / 디자인으로 이동하여 해당 아트 보드에 대한 자세한 정보를 볼 수 있습니다.

여기에서 가이드 라인 / 스타일 가이드로 가져갈 색상을 (색상 오른쪽의 작은 물방울 아이콘을 클릭하여) 선택할 수 있습니다.

스타일 가이드에 표시할 색상을 선택하세요

Sketch에서 내보낼 수있는 assets (이미지 등 ...)을 확인하십시오.

assets 언급에 대해 신속하게 백업하겠습니다.

예를 들어 우리가 만든 디자인을 사용하면 다른 assets 사이에서 메가폰 아이콘을 내보낼 수 있습니다.이 아이콘은 artboard에서 간단히 선택하고 Make Exportable를 클릭하면됩니다.


이미지 애셋을 Zeplin으로 쉽고 빠르게 내보낼 수 있습니다

Zeplin이 프로젝트 유형, 프로젝트 밀도 등에 따라 자동으로 파악할 수 있으므로 Sketch에 표시되는 옵션을 터치 할 필요가 없습니다.

꽤 멋지죠?


모든 종류의 이미지가 사이즈별로 이동할겁니다


디자인에서 Cmd + Click 클릭하여 개발자가 의견을 남길 수도 있습니다.


프로젝트의 다른 회원들에게 의견 남기기

그리고 Sketch와 마찬가지로 artboard에서 오브젝트 간 거리 측정 값을 쉽게 볼 수 있습니다.

이렇게하면 개발자가 손쉽게 스케치 설계에 설정 한 측정 값을 픽셀까지 볼 수 있습니다 (특히 스케치 사본이없는 경우 매우 유용함).


영광의 모든 측정 가이드


그리고 Zeplin에서 레이어를 선택하면 인스펙터 패널에서 해당 레이어의 자세한 개요를 볼 수 있습니다.

당신의 개발자는 행복한 개발자 일 것입니다.


각 요소에 대한 자세한 개요를 볼 수 있습니다.

Guideline 탭에서 프로젝트에 사용 된 글꼴의 개요와 이전 화면에서 선택한 색상 (색상 이름을 쉽게 클릭하여보다 적합한 이름으로 바꿀 수 있음)을 얻을 수 있습니다.

Font Book aspect의 경우는 약간의 작업이 필요합니다.

Zeplin 팀이 이부분을 향후 업데이트시 개선하려고 하고있답니다.

Sketch와 함께 Zeplin은 진정으로 시간을 절약 해 주며, 당신과 개발자를 동일한 페이지에

두고 완벽한 조화를 이루도록 도와 줍니다..


Sketch에 대한이 5 부 튜토리얼 시리즈를 끝까지 읽어 주셔서 감사합니다.

Sketch가 디자인 프로세스를 실제로 향상시킬 수있는 방법에 대한 더 나은 환경을 제공하고, Zeplin과 같은 앱과 함께 사용하면 디자인과 코드 간의 관계를 더 편리하게 할 수 있기를 바랍니다.

이 튜토리얼을 끝까지 읽어 주셔서 감사합니다.

번영글 원본 링크입니다.


리뷰