Figma→Vue コード自動生成サービス検証

<script async class="speakerdeck-embed" data-id="280c640dea1a4a7483a8f2c61be50d4d" data-ratio="1.77725118483412" src="//speakerdeck.com/assets/embed.js"></script>

## はじめに

みなさん、こんにちは！
エンジニアのくろたくです。

一昨日、社内イベントのPoCMockコンテストに参加してきました。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">本日から2日間PocMock(社内イベント)に参加！<br><br>業務と関係のない技術検証や、こんなの作ってみました！を生み出すためのイベントです。<br><br>クリエイターからのアイデア創出に投資してくれる会社に感謝🙏<br><br>僕は2日間でFigma→Vueのコード自動生成周りを検証しようと思ってます🧑‍💻</p>&mdash; くろたく@TechTrainメンター (@TakumaKurosawa) <a href="https://twitter.com/TakumaKurosawa/status/1592667170185834497?ref_src=twsrc%5Etfw">November 15, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

2日間で検証した結果を公開するので、Figmaデザインからコード自動生成周り興味ある方ぜひご覧ください！

## Overlay

[![スクリーンショット 2022-11-19 12.41.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317034/b6f953ba-9b75-9e5f-94e4-b89ef05df2d4.png)](https://overlay-tech.com/)

### Pricing

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317034/c53d03f4-f3bb-8ecb-14b8-25f4fcaedfb8.png)

### Project Page

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317034/73abf50d-23b8-358b-7693-f51145774447.png)


### Documentation

- [FAQ - Overlay](https://faq.overlay-tech.com/)

- [Figma Playground](https://www.figma.com/community/file/921066411285098081)

### Figma Plugin

[![スクリーンショット 2022-11-19 12.46.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317034/b05df003-a493-1ad0-e19d-3fc683eb90f4.png)](
https://www.figma.com/community/plugin/893806009348766137/Overlay-(Figma-components-to-React%2C-Vue%2C-HTML))

### 生成される実際のコード

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317034/01c161d7-97f1-08e4-3346-1077930ce557.png)


```vue
<template>
  <div class="profile-card">
    <div class="avatar"></div>
    <div class="datas-container">
      <div class="job-container">
        <p class="company">Overlay</p>
        <div class="divider"></div>
        <p class="job-title">Designer</p>
      </div>
      <p class="name">Mary Meyer</p>
      <p class="experience">2 years</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "ProfileCard"
};
</script>

<style lang="scss" scoped>
.profile-card {
  background-color: $blue;
  border-radius: 16px;
  padding: 22px 38px;
  display: flex;
  align-items: center;
  border: 2px solid $secondary-black;
}
.avatar {
  width: 106px;
  height: 106px;
  background-size: 100% 100%;
  background-position: center;
  background: url("https://via.placeholder.com/106x106"),
    $silver;
  margin-right: 32px;
  border-radius: 50%;
  border: 2px solid $secondary-black;
}
.datas-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}
.job-container {
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  width: 220px;
}
.company {
  font-family: "Helvetica";
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
  color: $secondary-black;
  margin-right: 16px;
}
.divider {
  width: 6px;
  height: 6px;
  background-color: $coral;
  margin-right: 16px;
  border-radius: 50%;
  border: 1px solid $secondary-black;
}
.job-title {
  font-family: "Helvetica";
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
  color: $white;
}
.name {
  font-family: "Helvetica";
  font-size: 32px;
  font-weight: 700;
  line-height: normal;
  color: $white;
  align-self: stretch;
  margin-bottom: 2px;
}
.experience {
  font-family: "Helvetica";
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
  color: $secondary-black;
  align-self: stretch;
}
</style>
```

### メリット

- ドキュメンテーションがわかりやすい
- CSS class名がFigmaで設定した名前と合わせられる

### デメリット

- 結構ちゃんとルールに従ってデザイン作らないとコード生成されない
    - Component化必須
    - AutoLayout推奨
    - など
- そもそも全然メンテされていなさそう・・・
    
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317034/cf75381b-992a-af20-2144-20e0b2d809a3.png)

    
- Vueへのエクスポートバグってそう。何が原因かわからないけど、500エラー返されるコンポーネントが存在する
    
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317034/4771e607-44a0-f24a-3005-422953374654.png)

    

## teleport HQ

[![スクリーンショット 2022-11-19 12.54.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317034/e60eae7b-5a93-9805-0ddf-5f037f409d0a.png)
](https://teleporthq.io/)

### Pricing

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317034/e0ac6895-58dd-fdae-2ce3-1864c13ef25f.png)

