CSSそこそこわかる人がとりあえず figma で何か作ることになった時の tips 集

こんにちは。こちらはLinc'wellアドベントカレンダーの24日目です。

最近 figma を使い始めたのですが、私はキャリアとしてはフロントエンドエンジニアとしての歴が長く、何か実現したいデザインが頭に思い浮かんだ時、思考としては

「display:flex の justify-content:space-between なレイアウト作りたいんだけどな〜」

とCSSでイメージしてしまいます。

きっと同じ「CSSで言ってくれないと分かんない」という方もいらっしゃるのではないかと思ったので「CSSで言うこれはこんな感じで作る」という情報が役に立つのではないかと思い、今回筆を取りました。

※ この記事は最初のとりあえずの索引としては有効だとは思いますが、真面目に入門する際には figma の公式チュートリアル動画を一通り手を動かしながら見ることをオススメします。この記事で書いていることは大体カバーされています。

Figma

想定読者
- figma触りたての方
- CSSはそこそこ分かる

ゴール
figma初見ではどうやって実現するか分からないよくあるデザインの実現方法がCSS引きで分かるようになる。

border-radius

これは初見でも気づくの簡単だと思いますが

border-radius: 20px 0 0 0;

上記の場合全部の角に適用されますが、一部分だけ適用したいという場面もあると思います。そんな時は右の怒りマークみたいなものをクリックしてあげれば角毎に指定することができます。

border-top, border-bottom

Strokeをつけることはできるのですが、どこか1サイドだけにstrokeつけることはできません。なので最初は Line を組み合わせて Group にして border っぽいものを作っていたのですが、それよりステップ少ない方法としてDrop Shadow を使う方法があります。

Effect で Drop Shadow を付与して blur を0にします。そして Y を borderの幅として指定すれば border-bottom を作れます。(この時 Y の値をマイナスの値にすれば border-top になります。)

参考: Applying the stroke (border) to TOP, BOTTOM, LEFT or RIGHT side of rectangle

width X%, height Y%

figmaでオブジェクトを置いた時、基本的には幅と高さは絶対的な値として指定されてます。ただ度々「このコンポーネントの幅は親の要素の100%〜」みたいな指定の仕方がしたくなる時があるでしょう。

これを実現するのが Constraint の機能です。とりあえずの理解は figma のチュートリアル動画を見るのが一番なのでこちらをどうぞ。

よくあるのが親に対して100％なものだと思うので、それを例に出すと、widthの場合は constraint を left & right に指定してあげます。

height:100% に関しても似たように constraint を Top & Bottom にすれば実現できます。

width: 20%

上記の例は親の幅いっぱいな100％な場合のみですが、アプリのグローバルナビゲーションなどで等幅の20％で出したい時もあるでしょう。そんな時は Layout Gridを使います。

ちなみに Layout Grid は Frameに対してのみ使えます。Frameを選択した状態で Layout Grid を追加し、Grid となっているプルダウンを Columns にします。そして Gutter (column間のマージン)を0にしてCountをお好みの数にすれば x%が実現できます。

ただ、こちら等幅のものしかできないので、そうでない場合は自分で計算して要素作って constraint を left & right に設定するしかなさそうです。

display: flex の色々

上記の例を見てなんとなく分かったかもしれませんが大体のレイアウトはConstraintとLayout Grid使えばなんとかなります。

space-between
- Layout Grid で表示したい要素の数だけ Rows を足す
- 左端のものは constraint を left, 右端のものは constraint を right, それ以外のものは center にする

space-around
- Layout Grid で表示したい要素の数だけ Columns を足す
- 全てGridのColumnの真ん中に配置して、 constraint を center にする

全部網羅するのは流石にしんどくなってきたのでやめておきますが、大体 constarint を上手く使えば実現できそうだというイメージが湧いたでしょうか。

Padding

実現する方法いろいろあるんじゃないかとは思いますが、最近であれば Auto Layout を使うのが一番それっぽく実現できるのではないかと思います。

例えばスマホUIでよくあるカードのUIで内側にpaddingいくらか持たせるみたいなのあると思うんですが、これはまず 

- Rect を適当に作る
- AutoLayoutを当てる
- X座標を０にする
- Frameの幅が 100vw と一致するまでRectを大きくする
- AutoLayoutをVerticalでFixed Widthにする

で期待通りのものが作れると思います。カードUIは作っている内に高さがコロコロ変わるので、これを覚えておくと結構生産性上がる予感がしています。

ただAutoLayout内の要素感のマージンは等幅になってしまうので、中身はグループセレクションにしないといけないのですが、AutoLayout適用されている要素の中に新しく要素を足すというのはできないようになっています。
ある程度要素が固まってからAutoLayout当てた方がストレス少ないかもしれません

Spacing作って設置する方法

その他に自分で spacingためだけの要素を作って調整しやすくする方法もあります。

お分りいただけただろうか。

要素の幅を調整している時に ｽﾁｬッ となっていることに。ただ設置する手間と比べていいのかはちょっと我が経験からはなんとも言えないです。

この方法はこちらの動画で知りました。

その他に良い方法あれば是非コメントとかで教えてほしいです。

position: fixed

Design モードで作っている時は気にならないと思いますが、プロトタイプ機能を使った時に下にくっついていてほしいグローバルナビゲーションが消えたりして違和感を覚えることがあると思います。そんな時は constraint のところにある Fix Position when scrolling というそのまんまな名前のチェックボックスをオンにしてあげれば大丈夫です。

overflow: scroll

カルーセルなど中身の要素が実際の画面幅より長いものを表示したいこと、あると思います。詳しくは下記動画の2分30秒ぐらいから見ると理解しやすいです。

おわりに

以上、CSS引きでこれどうやって実現するののご紹介でした。正直正統派な入門記事とは言い難いのですが、誰かの役に立てたらなら幸いです。

お読みいただきありがとうございました。