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でオブジェクトの整列をショートカットキーを使って効率的に行う方法
Figmaでサクッとワイヤーフレームが作れる素材検索プラグイン「Wireframe」
Figmaのテキストやオブジェクトを斜めに変形・旋回させるプラグイン「SkewDat」
Figmaのコメント機能を利用してデザイン上のやり取りを円滑にする
Figmaプラグインのインストール方法とその管理方法
iPhoneのスクリーンショットをIllustratorにペーストすると、色がおかしくなってしまう現象の解決方法
Illustratorの「モザイクオブジェクト」機能で、画像にモザイクをかける方法(「ラスタライズ」を使った方法も追記)
Sketchのパス周りの基本操作|基本的な描画方法からベクターツールと直線ツールの違いまで
コーダー目線で理解するIllustratorのアピアランス機能
Figmaで図形の分割をして簡単にレイアウトを作成する拡張機能「Split shape」
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
AutoSleepを使って、Apple Watchをつけたまま寝るだけで自動的に睡眠ログを取る!
HTML・CSSでWebサイト制作を行う際に必要なツール
Path Finder 8で使えるツールバーの項目一覧
Nuxt.jsの「layouts」を使用してレイアウトの共通化を行う方法|Nuxt.jsの基本
Bartender 6で追加されたWidgets機能で自作メニューバーアイテムを簡単に作成する
Google Chromeのタブを検索するAlfred Workflowの「Search Safari and Chrome Tabs」で、タブ移動をラクにする
mds?kernel_task?アクティビティモニタで表示されるパッと見なにか分からないプロセス名まとめ
ポモドーロテクニックを実践するために役立つデバイスごとのオススメアプリ
Vue CLIでの画像パスの指定方法・配置場所まとめ
Google日本語入力の基本的な設定項目