Figma
https://gyazo.com/0a10a6647033687c3438b3013feed6e2
最初に設定する
基本概念
Figma上でbranchを作れる
ショートカットキー
shift-i
ctrl-shift-?
ショートカットキーの一覧を表示
量が多いが、一覧は見やすいので、このショートカットだけでも覚えてると有用そうmrsekut.icon
k
拡大・縮小ツール
kを押してから、テキストボックスを拡大縮小すると、文字サイズを拡大縮小できる
https://gyazo.com/c3c6754a4042948a2f7fe16fb541cb88
i
色を摘出
cmd-d
リスト良い感じに複製する
1回コピーして、揃えたりした後に、cmd-dすると、動作を覚えてくれている ref cmd-alt-c, cmd-alt-v
propertyのコピー・ペースト
例えば、textの文字色だけコピー・ペーストできる
Projectの階層構造
team (会社名)
project (client名)
file (product)
page*3
無料ではpageは3つまで
レイヤーのロックってなに？
shift-cmd-L
子要素をいじっているときに、親が動いてしまうときとかに使う
union selectionってなに？
group化とは違うのか
完全に1まとまりにする感じか
整列
https://gyazo.com/db955883eff3d648f4a725bb35a8a503
左揃え
alt-a
右揃え
alt-d
上揃え
alt-w
下揃え
alt-s
水平方向の中央揃え
alt-h
horizon
垂直方向の中央揃え
alt-v
vertical
レビューする人向けのFigmaの使い方
2022
space+マウス
移動する
version管理
自動で
https://gyazo.com/c130c3aa67d30f9c9a2c176b49bea61c
Figmaでカラースケールを作るとき、レイヤー名をひとつずつリネームする作業で疲弊していませんか…！
そんなときは【まとめて選択して⌘R】です…
10刻みで名前を変えたい？
末尾に$n0と書くのです…10刻みで名前がつけられます…
まずは【まとめて選択して⌘R】を押すのです…
https://pbs.twimg.com/media/FyJO6I0akAALzyD.jpg
Figma関係の記事まとめ
Figma to React
FigmaファイルからReact Componentを生成
html, css吐き出せるプラグイン
コード生成
memo
上下のpadはpx単位だが、左右のpadは%なことがおおい
contentWidthをつかう
左サイドバーでセクションや中身がわかる
altとホバーでマージンがわかる
セクションは
タイトル
内容
補足
RNのPRのテンプレート
相対位置
動かす方をフォーカス
その状態でalt押して、基準にしたい要素にホバーする
矢印とかでフォーカスしてるやつを動かす
https://www.youtube.com/watch?v=JuaXJ4DgItY
基本的なことがいくつか紹介されている
素材とかも用意されているので、この動画と全く同じモノを作れて練習になる
基本的なことが頭に入るまではくり返し見ると良さそうmrsekut.icon
他の動画を見ていないので、これが一番良いのかは知らんけど