ライブラリを利用する

THEME

ライブラリを使うと、複数のデザインファイル間でコンポーネントやスタイルを共有して再利用したり、一度に更新内容を反映したりできます。

利用可能なプラン・権限

ライブラリは全プランで利用できますが、スタータープランには制限があります。また、ライブラリの公開には編集者の権限が必要です。

ライブラリの公開

ライブラリの公開は、ライブラリモーダルから行います。ライブラリとして公開したいデザインファイルを開き、左サイドバーからアセットタブをクリックします。アセットパネルの右上に表示された「チームライブラリ」アイコンをクリックすると、ライブラリモーダルを開けます。

@div:figure @divend

「現在のファイル」にある「公開」ボタンをクリックすると、現在開いているデザインファイルのコンポーネントやスタイルをライブラリとして公開できます。どのコンポーネントやスタイルを公開するかは、個別に選択できます。最後に「公開」ボタンをクリックすると、ライブラリの公開は完了です。

@div:figure @divend

公開したライブラリは、タブやファイルブラウザで表示されるアイコンが水色から灰色に変わります。

@div:figure @divend

ライブラリ内だけで使っている、または作業中である、などの理由から公開したくないコンポーネントやスタイルがある場合、一部だけを公開しないようにできます。公開したくないコンポーネント、またはスタイルの名前の頭に「.」（ピリオド）または「_」（アンダースコア）を追加します。これらの文字で始まるコンポーネントやスタイルは、ライブラリとして公開されません。

@div:figure @divend

公開中のライブラリを利用する

公開したライブラリは、チーム内のほかのデザインファイルから利用できます。新しいデザインファイルを作成し、アセットパネルからライブラリモーダルを開くと、公開中のすべてのライブラリが表示されます。

@div:figure @divend

ライブラリ名をクリックすると、ライブラリで公開されているコンポーネントやスタイルの中身を確認できます。

@div:figure @divend

ライブラリ名の左横にあるトグルスイッチをクリックしてONにすると、該当のライブラリを利用できます。

@div:figure @divend

ライブラリを有効にすると、サイドバーから該当のライブラリ内のコンポーネントやスタイルにアクセスできます。左サイドバーのアセットパネルではライブラリに含まれるコンポーネントを選べます。同様に、右サイドバーの各種スタイル（色、テキスト、エフェクトなど）ではライブラリに含まれるスタイルを選べます。

@div:figure @divend

@div:figure @divend

ライブラリを更新する

ライブラリの公開後、コンポーネントやスタイルを追加・削除・変更したとき、そのライブラリを用いているデザインファイルに更新を反映するためには、再度ライブラリを公開する必要があります。ライブラリの更新をしたのち、公開時と同様にライブラリモーダルを開くと、「*件の変更を公開」ボタンが表示されます。

@div:figure @divend

同ボタンをクリックすると、ライブラリの変更内容が一覧されます。必要に応じて、ライブラリの変更内容について説明を加えたり、チェックボックスによって変更の有無を選んだりできます。「公開」ボタンをクリックすると、ライブラリの更新が公開されます。

@div:figure @divend

ライブラリを更新すると、そのライブラリが使われているデザインファイルを開いたとき、ライブラリの更新通知が表示されます。

@div:figure @divend

通知自体もしくは「確認」ボタンをクリックすると、ライブラリの更新内容を一覧できます。「無視」ボタンをクリックすると、更新を実施せずに無視します。更新を無視すると、次回デザインファイルを開いたときに再度更新通知が表示されます。

更新内容の一覧では、各コンポーネントやスタイルをクリックすることで、それぞれの更新内容を詳しく確認できます。「すべて更新」ボタンをクリックすると、ライブラリのすべての更新内容がデザインファイルに反映されます。

@div:figure @divend