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

uuyu-g 2021/02/24

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

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

uuyu-g 2021/02/24

「note」のモバイル表示をかいてみる。

uuyu-g 2021/02/24

ChromeのComputedでCSSのグループ表示できるの便利

uuyu-g 2021/02/24

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

uuyu-g 2021/02/24

まだFigmaの機能にアスペクト比を固定してオートレイアウトを使うのはないらしい。

ワークアラウンドはあるみたい。

uuyu-g 2021/02/24

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

uuyu-g 2021/02/24

マイナスのpaddingができないのは地味に痛い。これがないとHTML＆CSSと全く同じにはできなさそう。

ここでSpacer使うように考えればいいのかな？

uuyu-g 2021/02/24

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

uuyu-g 2021/02/24

使えた。

左上のハンバーガーメニューから「Account Settings」を開きます。
「Fonts」部分の「Download Installer to enable local fonts」をクリックし、ダウンロードされた「FigmaInstaller.pkg」を開きます。
するとローカルフォントがFigma内でも使えるようになります。

uuyu-g 2021/02/24

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

フッターもやってこう

uuyu-g 2021/02/27

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

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

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