XD PluginのPanel UIの学習も兼ねて、フロー図とかに使う線を引いてくれるプラグインを作り始めた。HTML+CSS＋JSの知識だけで普段使いの道具を作れるのが楽しい。XDのレスポンシブ設定により矢印の矢のサイズを保ったまま変形してくれる。 #XDPlugin #AdobeXD pic.twitter.com/KYCDag6DXW — 鈴木慎吾 / TSUMIKI INC. (@shingo2000) December 12, 2019 Powerpoint や Keynote でフロー図をつくる際によく使う、矢印のついたコネクタのオブジェクトを作成するプラグインです。このプラグインにPanel UIというプラグイン用のUIを利用してみたのですが、想像以上に便利で面白いものでした。この記事ではPanel UIを活用したXDプラグインの作り方を解説します。 Panel UIの登場

昨年10月に公開されたAdobe XD プラグインですが、XDの機能追加とほぼ同時にAPIもアップデートを重ねています。 今回は2019年6月のアップデート(XD 21.0)で公開された、プラグインパネルのAPIについて、Githubで公開されているサンプルコードを見ながら解説します。 プラグインパネルとは？ これまでの｢アセットパネル｣｢レイヤーパネル｣に加えて、｢プラグインパネル｣が追加されました。プラグインパネルは、XDのプラグインの一覧やプラグインのインタフェースを表示するパネルです。プラグインボタンを押下するとXDの画面左側に表示されます。 Adobe XDのプラグインパネルの例(Icondrop):画面左側に表示されているパネルがプラグインパネル プラグインパネルとダイアログとの違い パネルは作業中も表示可能（モードレス）なので、選択中のオブジェクトに応じてパネルのUIを更新す

はじめてのAdobe XDプラグイン開発(2018/12/13開催)の登壇資料です アートボードに配置されたオブジェクト（矩形、楕円、テキストなど）の操作に必要なScenegraphと、ユーザーからの入力を受け取るDialogの作成時のコツについて説明します。 対象 Adobe XDのプラグイン開発に興味がある方 ※ JavaScriptの知識が少し必要 テーマ 2018年10月からAPIによる機能拡張が可能になったAdobe XD。そのプラグイン開発の手順について紹介します。 ソースコード https://github.com/yoshikinoko/XDPluginMeetupJapanRead less

AdventCalender2020「ちょっとした工夫で効率化！01【PR】パソナテック」の19日目です。日付が変わってしまいましたが、寝てないのでまだ19日ということで良しとします。 （テーマは、ちょっとした工夫ですが、「ちょっとした工夫」に収まってないかもしれないので、工夫の導入記事ということで、予めご了承ください。） エディタをカスタマイズや拡張機能を作ることで、日常の作業効率が上がるのは、デベロッパーの皆さんには当然の発想です。また、ブラウザの拡張機能なども、Webマーケティングの業務補助をするツールなどもよく使われるかと思います。拡張機能のような小技で作業効率を上げるというのはエクセルのマクロが、そういった分野のパイオニアといったところでしょうか。 本記事で、デザインツールでの拡張機能/プラグインを作り方を紹介し、ビジネスロジックを設計しているフロントエンド開発者や、LPなどのH

WebページやスマホアプリのUIデザインで、一貫したコンポーネント・テーマ・カラー・タイポグラフィ・アイコンなどを作成・管理できるAdobe XDの無料プラグイン「Spectrum」を設計したAdobeのデザインシステム・デザインマネージャーの解説記事を紹介します。 Spectrum for Adobe XD: Adobe’s design language in its experience design tool by Jacob Frank 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Spectrumの機能と開発した経緯 Spectrumを使用した結果 Spectrumのインストール方法 Spectrumの今後の機能 ご意見をお聞かせください はじめに アドビのデザインシステムであるSpectrumは、5年前

Adobe XD 待望の新機能！自由自在な動的レイアウトを実現するスタックとスクロールグループの使い方 Adobe XDの2020年6月の大型アップデートでは、目玉機能として「スクロールグループ」と「スタック」が搭載されました。 「スクロールグループ」はアートボードとは別のスクロール領域を定義できる機能、「スタック」はオブジェクトの並び順と間隔を管理できる機能です。 とくに「スタック」は使いこなせるかどうかで、デザイン制作のスピードがかなり変わってくるのでしっかりと覚えておきましょう！ スクロールグループの使い方 スクロール領域を定義できる「スクロールグループ」が登場しました。「水平方向にスクロール」「垂直方向にスクロール」「水平方向と垂直方向にスクロール」という3種類の方向を設定できます。 「水平方向にスクロール」はカルーセルのような、画面幅以上の要素を横スクロールさせるのに便利です。

