LOGzeudon

名古屋で働いているWebデザイナーのブログです

トップ > 随筆 > Figmaの基本操作とショートカットキーの習得に役立つCoolなゲーム「Figma Ninja」

Figmaの基本操作とショートカットキーの習得に役立つCoolなゲーム「Figma Ninja」

随筆 随筆-試してみた

Figmaの基本操作習得に役立ついい感じのチュートリアル「Figma Ninja」

しばらくFigmaを使っていて公式アカウントの情報も追っているのだが、最近気になるツイートを見かけた。

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の始め方

まずはこのサイトにアクセスする。

www.figma.com

右上にある「Duplicate」ボタンをクリックすると、自分のFigmaアカウント上にFigma Ninjaデータが複製される。ブラウザでそのまま操作しても良いが、私はMacアプリで開き直した。

f:id:rokuzeudon:20191121233855p:plain
実際の画面の様子。この後、操作用のUIを非表示にして進めていく。

f:id:rokuzeudon:20191121234101p:plain
各Pageは Fnキーと上下キーで移動できる。（初めて知った…）

f:id:rokuzeudon:20191121234155j:plain
例えばこんな感じで、オブジェクトの選択や各ツールの使い方を直感的に学べる。

f:id:rokuzeudon:20191121234349j:plain
忍者…というより空手っぽいノリでちょっと楽しい。

おまけ

注意点

  • 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勉強中なのでおすすめの記事などあればぜひ教えてください！