Open12
#Figma オートレイアウトを駆使してnoteを模写する
フロントエンドをやってくにあたってデザインが辛く感じることが多い。Figmaを使えるようになって気楽になりたい。
FigmaはHTMLとCSSでのメンタルモデルを使ってよりわかりやすくデザインできそう。
「note」のモバイル表示をかいてみる。
ChromeのComputed
でCSSのグループ表示できるの便利
ヘッダー画像のオートレイアウトに苦戦中。
親の幅変えたときに子の画像の縦横比を変えずにサイズ変わるようにするにはどうしたらよいかな
マイナスのpaddingができないのは地味に痛い。これがないとHTML&CSSと全く同じにはできなさそう。
ここでSpacer使うように考えればいいのかな?
ローカルのフォントって使える?
使えた。
左上のハンバーガーメニューから「Account Settings」を開きます。
「Fonts」部分の「Download Installer to enable local fonts」をクリックし、ダウンロードされた「FigmaInstaller.pkg」を開きます。
するとローカルフォントがFigma内でも使えるようになります。
最初のほうはだいたいできた
フッターもやってこう
Figmaで感動したAuto Layout的な機能としてXDにStackが入ってた。いつのまに。
Stackで余白を個別に調整できるのがとても良い。Figmaだと違う数値を設定するのが少し手間なので。
Paddingも設定できるようになってるし、XDとFigmaどちら勉強するか悩ましい。