【LT スライド&原稿】QiitaのFigma活用法

## はじめに
この記事は、2023年6月2日に開催される[DIST.39 「みんなのFigma」](https://dist.connpass.com/event/281775/)で発表する内容です。

## 内容
### LTについて
![Slide 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/dd5aa7e9-c8f5-3c9b-4c45-8277dd5c7a5c.png)

このLTでは、

+ Qiitaで、Figmaをどのように使っているか？
+ Qiitaで、デザインのissueをどのように管理しているか？
+ Qiitaで、UIデータをどのように管理しているか？

を実際のFigmaファイルも見せながら発表したいと思います。


### Qiitaのプロダクトについて

![Slide 4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/4c52c1a3-38bd-11e9-593e-aae5b8cef3e9.png)

はじめに Qiitaのプロダクトについて説明します！

Qiitaでは、
+ エンジニア向けの記事投稿プラットフォーム の **Qiita**
+ 社内向け情報共有サービス の **Qiita Team**
+ エンジニアと企業のマッチングサービス の **Qiita jobs**
の3つのプロダクトを運営しています。

僕の所属しているデザインGでは、これら3つのプロダクトのUIデザインをデザイナー3名で作成しています。

---

![Slide 5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/66293aa7-877c-8bd3-f13f-1e43e7db0257.png)

これら 3つのプロダクトのデザインデータでは、
プロダクト共通のトークン・コンポーネントを使ったり、
プロダクト固有のデザイントークン・コンポーネントを作成して使ったりと
コンポーネントの継承関係が少し複雑になっています。

### Qiitaのデザインシステム
![Slide 6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/515482ab-44a3-7ce6-5add-c447978f5bcf.png)

Qiitaのデザインシステムでは、このような図のように、
Qiita VI を土台として、それぞれのプロダクトへ継承するようにFigmaでデザシステムを作成しています。

---

![Slide 7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/e69d7cbc-6c05-910b-68d4-d98987690773.png)

Qiita VI は、Qiita のデザインシステムの土台となるファイルです。
Qiita VIでは、Qiita株式会社のVIだけでなく、カラーパレットやテキストといったデザイントークンやボタンコンポーネントなどの共通コンポーネントが定義されています。

**【デザイントークンが定義されているファイル】**

https://www.figma.com/file/32nOOGSSy4nShyCmEktpjs/Qiita-VI---Color%2C-Text-and-Brand-Assets?type=design&node-id=0%3A1&t=86JYyhf1NWBn3FoV-1

**【共通コンポーネントが定義されているファイル】**

https://www.figma.com/file/W690Q8JPidUJdlvDfEabct/Qiita-VI---Compornents?type=design&node-id=0%3A1&t=VLVTRY6sDI3gu0Sw-1


---

![Slide 9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/fce6ceee-cdf7-c4b6-8d26-d2b1fc4a7141.png)

これらのQiita VIで定義している トークンやコンポーネントを継承して、
各プロダクトごとのデザインデータを作成しています。

これらのデザインデータはQiita VIを継承することを前提として、
各プロダクトごとに固有のデザイントークン・コンポーネントを作成しています。

**【Qiitaで使っているコンポーネントが定義されているファイル】**

https://www.figma.com/file/HKSUqSGyjxhVMhmoB3Vg7l/Qiita---Components?type=design&node-id=4%3A1923&t=jOUiyWuIZ1hb9PAZ-1

**【QiitaのプロダクトのMainファイル】**

*実際のファイルを見せながら、詳しく説明します。*
*Figmaファイルは公開していないので、LT内だけの共有になります🙏*


### Qiitaのデータ管理のやり方
![Slide 11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/940a0202-ea95-adfd-94fc-fb1499338f85.png)

このような継承関係のあるFigmaファイルを
Qiitaでは、デザインデータを`Project機能`と`ファイルのサムネイル` を使って管理しています。

1. issueをやることになったら、新しくファイルを作成し、ファイルのサムネイルを設定します。
2. デザインがFixしたら、開発中のサムネイルに変えます。
3. 機能がリリースされたら、開発済みのサムネイルに変えます。
4. メインファイルに作成したデータをコピーします。
    - 複数回、同じコンポーネントが発生したら、コンポーネントのファイルに反映させます。
5. その後、マージしたファイルを置いておく用のプロジェクトへ　移動させます。

**【実演】**
*実際のファイルを見せながら、詳しく説明します。*
*Figmaファイルは公開していないので、LT内だけの共有になります🙏*


### Qiitaのデータの作り方
![Slide 13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/8686cefc-1fa5-0644-4bc6-d20045f74bde.png)

次に、実際のデザインデータどのように作成しているかを話します。

Qiitaでは、Figmaでデザインカンプというだけでなく、フロントエンド部分の仕様まで、
細かく記載して、Figmaを見るだけで、開発できる状態を目指しています。

そのため、ファイルでは、
新しく作られたコンポーネントをまとめておく、コンポーネントエリア、
コンポーネントのStateやインタラクティブな仕様をまとめるコンポーネントの仕様エリア
UI Stackに合わせて、ページ全体のデザインを作成するページのデザインエリア

の順にレイアウトしています。

**【実演】**
*実際のファイルを見せながら、詳しく説明します。*
*Figmaファイルは公開していないので、LT内だけの共有になります🙏*


## まとめ
一度聞いてもあまりイメージできないとおもい、公開しているFigmaのリンクと共にQiitaの記事にまとめました。
この記事を読んで、プロジェクト管理、デザインシステムの管理等の参考になれば幸いです。

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。

https://twitter.com/degudegu2510