Adobe XDステート機能を使いこなそう！ ホバー、カルーセル、ハンバーガーメニューの効率的な作り方 AdobeXD2019年11月の大型アップデートで「ステート機能」が登場し、リッチなインタラクションを作成しやすくなりました。従来はアートボードを複数枚組み合わせて表現するしかなかったのですが、ステート機能の登場によって簡単にできるようになっています。 今回はホバーボタン、スライダー、ハンバーガーメニューなど実例を交えながら、ステート機能の基本と一歩進んだ使い方を紹介します。AdobeXDは使っているけどステート機能は触ったことがない、ステート機能をイマイチ使いこなせてないという方はぜひご覧ください。 ステート機能の基本 簡単にステート機能について振り返っていきます。 ボタンなどの要素は、ユーザー操作によって状態が変わることがあります。たとえば、一般的な「いいねボタン」であれば最低でも「

Adobe XDの2018年10月のアップデートで使えるようになった新機能「自動アニメーション」「ドラッグジェスチャー」を使用して、Webサイトやスマホアプリで見かけるUIのさまざまなアニメーションやインタラクションの実装を紹介します。 Adobe XDの「自動アニメーション機能」はかなり簡単にさまざまなエフェクトやトランジションが短時間で実装できます。さらに「ドラッグジェスチャー」を加えることで、タッチデバイスのドラッグ操作をシミュレートでき、自動アニメーション機能をさらに一歩進めることができます。 Adobe XD: putting auto-animate to the test 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ここで紹介したAdobe XDのファイルは、記事の最後でまとめてダウンロードできます。 また、こ

The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。

12/3にパシフィコ横浜で開催された「AdobeMAXJapan」に合わせて、Adobe XD用の便利なプラグインが登場しました！ プラグインは通常、英語圏内に特化されたものが多いですが、「Quick Mockup」はなんと日本のデザイン現場向けに特化されたもので、簡単にワイヤーフレームやモックアップが作成できます。 日本のUXデザイン用に開発されたAdobe XD用プラグイン「Quick Mockup」 Quick Mockupの特徴 Quick Mockupのインストール Quick Mockupの使い方・動画 Quick Mockupの特徴 Quick Mocukupは、日本のデザイン現場で使用頻度の高いUI要素のサンプルから簡単にワイヤーフレームやモックアップを作成、さらにスタイル、ステート、コンテンツのカスタマイズで簡易プロトタイプをすばやく簡単に作成できます。 Quick Mo

The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。

Adobe XDユーザーグループの管理人をされている方が、勉強会でのLT登壇者をわりと必死で募集していました。まずは周りのXDユーザー数名に声をかけたのだけど、ダレも行くと言わないので、ジブンで登壇してきました。初心者なのに。ちょうどネタもあったのでね。 でももうネタ切れです。XDを使って何かをクリエイトしているわけでもないので、XDのデザインカンプに対する愚痴くらいしか話すことはないワケなのですよ。 次回から、みんな来てね。初心者のヒトも、イロイロ学べて楽しいと思います。 話してきた内容は「画像として書き出すテキストは、とにかく全部アウトライン化しといてね！アウトライン化のコマンドはCtrl+8ですから！」ということに尽きます。

2018年10月15日にリリースされたAdobe XD 13から誰でもXDの機能を拡張するプラグインを開発できるようになりました。開発者はXDの拡張APIを使い、JavaScriptでプラグインを開発し配布ができます。今回は定番のHello Worldを表示する簡単なプラグインを作りながら、開発方法の概要について解説します。 Adobe XDのプラグインはJavaScriptで作れる XDプラグインの開発言語 開発はJavaScriptで行います。サポートされるJavaScriptは、ES5、ES6（ES2015）を含むモダンブラウザで動作するバージョンです。また、UIはHTMLとCSSのサブセットを使って作成でき、ReactやVueも使えます。 拡張APIを使うことで以下のようなプログラム操作が可能です。 オブジェクトのプロパティ変更 キャンバスへのアイテム追加/削除 ユーザーアクション

2019年5月のアップデートでシンボルが廃止され、代わりに「コンポーネント」が実装されました。従来のシンボルに比べ柔軟なパーツのバリエーション作成が可能で、またドキュメント間での同期が行えるため複数人での作業やアセットの再利用がより効率的にできるようになりました。 従来のシンボルの機能と課題 シンボルは、ドキュメント内に同じ要素を繰り返し配置する場合に使用します。要素をシンボル化して配置することで、後からまとめて変更できるのが特徴です。シンボル内の要素の位置や大きさなどを変更すると、シンボルのコピーすべてに反映されます。 またテキストとビットマップは個別に設定可能で、たとえばボタンのテキストだけを変更するといったことができます。しかし、マウスオーバーや非アクティブ時のデザインで色や線を変更したい場合は変更が同期されてしまうため、別のシンボルとする必要がありました。 コンポーネントではこうい

