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

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

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

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

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


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

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

Слои монтажной области

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

Как это делается? Например, я создаю символ с текстом и, скажем, квадрат рядом с текстовым полем, когда я редактирую текст, квадрат не двигается. Я хочу, чтобы квадрат автоматически перемещался, когда я меняю текст в переопределениях.
Не удается воспроизвести желаемое поведение ни в одном из предложений. Есть ли еще способ добиться этого с помощью новейшей версии Sketchapp 51.2? К сожалению, этот пост также не кажется точным/работающим для новейшей версии Sketchapp. Черио

Ответы (5)

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

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

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

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

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

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

Эти условия были чертовски полезными, большое спасибо.

Для Sketch 44+ это становится довольно просто.

  1. Создайте текстовый слой с автоматической шириной
  2. Поместите объект (например, прямоугольник) справа от этого слоя.
  3. Выберите текстовый слой и объект
  4. На панели слоев выберите «Создать символ».
  5. В диалоговом окне создания символа выберите «↦Слева направо» в раскрывающемся списке под полем ввода имени символа.

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

снимок экрана, показывающий вариант компоновки при создании символа

снимок экрана, показывающий результат символа с переопределенным текстом

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

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

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

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

Просто наткнулся на этот вопрос в поисках ответов без везения, но я придумал рабочий процесс, чтобы это произошло:

Шаги:

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

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

Ваше здоровье!

Эскиз: объект перемещается относительно другого объекта/текста в символе
СпросиСетьПолитика конфиденциальности1y, 0v