Figma
最初に設定する
基本概念
Figma上でbranchを作れる
ショートカットキー
shift-i ctrl-shift-? ショートカットキーの一覧を表示
量が多いが、一覧は見やすいので、このショートカットだけでも覚えてると有用そう
k 拡大・縮小ツール
k を押してから、テキストボックスを拡大縮小すると、文字サイズを拡大縮小できる
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つまで
15ヶ月後に破断した ref
>#WIP
Figma APIのwrapper
ここで見た
レイヤーのロックってなに？
shift-cmd-L 子要素をいじっているときに、親が動いてしまうときとかに使う
union selectionってなに？
group化とは違うのか
完全に1まとまりにする感じか
整列
左揃え
alt-a 右揃え
alt-d 上揃え
alt-w 下揃え
alt-s 水平方向の中央揃え
alt-h horizon
垂直方向の中央揃え
alt-v vertical
レビューする人向けのFigmaの使い方
2022
space+マウス
移動する
version管理
自動で
>@yuki930: 聞こえますか…
>Figmaでカラースケールを作るとき、レイヤー名をひとつずつリネームする作業で疲弊していませんか…！
>そんなときは【まとめて選択して⌘R】です…
>10刻みで名前を変えたい？
>末尾に$n0と書くのです…10刻みで名前がつけられます…
>まずは【まとめて選択して⌘R】を押すのです…
>
Figma関係の記事まとめ
こういうデザインツールのおかげでStorybookとかが不要になっていて嬉しい
Figma to React
FigmaファイルからReact Componentを生成
html, css吐き出せるプラグイン
コード生成
memo
上下のpadはpx単位だが、左右のpadは%なことがおおい
contentWidthをつかう
左サイドバーでセクションや中身がわかる
altとホバーでマージンがわかる
セクションは
タイトル
内容
補足
RNのPRのテンプレート
相対位置
動かす方をフォーカス
その状態で
alt 押して、基準にしたい要素にホバーする矢印とかでフォーカスしてるやつを動かす
基本的なことがいくつか紹介されている
素材とかも用意されているので、この動画と全く同じモノを作れて練習になる
基本的なことが頭に入るまではくり返し見ると良さそう
他の動画を見ていないので、これが一番良いのかは知らんけど