figmaの学習
kajirikajiritldr
kajirikajiriattach shift-key to revert
| key | short cut |
|---|---|
| ctrl + shift + ? | shortcut key help |
| shift+a | auto-layout |
| cmd+click | direct child select |
| n | Zoom to next frame |
| cmd+g | group selection |
| cmd+option+g | frame selection |
| option+L | toggle directory |
| cmd+. | hide menu |
| shift+enter | select outer component |
| shift+i | insert component |
| shift+2 | zoom frame |
| shift+0 | zoom frame |
| + | zoom in |
| - | zoom out |
| alt + hover | measuring distances |
3つ以上のobjectを選択していると、幅の自動調節、objectの入れ替え、間隔の調整ができる
kajirikajiriauto layoutはcssのdisplay: flexのように扱える。最高！
auto layoutを多用すると、groupの入子（ネスト）になる、、、そんな時cmd+clickでダイレクトに子を選択できる
kajirikajiri全要素にauto layoutを適用して作成したデザインなら、そのまま実装に以下せるよね？これ？
flexとかpaddingを適切に設定する必要が発生するので。
auto layoutなし
位置の指定が対象のelement(jsの場合)にcssで記載されるため、position absoluteになる。
position: absolute;
width: 95px;
height: 31px;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 12px;
line-height: 14px;
color: #000000;
auto layoutありの場合
位置の指定が親elementにcssで記載されるため、display flexになる。
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 30px;
position: relative;
width: 842px;
height: 477px;
background: #BFBFBF;
これはきてる！思い描いていたことができそうだ。
あとはスクロール時のことを考慮したいね。
例えばheaderは上に常時固定表示したいけど、その場合にheaderをposition absoluteしたら、headerの下に要素が隠れる。こういったことを考慮したい。sidebarにすれば問題ないか？
kajirikajirifill containerを選んだら、widthは100%になるべきじゃないですかね？
kajirikajiriあ、でもflex聞いてるか。stretchするね。
kajirikajiriflex: noneだった
kajirikajirialign-self: stretch;は有効だった。いけそうだな
kajirikajiri// fill container
/* Rectangle 24 */
position: static;
width: 324px;
height: 257px;
left: 0px;
top: 257px;
background: #C4C4C4;
transform: matrix(1, 0, 0, -1, 0, 0);
/* Inside Auto Layout */
flex: none;
order: 0;
align-self: stretch;
flex-grow: 0;
margin: 39px 0px;
// fixed width
/* Rectangle 24 */
position: static;
width: 324px;
height: 257px;
left: 0px;
top: 257px;
background: #C4C4C4;
transform: matrix(1, 0, 0, -1, 0, 0);
/* Inside Auto Layout */
flex: none;
order: 0;
flex-grow: 0;
margin: 39px 0px;
wrapねえんかー
kajirikajiriconstraintsの理解が半端だったわ。最高！scaleいいね。パーセンテージ維持するってよ。
left and rightは左右に広がる。width100%かな？
kajirikajiri待って、scaleとleft and rightの差が不明。scaleは%、left and rightはサイズがかわるっぽい。left and rightはサイズが変わってしまう可能性がある。
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
position: absolute;
height: 50px;
left: 0px;
right: 0px;
top: 0px;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
position: absolute;
height: 50px;
left: 0%;
right: 0%;
top: 0px;
position: relative;
width: 955px;
height: 667px;
background: #FFFFFF;
理解した。基本はscale使おう。両側の隙間を固定したい時はleft and right
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
position: absolute;
height: 50px;
left: 8.34%;
right: 8.24%;
top: 0px;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
position: absolute;
height: 50px;
left: 89.93px;
right: 88.78px;
top: 0px;
position: absolute;
height: 40px;
left: 137px;
right: 137px;
top: 15px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 32px;
line-height: 40px;
display: flex;
align-items: center;
text-align: center;
letter-spacing: -0.05em;
color: #000000;
position: absolute;
height: 40px;
left: 137px;
right: 137px;
top: 15px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 32px;
line-height: 40px;
display: flex;
align-items: center;
text-align: center;
letter-spacing: -0.05em;
color: #000000;
勉強になる material-uiのコンポーネント一覧
kajirikajirimaterial-uiのfigma
原型として、UnstyledComponentを作る。
それを複製し、Contained, OutlinedなどのStyleが適用されたComponentを作る。
この時、原型をFrameとし、Styleを適応するFrameを外側に被せる
kajirikajiriTable Row ComponentはConstraints and Resizingの横がLeftに指定されている。
しかし、Table内でTable Row Componentのinstanceを使うときは横がFillに設定されている。
ここら辺どうやってるのかしれて良かった。
また、Table CellはFillになっている。Component、Component instance共に。
自分でもやり方をいろいろ探したが、AutoLayoutのFillを使う場合、外側にAutoLayoutが存在する必要がある。これをどうにかする方法はなかった。
kajirikajiri完全にコードに起こせるFigmaを目指していたところがあったのですが、現状のFigmaでは再現できないと思っていました。Material-UIでもできていないように見えた。
DesignはDesignで、なるべく使い回しやすいようにDesignしていきたい。
kajirikajiriaiueo