しばらくFigmaを使っていて公式アカウントの情報も追っているのだが、最近気になるツイートを見かけた。
New from the community - meet Figma Ninja, a fun way to learn Figma basics and up level your keyboard shortcut game.
— Figma (@figma) 2019年11月11日
Get the file from @Tandem_HQ: https://t.co/aWCpa6WN3a
a fun way to learn Figma basics and up level your keyboard shortcut game. (Figmaの基礎を学びつつキーボードショートカット力もレベルアップできる楽しいゲームだぜ！)
Figmaに不慣れな自分にもちょうど良いのでは？と、試しにやってみたら実際ちょうど良かったので紹介する。
Figma Ninjaとは
@tandem_hqが作成した、Figmaの基本操作とショートキー操作を直感的に学べるFigmaデータだ。 操作用のUIを非表示にした状態で指示にしたがって操作を進める ことで、手を動かしながらおのずと学べる。
現在以下の内容で「Chapter #1」が公開されている。
- 👊 Intro
- ⚔️ Ninja Mode
- 🔍 Level 1 - Zoom
- 🔍 Level 2 - Zoom 2
- 🔍 Level 3 - Pan
- 🌟 Pan/Zoom Victory Screen
- ⚒ Level 4 - Create Shapes
- ⚒ Level 5 - Create - Combos
- ⚒ Level 6 - Create - Text
- 🌟 Creating Victory Screen
- 🕹 Level 7 - Simple Selection
- 🕹 Level 8 - Selection through groups
- 🕹 Level 9 - Unselecting
- 🕹 Level 10 - Simple Movement
- 🌟 Manipulating Victory Screen
- 🔥 Challenge mode
- 🔥 Challenge mode - HARD
- 🏆 Chapter #1 Complete
具体的には次のような内容だ。
- UIを隠す ※メニュー View > Show UI
- 画面拡大・縮小（キー操作/Zoomツール）
- 画面移動（Spaceキー）
- 各描画ツールのショートカットキー選択/Shiftキー活用
- テキストの配置・編集
- オブジェクト選択＆選択解除方法（基礎/グループ）
Figma Ninjaの始め方
まずはこのサイトにアクセスする。
右上にある「Duplicate」ボタンをクリックすると、自分のFigmaアカウント上にFigma Ninjaデータが複製される。ブラウザでそのまま操作しても良いが、私はMacアプリで開き直した。
おまけ
注意点
- Ninja Mode (Show UI) のキーは
command \と案内されるが、私のMacbook（日本語キーボード）だとそもそも\がないし、試しにcommand option ¥を打つとマルチプレーヤーカーソルの表示/非表示切替になってしまった。仕方なくメニューの View > Show UI にて設定した。- 後から知ったけど、
command .でいけるぽい
- 後から知ったけど、
- 拡大キーは
command +と案内されるが、日本語キーボードだとcommand ^またはshift -っぽい。縮小はcommand -と案内されるけど-だけでも良いぽい。
その他感想
- XDの公式チュートリアルも同じく実際に触りながら学べる感じだけど、こういう学習教材がどんどん増えていくとみんな幸せになれそう
- Figmaの「Page」機能、めっちゃ便利だなと改めて思ったのでXDも追従してほしい
- 全面に背景色を簡単につけれるのもFigma羨ましい
- Chapter #2 以降が楽しみ。@tandem_hqをフォローしておくと公開されたときにキャッチアップできるかもしれない。
- Figma勉強中なのでおすすめの記事などあればぜひ教えてください！
🥋 / thanks @Tandem_HQ @figmadesignhttps://t.co/BZDBu1qKes pic.twitter.com/rFkhWKKSjs
— ろくぜうどん (@rokuzeudon) 2019年11月21日
