Open12

#Figma オートレイアウトを駆使してnoteを模写する

uuyu-guuyu-g

フロントエンドをやってくにあたってデザインが辛く感じることが多い。Figmaを使えるようになって気楽になりたい。

FigmaはHTMLとCSSでのメンタルモデルを使ってよりわかりやすくデザインできそう。

uuyu-guuyu-g

ヘッダー画像のオートレイアウトに苦戦中。
親の幅変えたときに子の画像の縦横比を変えずにサイズ変わるようにするにはどうしたらよいかな

uuyu-guuyu-g

上記のワークアラウンドで好きなアスペクト比で固定するには0.01%の微調整が必要。何種類も使うのは大変。

uuyu-guuyu-g

ローカルのフォントって使える?

uuyu-guuyu-g

最初のほうはだいたいできた

フッターもやってこう


uuyu-guuyu-g

Figmaで感動したAuto Layout的な機能としてXDにStackが入ってた。いつのまに。

Stackで余白を個別に調整できるのがとても良い。Figmaだと違う数値を設定するのが少し手間なので。

Paddingも設定できるようになってるし、XDとFigmaどちら勉強するか悩ましい。