Sketch 플러그인을 빌드하는 방법 라이브러리의 심볼을 외부 문서와 연결합니다.

skpm을 사용하여 Sketch 플러그인을 빌드하는 방법에 대한 거의 안내

(Sergey Nikishkin) (2020 년 5 월 28 일)

예를 들어 Google 자료를 사용하겠습니다. 스케치 용 디자인 키트 그리고 기호를 material.io/components . 물론 각 코드 줄에 대해 설명하지는 않겠지 만 제 관점에서 중요한 부분을 강조하겠습니다. 흥미 롭습니까? 그럼 시작하겠습니다.

Sketch 플러그인 개발에 익숙하지 않지만 자세한 내용을 알고 싶다면 초보자를위한 가이드로 Marc Mariano의이 7 개 기사 세트를 추천 할 수 있습니다.

( 스케치 플러그인 작성을위한 초보자 가이드 )

환경

플러그인 용 빌드 도구로 skpm . 이것은 Sketch 플러그인을 쉽게 빌드, 디버그 및 게시 할 수있는 유틸리티입니다. 또한 시작하기 전에 Mac에 다음 항목이 설치되어 있어야합니다.

skpm 및 플러그인 기반 생성은 매우 간단하며 총 두 개의 명령이 필요합니다. 새 폴더를 만들고이 폴더에서 Terminal.app을 열고 다음 명령을 하나씩 입력하면됩니다.

  • npm install -g skpm
  • skpm create your-plugin-name

첫 번째 명령은 npm 패키지 자체와 모든 필수 종속성을 설치합니다. 두 번째는 새 플러그인에 대한 자산 세트가 포함 된 폴더를 하나 더 만듭니다. 주요 대상은 다음과 같습니다.

  • my-plugin.sketchplugin — 설치해야하는 플러그인 자체
  • src — 플러그인의 소스 코드가있는 폴더
VS 코드에서 결과가 표시되는 방식
VS 코드에서 결과가 어떻게 보이는지

manifest.jsonsrc 폴더에서 가져옵니다. 플러그인, 명령 및 리소스에 대한 메타 데이터가 포함 된 JSON 파일입니다. 플러그인에 의해 정의 된 모든 명령의 이름을 나열하고 해당 메뉴 항목을 호출 할 항목과 해당 메뉴 항목을 넣을 메뉴를 Sketch에 알려줍니다.

또한 를 index.js로 변경하고 내부의 모든 코드를 제거합니다. 잠시 후에“ 살아 있습니다! 🙌 ”메시지.

체계

코드 작성을 시작하기 전에 플러그인이 어떻게 작동하는지 이해하겠습니다. 작업. 먼저 다음과 같은 세 개의 파일이 필요합니다.

  • config.json — 기호에 연결할 링크를 포함합니다.
  • index.js — 모든 주요 기능 포함
  • manifest.json — 플러그인 메타 데이터 포함
일하는 계획
일하는 계획

그래서. 아트 보드에서 기호를 선택하고 플러그인을 실행하면 index.js에서 config.json로 이동하는 함수를 호출하고 선택한 기호에 대한 링크는 index.js에 답을 반환하고 모든 검사가 통과되면 문서와 함께 리소스를 엽니 다. 보시다시피 논리는 매우 간단합니다.

함수

첫 번째로해야 할 일은 config.jsonindex.js 아래 코드를 사용하여 :

index.js의 첫 번째 줄

이제 함수로 이동하겠습니다.

openLink ()

이 함수에서는 몇 가지 클래스와 메서드를 사용합니다. Sketch에서 직접 외부 링크를 여는 데 도움이되는 Swift API에서 가져 왔습니다.

  • NSURL

  • URLWithString

  • NSWorkspace

  • SharedWorkspace

openLink () 함수
  • const {link} = config.names[name] — 구성에서 URL이 포함 된 문자열을 가져옵니다.json
  • const url = NSURL.URLWithString(link) — URL이있는 문자열을 URL이있는 객체로 변환
  • NSWorkspace.sharedWorkspace().openURL(url) — 열기 기본 브라우저에 URL이있는 개체

parse ()

이 함수에서는 아트 보드에서 선택한 개체를 . 일치하는 경우 함수는 URL 링크가있는 키를 반환합니다.

parse () 함수

제 생각에 여기서 가장 흥미로운 부분은 13 행의 정규식입니다.

