AdobeXDでグリッドの繰り返し機能を使用する方法

リピートグリッドは、AdobeXDの最も時間節約の機能の1つです。グリッドの繰り返し機能を使用すると、クリックしてドラッグするだけで、繰り返し要素のセットを作成できます。繰り返されると、繰り返される要素の1つのセットを微調整して、それらの変更を残りの要素全体に即座に反映させることができます。ここにある手順は、この優れた機能を体験するのに役立ちます。

可能であれば、指示に従うのが最善です。画像とテキストを含むサンプルファイルは、LuckyTemplatesCCfilesフォルダーにあります。XDフォルダーを開き、RepeatGrid-Sampleファイルを選択します。次に、次の手順に従います。

ページを垂直方向(下方向)に繰り返したい要素を含むファイルを開きます。前述のように、独自に作成することも、当サイトで提供されているRepeatGrid-Sampleファイルを使用することもできます。

繰り返す項目をすべて選択し、プロパティパネルの「グリッドを繰り返す」ボタンを押します。キーボードショートカット、Ctrl + R(Windows)または⌘+ R(Mac)を使用することもできます。

ハンドルは要素の右側と下部に表示されます。

AdobeXDでグリッドの繰り返し機能を使用する方法

繰り返したい項目を選択し、プロパティパネルの[グリッドを繰り返す]ボタンを押します。

下部のハンドルをクリックして下にドラッグすると、ドラッグするとリピートが自動的に作成されることを確認できます。テンプレートを超えてドラッグし、アートワークを下部の外側に拡張します。AdobeXDでグリッドの繰り返し機能を使用する方法

グリッドの繰り返し機能を使用して、選択したアイテムを簡単に繰り返します。

元のアートに戻り、簡単な変更を加えます。おそらく、タイトルのタイプサイズを変更するか、画像を少し拡大縮小します。この最初の項目に変更を加えると、変更が繰り返し全体に反映されることに注意してください。

これは大幅な時間の節約になりますが、次の手順に従って、繰り返される画像とテキストを簡単に置き換える方法を確認してください。

更新された画像を繰り返しグリッドにインポートする

アイテムを繰り返した後、アプリケーションがより現実的なコンテンツでどのように機能するかを示したい場合があります。繰り返される要素は、アプリが提供している可能性のあるさまざまなデータを表示する機会を提供しません。以下では、元の画像を置き換えるために、画像のフォルダを取得し、繰り返しグリッドの上にドロップします。次の手順に従ってください。

XDがサポートする形式(JPEG、PNG、GIFなど)の画像のフォルダーを見つけます。LuckyTemplatesCCfilesフォルダーにアクセスしている場合は、XDFilesフォルダー内にInsectsという名前のフォルダーがあります。

アートボードを含むXDウィンドウをリピート付きで配置して、アートボードと画像でいっぱいのフォルダーを表示できるようにします。

必ずすべての画像を選択してから、クリックして繰り返しグリッドにドラッグしてください。画像が置き換えられます。AdobeXDでグリッドの繰り返し機能を使用する方法

複数の画像を繰り返しグリッドにドラッグアンドドロップして、画像コンテンツを置き換えることができます。

BridgeアプリケーションからAdobeXDに画像をドラッグすることもできます。

繰り返されるグリッドのテキストを更新する

ここでは、繰り返されるグリッドでテキストを更新する方法を学びます。これは画像の場合とほぼ同じ方法で完了しますが、このプロセスを機能させるには.txt形式が不可欠です。

プレーンテキスト形式(つまり、拡張子.txt)でファイルを保存できる任意のアプリケーションでテキストを作成します。テキストは、メモ帳やWordから生成したり、Googleドキュメントからプレーンテキストとしてダウンロードしたり、他の多くのアプリケーションからエクスポートしたりできます。この例では、当サイトのXD-FilesフォルダーにあるBugtext.txtという名前のサンプルテキストファイルを使用できます。

テキストファイルを含むフォルダーを配置して、ファイルと繰り返されるグリッドが表示されるようにします。

繰り返される画像を置き換えるプロセスと同様に、繰り返されるグリッドテキスト上で.txtファイルをクリックしてドラッグします。テキストはファイルのテキストに置き換えられます。AdobeXDでグリッドの繰り返し機能を使用する方法

繰り返されるグリッド上で.txtファイルをクリックしてドラッグし、テキストを置き換えます。

ここで画像とテキストを置き換えた後の例を見ることができます。

AdobeXDでグリッドの繰り返し機能を使用する方法

新しい画像とテキストで繰り返されるグリッド。

表示領域を超えて拡張した場合は、アートボードの上にあるアートボード名をクリックして選択してください。

