はじめに
みなさん、こんにちは!
エンジニアのくろたくです。
一昨日、社内イベントのPoCMockコンテストに参加してきました。
本日から2日間PocMock(社内イベント)に参加!
— くろたく@TechTrainメンター (@TakumaKurosawa) November 15, 2022
業務と関係のない技術検証や、こんなの作ってみました!を生み出すためのイベントです。
クリエイターからのアイデア創出に投資してくれる会社に感謝🙏
僕は2日間でFigma→Vueのコード自動生成周りを検証しようと思ってます🧑💻
2日間で検証した結果を公開するので、Figmaデザインからコード自動生成周り興味ある方ぜひご覧ください!
Overlay
Pricing
Project Page
Documentation
Figma Plugin
生成される実際のコード
<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推奨
- など
-
そもそも全然メンテされていなさそう・・・
-
Vueへのエクスポートバグってそう。何が原因かわからないけど、500エラー返されるコンポーネントが存在する
teleport HQ
Pricing
Project Page
Documentation
Figma Plugin
生成される実際のコード
<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
ブランチへコミットされるので完全に上書きされる - 強い権限のパーソナルアクセストークンを渡さないといけない
- Repository名を
- Figmaインテグレーションはあくまでおまけ的な位置付け
anima
Pricing
Project Page
Figma Plugin
実際に生成されるコード
Freeプランではコードのコピーができませんでした
プレビューで見た感じでいうと、先に紹介したOverlayに近いアウトプットかなという印象でした。
まとめ
今回3つのサービスを技術検証してみました。
結果的には、2つ目に紹介したteleport HQが個人的には一番使えるサービスかなと思いました。
とはいえ、コード自動生成の領域はまだ発展途上なんだなというのが率直な感想になります。
特に、GitHubなどのサービスとの連携と、コードスタイルの選択肢が用意されていないことが1番のネックだなと感じました。
とはいえ、現時点でも下記のようなケースであれば十分使えるサービスなのではないかと考えるので、当てはまる方はぜひ使ってみてください。
- LPなどの静的サイト
- 部品コンポーネント
- コード生成(微修正は必要)
- ライブラリ化(Storybook的な使い方)
- 新機能開発時に完全ゼロベースで作りたくないモチベーション
- コードスタイルを自動生成ツールに合わせられるPJT
- デザイナーのポートフォリオサイト
自動生成まではまだ難しくとも、デザイントークン自動生成まではかなり成熟したサービスが登場してきている印象なので、僕のプロダクトでも導入を検討していたりします。
デザイントークン成熟期の次には、きっとコード自動生成の時代もやってくるはずなので、この辺りのサービスWatchし続けようと思っています!