레이어를 위해 CSS와 HTML을 생성하고 % 값으로 내보낼 수있는 옵션을 제공하는 스크립트를 발견하고 Photoshop의 웹 개발자 작업을 절반으로 줄입니다. 이제 누군가 플러그인을 사용하거나 스케치 앱과 같은 기본 기능을 가리킬 수 있는지 궁금합니다. 그러한 부재로 인해 스케치로 전환하는 것이 매우 고통 스럽습니다. 또는 Sketch를 처음 사용하는 경우 Sketch가 CSS 및 HTML에서 작동하는 방식에 대해 이념적으로 다른 점이 누락되었습니다.

이것은 당신이 찾고있는 대답이 아닐 수도 있지만, 평범하고 자동 생성 된 스타일을 엔지니어에게 전달하는 것보다 낫습니다.

선택적 마크 업

Sketch의 상황에 맞는 메뉴 CSS 그래버를 발견했습니다. 원하는만큼 개체를 선택할 수 있으며 클립 보드에 CSS를 붙여 넣을 수있는 것보다 빠르게 얻을 수 있습니다.

물론 선택기는 없으며 실제로 CSS 노트 일뿐입니다. 각 블록은 다음과 같이 레이어 이름을 사용하여 선행 주석에 의해 호출됩니다.

/* Rectangle 1: */
background: #C7C1B5;

/* Rectangle 1 Copy: */
background: #F5E618;

/* Rectangle 1 Copy 2: */
background: #FFFFFF;

파일 주석

스케치 측정 은 스펙에 따라 다양한 레벨의 주석을 생성하는 플러그인입니다. 있다 여기 데모 비디오 . 기본 아이디어는 중요한 숫자에 주석을 달고 개발자가 자신의 코드를 작성하도록하는 것입니다.

주석 너머

다음과 같은 도구를 단독으로 또는 조합하여 사용해 볼 수도 있습니다.

• Zeplin 은 개발자의 검사를 위해 공유 가능하고 공유 가능한 버전의 Sketch 디자인 버전을 만들어 주문형 사양을 가져옵니다.
• Marvel 은 Sketch 파일을 가져 오는 프로토 타이핑 도구입니다. 인터랙티브 한 프로토 타입처럼 통신하는 것은 없습니다!

실험용 HTML 생성기

나는 이것을 사용한 적이 없으며 개발 초기 단계에 있지만 블레이드 플러그인 은 유망합니다.

Blade는 자동 HTML 생성을위한 Sketch 3 플러그인입니다. 그룹의 경우 <div> 태그, 텍스트의 경우 <p> 태그를 생성합니다.

다음 링크를 참조하십시오 http://blog.mengto.com/the-best-hidden-features-in-sketch/

Meng To의 블로그를 따라 흥미로운 Sketch 튜토리얼, 팁 및 유용한 정보를 확인하십시오. http://blog.mengto.com/ https://designcode.io/