【Figma】Figmaのデータとマークアップを揃えたい！Frameをできるだけ少なくFigmaのデータを作成する方法

[Figma Advent Calendar 2021](https://qiita.com/advent-calendar/2021/qiita)の23日目は、
Qiita 株式会社 プロダクト開発G デザインTMの出口（@degudegu2510）が担当します！
業務では、[Qiita](https://qiita.com/)、[Qiita Team](https://teams.qiita.com/) 、[Qiita Jobs](https://jobs.qiita.com/)のUI/UX、フロントエンド、各イベント等のクリエイティブを担当しています。

# はじめに

この記事は、普段僕がUIをデザインする時に意識している
**マークアップ構造を意識したFigmaのデータを作成する方法**について
まとめた記事になります。

この記事では、

+ Figmaのデータをきれいに作りたいと思っている人
+ FrameやGroupが無限にあるデータを直したいと思っている人
+ マープアップがしやすいデータを作りたいと思っている人

という人におすすめです！


# ルール
マークアップ構造を意識したFigmaのデータを作成する際に**3つ**のルールを設けています。

## ルール1
:::note
<strong>１タグ、１Frameにすること</strong>
:::

僕が、Figmaのデータを作成する際、できるだけ１タグ、１Frameに心がけています。

`<div>`や`<section>`、`<article>`、`<button>`などといった
タグで囲われるであろうモノを作る時に１つのFrameにしています。

１タグ、１Frameにすることで、マークアップをする時に構造から考えることなく、すぐにコードを書くことができ、
余計divなどが少なくなります。

※ pタグなどの一部のタグは例外になる場合もあります。

**例) ボタンを作る**

```html
<button>
  ボタン
  <span class="far fa-check-circle"></span>
</button>
```
<sup>iconは[fontAwesome](https://fontawesome.com/)を使っています。</sup>
![スクリーンショット 2021-12-20 15.34.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/11abdd2f-7ddb-6398-3fa1-cc8d856ee3f2.png)



## ルール２
:::note
<strong>class名・id名を意識して、Frame名をつけること</strong>
:::

マークアップをする時にスタイリングのことも考えて、Frame名をつけています。
そのため、そのクラスに当てたいスタイルは、そのFrameでデザインをするようにします。

このように、Frame名・class名やFrameに当てるデザインを一緒にかんがえることで、
圧倒的にスタイリングもやりやすくなりますし、スタイリング時に余計なスタイルを当てたりすることがなくなります。

BEMの場合、Modifierの部分を決めるイメージです。

**例) ボタンを作る**

```html
<button class="c-button">
  ボタン
  <span class="far fa-check-circle c-button--buttonIcon"></span>
</button>
```

![スクリーンショット 2021-12-20 15.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/4139b84e-4a70-754a-7fa5-103cbbaecccd.png)


## ルール3
:::note
<strong>同じclass名・Frame名には同じデザインをすること</strong>
:::

class名とFrame名が同じものには、同じスタイル・デザインをつけるようにしています。
Inspectモードでみた時のデザインと実装のスタイルが一致するようにします。

このようにすることで、スタイリング時に余計なスタイルを当てたりすることがなくなります。


**例) ボタンを作る**

```html
<button class="c-button">
  ボタン
  <span class="far fa-check-circle c-button--buttonIcon"></span>
</button>
```

```css
.c-button {
  align-item: center;
  background-color: #55C500;
  border-radius: 16px;
  color: #FFFFFF;
  display: flex;
  font-size: 16px;
  font-weight: 600;
  padding: 4px 16px;
}

.c-button--buttonIcon {
  margin-left: 4px;
}
```
<sup>Button textのスタイルは、`ボタン`をbuttonタグで囲っているので、buttonタグのスタイルに記載しています。</sup>



# ポイントと注意点

上記のルールをもとに、作るといくつか困ったことが起こります。
その困った内容とどうしているかをまとめました。

## Auto Layoutを使って、違うサイズの余白にしたい
:::note
<strong>Spacer コンポーネントを使いましょう。</strong>
:::
同じFrameの中に違うサイズの余白を入れたくなり、
Frameを分けたり、Wrapすることがあると思います。

それを許してしまうと、Frameがいくつあっても足りません。
そこで使うのが**Spacer コンポーネント**です。

Auto Layoutのmarginを0pxにして、余白に**Spacer コンポーネント**を入れ、
Spacer コンポーネントのサイズを変えることで、余白の幅を変更します。

例: ボタンの例

```html
<button>
  <span>ボタン</span>
  <span class="far fa-check-circle"></span>
  <span>ボタン</span>
  <span class="far fa-check-circle"></span>
</button>
```
<sup>各spanタグにmargin-leftを指定します。</sup>

![スクリーンショット 2021-12-20 16.35.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/615f5036-2cdb-8361-adea-a3a33491b6f5.png)

## 画像の上にテキストが入れられない
:::note
<strong>画像の上にテキストを入れる場合は、画像をbackground-imageとして扱います。</strong>
:::

こんな感じにFigmaとマークアップを作るといい感じになります。

```HTML
<div class="c-main">
  <p>ここにテキストが入ります。<p>
</div>
```
```css
.c-main {
  align-item: center;
  background: no-repeat url("../image.png");
  display: flex;
  padding: 16px;
}
```

![スクリーンショット 2021-12-20 17.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/4a94dedb-8eaf-8704-589d-8f793a5dfc0b.png)




## GridやFlexの時には、難しい場合がある
:::note alert
<strong>GridやFlexの時には、１タグ１Frameのルールを守れません</strong>
:::


このようなレイアウトにしたい時には、いらないFrameを作ることになります。

```html
<div>
  <article>記事 1つ目</article>
  <article>記事 ２つ目</article>
  <article>記事 ３つ目</article>
  <article>記事 4記事</article>
  <article>記事 5記事</article>
  <article>記事 6記事</article>
</div>
```

![スクリーンショット 2021-12-20 16.54.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/7753d522-8753-ad13-4edd-32552834e1a0.png)

Figmaの方で`Article row`といういらないFrameを作ることになります。
(Figmaのデータを保守するのには、Gropより、Auto Layoutの方が楽になるので、このようにしています。)


# まとめ

この記事は、普段僕がUIをデザインする時に意識している
**マークアップ構造を意識したFigmaのデータを作成する方法**についてとめました。

今後もこういう時には、こういうデザインにしているなと感じたら、
この記事をブラッシュアップしようと思います。

この記事がよかったら、LGTM。今後もこの記事のブラッシュアップを見たい方は、ストックをお願いします。

---

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

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

https://twitter.com/degudegu2510