---
# System prepended metadata

title: Dev x Designer

---

# Dev x Designer

Agenda
- 思うこと、問題点の共有
- Figmaの使い方・見方のガイド

### 思うこと、ゴールの合わせ
- Atomic designを活用して、再利用性を高める
- UIガイドラインがあることで、UIの一貫性を保つことができる
- 実装のコストを下げる


### 実際にやってること & 問題点
- デザイン
    - 会計プラスのUI Kitを持ってきてカスタマイズしている
    - Epicベースで個別の画面デザインを作ってエンジニアに渡す

- エンジニア:
    - Figmaの画面デザインを確認して実装する
    - 経験ベースで
        - このカラーは過去にどっかに使ったことあるな、と思ったら探して、あったら定数化する
            - 問題：
                - 覚えなかったらもう画面別のCSSに定義してしまう
                - もしアプリ画面全体に色を調整すると、修正するの大変
            - 改善：
                - デザイン：カラーのpaletteを明記にする

        - テキスト：カラーと同じ状態

        - このボタン・この注意項目のデザインは前の画面と同じだな、と思ったら共通componentの実装をする。前に書いたコードを共通componentに差し替える
            - 問題：
                - 気づかなかったら重複した実装をやってしまう
                - リファクタリングのコスト
                - Componentのstateはどうなるかわからない
            - 改善：
                - デザイン：何か新しいUIコンポーネントを追加するときに、そのコンポーネントは再利用できると思ったら、どこかに共通UIコンポイントに書いてもらう（または今のFigmaにまとめているならエンジニアに共有する）
                - エンジニア：共通できそうなのかデザインなーに聞いてみる


- その他：margin, padding, スペーシングはデザイナーは一貫性を保つ形で大丈夫です。エンジニアは共通化しやすい。

![](https://i.imgur.com/66n206O.png)
![](https://i.imgur.com/kLGK7EE.png)
![](https://i.imgur.com/aJXnWr7.png)
![](https://i.imgur.com/AtAiopM.png)
![](https://i.imgur.com/EsML6pw.png)



