スケッチ:オブジェクトはシンボル内の別のオブジェクト/テキストに対して相対的に移動します


11

前にある/「添付されている」テキストを変更したときに、オブジェクトを自動的に移動させるにはどうすればよいですか?

私はこのデフォルトシンボルがどのように機能するかを理解し(下に含まれるgif)、それを複製しようとしています。

オーバーライドに「」を入力すると、WiFiシンボルが受信ドットの横に移動します。長い文字列を入力すると(gifを参照)、wifiシンボルがテキストの後に自動的に移動します。

これは、wifiシンボルが「キャリア」テキストボックス(固定幅ではない)の末尾に固定されているかのようであり、テキストボックスの長さに応じて移動します。これはスケッチでどのように行われますか?


シンボルの長さに応じてオブジェクトが動くシンボルのテキストを変更するデモ

実際のアートボードには特別なものはありません。

アートボードレイヤー

解決策はありますか?どうぞよろしくお願いいたします。


2
それはどのように行われますか?たとえば、テキストと、テキストボックスのすぐ横にある四角形を含むシンボルを作成しますが、テキストを編集しても四角形は移動しません。オーバーライドのテキストを変更すると、四角が自動的に移動するようにします。
jess

どの提案でも、この望ましい動作を再現できません。最新のSketchappバージョン51.2でこれを実現する方法はまだありますか?悲しいことに、この投稿も最新のSketchappバージョンでは正確/機能していないようです。Cheerio
UX Brewer

回答:


4

Twitterユーザー@kieranpblackに感謝します。

テキストレイヤーが機能するためには、テキストレイヤーと2番目のレイヤーの間に少なくとも1pxが必要です。デフォルトのストレッチを含む、あらゆるサイズ変更オプションで機能します!

(Sketch 41の更新前にこれを試したかどうか覚えていないのですか?今はとても簡単に見ているようです。)


4

少し試行錯誤しながら、要件を絞り込みました。

  • テキストの配置を自動に設定する必要があります
  • テキストと他のレイヤーの間の水平方向のスペースは、0以上19ピクセル以下にする必要があります
  • テキストフレームの上部と他のレイヤーの上部、テキストフレームの下部と他のレイヤーの下部の間の距離は、8px以下である必要があります

テキストは、置き換えられたレイヤーの左側または右側に配置できます。


これらの条件はとても助かりました。
Shravan Veer Kohli、2018年

0

これに関するドキュメントは見つかりませんが、興味があれば、この動作を再現する方法を見つけました。

  1. 背景の四角形、その四角形の上に自動幅のテキスト、およびテキストの右端から最大20ピクセルまでの小さい四角形を作成します。
  2. テキストと小さい長方形を選択し、グループを作成します。「group1」としましょう
  3. 小さな長方形がレイヤーリストの自動幅テキストのに来ることを確認してください。
  4. 背景の長方形とgroup1を選択し、シンボルを作成します。
  5. シンボル編集ページでgroup1を選択し、サイズ変更方法として「ピンにコーナー」を指定します。他のすべての要素(2つの長方形とテキスト)のサイズ変更メソッドとして「ストレッチ」があることを確認します。
  6. いくつかのインスタンスを作成し、テキストをオーバーライドします。これは機能するはずです。

実験から完全なルールセットを推測するのは難しいです。マニュアルか何かあったらいいのに。


私はあなたの手順を試しましたが、残念ながらそれを再現することができませんでした…しかし、あなたの助けに感謝します!また、実際のシンボルにはグループ化も「ピンからコーナー」への特別なサイズ変更もないため、イライラします。ボヘミアンコードにそれについて尋ねるメッセージを送信するかもしれません。
jess 2016

ボヘミアンから返事はありましたか?「グループのサイズ変更」コントロールがどのように機能するかについての詳細を見つけることができます。ここで試してみてください:medium.com/sketch-app-sources/...
ジョシュア

彼らから連絡がない。グループのサイズ変更機能を理解していますが、オブジェクト全体のサイズを必ずしも物理的に変更しているわけではないので、オーバーライドの1つでテキストを変更するだけです。元のシンボルのすべてのサイズ変更オプションは、デフォルトの「ストレッチ」に設定されています。
jess

0

運が悪い答えを求めてこの質問に出くわしただけですが、これを実現するためのワークフローを見つけました。

手順:

  1. オブジェクトを固定するテキストフィールドを作成します。
  2. オブジェクトをテキストフィールドに揃えます(右側のオブジェクトのみを試しました)
  3. テキストフィールドとオブジェクトをグループ化します。
  4. テキストフィールドの「サイズ変更」オプションをストレッチに設定し、 オブジェクトの「サイズ変更」オプションをコーナーに固定します。
  5. 作成したグループでシンボルを作成します。
  6. 重要:シンボルページで、新しいシンボルのアートボードを、テキストフィールドに入力するすべてのオーバーライドに対応できる幅に拡張します。

これでテキストを上書きできるようになり、オブジェクトが新しいテキストに固定されます。

乾杯!

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.