皆さんこんにちは！菊地です。さて、本日もXDの機能紹介をしていきたいと思います。と、今日はちょっとニッチな使い方。表題の通りXDで円グラフを作る方法について。先日Adobeのエバンジェリストである湯口りささんがFacebookにてツイートを共有してくれたのですが、そちらが下記の正確な数値で出す円弧の書き方。 Alexander Getlisonさんのツイート “A very nice tip to make a loading circle with accurate look in Adobe XD. Here is at 66%, so x = 66. Try it. @AdobeXD #AdobeXD #adobexd_study #design #ui #prototyping… https://t.co/RKgR1g0i1J” Adobe Community Evangelist

先週リリースされたばかり、iPhoneやiPadに採用されているiOS 14のデザイン用のテンプレートやUI要素が揃ったAdobe XD用の素材を紹介します。 素材はAdobe XD用だけでなく、Photoshop用やSketch用も揃っており、9月に新しくなったSF Symbols 2もダウンロードできます。 Apple Design Resources UIデザイン素材は、ページのちょい下からダウンロードできます。 iOS 14のAdobe XD用の素材は先週リリースされたばかりで、Photoshop用とSketch用、そしてiOS 13もダウンロードできます。

昨日から開催されているAdobe MAX（10/23まで）と同時に、Adobe XDの最新アップデートがリリースされました！ 今までになかったまったく新しい新機能をはじめ、さまざまな機能の強化、共同編集機能の正式版、中でもCCライブラリ強化とVS Code連携は、ワークフローがさらに改善されると思います。 Adobe XDの新機能 まずは、Visual Studio Code連携。 VS Codeのプラグインとして無料で利用でき、デベロッパーはデザイントークンを数秒で作成し、Web、iOS、Android、Flutterなど複数のプラットフォームに向けてアプリをコンパイルすることができます。コーディング中は、関連するドキュメントやコードスニペットに素早くアクセスすることができます。 プラグインのインストールは、下記ページから。 ※2020年10月20日リリースのAdobe XD34でご利用

XDでアートボードを内包するオブジェクトに合わせてリサイズしたいという、個人的欲求からプラグインをつくりました。Sketchでいう「Resize to Fit」です。 インストール最新のXDがインストールされていれば、次のURLから直接インストールできます。 プラグインマネージャからインストールする場合は、「Resize Artboard」で検索すると表示されると思いますので、［Install］ボタンをクリックしてください。 使い方アートボードを選択してプラグインを実行すると、アートボード内にあるオブジェクトに合わせてアートボードをリサイズします。ショートカットは「Control ＋ F」です。 動作はこんな感じです。 動作としては、次の3つがあります。 ・アートボード内のオブジェクトに合わせてリサイズ ・アートボードの幅や高さを固定してリサイズ ・現在の幅を維持したまま高さのみリサイズ（

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年前

2019年2月現在、Adobe XDの書き出し形式はPNG,SVG,PDF,JPGの４種類に対応しています。 XDで書き出す場合は最初にまずこのフォーマットから指定し、その後書き出し先や画質など詳細設定をしていきます。その詳細はフォーマットによって異なるため、それらを上手く使い分ければ書き出し用途別に最適な設定をすることが可能です。書き出しの方法やそれぞれの設定については公式マニュアルを始め様々な情報がまとめられているので、今回はケース別にどのルートで書き出しせば使いやすいのか考えてみました。 デザインを資料化して提出する場合 デザイナーがディレクターに、またディレクターがクライアントに作成したデザインを見せる時はプレビュー機能を使うことが多いと思います。しかし、書き込みによるミーティングを行う場合などは、それに伴いデザインを資料化しなければいけません。 このケースで私がオススメする書き出

こちらは、Adobe XD Advent Calendar 2016の6日目の記事です2017年8月アップデートで、「外観をペースト」機能が搭載されたので一分情報を修正しています。(2017/09/11追記) 今のところあまりAdobe XDだけでアートワークを作るという方は少ないかもしれませんが、Adobe XDのデザインビューの中で最も使いやすい機能の一つにシェイプ同士の組わせ、Illustratorで言うところの複合オブジェクトがあります。 これをしっかり押さえれば、Adobe XDを使ったアイコンやイラストの作成が一気に楽になります。それでは見ていきましょう。 4つのシェイプ描画ツール、4つの演算合成Adobe XDのシェイプを描くツールはシンプルに4つ。これしかないとも言えるし、これだけ覚えればだいたい絵は描けるとも言える絶妙なツール群です。 Adobe XDの演算合成はヘルプに

