첫 번째 플러그인

카탈로그

시작하기

플러그인 베이스

첫 번째 플러그인

개발 환경

디버깅

Action API

플러그인 출시

고급

플러그인 번들

플러그인, 스크립트 및 명령

플러그 인 위치

CocoaScript

추가 정보

SketchTool

이 문서에서는 첫 번째 Sketch 플러그인("Hello World")을 만들고 Sketch의 기본 확장성 개념을 설명합니다.
이 연습에서는 Sketch에 간단한 Hello World 메시지를 표시하는 새 명령을 추가합니다.잠시 후 연습에서 Sketch 캔버스와 상호작용을 하고 사용자가 현재 선택한 층을 조회합니다.
선결 조건
Node를 설치해야 합니다.js를 사용할 수 있습니다 $PATH.Node.js에는 npm,Node.Sketch 플러그인 개발자의 도구 체인을 설치하는 데 사용할 js 패키지 관리자입니다.
새 플러그인 생성
Sketch에 자신의 기능을 추가하는 가장 간단한 방법은 명령을 추가하는 것입니다.하나의 명령은 플러그인 메뉴나 키 연결에서 호출할 수 있는 리셋 함수를 등록합니다.
우리는 당신의 입문을 돕기 위해 작은 도구 체인을 만들었습니다. skpmskpm를 설치하고 새 플러그인을 설치합니다.

$ npm install -g skpm

$ skpm create my-plugin

$ cd my-plugin

플러그인 실행

빌드 플러그인: npm run build

Sketch를 시작하고 문서를 엽니다

.

선택 Plugins>my-plugin>My Command

축하합니다!첫 번째 Sketch 명령을 만들고 실행했습니다!

플러그인 구조
실행 후 생성된 플러그인은 다음과 같은 구조를 가져야 합니다.

.
├── .gitignore
├── README.md
├── src                         // sources
│   ├── manifest.json           // plugin's manifest
│   └── my-command.js           // source code of the command
├── node_modules
│   └── skpm                    // the sketch plugin developer toolchain
├── my-plugin.sketchplugin      // compilation output, the actual plugin
│   └── Contents
│       ├── Resources
│       └── Sketch
│           ├── manifest.json
│           └── my-command.js
└── package.json

이 모든 문서의 목적을 통해 그들이 무엇을 했는지 설명하자.
플러그인 목록: manifest.json

모든 스케치 플러그인은 그 기능과 기능을 설명하는 manfest가 있어야 한다.json 파일.

Sketch가 시작하는 동안 이 파일을 읽습니다.

명세서를 참고하여 더 많은 정보를 얻으십시오.

manifest.json
이전에 nodejs 패키지를 보았다면, 그것을 잘 알아야 합니다. package.json이것은 가방의 의존 관계를 설명하고, 가방의 메타데이터를 포함합니다.
너는 특수한 영역에 주의할 것이다. package.json플러그인에 대한 메타데이터를 지정할 수 있습니다. (여기 있지 않습니다. skpm경험의 법칙으로서, 나는 보통 manifest.json 모든 다른 정보를 넣을 때 명령에 대한 정보를 manifest.json 넣는다. (skpm은 컴파일할 때 이 정보를 manfest.json에 추가해서 복사할 필요가 없도록 한다.)package.json
이것은 플러그인 명령이 정의된 곳입니다.그것은 인용 src/my-command.js 되고 함수를 내보내야 합니다.
간단한 변화manifest.json에서 선택한 레이어의 수를 표시하려면 명령을 바꾸십시오.

export default function(context) {
  const selectedLayers = context.selection
  const selectedCount = selectedLayers.length

  if (selectedCount === 0) {
    context.document.showMessage('No layers are selected.')
  } else {
    context.document.showMessage(`${selectedCount} layers selected.`)
  }
}

를 실행하여 플러그인을 재구성src/my-command.js합니다.Sketch 문서를 열고 일부 레이어를 선택합니다.my-plugin 명령을 실행할 때 선택한 층의 수를 볼 수 있습니다.
전문 알림: 자동 재구성 플러그인npm run build을 실행할 수 있습니다.
확장 게시
플러그인을 공유하는 방법에 대해 읽으십시오.
다음 단계
이 연습에서 우리는 매우 간단한 플러그인을 보았다.
플러그인 API에 대해 자세히 알고 싶으면 다음 항목을 시도해 보십시오.

확장 API 개요 - Sketch의 확장성 가능성을 이해합니다.

추가 플러그인 예제 - 예제 플러그인 항목 목록을 봅니다.

텍스트:https://developer.sketchapp.com/guides/first-plugin/