Figmaでチーム共有用のメモや注釈素材が使える「Annotation Kit 2.0」

チームでデザインを作っているときに、注釈を入れていくとデザインデータ上で様々なやり取りが完結します。
別途資料を作成していると管理が面倒になりますし、実は見られていなかったなんてことにもなりかねません。
Figmaの「Annotation Kit 2.0」を使うと、様々な注釈系のアセットを追加できます。
Annotation Kit 2.0

Annotation Kit 2.0はプラグインではなく、UI Kitの分類になります。
Figmaのコミュニティページ右上の「コピーを取得する」ボタンをクリックしてファイル上にコピーして使用します。
基本的な使い方
用意されているパーツは下記の通りです
- Notes:ノート
- Text:アノテーションコメント用のテキスト
- Line & Measurements:線
- Sticky Notes:付箋
地味に便利なのが「Reference Tags」です。
Noteの中に文章と一緒に設定できますし、テキストの近くに置いておくだけでもかなり分かりやすいデータになります。
付箋だけでなく「Text」や「Note」を使えば開発向けのメモ書きもキレイに置いておけますし、付箋以外にも使えるパーツが用意されています。
変数を使って細かい調整を行う
例えば「Line」を使うときにスタイルを変更すると線の種類を簡単に変更できます。
使うだけでも便利ですが、FigmaのVariablesなどの機能をうまく使っているので、データの作り方としても参考になります。
汎用的なデータを作るための参考としても1度見てみるのはオススメです。


Figmaで作ったスマホデザインを「Mirror」機能を使ってリアルタイムに実機確認をする
Figmaのパス周りの基本操作|基本的な描画方法からペンツールと直線ツールの細かい違いまで
Figmaで文字色と背景色のコントラスト比をチェックするプラグイン「Contrast」
液体が垂れているような図形「流体シェイプ」の作り方
Figmaで複数行テキストを1行ずつ分割するプラグイン「Nisa Text Splitter」
Figmaで簡単に波の素材を生成するプラグイン「Get Waves」
iPhoneのスクリーンショットをIllustratorにペーストすると、色がおかしくなってしまう現象の解決方法
Sketchのレイヤー周りの基本操作|グループ化やマスク、オブジェクトのロックや表示切り替えなどのレイヤーでできること
Sketchの図形周りの基本操作|図形の作成方法から描画に関する細かい部分まで
FigmaでAdobe XDやSketchのデータを開く方法
iTerm2で「Use System Window Restoration Setting」を設定しているとアラートが表示されて機能しない
Google Chromeのサイト内検索(カスタム検索)機能を別のプロファイルに移行する方法
iPadで入力モードを切り替えずに数字や記号をすばやく入力する方法
iPhoneやiPadでYouTubeの再生速度を3倍速や4倍速にする方法
Keynoteで有効にしているはずのフォントが表示されない現象
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
AirPodsで片耳を外しても再生が止まらないようにする方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Obsidianで整理した知識をAnkiで定着させる方法
Figma × Keyboard Maestroでどこまで効率化できる?
マウス操作の完成度が高いウインドウリサイズアプリ「Magnet」
Macで複数ディスプレイを使っている場合に便利な設定集
AppCleanerでMacアプリを関連ファイルごと完全に削除する
操作に没頭できる!Firefox版 Arcのようなブラウザ「Zen Browser」
chezmoi(シェモア)で始めるdotfiles管理
GitHubの通知を見逃さない!通知に特化したアプリ「Gitify」
Keyboard Maestroの変数基礎
Neovimを使い始める最初の一歩として便利な「LazyVim」