new RegExp(".*(" + set.join("|") + ")(\/|$), "i")

이 정규식은 다른 중첩 수준에서 개체를 찾고 일치시킬 수 있습니다. 우리의 경우 객체는 심볼의 이름이거나 심볼이 배치 된 그룹의 이름입니다. 스케치 용 머티리얼 디자인 키트에서 칩 구성 요소의 중첩 구조와 그 변형을 살펴 보겠습니다.

Material Design Kit for Sketch의 칩 구성 요소 중첩
스케치 용 Material Design Kit의 Chips 구성 요소 중첩 구조

및 방법 레이어 패널의이 중첩은 config.json :

일치 작동 방식과 일치 할 수 있습니다.
일치 작동 방식

정규식의 경우 기호를 연결하려는 수준은 중요하지 않습니다. 주요 규칙은 이름이 양쪽에서 동일해야한다는 것입니다. 또한 기호 그룹화에 사용하는 표기법 (숫자, 문자, 밑줄 등)은 중요하지 않습니다. 중첩도 중요하지 않습니다.

isValidType ()

선택할 때 아트 보드에 무언가를 추가하고 플러그인을 실행하면이 기능은 선택된 개체의 유형을 확인합니다. 객체에 나열된 유형 중 하나가있는 경우 true 매개 변수를 사용하여 답을 반환합니다.

isValidType ( ) 기능

Sketch Headers를 사용하여 기호뿐만 아니라 그룹 및 모양을 연결할 수있는 가능성이있는 작은 보너스입니다.

https://developer.sketch.com/plugins/internal-api

onRun ()

skpm의 제작자 인 Mathieu Dutour의 말을 인용하겠습니다.

skpm은 또한 여러분이 export default function (context) {} 최상위 onRun 함수를 작성하는 대신

onRun () 함수

config.json

그래서. 외부 문서에 대한 링크를 포함 할 JSON 파일을 준비 할 때입니다. 테스트 할 머티리얼 디자인 키트에서 세 가지 구성 요소를 선택했습니다 : "Banner", "Input chip""Card".

config.json with real data

As 보시다시피 JSON 파일의 구조는 매우 간단합니다. config.json에있는 개체의 이름은 위에서 언급 한대로 Sketch에있는 개체 이름의 일부와 동일해야합니다.

그런데 http:// 또는 https://뿐만 아니라 zpl://도 사용할 수 있습니다. Zeplin.app 섹션을 열 수있는 링크입니다.

manifest.json

위에서 언급했듯이이 파일은 플러그인에 대한 메타 데이터, 해당 명령 및 플러그인에 대한 manifest.json의 최종 구조는 다음과 같습니다.

매니페스트의 최종 구조. json

이 파일에서 사용중인 각 매개 변수에 대한 자세한 설명은 공식 문서에서 찾을 수 있습니다.

https://developer.sketch.com/plugins/plugin-manifest

결과 lt

Terminal.app으로 돌아가 플러그인을 빌드 할 시간입니다.

npm run build

그게 다입니다. 플러그인을 설치하고 테스트 할 준비가되었습니다. 마침내 그렇게하고 결과를 살펴 보겠습니다.

작동합니다!
작동합니다!

결론

솔직히 말씀 드리겠습니다. 이것은 기성품 이라기보다는 실험에 가깝고 물론 이상적인 구현은 아닙니다. 우리의 주요 목표는 개발에 많은 시간을 소비하지 않는 것이었고 이것이 일부 지역에서 더 정확한 대신 더 단순한 솔루션을 사용한 이유입니다. 그러나 우리는이 플러그인을 1 년 이상 일상적인 작업에 사용했습니다.최근에 팀에 합류하여 현재 사용중인 구성 요소에 익숙해지기 시작한 새로운 디자이너에게 매우 훌륭하다고 말하고 싶습니다.

또한 큰 감사를드립니다. Kirill Savelov와 Dmitry Kozlov의 인내와 도움에 감사드립니다.

디자인 시스템 및 도구에 대한 추가 이야기

  • (디자인 시스템, 파트 2. 아이콘, SVG 글꼴, Gulp)
  • (디자인 시스템, 파트 3. 일상 업무에서 사용하는 자체 제작 도구)
  • (ffmpeg + ImageMagick. Terminal.app을 사용하여 비디오를 GIF로 변환 macOS에서)
  • (macOS 터미널 + TinyPNG CLI를 사용하여 이미지를 최적화하는 방법)

유용한 링크

Acronis Design 팔로우