About

Figma Plugin 미래를 느끼다.
공식 문서 소개자술에서 사용자 인터페이스를 구축하는 흐름.
하지만 저는 개인적으로 Vue에 익숙해져서 다음과 같은 환경에서 구축하려고 합니다.

Vue.js

TypeScript

Sass

Bulma

주의: Figma Plugin은 큰 관계가 없습니다. 거의 웹 팩의 설정 문제입니다.

결론

나는 코드를 GitHub에 놓았다.

설명: 환경 구축

먼저 공식 문서Bundling with Webpack를 참고하여 웹팩 기반의 코드 라이브러리를 구축했다.
공식 GitHub 샘플.
다음은 Bundling with Webpack의 코드 기반 차이에 대한 설명입니다.

package.json

Vue.js, Sass, Bulma를 사용하는 데 필요한 패키지가 추가되었습니다.

$ npm install --save vue vue-class-component vue-property-decorator bulma
$ npm install --save-dev node-sass sass-loader vue-loader vue-template-compiler

tsconfig.json

Vue.js의 TypeScript 권장 구성.
tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "strict": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "module": "es2015"
  }
}

webpack.config.js

주요 변경 사항

rules

추가vue-loader 설정

ts-loader 옵션에 추가appendTsSuffixTo: [/\.vue$/]

추가sass-loader 설정

resolve

추가 .vue 관련 설정

plugins

추가VueLoaderPlugin

...

const VueLoaderPlugin = require('vue-loader/lib/plugin')

...

module.exports = (env, argv) => ({
  ...

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            'scss': 'vue-style-loader!css-loader!sass-loader',
            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
          }
        }
      },
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/\.vue$/]
        }
      },
      ...
      {
        test: /\.scss$/,
        loader: [
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          { loader: 'sass-loader' }
        ]
      },
      ...
    ],
  },

  resolve: {
    extensions: ['.tsx', '.ts', '.jsx', '.js', '.vue'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },

  plugins: [
    ...
    new VueLoaderPlugin()
  ]
})

설명: UI 구현

읽기 예제와 마찬가지로, 우리는 Vue를 사용하여 Rectangle Creator를 실현하여 지정된 수량의 정사각형을 그려 보려고 합니다.
먼저 UI의 입구점src/ui.html 및src/ui.ts입니다.
src/ui.html

<div id="app"></div>

src/ui.ts

import Vue from 'Vue'
import RectangleCreator from './RectangleCreator'
import './ui.scss'

new Vue({
  el: '#app',
  render (h) {
    return h('rectangle-creator')
  },
  components: {
    RectangleCreator
  }
})

src/ui.scss에서 Bulma를 읽어 변수를 설정합니다.
src/ui.scss

@charset "utf-8";

@import "~bulma/sass/utilities/initial-variables";
@import "~bulma/sass/utilities/functions";

$brand: #18A0FB;
$primary: $brand;

@import "~bulma/bulma";

마지막으로 Bulma의 CSS를 사용하여 Rectangle Creator를 다시 작성하십시오.
src/RectangleCreator.vue

<template>
  <div class="container">
    <h2 class="title is-4">Rectangle Creator</h2>

    <div class="field">
      <label class="label">Count</label>
      <p class="control">
        <input class="input is-small" type="number" v-model="count">
      </p>
    </div>

    <div class="field is-grouped is-grouped-centered">
      <p class="control">
        <button class="button is-primary is-small" @click="create">
          Create
        </button>
      </p>
      <p class="control">
        <button class="button is-small" @click="cancel">
          Cancel
        </button>
      </p>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
  name: 'RectangleCreator'
})
export default class RectangleCreator extends Vue {
  count: number = 5

  create () {
    parent.postMessage({ pluginMessage: { type: 'create-rectangles', count: this.count } }, '*')
  }

  cancel () {
    parent.postMessage({ pluginMessage: { type: 'cancel' } }, '*')
  }
}
</script>

<style lang="scss">
.container {
  padding: 0.75rem;
}
</style>

실행하면 이런 느낌이에요.

참고: 도중에 반한 일

처음에 제공된figma.d.ts 유행이 지난 문제

Figma Desktop App에서 플러그인을 처음 생성할 때 제공되는 figma.d.ts 은 오래된 것입니까?의 규격화 거리의 멱 함수.
(2019/08/22 현재)
구체적으로 LineHeight 인터페이스 정의에서 오류가 발생할 수 있습니다.

interface LineHeight {
  readonly value: number
  readonly unit: "PIXELS" | "PERCENT"
} | {
  readonly unit: "AUTO"
}

참고GitHub 샘플의 figma.d.ts, 유형 별칭으로 바꾸어 해결합니다.

type LineHeight = {
  readonly value: number
  readonly unit: "PIXELS" | "PERCENT"
} | {
  readonly unit: "AUTO"
}