ZeplinのExtensionを開発して生産性を上げる

こんにちは。Wantedlyでエンジニアインターンをしている新谷哲平です。

Wantedlyではエンジニアとデザイナーのコミュニケーションコストを下げ、生産性を上げるためにZeplinを導入しています。

Zeplinとは、

• デザインリソースを簡単に共有
• 自由な場所にコメントをつけることができるのでエンジニアとデザイナーの行き違いを減らせる
• Sketch, PhotoshopのファイルからCSSを生成してくれる

など、とても便利な機能をたくさん持つデザイン共有ツールです。

いままで

現在、WantedlyのフロントエンドはReactを用いた開発をしている部分が多く、
Reactのスタイリングを行う方法としてstyled-componentsを採用しています。

Zeplinは直接CSSを取り出すことができ、とても便利なのですが、

1. styled-componentsの構文への機械的な書き換え
2. デフォルト値に設定されているCSS Attributeの除去
3. Wantedlyで定められている独自ルール

などエンジニアが生成されたCSSを毎回修正しなければならない状態でした。

今日(2/22)、Zeplinからユーザーがextension開発をできるようになったという発表がありました！

これは作るしかない！と思い、styled-componentsを生成するextensionを

作成しました！！

機能は以下の画像の通りです。

構文の書き換えとCSSのデフォルト値に設定されているものは表示しないようにしました。
まだまだ荒削りですが日々利用することでどんどん最適なものにしていき、最終的にはコピペでstyled-componentsの実装を終わらせることを目標にしています。

これから

この機能によって単純作業が軽減され、より本質的な作業を行うことができるようになり生産性が上がることを確信しています！

具体的なExtension開発の書き方はまた今度書きます！

Zeplinを使っているみなさん、生産性を上げるために自分好みのExtensionを作ってみてはいかがでしょうか？