Эскиз: объект перемещается относительно другого объекта / текста в символе

11

Как заставить объект автоматически перемещаться, когда я изменяю текст, предшествующий / «прикрепленный к нему»?

Я пытаюсь выяснить, как работает этот символ по умолчанию (gif включен ниже) и воспроизвести его.

Когда я набираю "" в переопределении, символ wifi перемещается рядом с точками приема. Когда я набираю более длинную строку (см. Рисунок), символ wifi автоматически перемещается в соответствии с текстом после.

Это как если бы символ wifi был привязан к КОНЦУ текстового поля «Carrrier» (которое не имеет фиксированной ширины) и перемещается в зависимости от длины текстового поля. Как это делается в Sketch?


Демонстрация изменения текста в символе с перемещением объекта в зависимости от длины символа

На самом артборде ничего особенного нет:

Слои артборда

Любые решения? Пожалуйста спасибо!

text sketch-app symbols Джесс
источник
2
Как это сделать? Например, я создаю символ с текстом и, скажем, квадрат прямо рядом с текстовым полем, когда я редактирую текст, квадрат не перемещается. Я хочу, чтобы квадрат автоматически перемещался при изменении текста в переопределениях.
Джесс
Не могу воспроизвести это желаемое поведение ни в одном из предложений. Есть ли еще способ добиться этого с помощью новейшей версии Sketchapp 51.2? К сожалению, этот пост также не выглядит точным / работает для последней версии Sketchapp. Cheerio
UX Brewer

Ответы:

4

Большое спасибо пользователю Твиттера @kieranpblack!

Вы должны иметь по крайней мере 1 пиксель между текстовым слоем и вторым слоем, чтобы он работал. Работает с любым параметром изменения размера, включая растягивание по умолчанию!

(Не могу даже вспомнить, пробовал ли я это до обновления Sketch 41 или нет? Кажется, сейчас все просто.)

Джесс
источник
4

Немного проб и ошибок я сузил требования.

  • Выравнивание текста должно быть установлено на Авто
  • Горизонтальное пространство между текстом и другим слоем должно быть ≥ 0 и ≤ 19 пикселей
  • Расстояние между верхом текстового фрейма и верхом другого слоя и нижней части текстового фрейма и нижней части другого слоя должно быть ≤ 8 пикселей

Текст может находиться слева или справа от смещенного слоя.

Марк Хорган
источник
Эти условия были чертовски полезны, спасибо огромное.
Шраван Веер Кохли
0

Я не могу найти никаких документов по этому поводу, но я выяснил, как воспроизвести поведение, если вы все еще заинтересованы.

  1. Создайте фоновый прямоугольник, фрагмент текста с автоматической шириной поверх этого прямоугольника и меньший прямоугольник до 20 пикселей от правого края текста.
  2. Выделите текст и меньший прямоугольник и создайте группу. Давайте назовем это «group1»
  3. Убедитесь, что маленький прямоугольник идет после текста автоматической ширины в списке слоев.
  4. Выберите фоновый прямоугольник и группу 1 и создайте символ.
  5. На странице редактирования символа выберите group1 и укажите «pin to corner» в качестве метода изменения размера. Убедитесь, что все ваши другие элементы (два прямоугольника и текст) имеют растяжение в качестве методов изменения размера.
  6. Создайте несколько экземпляров и переопределить текст, он должен работать.

Сложно вывести полный набор правил из экспериментов. Я хотел бы, чтобы было руководство или что-то.

Джошуа
источник
Я попробовал ваши шаги, но, к сожалению, не смог повторить это ... Я ценю вашу помощь, хотя! Это также расстраивает, потому что на самом символе нет никакой группировки или какого-либо специального изменения размера «Pin to corner» ... Я мог бы послать Богемному коду сообщение с вопросом об этом.
Джесс
Вы слышали от Богемского? Вы можете найти подробную информацию о том, как элементы управления «изменением размера группы» работают повсюду. Попробуйте здесь: medium.com/sketch-app-sources/…
Джошуа
Не слышал от них. Я понимаю особенности изменения размера группы, но это не так, потому что я не обязательно физически изменяю размер всего объекта ... просто изменяю текст в одном из переопределений. Все параметры изменения размера исходного символа просто устанавливаются на «растяжение» по умолчанию.
Джесс
0

Просто наткнулся на этот вопрос в поисках ответов без удачи, но я разобрался, как это сделать:

шаги:

  1. Создайте текстовое поле, к которому вы хотите привязать свой объект.
  2. Выровняйте объект по текстовому полю (я только попробовал объект справа) .
  3. Групповое текстовое поле и объект.
  4. Установить «изменение размера» вариант из текстового поля , чтобы растянуть и от объекта к штифту-к-углу.
  5. Создайте символ с группой, которую вы только что создали.
  6. Важно: На странице символов увеличьте область оформления вашего нового символа до ширины, которая будет соответствовать всем вашим переопределениям, которые вы введете в свое текстовое поле.

Теперь вы сможете переопределить ваш текст, и ваш объект будет привязан к вашему новому тексту.

Ура!

Андрей Муньос
источник