웹 개발자를위한 10 개의 무료 스케치 플러그인

스케치는 웹 디자이너와 개발자들 사이에서 큰 호응을 얻고 있습니다. 이것은 아마도 직관적이고 배우기 쉬운 웹 사이트 프로토 타입을 쉽게 만들 수있는 많은 기능이 제공됩니다. 이 응용 프로그램은 확장 성이 뛰어납니다. 즉, 플러그인의 도움을 받아 응용 프로그램에 새로운 기능을 쉽게 추가 할 수 있습니다..

Sketch로 작업 할 때 생산성을 높이는 데 도움이되는 10 개의 플러그인이 있습니다. 콘텐츠 생성기, 색상 표 선택기 등 다양한 범위가 있으며 레이어 측정을 표시하거나 레이어에 패딩을 자동으로 추가하는 데 도움이 될 수 있습니다..

1. CSS 친구

CSS 친구 스케치 작업 공간의 레이어에 CSS를 추가 할 수 있습니다. 기본적으로 CSS를 사용하여 너비, 높이, 불투명도, 상자 그림자, 테두리 및 배경을 레이어에 적용 할 수 있습니다..

이 플러그인을 설치 한 다음 레이어를 선택한 다음 선택 항목에 적용 플러그인 메뉴에서. 스타일 시트를 입력하라는 대화 상자가 나타납니다. CSS 클래스없이 CSS 컨텐트를 추가하고 레이어가 모양을 유지하는지 관찰하십시오..

2. 재질 디자인 컬러 팔레트

머티리얼 디자인의 트렌드를 따르는 경우 눈에 띄는 것은 눈에 띄는 색의 사용입니다. 머티리얼 디자인에는 굉장한 컬러 팔레트가 있습니다. 이제 작업 공간으로 가져올 수 있습니다. 재질 디자인 컬러 팔레트 플러그인.

이 플러그인은 작업 영역을 닫을 필요없이 몇 초 안에 컬러 팔레트를 생성합니다. 색조, 값 또는 견본을 선택하여 프로젝트에 적합한 색상 표를 생성하십시오..

3. 노트북 스케치

때때로 우리는 의견이나 문서를 통해 우리가하는 것을 보여줄 필요가 있습니다. 다른 디자이너 나 고객의 참여가있는 프로젝트에서 작업하는 경우, 결과가 모두가 목표로 삼는 것이 었는지 확인할 수 있어야합니다..

스케치 노트북 Sketch에서 디자인을 쉽게 문서화 할 수있는 플러그인입니다. 작업 영역에 추가 사이드 바를 추가합니다. 여기에는 디자인의 모든 요소에 주석을 추가 할 수 있습니다. 코멘트의 재정렬, 코멘트의 재 정렬, 삭제, 토글 표시를 할 수 있습니다..

4. 주간 선수

디자인에서 실제 이미지를 사용하기 전에 자리 표시 자 이미지를 사용하여 디자인 프로세스의 속도를 높이는 경우가 있습니다. 스케치의 경우 주간 선수 Placehold.it, LoremPixel 및 Unsplash를 포함한 6 개의 자리 표시 자 이미지 서비스에서 스케치 작업 공간의 모든 레이어에 사용자 정의 된 자리 표시자를 추가 할 수 있습니다. 활성화되면 이미지의 너비, 높이 및 기타 정보를 설정할 수 있습니다..

5. 콘텐츠 생성기

우리는 이미 자리 표시 자 이미지를 삽입하는 플러그인을 가지고 있습니다. 일반적인 내용에 대해서는 어떻게하나요?? 콘텐츠 생성기 아바타, 이름, 위치 정보 데이터 등의 더미 데이터를 추가 할 수 있습니다. 실물 크기의 디자인에 적합하며 두통이 그 자리에서 데이터를 생성하는 방법을 찾는 것을 막을 수 있습니다..

더미 데이터를 추가하려면 레이어를 선택한 다음 플러그인> 생성기, 선택하고 지역, 페르소나 또는 사진들.

6. 스케치 측정

스케치 측정 Sketch의 측정 도구입니다. 디자인에서 레이어 (또는 레이어)의 길이 또는 크기를 측정합니다. 또한 레이어의 여백 및 여백과 두 레이어 사이의 거리를 가져옵니다. 스케치 측정은 색상, 테두리 및 불투명도와 같은 레이어 속성을 인쇄 할 수도 있습니다. 모든 측정 값은 키보드 단축키를 통해 표시 할 수 있습니다..

7. 동적 버튼

동적 버튼 고정 된 패딩으로 버튼을 쉽게 만들 수 있습니다. 텍스트의 길이에 관계없이 사용자가 지정한 값에 따라 자동으로 채우기를 조정합니다. 플러그인을 설치하면 Command + J 단축키로 텍스트를 구조체로 변환 할 수 있습니다. 그런 다음 패딩의 양을 (0 : 0 : 0 : 0) 텍스트 레이어 (플렉스 버튼 그룹 아래)로 펀치 할 수 있습니다..

8. 타이포그래피 척도

Typographic Scale은 선택한 텍스트 레이어를 활자체로 바꾸는 플러그인입니다. 이 플러그인을 사용하려면 텍스트 레이어 (단일 또는 다중)를 선택하거나 하나 이상의 텍스트 레이어가 포함 된 혼합 레이어를 선택한 다음 Plugin> Typographic Scale 대화 상자에서 값을 조정하십시오. 결과는 활자체 크기의 규칙을 따르는 크기가 조정 된 텍스트 집합입니다..

9. Modulizer

와 모듈화 장치 키보드 단축키 Shift + Command + M을 사용하여 버튼, 모듈 또는 영역에 대한 패딩을 제어 할 수 있습니다. 모든 레이어를 결합하고 그룹화 한 다음 바로 가기를 사용하여 필요한 패딩 값에 따라 패딩을 자동으로 조정할 수 있습니다 . 이것을 보시려면 비디오 데모보기.

10. 칼날

스케치에서 HTML로 디자인을 변환하는 것에 대해 생각해 보셨습니까? 그렇다면 아마 잎, 디자인에서 자동으로 HTML 파일을 생성하는 Sketch 플러그인. 그룹을 div, 텍스트를 삽입하다 피 등등.

Blade를 사용할 때 [btn] 또는 [text]와 같이 특별한 이름을 레이어에 추가하여 생성 할 DOM 요소를 플러그인에 알릴 수 있으므로 Blade는 수행해야 할 작업을 알고 있습니다. 내부 모습을 보려면이 비디오 데모를 확인하십시오..

지금 읽기 : WordPress 개발자를위한 12 개의 유용한 플러그인