### Project Page

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317034/9bc23288-d921-b5b3-1fbb-d8af60d965b3.png)


### Documentation

- [Quick Setup | teleportHQ Code Generators](https://docs.teleporthq.io/guides/getting-started.html)

- [TeleportHQ Help Center](https://help.teleporthq.io/en/)

- [teleportHQ](https://www.youtube.com/c/teleportHQ/videos)

### Figma Plugin

[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317034/65b9fd65-df59-edfe-1684-a7787020dfbb.png)
](https://www.figma.com/community/plugin/992726161890204477/TeleportHQ---Figma-to-Code---Export-HTML%2C-CSS%2C-React-%26-Vue)

### 生成される実際のコード

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317034/01c161d7-97f1-08e4-3346-1077930ce557.png)

```vue
<template>
  <div>
    <div class="profilecard-profilecard">
      <app-avatar></app-avatar>
      <app-datascontainer></app-datascontainer>
    </div>
  </div>
</template>

<script>
import AppAvatar from './avatar'
import AppDatascontainer from './datascontainer'

export default {
  name: 'Profilecard',
  props: {},
  components: {
    AppAvatar,
    AppDatascontainer,
  },
}
</script>

<style scoped>
.profilecard-profilecard {
  width: 100%;
  height: auto;
  display: flex;
  padding: 24px 40px;
  position: relative;
  align-items: center;
  flex-shrink: 0;
  border-color: rgba(0, 0, 0, 1);
  border-style: solid;
  border-width: 2px;
  border-radius: 16px;
  background-color: var(--dl-color-default-blue);
}
</style>
```

### メリット

- ドキュメンテーションしっかりしてる
- エディタ使いやすい
- エディタ上でコンポーネント分けすると、コードにも反映される

### デメリット

- GitHub Exportが微妙
    - Repository名を `Project名-Vue` にしないといけない
    - `main` ブランチへコミットされるので完全に上書きされる
    - 強い権限のパーソナルアクセストークンを渡さないといけない
- Figmaインテグレーションはあくまでおまけ的な位置付け

## anima

[![スクリーンショット 2022-11-19 12.57.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317034/9488d97a-4ab8-4921-34d1-1578744d6d16.png)
](https://www.animaapp.com/)

### Pricing

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317034/caa5b5bd-1d75-db61-382d-26a7bcc32e0c.png)

### Project Page

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317034/3a555dde-c76f-a8cd-342b-07ef7de5c608.png)


### Figma Plugin

[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317034/68e6898e-2b75-1cce-d36f-9f2fdaf3ee7b.png)
](https://www.figma.com/community/plugin/857346721138427857)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317034/250de389-eeec-fcc9-2c56-d070f1d97439.png)


### 実際に生成されるコード

Freeプランではコードのコピーができませんでした:sob:
プレビューで見た感じでいうと、先に紹介したOverlayに近いアウトプットかなという印象でした。

## まとめ

今回3つのサービスを技術検証してみました。
結果的には、2つ目に紹介した[teleport HQ](https://teleporthq.io/)が個人的には一番使えるサービスかなと思いました。

とはいえ、コード自動生成の領域はまだ発展途上なんだなというのが率直な感想になります。
特に、GitHubなどのサービスとの連携と、コードスタイルの選択肢が用意されていないことが1番のネックだなと感じました。

![スクリーンショット 2022-11-19 13.29.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317034/10b28ee7-3054-9f8a-6e9a-812c1f5743ce.png)

とはいえ、現時点でも下記のようなケースであれば十分使えるサービスなのではないかと考えるので、当てはまる方はぜひ使ってみてください。

- LPなどの静的サイト
- 部品コンポーネント
    - コード生成（微修正は必要）
    - ライブラリ化（Storybook的な使い方）
- 新機能開発時に完全ゼロベースで作りたくないモチベーション
- コードスタイルを自動生成ツールに合わせられるPJT
- デザイナーのポートフォリオサイト

自動生成まではまだ難しくとも、デザイントークン自動生成まではかなり成熟したサービスが登場してきている印象なので、僕のプロダクトでも導入を検討していたりします。

デザイントークン成熟期の次には、きっとコード自動生成の時代もやってくるはずなので、この辺りのサービスWatchし続けようと思っています！

![スクリーンショット 2022-11-19 13.32.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317034/53b22269-68a6-7bcd-87a7-0738c77b0134.png)