Figma Advent Calendar 2021の23日目は、
Qiita 株式会社 プロダクト開発G デザインTMの出口（@degudegu2510）が担当します！
業務では、Qiita、Qiita Team 、Qiita JobsのUI/UX、フロントエンド、各イベント等のクリエイティブを担当しています。
はじめに
この記事は、普段僕がUIをデザインする時に意識している
マークアップ構造を意識したFigmaのデータを作成する方法について
まとめた記事になります。
この記事では、
- Figmaのデータをきれいに作りたいと思っている人
- FrameやGroupが無限にあるデータを直したいと思っている人
- マープアップがしやすいデータを作りたいと思っている人
という人におすすめです！
ルール
マークアップ構造を意識したFigmaのデータを作成する際に3つのルールを設けています。
ルール1
１タグ、１Frameにすること
僕が、Figmaのデータを作成する際、できるだけ１タグ、１Frameに心がけています。
<div>や<section>、<article>、<button>などといった
タグで囲われるであろうモノを作る時に１つのFrameにしています。
１タグ、１Frameにすることで、マークアップをする時に構造から考えることなく、すぐにコードを書くことができ、
余計divなどが少なくなります。
※ pタグなどの一部のタグは例外になる場合もあります。
例) ボタンを作る
<button>
ボタン
<span class="far fa-check-circle"></span>
</button>
iconはfontAwesomeを使っています。
ルール２
class名・id名を意識して、Frame名をつけること
マークアップをする時にスタイリングのことも考えて、Frame名をつけています。
そのため、そのクラスに当てたいスタイルは、そのFrameでデザインをするようにします。
このように、Frame名・class名やFrameに当てるデザインを一緒にかんがえることで、
圧倒的にスタイリングもやりやすくなりますし、スタイリング時に余計なスタイルを当てたりすることがなくなります。
BEMの場合、Modifierの部分を決めるイメージです。
例) ボタンを作る
<button class="c-button">
ボタン
<span class="far fa-check-circle c-button--buttonIcon"></span>
</button>
ルール3
同じclass名・Frame名には同じデザインをすること
class名とFrame名が同じものには、同じスタイル・デザインをつけるようにしています。
Inspectモードでみた時のデザインと実装のスタイルが一致するようにします。
このようにすることで、スタイリング時に余計なスタイルを当てたりすることがなくなります。
例) ボタンを作る
<button class="c-button">
ボタン
<span class="far fa-check-circle c-button--buttonIcon"></span>
</button>
.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;
}
Button textのスタイルは、ボタンをbuttonタグで囲っているので、buttonタグのスタイルに記載しています。
ポイントと注意点
上記のルールをもとに、作るといくつか困ったことが起こります。
その困った内容とどうしているかをまとめました。
Auto Layoutを使って、違うサイズの余白にしたい
Spacer コンポーネントを使いましょう。
同じFrameの中に違うサイズの余白を入れたくなり、
Frameを分けたり、Wrapすることがあると思います。
それを許してしまうと、Frameがいくつあっても足りません。
そこで使うのがSpacer コンポーネントです。
Auto Layoutのmarginを0pxにして、余白にSpacer コンポーネントを入れ、
Spacer コンポーネントのサイズを変えることで、余白の幅を変更します。
例: ボタンの例
<button>
<span>ボタン</span>
<span class="far fa-check-circle"></span>
<span>ボタン</span>
<span class="far fa-check-circle"></span>
</button>
各spanタグにmargin-leftを指定します。
画像の上にテキストが入れられない
画像の上にテキストを入れる場合は、画像をbackground-imageとして扱います。
こんな感じにFigmaとマークアップを作るといい感じになります。
<div class="c-main">
<p>ここにテキストが入ります。<p>
</div>
.c-main {
align-item: center;
background: no-repeat url("../image.png");
display: flex;
padding: 16px;
}
GridやFlexの時には、難しい場合がある
GridやFlexの時には、１タグ１Frameのルールを守れません
このようなレイアウトにしたい時には、いらないFrameを作ることになります。
<div>
<article>記事 1つ目</article>
<article>記事 ２つ目</article>
<article>記事 ３つ目</article>
<article>記事 4記事</article>
<article>記事 5記事</article>
<article>記事 6記事</article>
</div>
Figmaの方でArticle rowといういらないFrameを作ることになります。
(Figmaのデータを保守するのには、Gropより、Auto Layoutの方が楽になるので、このようにしています。)
まとめ
この記事は、普段僕がUIをデザインする時に意識している
マークアップ構造を意識したFigmaのデータを作成する方法についてとめました。
今後もこういう時には、こういうデザインにしているなと感じたら、
この記事をブラッシュアップしようと思います。
この記事がよかったら、LGTM。今後もこの記事のブラッシュアップを見たい方は、ストックをお願いします。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。