이것은 Adobe XD 플러그인 제작 Advent Calnedar 첫날의 문장이다.
우선 첫 타자로서 올해 변화의 개요와 최신판 자료집을 들려드리고 싶다.

Adobe XD(향후 XD) 및 플러그인

XD는 Adobe가 내놓은 교류 디자인 도구로 한 응용 프로그램에서 디자인, 원형, 공유 제작에서 중요한 세 가지 동작을 할 수 있다.
XD 플러그인은 2018년 맥스 업데이트부터 일반인에게 배포됐으며 현대 자바스크립트를 사용한 API도 함께 공개됐다.
Adobe XD 플러그인의 세계에 오신 것을 환영합니다!Adobe MAX2018 세션 보고서 #XDPlugin#AdobeXD
https://blogs.adobe.com/japan/web-world-of-xd-plugins/
이 때 모드 대화 상자 설정으로 결정할 수는 없지만 Google Sheet과 같은 유용한 플러그인이 많이 출시되었습니다.
반복 격자의 너비와 높이를 완전히 일치하게 하고 지정한 항목을 표시할 수 있는 졸작Repeat Grid Fitter도 그 중 하나이다.

2019년은 당분간 확대할 수 있기 때문에 큰 진전이 있다

그렇다면 2019년 올해는 큰 변화가 있었다.
제작에 있어서 새로운 신청지인 패널이 풀렸다.속성 색인기처럼 선택한 대상을 상호작용할 수 있는 패널 유형의 제품이 등장했습니다!
# Adobe XD 패널을 지원하는 플러그인 개발
패널 유형 플러그인 예: Arranger for Adobe XD

플러그인 관리자를 개선하여 여러 플러그인에서 자신에게 맞는 플러그인을 선택할 수 있도록 돕습니다.
Adobe XD 2019년 11월 업데이트 출시!Adobe MAX에서 실시간 공동 편집, 문서 히스토리, 구성 요소 상태 등을 #AdobeMAX#AdobeXD 게시의 마지막 자리는 다시 설계된 플러그인 관리자를 보십시오.

패널 유형의 플러그 인 설치

manifest.json 중의 호출 방법은 전용 활동이 필요한 것과 큰 차이가 있다.
Quick Start:Make your first XD panel plugin에서 빼면 아래 부분에 해당한다
manifest.json

//前略
  "uiEntryPoints": [
    {
      "type": "panel",//パネルタイプの指定
      "label": "Enlarge a Rectangle",
      "panelId": "enlargeRectangle"//パネルとして記述があるオブジェクト
    }
  ]
//後略

main.js

function create() {} //パネルUIの記述を行う

function show(event) {} //プラグインパネルから指定されると呼ばれる

function update(selection) {} //選択中のオブジェクトが何らかの変化を起こすたびに呼ばれる

module.exports = {
  panels: {//パネルとしてexportする
    enlargeRectangle: { //manifest.jsonで指定した名前
      show,
      update
    }
  }
};

여러 플러그인 중에서 적합한 플러그인 선택 지원 기능이 계속 증가

이미 분류가 추가되었지만 플러그인의 상세 화면에서 아래의 기능은 매우 좋습니다!

추가 캡처

추가평가

휴대전화 상점에서도 편집 선택과 일반 플러그인에 대한 소개를 볼 수 있다.

이전 화면도 업그레이드되어 참고 탭에 존재합니다.검색 아이콘 을 누르면 이 화면도 열립니다.

2019년 저장판 개발 데이터 소스

거절하지 않으면 영어의 메시지가 된다.

Adobe XD 플러그인 관리 화면...XD 플러그인을 정식으로 발표하려면 플러그인 ID를 발표하고 등록을 신청하기 위해 반드시 사용해야 합니다.Adobe ID가 필요합니다.2019/12/01은 삭제할 수 없습니다.

Adobe XD Platform...개발자 포털

Plugin APIs...XD의 동작을 설명하는 API 문서입니다.다양한 초보자를 위한 간단한 시작 안내서도 있습니다

Cloud Content APIs...자체 제품과 XD를 연결하는 디자인 공유를 위한 클라우드 콘텐츠 API 문서.사용 시 API Key/Secret 요청

프로젝트 팀에 Adobe XD 연결하는 "Cloud Content API" 공개...위의 Cloud Content API 사용 방법 일본어로 소개

Adobe XD 플러그인용 UI 번들 및 UX 설명서 제작...Plugin APIs에서 링크된 플러그인 전용 UI Kit 및 UX 설명서의 소중한 일본어 소개 기사

공식 Giithub 창고

xdpm...플러그인 설치 및 업데이트를 지원하는 명령줄 도구

generator-xd-plugin...Yeoman의 XD 플러그인 프로젝트 생성 도구

활용

plugin toolkit...XD 플러그인용 API에 존재하지 않는alert/confirm/proompt를 사용할 수 있습니다.이외에도 조수 함수가 준비되어 있다.

plugin toolkit react...pure JavaScript에서 개발한 것 외에 문서가 가장 많은 React 개발 플러그인을 지원하는 UI 도구 구성 요소

XD awesome...XD 플러그인으로 작성된 커뮤니티 리소스 링크 세트.개발용 도구도 소개

총결산

XD 플러그인 제작이 시작된 지 이듬해지만 개발할 수 있는 플러그인의 폭이 넓어져 검색 기능이 충실해지기 시작한 것은 최근이다.나는 실제 첫해가 올해라고 생각한다.
하이아 문서에 대응하여 jQuery를 사용한 개발도 간단해졌다.지금부터 꼭 도전해 보세요.