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でサクッとワイヤーフレームが作れる素材検索プラグイン「Wireframe」
Photoshopでファイルを開いたとき「予期せずにファイルの末尾に達しました。」と表示される場合の対処法
Figmaでカラーやテキストのスタイルをまとめて登録するプラグイン「Styler」
Figmaで文字色と背景色のコントラスト比をチェックするプラグイン「Contrast」
Illustratorで文字をオブジェクトの上下中央揃えにする2つの方法
Illustratorで画像内の複数箇所を切り抜いて書き出す方法
液体が垂れているような図形「流体シェイプ」の作り方
Figmaのレイヤー名を一括変更するプラグイン「Rename It」
Figmaで図形の分割をして簡単にレイアウトを作成する拡張機能「Split shape」
Figmaプラグインのインストール方法とその管理方法
iTerm2で「Use System Window Restoration Setting」を設定しているとアラートが表示されて機能しない
Google Chromeのサイト内検索(カスタム検索)機能を別のプロファイルに移行する方法
iPadで入力モードを切り替えずに数字や記号をすばやく入力する方法
iPhoneやiPadでYouTubeの再生速度を3倍速や4倍速にする方法
Keynoteで有効にしているはずのフォントが表示されない現象
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
AirPodsで片耳を外しても再生が止まらないようにする方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
ウェブサイトをmacOSアプリとしてラッピングする「Unite Pro」
Keyboard Maestroの「Macro Debugger」で複雑なマクロのデバッグを行う方法
無料版でも高機能なランチャーアプリ「Raycast」の基本機能と環境設定
OnyXでターミナルを使わずにmacOSの詳細設定を行う
軽量で高速なターミナルエミュレーター「Ghostty」の設定方法
Eagleで実現するクリエイティブ素材の簡単管理
かゆいところに手が届く「Supercharge」でMac環境を便利にカスタマイズする
超軽量なコードエディタ 「Zed」をサブエディタとして活用する
Bartender 6で追加されたWidgets機能で自作メニューバーアイテムを簡単に作成する
Googleカレンダーを便利に活用するための小技集(祝日だけを表示・月末の繰り返しイベントを追加)