Figma - デザインシステム入門5 - スタイルやコンポーネントを共有ライブラリにしよう／山本麻美

Summary

この動画では、Figmaのコンポーネントを共有ライブラリーとして公開し、チーム内で再利用できるようにする方法を解説しています。まず、作成したコンポーネントを1つのページにまとめ、カテゴリーごとに分類します。次にチームライブラリーとして公開し、別のファイルからそのライブラリーを参照できるようにします。最後に、ライブラリーに新しいコンポーネントを追加したり、既存のコンポーネントを更新した際の反映の仕方について説明しています。

Takeaways

• 😀 コンポーネントを1ページにまとめることで管理しやすくなる
• 👍 フレームを使ってコンポーネントを分類する
• 💡 コンポーネントの名前にカテゴリー名を含める
• 🔨 完成したデザインとライブラリーは別ファイルにする
• 🌟 ライブラリーをチームで共有できる
• ✏️ ライブラリーに新しいコンポーネントを追加できる
• ⚙️ ライブラリーを更新することで、デザインファイルも最新にできる
• 📝 ライブラリー機能はFigmaのみならず、他のツールにもある
• 🐣 小規模なものからライブラリー使い始める
• 🔚 次回はスタイルガイドの作成方法を解説

Q & A

コンポーネントを共有ライブラリーにするメリットは何ですか?

コンポーネントを共有ライブラリーにすることで、チームの他のメンバーが再利用できるようになり、作業の効率化が図れます。

共有ライブラリーのコンポーネントやスタイルを編集するにはどうすれば良いですか?

ライブラリーを編集すると、変更された部分に黒い点が表示されるので、そこをクリックすることで編集できます。

コンポーネントを分類するのにフレームを使うメリットは何ですか?

フレームを使ってコンポーネントを分類することで、assets画面でカテゴリー別に表示されるようになるので、探しやすくなります。

共有ライブラリーで公開できるものは何がありますか?

コンポーネント、テキストスタイル、カラースタイルなどを共有ライブラリーとして公開できます。

共有ライブラリーのアップデートは自動で反映されるのですか?

いいえ、手動で反映ボタンをクリックする必要があります。ファイルごとに更新の有無を確認し、更新があれば反映させることができます。

コンポーネントの名前の付け方に決まりはありますか?

コンポーネントの名前の頭にカテゴリー名を付けることでassets画面での分類がしやすくなりますが、チームの方針によって異なるため、開発チームと相談しながら決めるとよいでしょう。

デザインファイルと共有ライブラリーを分ける方法はありますか?

新しいファイルを作成してデザインファイルの内容を移動した後、共有ライブラリーファイルから不要なページを削除する、という方法があります。

Figma以外に共有ライブラリー機能があるツールはありますか?

Adobe XDやSketchなどにも共有ライブラリー機能が実装されています。基本的な構造や機能はFigmaと同様ですが、細かい仕様は異なります。

共有ライブラリーを作るにあたってのアドバイスを教えてください。

はじめから大規模なものを作ろうとすると大変なので、このビデオのような小規模なものから練習していくことをおすすめします。

このビデオの内容をまとめるとどうなりますか?

Figmaのコンポーネントを共有ライブラリーとして公開し、チームで再利用できるようにする方法を解説しています。分類の方法、編集と更新の仕方など、共有ライブラリーの機能とメリットをわかりやすく説明しています。