figmaの学習
tldr
attach 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の入れ替え、間隔の調整ができる
auto layoutはcssのdisplay: flexのように扱える。最高!
auto layoutを多用すると、groupの入子(ネスト)になる、、、そんな時cmd+clickでダイレクトに子を選択できる
全要素に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にすれば問題ないか?
fill containerを選んだら、widthは100%になるべきじゃないですかね?
あ、でもflex聞いてるか。stretchするね。
flex: noneだった
align-self: stretch;は有効だった。いけそうだな
// 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ねえんかー
constraintsの理解が半端だったわ。最高!scaleいいね。パーセンテージ維持するってよ。
left and rightは左右に広がる。width100%かな?
待って、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のコンポーネント一覧
material-uiのfigma
原型として、UnstyledComponentを作る。
それを複製し、Contained, OutlinedなどのStyleが適用されたComponentを作る。
この時、原型をFrameとし、Styleを適応するFrameを外側に被せる
Table Row ComponentはConstraints and Resizingの横がLeftに指定されている。
しかし、Table内でTable Row Componentのinstanceを使うときは横がFillに設定されている。
ここら辺どうやってるのかしれて良かった。
また、Table CellはFillになっている。Component、Component instance共に。
自分でもやり方をいろいろ探したが、AutoLayoutのFillを使う場合、外側にAutoLayoutが存在する必要がある。これをどうにかする方法はなかった。
完全にコードに起こせるFigmaを目指していたところがあったのですが、現状のFigmaでは再現できないと思っていました。Material-UIでもできていないように見えた。
DesignはDesignで、なるべく使い回しやすいようにDesignしていきたい。
aiueo