やっとかめだなも！ LIGのWeb事業部でマネージャーをしているちゃんれみです！ 最近、周りの人からAdobe XDについて質問されることが増えてきました。すっかり「XDおばさん」の名が定着してきたようです。 Adobe XDとは Adobe XDは、Webアプリやモバイルアプリ用のユーザー操作性をデザインし、プロトタイプ化するためのベクターベースのツールです。ワイヤーフレーム、ビジュアルデザイン、インタラクションデザイン、プロトタイプ化、プレビュー、共有間の切り替えが簡単な、オールインワンの強力なツールです。（公式サイトより） ところが先日公開されたAdobe XD対談記事をシェアしたところ、意外にも「XDがんばって覚えねば……」「XDそろそろやらなきゃ」というコメントがいくつか寄せられ、まだまだAdobe XDを使ったことない方がいるんだな、と感じました。今回はそんなAdobe XDビ

ウェブサイトやアプリのつくり方が多様化するいま、素早くデザインを作成し、ページ遷移など実際の動きまで確認できることが大切になってきていきます。先日、日本語版もリリースされたUXデザインツール Adobe XD は、そんな面倒な作業をスピーディーに行うことができるツールと言えるでしょう。 今回は、海外デザインブログSmashing Magazine で公開されていた「Quick UX Prototyping With Adobe XD Shortcuts (PDF Cheat Sheet)」より、Adobe XD の覚えておきたい便利なショートカット機能をまとめてご紹介します。これらの機能を習得することで、制作効率をグッとアップすることができるようになります。

この記事では、Adobe XDにインストールしておくことで、デザイン制作をより快適にしてくれる無料プラグインをまとめてご紹介します。 実際にAdobe XDにインストール、使用してみて便利だったプラグインのみを厳選しています。プラグインを利用して、制作スピードを爆速にしてみませんか。 コンテンツ目次 1. プラグインが利用可能に 2. Adobe XDプラグインのインストール方法 3. Adobe XDプラグインの使い方 4. おすすめ無料プラグイン（デザイン効率化） 5. おすすめ無料プラグイン（コンテンツ生成） 6. おすすめ無料プラグイン（描画デザイン系） 7. おすすめ無料プラグイン（コラボレーション・ハンドオフ系） 8. ショートカット機能で作業効率をさらにアップ Adobe XDでプラグインが利用可能に Adobe XDは定期的にアップデートが行われており、昨年10月にリリース

レスポンシブサイズ変更とは？ レスポンシブサイズ変更とは、WEBコンテンツの様々なデバイス表示に合わせたリサイズなどの問題解決のために、AdobeXDが搭載している機能です。 デザインモードのプロパティインスペクターの中にあり(画像の赤枠内)、こちらから「自動」もしくは「手動」でコンストレイント※を指定します。 より詳しい画面説明はAdobeサポートページをご確認ください。 ※コンストレイントとは？ コンストレイントとは、レスポンシブサイズ変更のルール指定を指します。 AdobeXDでは自動で指定され、手動でもルールを指定することできます。 コンストレイントを指定するとコンポーネントの下記の動きを制御することができます。 固定/可変幅　━ 固定/可変高さ　┃ 固定/可変左マージン　┣ 固定/可変右マージン　┫ 固定/可変上マージン　┳ 固定/可変下マージン　┻ レスポンシブサイズ変更設定の

こんにちは、まちえり（@macheri_me）です。Adobe XD Advent Calendar 3日目に参加します！ 今回は私がXD初心者だった頃の失敗談から学ぶ「XDのデザイン制作で、はじめに気を付けるべきデータ構成」について書きます。知っておくことでXDデザイン制作のトラブル回避になります！ こんな人にオススメの記事です ・デザイナー問わずこれからAdobe XDに挑戦してみたい人 ・Adobe XDを使い始めてある程度作れるようになった人 見た目は同じでもまったく違う機能たちXD初心者の頃は簡単ゆえにスピード重視でサクサク作っていました。その結果、制作物の規模が大きくなった際に「こんなことになるならあの時この機能で作っておけば...」と後悔しながら作り直すことも多々あり。。 見た目が同じでも作りが違う2つの構成を比較しました。それぞれの方法で作るとどんな違いがあるでしょうか？