見出し画像

簡単で便利!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を立ち上げてサイドバーの上から2番目の「アドオン」を選択し、
「プラグイン」のボタンを押す。

画像1

Step2.
「参照」タブもしくは虫眼鏡マークをクリックして検索ボックスで「frontify」と検索し、frontifyをインストール。これでインストールは完了。

画像7

Step3.
次にFrontifyとXDの接続を行います。
まずはXDでファイルを開くかファイルの新規作成をして、
「プラグイン」メニューから「Frontify」を選択。

画像3

Step4.
XDのサイドバーに「signin.title」と出てきます。
ここにインポートしたいFrontifyのURLを入力します。
入力するのはhttps://company-********.frontify.com/の部分ですね。
入力したら「general.get_started」をクリックしてください。

画像4

Step5.
Frontifyのページが立ち上がり、XDがアクセスを求めている画面が表示されますので「Allow access」をクリックしてください。

画像5

Step6.
Frontifyの画面に戻り「signin.ready」ボタンをクリック。
サインインされていない場合、ここでサインインしておく必要があります。
これで、FrontifyとXDの連携ができました。
Frontifyで設定したアバターが丸く表示されます。「general.select」ボタンを押してみましょう。

画像6

Step7.
少しローディングしたら、カラーアセットパネルが表示されます。
いかがでしょうか。アセットが読み込めています。
カラーアセットの隣りの「T」マークを押せばテキストのアセットが表示されています。
あとはいつもの通り、XDのアセットとして利用することができます。

画像7

いかかでしょうか。とても簡単ですよね。
残念なことに無料プランではこのプラグインを使ったインポートが共同編集者の3人までしかできません。4人以上で共有する場合は有料プランへの登録が必要になりそうです。
とは言え、ブラウザのリンクを知っていれば誰もが使用できるものではないと言うことは、セキュリティがしっかりしていると言えます。

さいごに

私自身もまだ無料プランで利用し始めたばかりなので、有料プランを使っている方やもっと便利な使い方をご存知の方がいましたら是非教えてください。


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

2
電子機器と電子音楽と世界が好きです。 あとかわいい顔した動物のイラストとかが好きです。 Sumi(ko) Ttm Ymsk
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。