FigmaとCSSつなげて理解してみた

はじめに

CSSもFigmaみたいに視覚的に理解できたらいいのに！！！！！！！
Figmaなどのデザインツールに触れてから、CSSを学んだ人の多くはこう思うと思います。

いざ実装しようとすると

• 余白が思った通りにならない
• 中央揃えができない
• なぜか要素がはみ出す

となり、もうAIに書いてもらおうってなりますよね。気持ちは本当に分かります。

でも個人的にはフロントをAIに任せるって本当に危険な気がするんです。

私も試しにたくさんAIで書いてみましたが、無理やりな!importantや、その場限りの深いネストを書くことがあって、その後の小さな修正で全体がぐちゃぐちゃになってしまったり。。。

ちなみに

!importantをつけると、他のどんなCSSを無視してでも、「何が何でもこの設定を適用せよ」という命令になります

AIを使うにしても、ちゃんと読解して修正できるようにしたいですよね！！！！

ってことで今回はFigmaとCSSの概念(？)をつなげて理解してみます。

①並びと余白

以下で私なりの並びと余白の解釈を説明していきます。

〇並べる仕組み

・Figma

Auto Layout → 要素をルールに従って並べる仕組み

・CSS

display: flex;

これが前提の仕組みになってきます。

〇縦並びと横並び

・Figma

Horizontal → 横並び
Vertical → 縦並び

・CSS

flex-direction: row;    /* 横 */
flex-direction: column; /* 縦 */

Figmaで方向を変えているだけで、実装ではflex-directionを指定しているだけの違いでした。

〇要素間の余白

・Figma

Spacing between items → Auto Layoutで設定できる余白

・CSS

gap: 16px;

以前の私はmarginで頑張っていましたが、Auto Layoutと同じ考え方ならgap一択になります。

〇内側の余白

・Figma

Padding → Auto Layoutで設定できる内側の余白

・CSS

padding: 16px;

これはかなり直感的でした。

②Hug / Fill / Fixed の正体

ここが一番感動したポイントです！
以下で私なりのHug / Fill / Fixed の解釈を説明していきます。

〇 サイズの指定：内圧的

・Figma

Hug contents → Auto Layoutで設定できる中身の大きさに合わせて自身が伸び縮みする内圧的なサイズの指定

・CSS

width: auto;

CSS では Figma の Hug とまったく同じ動きにはなりませんが、「中身のサイズに合わせて要素の幅を決めたい」という意味では、width: fit-content; と考えるとイメージしやすいと思います。

〇 サイズの指定：外圧的

・Figma

Fill container → Auto Layoutで設定できる親要素の余っているスペースをすべて埋めるというサイズの外圧的な指定

・CSS

flex: 1;　/* 主軸（親同士の並び方向）方向に対して */

または

align-self: stretch;　/* 交差軸（並びと垂直な方向）方向に対して */

〇 サイズの指定：絶対的

・Figma

Fixed width → Auto Layoutで設定できる何があってもサイズが一緒な絶対的なサイズの指定

・CSS

width: 120px;

③中央揃えの正体

〇 中央揃え

・Figma

Align center → 要素の中央ぞろえ

・CSS

/* flex-direction: row のとき */
justify-content: center; /* 主軸（横）方向の中央揃え */
align-items: center;     /* 交差軸（縦）方向の中央揃え */

flex-direction: column; にすると主軸と交差軸が入れ替わるので、
「どちらの方向をそろえたいか」で justify-content と align-items を使い分けています。

まとめ

Figma	CSS	補足
Auto Layout	display: flex;	要素を並べるための土台（親要素に指定）
Horizontal / Vertical	flex-direction	row（横並び）か column（縦並び）か
Gap	gap	要素同士のスキマ（余白）
Padding	padding	親要素の内側の余白
Hug	指定なし / fit-content	中身のサイズに合わせて自身が伸び縮みする
Fill	flex: 1 / align-self: stretch	親の余っているスペースを埋める（方向で使い分け）
Center alignment	justify-content / align-items	並べている方向（主軸）と、その垂直方向（交差軸）の揃え

CSSがを視覚的に理解したい方は、ぜひAuto Layoutを「コードに変換する視点」で触ってみてください！
(今回の記事は、私がこんなの見たかった、、という完全なる自己満です笑)