Adobe XDは、デジタルクリエイティブの現場で役割の異なるディレクター・デザイナー・コーダーが1つのツール上でプロトタイプなどを共有できるようにしたソフトウェアです。画面遷移などレスポンシブのプロトタイプが作れるほか、簡単で軽快な操作感も魅力。XD単体での無料プランがあり、幅広いユーザーが利用できるメリットもあります。 実務面で押さえておきたい基本内容を中心に、Adobe XDについて解説します。 Adobe Creative Cloud （Adobe CC）推奨スペックパソコン販売中！ アドビ株式会社が提供するクリエイティブアプリケーションおよびサービスをサブスクリプション(定期利用契約)方式で利用できるのが「Adobe Creative Cloud」です。定番のPhotoshop、Illustratorをはじめ、20以上の デスクトップアプリやモバイルアプリ、サービスが提供されてい

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

はじめに 先日アメリカのLAで開催されたAdobeMAXにてAdobeXDの新機能が紹介されました！ その中でも 特に目玉機能だと感じたステート機能 （コンポーネント状態）について詳解させていただきます。 まずはステート機能で何が出来るのかを理解するために以下の動画をご覧ください。 Embedded content: https://twitter.com/pino_ebiebi/status/1191955060537860097?ref_src=twsrc%5Etfw そして、こちらの記事はAdobe XD Advent Calendar 2019の２日目の記事です。 ステート機能の基本 動画作りました！ ステート機能の基本が2分で分かる動画を作ったので、まずはこちらを観てみてください！ Embedded content: https://twitter.com/pino_ebiebi

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

ボタンのマウスオーバー、ナビゲーションの開閉、パララックス、スライダー、モーダル等、フォトショップやイラストレーターではできなかった動的なデザインの作成方法を見ていきます。 ホバーデザイン 一番最近追加されたホバー時のデザイン作成方法です。 動画の以下のボタン部分の動きです。 まずは、普通にボタンのデザインをつくります。 次に、ボタンを選択した状態で、以下パネルの「コンポーネント」を追加していきます。 コンポーネント右の（＋）ボタンをクリック 初期設定のステートの右の（＋）ボタンをクリック ホバーステートを選択して追加 追加された「ホバーステート」を選択した状態で、ボタンのデザインを変更します。 「初期設定のステート」を選択すると、デフォルトのデザインが残ってることが確認できると思います。 アニメーションの設定は「プロトタイプ」のパネルで行えます。 プロトタイプへ移動して、初期設定のステー

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

動きの説明に擬音語を使いまくり、実装担当の方々を「？？？」とさせるkanaです。 みなさんはwebやアプリの動きをどのように伝えていますか？動きの名前がわからず、シュバババッ！フワッって出ます！とかこう……こんな！（必死なジャスチャー）とかで伝えていませんか？切り替え時間やタイミングを確認したいとなった時どうしていますか？ なんとなくでもいいので全体的な動きが伝わる簡単でいい方法はないかと思ったことありませんか!!私はあります‼︎︎︎‼︎ そんな時に役に立つのが「AdobeXD CC の自動アニメーション機能」です！！ 今回はXD自動アニメーションで簡単な動きを再現していく方法を紹介していこうと思います。 今回作ってみるもの ・サイト見てるとよくある動き、下からふわっと現れるやつ ・横へスライド ・ロードアニメーション いろんなサイトでよく見る下からふわっと現れる動き 「ふわっ」と早速擬音

2022年4月27日 Webデザイン, XD Webサイトのデザインカンプを画像として作成…というのはもう昔の話。最近ではアニメーションの伴ったWebサイトやアプリばかりで、それを画像で説明するのはなかなか困難です。Adobe XDを使えばアニメーションを含めたプロトタイプが作成できますよ！ ↑私が10年以上利用している会計ソフト！ 作成するもの 今回はAdobe XDを使って、ローディングバーが動き、画面が推移し、スワイプで画像が切り替わる、というアプリのプロトタイプを作ってみようと思います。 Adobe XDの基本的な使い方は過去記事を参考にしてみてください： Adobe XDでWebデザインをしよう！画面作成からページ推移までの手順を紹介 Adobe Experience Design（XD）を使ってアプリのプロトタイプを作ってみた ローディングバーの作成 まずはベースとなる画面とロ