下部のハンドルをドラッグして、繰り返しグリッドの長さまで延長します。これにより、プレビューで画面をスクロールできます。点線は、スクロール前にプレビューする領域を表しています。AdobeXDでグリッドの繰り返し機能を使用する方法

クリックしてドラッグし、繰り返しグリッドの表示領域を拡張します。

デスクトッププレビューボタンをクリックしてスクロールし、繰り返されるグリッドの動作を確認します。

Leave a Comment

PDFファイルのセクションをスクリーンショットする

PDFファイルのセクションをスクリーンショットする

Adobe Acrobat CS5のスナップショットツールを使用して、テキストと画像の両方を選択し、PDFファイル内の特定の領域の画像を作成できます。結果は通常、PDFファイル内のセクションのスクリーングラブと呼ばれます。結果は画像であり、あなたのテキストはありません[…]

Photoshop CCでのピクセルの測定、カウント、分析

Photoshop CCでのピクセルの測定、カウント、分析

研究者や科学者向けに設計されたPhotoshopCCの測定機能は非常に強力です。おそらく顕微鏡や望遠鏡から、ほぼすべてを測定し、技術的な画像に含まれるものの数を数えることができます。画像内の要素の正確なサイズがわかっている場合は、ほぼすべてのものを見つけることができます[…]

Adobe CS5Illustratorの液化ツール

Adobe CS5Illustratorの液化ツール

Adobe Creative Suite 5(Adobe CS5)IllustratorのLiquifyツールを使用すると、単純な歪みから複雑な歪みを作成することで、オブジェクトを曲げたり、波打ったり、ねばねばしたり、とがったりさせることができます。Liquifyツールは、オブジェクトに対してあらゆる種類の創造的または奇抜な(見方によって)歪みを実現できます。君は […]

AdobeXDでテキストのプロパティを調整する方法

AdobeXDでテキストのプロパティを調整する方法

Adobe XDプロジェクトにテキストがある場合は、テキストのプロパティの変更を開始できます。これらのプロパティには、フォントファミリ、フォントサイズ、フォントの太さ、配置、文字間隔(カーニングとトラッキング)、行間隔(先頭)、塗りつぶし、境界線(ストローク)、シャドウ(ドロップシャドウ)、および背景のぼかしが含まれます。それでは、これらのプロパティがどのように適用されるかを確認しましょう。読みやすさとフォントについて[…]

InDesignCCでQRコードを作成する方法

InDesignCCでQRコードを作成する方法

InDesignを使用して、QRコードグラフィックを作成および変更できます。QRコードは、単語、数字、URL、その他の形式のデータなどの情報を保存できるバーコードの形式です。ユーザーはスマートフォンなどのデバイスでカメラとソフトウェアを使用してQRコードをスキャンし、ソフトウェアはそれを利用します[…]

PhotoshopCCでアートボードを操作する

PhotoshopCCでアートボードを操作する

Adobe Illustratorと同様に、Photoshopアートボードは、1つのドキュメント内に個別のページまたは画面を作成する機能を提供します。これは、モバイルアプリケーションや小さなパンフレットの画面を作成する場合に特に役立ちます。アートボードは、レイヤーパネルを使用して作成された特別なタイプのレイヤーグループと考えることができます。これは […]

Adobe IllustratorCCでテキストを折り返す

Adobe IllustratorCCでテキストを折り返す

Adobe Illustrator CCでテキストを折り返すことは、プレゼントを折り返すこととまったく同じではありません。簡単です。この図に示すように、テキストの折り返しは、テキストをグラフィックの周りに強制的に折り返します。この機能は、どんな作品にも少し創造性を加えることができます。グラフィックは、テキストを強制的に折り返しています。まず、[…]を作成します

Illustratorで図形のサイズを変更する方法

Illustratorで図形のサイズを変更する方法

Adobe Illustrator CCでデザインする場合、正確なサイズ(たとえば、2 x 3インチ)の形状が必要になることがよくあります。シェイプを作成した後、正確な測定値にサイズ変更する最良の方法は、この図に示すように、[変換]パネルを使用することです。オブジェクトを選択してから、[ウィンドウ]→[変換]を選択します[…]

SVGに透明度を適用する方法

SVGに透明度を適用する方法

IllustratorでSVGグラフィックに透明度を適用する方法を学びます。背景が透明なSVGを出力し、透明効果を適用する方法を探ります。

AdobeXDでの画像の操作

AdobeXDでの画像の操作

画像をAdobeXDにインポートした後は、編集の制御はそれほど多くありませんが、他の形状と同じように画像のサイズを変更したり回転したりできます。コーナーウィジェットを使用して、インポートした画像のコーナーを簡単に丸めることもできます。閉じた形状を定義して画像をマスキングする[…]