簡単で便利！Frontifyで作成したガイドラインをAdobeXDで使う
簡単にスタイルガイドが作れて管理も楽なWebサービスである
FrontifyのAdobe XDのプラグインが出たので使ってみました。
このプラグインのローンチは2019年8月でしたが、私がXDとFrontifyを使い始めたのがちょうどその頃で、自分自身がまだ初心者でしたし、日本語のドキュメントやブログ記事などが出ていなかったので、利用を後回しにしていました。
しかしふと使ってみたら、本当に簡単ですぐに使えてとても便利だったので使い方を紹介します。
Frontifyとは
公式サイトの言葉を拝借しますとオールインワン・ブランドマネジメントプラットフォームです。何やらピンとこない人のために自分の言葉で説明しますと、ブラウザ上で簡単にデザインガイドラインの作成・管理ができるWebサービスです。
ガイドラインジェネレータにFrontifyを選ぶ理由は便利さと簡単さにあります。
・直感的で編集も利用もしやすいUI
・ブラウザ上でポチポチ編集するだけなので簡単
・シェア、共同編集に優れている
・テンプレに収まらない場合は文章としてドキュメントに残せる
これからデザインガイドラインを作ってみようかな、でも難しそうだな・・・と思ってる人に一番におすすめしたいガイドライン作成サービスです。
さらにこれらのメリットに加え、Adobe XDでのプラグインがローンチされ、より利用しやすくなりました。
Frontifyプラグインでできること
FrontifyのプラグインをAdobe XDにインストールすれば
Frontifyで作成したガイドラインをAssetとして取り込むことができます。
This is it!という気持ちのガイドラインのプラグインです。
・カラー
・タイポグラフィ
・アイコンライブラリ
・メディアライブラリ
・ロゴライブラリ
以上のものがアセットとしてAdobe XDに取り込めます。
デザインの質を担保するためには、決めたガイドラインの通りの
カラーやタイポグラフィを使ってデザインしたいし、共有して使って欲しいですよね。
アセットパネルで取り込んだものをクリックすれば、即座にXDで作成中のデザインに反映されます。
プラグインのインストールの仕方
Adobe XDにプラグインをインストールしたことはありますか？
私は一度しかありませんでした。（そんな私でも簡単にこのプラグインは使えました。）
準備
Frontifyのアカウント作成しておく
Frontifyでスタイルガイドを作成しておく
Step1.
XDを立ち上げてサイドバーの上から２番目の「アドオン」を選択し、
「プラグイン」のボタンを押す。
Step2.
「参照」タブもしくは虫眼鏡マークをクリックして検索ボックスで「frontify」と検索し、frontifyをインストール。これでインストールは完了。
Step3.
次にFrontifyとXDの接続を行います。
まずはXDでファイルを開くかファイルの新規作成をして、
「プラグイン」メニューから「Frontify」を選択。
Step4.
XDのサイドバーに「signin.title」と出てきます。
ここにインポートしたいFrontifyのURLを入力します。
入力するのはhttps://company-********.frontify.com/の部分ですね。
入力したら「general.get_started」をクリックしてください。
Step5.
Frontifyのページが立ち上がり、XDがアクセスを求めている画面が表示されますので「Allow access」をクリックしてください。
Step6.
Frontifyの画面に戻り「signin.ready」ボタンをクリック。
サインインされていない場合、ここでサインインしておく必要があります。
これで、FrontifyとXDの連携ができました。
Frontifyで設定したアバターが丸く表示されます。「general.select」ボタンを押してみましょう。
Step7.
少しローディングしたら、カラーアセットパネルが表示されます。
いかがでしょうか。アセットが読み込めています。
カラーアセットの隣りの「T」マークを押せばテキストのアセットが表示されています。
あとはいつもの通り、XDのアセットとして利用することができます。
いかかでしょうか。とても簡単ですよね。
残念なことに無料プランではこのプラグインを使ったインポートが共同編集者の３人までしかできません。４人以上で共有する場合は有料プランへの登録が必要になりそうです。
とは言え、ブラウザのリンクを知っていれば誰もが使用できるものではないと言うことは、セキュリティがしっかりしていると言えます。
さいごに
私自身もまだ無料プランで利用し始めたばかりなので、有料プランを使っている方やもっと便利な使い方をご存知の方がいましたら是非教えてください。