最新版で比較するAdobe XDとFigmaの違い - デザイン機能編 - ICS MEDIA
近年、UI/UXデザインで活躍するデザインツールとしてAdobe XD、Figma、Sketch、InVisionなどさまざまなツールが登場しています。本記事では日本での人気が高い「Adobe XD」と近年盛り上がりを見せている新進気鋭のデザインツール「Figma」にフォーカスして機能の紹介、比較をします。 UI/UXデザインツールには、大きく分けてデザイン機能とプロトタイプを作成し共有する機能の2種類の機能があります。今回の記事では、デザイン機能に重点を置いて紹介します。 Adobe XDを使っているけどFigmaも気になっている方や、その逆という方のデザインツール選定のヒントになればと思います。 Adobe XDとは？ Adobe XDとは、2017年に正式リリースされたUI/UXデザインツールです。IllustratorやPhotoshopと操作感が似ておりAdobeユーザーであれば
Design Systems Semantic UI Kit for Adobe XD
Designed with love, precision and great attention to detail. You will not find clutter or useless features in this kit. It's been made with great attention to detail, focused on ease-of-use over flashy mockup examples. All assets, including components, are properly named, well-structured and instantly available through search in the assets panel. All the components in this UI Kit are based on the
VS CodeのAdobe XD用拡張機能が登場！デザインシステムにもとづきコード出力と補完が可能に - ICS MEDIA
VS CodeのAdobe XD用拡張機能が登場！ デザインシステムにもとづきコード出力と補完が可能に Microsoftが開発を行っている無償のエディター「VS Code」にAdobe XD用の拡張機能「Adobe XD extension」が登場しました。 この拡張機能を使うことで、Adobe XD上で作成したデザインアセットをVS Code上で参照・編集できるようになります。デザイナーとエンジニア間の溝を埋めることができ、デザインシステム構築のハードルが下がるでしょう。 今回の記事では、「Adobe XD extension」の活用方法を紹介します。コーディングの際に活躍する拡張機能ではありますが、Adobe XDを使ったデザイン段階でのひと工夫も必要になりますので、デザイナーの方も理解しておくとプロジェクトの進行がスムーズになるでしょう。 「Adobe XD extension」と
Xdで作るボタンアニメーション再配布 - ロゴやウェブサイトなどをデザインする東京のデザイナー「by」
以前twitterにて配布したXdで作るボタンのホバーアニメーションですが、予想よりも多くの方にDLいただきました。
フロー図を作成するのに便利なAdobeXDプラグイン『Flowkit』 | AdobeXDプラグインまとめ
フロー図を作成するのに便利なAdobeXDプラグイン『Flowkit』WebデザインUIデザインUXデザインオブジェクト同士を矢印等でつなげてくれる便利なプラグインです。 公開日：2020/03/09最終更新日：2020/03/09 1.Flowkitのインストール方法メインメニュー＞プラグイン＞プラグインを見つける をクリックします。 検索ボタンより、Flowkitを検索しインストールしてください。 2.Flowkitの使い方今回はこのような図形をフロー図にします。 プラグインパネルを開く（Mac：Shift＋Com＋P Win：Shift＋Ctrl＋P）もしくはメインメニュー＞プラグインからFlowkitを選択します。 繋げたい図形と図形を選択し、直線を選択します。 矢印が表示されました。今回は矢印ではなくて良いため赤枠を”無し”に変更してください。 同じ要領で他の図形を繋げていきます
Adobe XDノススメ～この1年のアップデートのハイライト～ | マークアップ かめ壺
2020年1月に行われたAdobe XD ユーザーグループ名古屋 vol.4で、「アプデ情報セッション」に登壇させていただきました。Adobeさんの公式ブログを読んでその内容を報告するだけ、とゆー他人の褌で相撲を取れる美味しい登壇枠ですw こういう機会でもないとなかなか勉強したがらないジブンの尻を叩くつもりで担当させていただきましたが、本来は、発表内容が特にない方（=筆者自身もそうなのだが）にも登壇の機会を得ていただくために設けられた枠です。XDのことをもっと知りたい！という初心者の方こそ、次回以降、是非ともチャレンジしてみてください。ヒトの話を聞くだけよりも、知識が頭にこびりつきます！ この1年で、Adobe XDが更に更に使いやすいWeb制作ツールとして進化してきました。登壇で発表した内容を元に、この1年の間に追加されたステキな新機能、そしてコーダー的にしんぱいな新機能などなど、筆者の
デザイントークンを使用する
Adobe XD ユーザーガイド はじめに Adobe XD の新機能 よくある質問 Adobe XD でのデザイン、プロトタイプ、共有 必要システム構成 ハードウェアとソフトウェアの要件 Adobe XD、Big Sur、Apple Silicon | macOS 11 ワークスペースの基本 Adobe XD でのアプリ言語の変更 UI デザインキットへのアクセス Adobe XD のアクセシビリティ ショートカットキー ヒントとテクニック デザイン アートボード、ガイド、レイヤー アートボードの基本を学ぶ グリッドとガイドを使う スクロール可能なアートボードの作成 レイヤーの操作 スクロールグループを作成する シェイプ、オブジェクト、パス オブジェクトの選択、サイズ変更および回転 オブジェクトの移動、分散および整列 オブジェクトのグループ化、ロック、複製、コピー、および反転 オブジェク
作って覚えるAdobe XDの便利機能 5つ
2022年4月27日 Webデザイン, XD プロトタイプやデザインの制作時にAdobe XDを使っている人も多いでしょう。Adobe XDは新しい機能がちょこちょこ追加されているので、定期的にチェックするといいですね。今回はひとつのページを作成しながら、覚えておくと便利な機能を紹介します。 1. 「スクロールグループ」で横スクロールを表現 「スクロールグループ」では表示範囲外のコンテンツをスクロール操作によって表示できる機能です。横にスクロールするカルーセルや、多方向に動かせるGoogleマップの埋め込みなどに使えますね。今回は横にスクロールできるイメージギャラリーを設置します。 まずはリピートグリッドで画像を表示させるボックスを用意しましょう。別途用意していた画像たちをボックスにドロップすれば画像が表示されます。 このままだと画面の外にある画像は表示されないので、「水平方向のスクロール
Webサイトのワイヤーフレームの作り方 ― FigmaやXDを開く前の３ステップ｜重松佑 / Shhh inc.
先日1500ページくらいのやや大きめなコーポレートサイトのワイヤーフレームをディレクター、デザイナー、テクニカル担当、アシスタントという職能や経験もバラバラのチームで共同作成しました。みなが足並みを揃えて進めていけるようにワイヤーフレームの作り方を要素分解して、共通理解を持って作業をできるようにしました。どのような手順や考え方で進めていったのかをnoteにも記しておきます。 0. 情報設計とトンマナ設計を分けて考える Webサイト制作ではデザイン着手前の工程でワイヤーフレームと呼ばれるWebサイトの設計図のようなものを多くの場合で作ります。デザインとの違いは何かというと、上図のようにワイヤーフレームでは「情報設計」を主として扱います。そのためトンマナ（トーン&マナー）と呼ばれるWebサイトの印象や雰囲気を形作る要素については考えず、Webサイトに掲載する情報について決定することが目的となり
XDでテキストを目視で検索と置換がしたい
/t5/adobe-xd%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A9%E3%83%A0-discussions/xd%E3%81%A7%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%92%E7%9B%AE%E8%A6%96%E3%81%A7%E6%A4%9C%E7%B4%A2%E3%81%A8%E7%BD%AE%E6%8F%9B%E3%81%8C%E3%81%97%E3%81%9F%E3%81%84/td-p/10352084 Feb 27, 2019 Feb 27, 2019 ページ数が多いwebサイトのWFをXDで作成中にテキストの更新が複数回あるとき、PowerPointやエディターのようにテキスト検索と置換がしたいと思っています。 上記のような機能、プラグインがあったらご教示頂きたいです。 〇目的 ・XDでWF作成中
テレワークのミーティングに役立つツールが全部無料で使える！Adobe XDの協業用プラグインが登場 -Whiteboard
テレワークで困るのが、複数人でのミーティングやアイデア出しなどの意見を交わす場を持てないことです。Adobe XDの便利なプラグインが登場しました！ Whiteboardの名の通りホワイトボードをはじめ、ブレインストーミング、カードソーティング、ワイヤーフレーム、フローチャート、マインドマップなど、Webサイトやスマホアプリのミーティングで使用するさまざまなツールが簡単に利用できます。 複数人での使用はもちろん、個人で使用するのにも便利です。 Adobe XDのビジュアル協業プラグイン「Whiteboard」 Adobe XDのプラグイン「Whiteboard」とは Adobe XDのプラグイン「Whiteboard」のダウンロード Adobe XDのプラグイン「Whiteboard」の使い方 Adobe XDのプラグイン「Whiteboard」とは Adobe XDはAdobeユーザーは
Adobe XDステート機能を使いこなそう！ - ホバー、カルーセル、ハンバーガーメニューの効率的な作り方 - ICS MEDIA
Adobe XDステート機能を使いこなそう！ ホバー、カルーセル、ハンバーガーメニューの効率的な作り方 AdobeXD2019年11月の大型アップデートで「ステート機能」が登場し、リッチなインタラクションを作成しやすくなりました。従来はアートボードを複数枚組み合わせて表現するしかなかったのですが、ステート機能の登場によって簡単にできるようになっています。 今回はホバーボタン、スライダー、ハンバーガーメニューなど実例を交えながら、ステート機能の基本と一歩進んだ使い方を紹介します。AdobeXDは使っているけどステート機能は触ったことがない、ステート機能をイマイチ使いこなせてないという方はぜひご覧ください。 ステート機能の基本 簡単にステート機能について振り返っていきます。 ボタンなどの要素は、ユーザー操作によって状態が変わることがあります。たとえば、一般的な「いいねボタン」であれば最低でも「
[UI/UX] 手間をかけずにコーディングを効率化するデザインシステムの活用法 | Adobe XDのコンポーネント機能とBootstrapの連携 | Adobe MAX Japan 2019
デザインシステムは大規模案件や長期運用するサービス以外では使いにくいと感じる方もいることでしょう。 そこで、このセッションでは小規模なサイト制作でも役に立つ簡易版のデザインシステムとして、XDのコンポーネント機能とフレームワークを連携させることにより、デザインからコーディングまでの作業を効率化する手法を実例とあわせて紹介します。 スピーカー： 久保 知己 / 株式会社まぼろし ▼Adobe MAX Japan 2019 ビデオアーカイブ https://www.youtube.com/playlist?list=PLF_lcvNhVWn9JG7K3NrtfzYlsCFVRTGQR ▼Adobe MAX Japan https://maxjapan.adobe.com/ -------------------------------------------------
![[UI/UX] 手間をかけずにコーディングを効率化するデザインシステムの活用法 | Adobe XDのコンポーネント機能とBootstrapの連携 | Adobe MAX Japan 2019](https://cdn-ak-scissors.b.st-hatena.com/image/square/def1e1ef71407c87689c51a8c30a9f38ffe4080e/height=288;version=1;width=512/https%3A%2F%2Fi.ytimg.com%2Fvi%2F6iPBuUjWVM4%2Fhqdefault.jpg)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Docs 2 Design
https://designwithfocus.com/
Adobe XDをもっと使いこなすヒント！ 第45回 XDから画像を書き出す
Adobe XDの使い方がこれでよく分かる！Adobe公式、ワイヤーフレーム・プロトタイプのチュートリアルファイル
アプリまたはwebサイトのレイアウトとデザイン |
【2021年完全保存版】AdobeXDを使いやすくするプラグイン厳選12選【UI/UXデザイナー必見！】
iOS 12に使用されている全てのUI要素・スクリーンが収録されたAdobe XD, Sketch, Figma用の無料デザイン素材
