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

チームでデザインを作っているときに、注釈を入れていくとデザインデータ上で様々なやり取りが完結します。

別途資料を作成していると管理が面倒になりますし、実は見られていなかったなんてことにもなりかねません。

Figmaの「Annotation Kit 2.0」を使うと、様々な注釈系のアセットを追加できます。

Annotation Kit 2.0

Figma

Figma

https://www.figma.com/community/file/806626024182535168

Figma Community file - Annotation Kit has been totally revamped! Since the original kit came out, new versions of Auto Layout shipped, and Variants also shipped with Figma. This made us want to redo this buddy and make it more useful than ever.If you're looking for a quick overview check this video out on Loom.Anno...

Annotation Kit 2.0はプラグインではなく、UI Kitの分類になります。

Figmaのコミュニティページ右上の「コピーを取得する」ボタンをクリックしてファイル上にコピーして使用します。

基本的な使い方

用意されているパーツは下記の通りです

• Notes：ノート
• Text：アノテーションコメント用のテキスト
• Line & Measurements：線
• Sticky Notes：付箋

地味に便利なのが「Reference Tags」です。

Noteの中に文章と一緒に設定できますし、テキストの近くに置いておくだけでもかなり分かりやすいデータになります。

付箋だけでなく「Text」や「Note」を使えば開発向けのメモ書きもキレイに置いておけますし、付箋以外にも使えるパーツが用意されています。

変数を使って細かい調整を行う

例えば「Line」を使うときにスタイルを変更すると線の種類を簡単に変更できます。

使うだけでも便利ですが、FigmaのVariablesなどの機能をうまく使っているので、データの作り方としても参考になります。

汎用的なデータを作るための参考としても1度見てみるのはオススメです。