콘텐츠
- 01. 가이드 복사 및 붙여 넣기
- 02. 스케치 클리너
- 03. 아니마
- 04. React Sketch.app
- 05. Git Sketch 플러그인
- 06. ImageOptim
- 07. 매직 미러
- 08. 수출 더보기
- 11. 마켓 치
- 12. 분할 된 원
- 13. 스케치 러너
- 14. 아이콘 글꼴
- 15. 찾기 및 바꾸기
Sketch 플러그인은 Sketch를 더욱 개선하는 데 도움이됩니다. Sketch는 많은 사람들이 선호하는 UI 웹 디자인 도구이며, 사용자 정의 플러그인을 구축하여 기능과 기능을 확장하기 위해 노력하는 사람들의 커뮤니티가 좋은 이유 중 하나입니다.
이제 Sketch 플러그인 관리가 그 어느 때보 다 쉬워졌습니다. 플러그인은 자동으로 업데이트되고 오래된 플러그인은 비활성화됩니다. 플러그인 생태계를 더욱 유용하게 만드는 것은 누구나 가입 할 수있는 파일 공유 서비스 인 Sketch Cloud로, 공개적으로 공유 된 Sketch 문서 또는 Sketch에서 바로 비공개로 공유 된 Sketch 문서를보고 다운로드하고 댓글을 달 수 있습니다.
이제 사용자 인터페이스를 디자인하는 방식을 크게 바꿀 수있는 최고의 Sketch 플러그인을 살펴 보겠습니다. 원하는 것을 찾으면 Sketch 플러그인 설치 방법을 읽어보세요. 웹 도구가 마음에 드신다면 즐겨 찾는 웹 디자인 도구, 웹 사이트 빌더 및 클라우드 스토리지 요약을 놓치지 마세요. 웹 호스팅 제공 업체를 선택하는 것은 사이트의 성공에 매우 중요합니다 (가이드가 도움이 될 것입니다).
01. 가이드 복사 및 붙여 넣기
- 여기에서 다운로드
- 가격: 비어 있는
- 요약: 아트 보드에서 안내선 복사, 붙여 넣기 또는 제거
모든 디자이너는 가이드와 사랑 / 증오 관계가 있습니다. 때로는 절대적으로 필수적이고 나머지 시간은 방해가됩니다. Sketch의 레이아웃 옵션 대신 안내선을 사용하는 경우 여러 대지에서 안내선을 변경하는 것은 악몽 일 수 있지만이 플러그인을 사용하면 모든 대지에서 안내선을 쉽게 복사, 붙여 넣기 및 제거 할 수 있습니다.
02. 스케치 클리너
- 여기에서 다운로드
- 가격: $2
- 요약: 디자인 파일을 휘파람처럼 깔끔하게 만드세요
몇 번의 반복을 거친 모든 스케치 디자인은 숨겨진 레이어, 일관되지 않은 테두리 위치 및 사용하지 않는 레이어 스타일과 같은 약간의 쓰레기를 가져 가게됩니다.
복잡한 Sketch 파일이있는 것이 세상의 끝은 아니지만 전달에 영향을 미칠 수 있으며,이를 이해해야하는 사람이라면 누구나 쉽게 사용할 수 있습니다. 모든 것을 손으로 진행하는 대신 Sketch Cleaner를 사용하여 모든 일반적인 문제를 자동으로 처리하십시오.
03. 아니마
- 여기에서 다운로드
- 가격: 위쪽으로 무료
- 요약: 응답 성이 뛰어난 고 충실도 프로토 타입 제작
이전에는 별도의 무료 플러그인 (Auto Layout 및 Launchpad)으로 사용 가능했습니다. 이제 Anima는 핀, 스택 및 패딩, 모든 화면에 맞는 고해상도 프로토 타입을 사용하여 반응 형 레이아웃을 만들 수 있도록 설계된 올인원 플러그인입니다. 하나의 프로젝트를 지원하는 무료 버전이 여전히 있습니다. 무제한 프로젝트의 경우 가격은 월 $ 25부터 시작합니다.
04. React Sketch.app
- 여기에서 다운로드
- 가격: 비어 있는
- 요약: React 구성 요소를 Sketch로 렌더링
Sketch에서 디자인 자산을 관리하는 것은 어려울 수 있습니다. 이 편리한 Sketch 플러그인은 자산을 관리하는 더 쉽고 안정적인 방법을 제공합니다. 코드에서 React 컴포넌트로 디자인을 구현 한 다음이 플러그인을 사용하여 스케치로 렌더링하십시오. 또한 실제 데이터를 Sketch 파일에 더 쉽게 가져 와서 구현할 수 있습니다.
React Sketch.app은 디자이너와 개발자 간의 격차를 해소하기 위해 디자인 시스템과 함께 사용하기 위해 Airbnb에서 개발했습니다.
05. Git Sketch 플러그인
- 여기에서 다운로드
- 가격: 비어 있는
- 요약: Sketch에 내장 된 Git 클라이언트
이 플러그인은 버전 관리를 Sketch로 가져 오는 것을 목표로합니다. 디자인의 모든 부분에 대한 이미지를 내 보낸 다음 꽤 diff를 생성하여 어떤 변경 사항이 적용되었는지 명확하게 보여줍니다. 디자인 프로세스의 각 단계를 문서화하면 팀의 모든 구성원이 디자인이 어떻게 진행되었는지 확인할 수 있습니다.
Git Sketch Plugin은 Mathieu Dutour가 만들었으며, 이후 Kactus라는 더 포괄적 인 유료 버전 관리 시스템을 개발했습니다.
06. ImageOptim
- 여기에서 다운로드
- 가격: 비어 있는
- 요약: Sketch의 이미지 최적화
Sketch는 SVG 파일 최적화를위한 자체 솔루션을 제공하지만 JPG 및 PNG 이미지를 압축하기위한 다양한 옵션이 없습니다. ImageOptim은 수년 동안 탄탄한 서비스를 제공해 왔기 때문에이 기능을 Sketch로 가져 오는 것이 합리적입니다.
로딩 시간과 이미지 최적화 (모든 디자이너 여야 함)에 관심이있는 모든 디자이너는 ImageOptim을 도구 상자에 추가해야합니다. 플러그인뿐만 아니라 macOS 시스템에 핵심 ImageOptim 앱 (무료)이 설치되어 있어야하며 여전히 Sketch에서 레이어를 내보낼 수 있도록 표시해야합니다 (시작하려면 '모든 자산 내보내기 및 최적화'로 이동).
07. 매직 미러
- 여기에서 다운로드
- 가격: $ 4 / 월부터
- 요약: 이미지 원근 변환 도구
인상적인 제품 모형을 만들려고하지만 까다로운 작업을 처리하기 위해 Photoshop으로 계속 뛰어 들어야한다면 Magic Mirror가 생명을 구할 수 있습니다. 이미지 원근 변환 도구로 Sketch를 종료하지 않고도 원근 모형 및 기타 왜곡 된 효과를 만들 수 있습니다.
08. 수출 더보기
- 여기에서 다운로드
- 가격: 비어 있는
- 요약: 자리 표시 자 이미지 자동 생성
디자인에 자리 표시 자 이미지를 추가하는 것은 프로토 타이핑의 필수 부분이지만 실제 이미지를 찾는 것은 어려울 수 있습니다. 따라서 시간을 낭비하지 말고 모든 것을 Day Player에게 맡기십시오. 이를 통해 다양한 자리 표시 자 이미지 서비스에서 Sketch 문서에 사용자 지정 자리 표시 자 이미지를 추가 할 수 있으므로 가장 큰 결정은 Bill Murray, Nicolas Cage 또는 새끼 고양이를 사용할지 여부입니다.
11. 마켓 치
- 여기에서 다운로드
- 가격: 비어 있는
- 요약: CSS 스타일을 측정하고 가져올 수있는 HTML 페이지 생성
Sketch 디자인에서 CSS 스타일을 검색하려면 Marketch와 같은 플러그인이 절대적으로 필요합니다. 이를 통해 Sketch 아트 보드를 HTML 문서로 가득 찬 zip 파일로 내보낼 수 있습니다. 그런 다음 바로 사용할 수있는 달콤한 CSS를 많이 추출하기 위해 추출 할 수 있습니다.
12. 분할 된 원
- 여기에서 다운로드
- 가격: 비어 있는
- 요약: 정확한 원형 그래픽 만들기
다음은 차트 및 다이어그램을위한 세그먼트 원을 만드는 빠른 방법입니다. 이 플러그인은 점선 및 눈금 원을 포함하여 다양한 스타일의 원형 다이어그램을 생성 할 수 있으며 두께는 쉼표로 구분 된 값의 간단한 목록을 통해 제어됩니다.
13. 스케치 러너
- 여기에서 다운로드
- 가격: 비어 있는
- 요약: 검색 스포트라이트
Sketch는 미니멀 한 키보드 워크 플로우로 많은 사랑을 받고 있습니다. 즉, Photoshop과 같은 다른 디자인 앱과 항상 잊거나 혼동하는 것처럼 보이는 키보드 단축키가 항상 2 ~ 3 개 있습니다. 키보드 단축키가없고 깊숙이 숨겨져있는 덜 일반적인 도구와 기능을 잊지 마십시오. 스케치 메뉴.
Sketch Runner는 이러한 문제를 해결하고 macOS 사용자에게 익숙한 방식으로 해결합니다. Sketch Runner는 macOS Spotlight이지만 Sketch 용입니다.
14. 아이콘 글꼴
- 여기에서 다운로드
- 가격: 비어 있는
- 요약: 아이콘 글꼴 관리
아이콘 글꼴은 많은 이미지 자산을 내보내고 최적화 할 필요없이 웹 디자인에서 아이콘을 사용하는 매우 효율적인 방법입니다. 일반적으로 우리는 아이콘 글꼴을 머리> CSS 및 JavaScript와 마찬가지로 HTML 웹 페이지의 섹션입니다. 그러나 Sketch에서 사용하는 것은 조금 더 복잡합니다. 고맙게도 Icon Font는 쉽게 만들 수 있습니다.
Sketch IconFont를 다운로드하고 설치 한 후 SVG 글꼴 파일을 다운로드하거나 FontAwesome, Material Design Icons, Ion Icons 및 Simple Line Icons의 글꼴 파일이 포함 된이 글꼴 번들을 다운로드하십시오. 완료되면 플러그인> 아이콘 글꼴> 글꼴 번들 설치로 이동하고 파일 열기 대화 상자에서 다운로드 한 글꼴을 선택한 다음 플러그인> 아이콘 글꼴> 그리드 삽입> [원하는 아이콘 글꼴]로 이동하여 삽입합니다. 아이콘.
디자인을위한 사용자 지정 아이콘 세트를 디자인하려는 경우에도 기성품 아이콘을 마음대로 사용하면 디자인 초기 단계에서 신속한 프로토 타이핑에 도움이 될 수 있으며 저 충실도 모형에 약간의 선명도 / 충실도를 추가 할 수 있습니다. .
15. 찾기 및 바꾸기
- 여기에서 다운로드
- 가격: 비어 있는
- 요약: 선택한 레이어에서 텍스트 찾기 및 바꾸기
텍스트 편집기는 찾기 및 바꾸기가 필요한 유일한 곳이 아닙니다. Sketch에서도 유용합니다. 이 플러그인에는 많은 고급 옵션이 있으며 선택한 레이어 (및 그 안에 포함 된 모든 항목)의 텍스트에서 특정 단어 또는 구의 인스턴스를 검색 한 다음 쉽게 바꿀 수 있습니다.
다음 페이지 : 더 많은 시간 절약형 Sketch 플러그인
