За кулисами :)

Адаптивные текстовые элементы в эскизе

Сладкий!

Обновление: вчера команда Sketch объявила, что одна из наиболее востребованных функций доступна в бета-версии приложения.
Они называют это «Smart Layout», и это выглядит A M A Z I N G.
Это также означает, что метод в этом посте устареет (наконец-то!).

Несколько примеров из Интернета о том, что возможно:
twitter.com/mds/status/1167145339457069062
twitter.com/svorklab/status/1167350673857482752
twitter.com/gaddafirusli/status/1167157688867835904

Иди и проверь это> www.sketch.com/beta

Этот пост впервые был придуман 19 августа 2016 года, но так и не вышел на свет (из-за лени / проволочек / вы его называете). Со временем я заметил, что люди обсуждают (и даже пишут сообщения среднего уровня) поведение, о котором я буду говорить. Поэтому я решил закончить редактирование черновика и опубликовать его. Yay для меня …

Все началось с простого вопроса ...

Не так давно я столкнулся с небольшой, но утомительной проблемой, которая до сих пор беспокоила меня. Я разработал интерфейс панели мониторинга для одного из моих клиентов, и в нем был довольно распространенный компонент пользовательского интерфейса; Он отображал информацию о конкретном пользователе с такими элементами, как: изображение аватара, день публикации и отметка времени. Это выглядело примерно так:

Когда я вмешивался в пользовательский интерфейс, меняя длину компонента несколько раз, мне было интересно, есть ли более простой способ изменить содержимое, отступы и длину всего компонента без необходимости менять каждый элемент снова и снова.

Функция изменения размера немного помогла, когда мне нужно было изменить длину строки. Есть много уроков и постов, касающихся этой удивительной функции, например, этой или этой, которую я рекомендую прочитать, если вы еще этого не сделали.

Чего я действительно хотел добиться, так это динамических текстовых элементов, которые будут толкать друг друга при изменении их размера. Так, например, если я использую плагин, такой как Craft by InVision (или любой другой плагин, который автоматически заполняет данные), элемент имени пользователя будет помещать элемент даты рядом с ним и так далее, как в реально работающем продукте.

Обсуждая аналогичную проблему с Эраном Лахавом (моим коллегой, который также является отличным дизайнером), я был полон решимости найти решение этой проблемы. Я вспомнил, что читал статью о возможности создания динамических таблиц с новой функцией изменения размера (представленной в версии 39). Reony Tonneyck делал так, используя скрытые графические элементы, которые использовались для заполнения содержимого таблицы. Это дало мне идею поместить скрытый графический элемент между двумя текстовыми объектами. И угадайте, что?

Это чертовски сработало!
Таким образом, я фактически следовал методу Reony для создания динамической строки, но когда я отправил файл в Eran, он сказал мне, что он работает с любым параметром изменения размера, который вы выбираете для элементов.

Это удивило меня, потому что я был уверен, что это поведение связано с функцией изменения размера. Немного покопавшись в официальной документации Sketch, я обнаружил, что это поведение, связанное с функцией переопределения символов:

И это оригинальный пост об этой функции:

Дело в том, что они использовали графический объект рядом с текстовым объектом, а не два текстовых объекта рядом друг с другом. И когда я попробовал этот метод только с текстовыми объектами, он не работал ...

После нескольких тестов, которые мы с Эраном провели, мы совершенно уверены, что при использовании символов с несколькими текстовыми объектами рядом друг с другом с графическими объектами поведение графики похоже на «опекуна», который не дает текстовым объектам касаться друг друга. другое (см. обновление ниже).

Обновить:
Похоже, что эта функция все еще работает в версии 44. Я также понял, что когда расстояние между двумя текстовыми элементами, стоящими рядом с каждым, меньше или равно 20 пикселям, автоматическое изменение размера будет работать. Если расстояние больше 20 пикселей, все начнет разрушаться. Здесь нет «стражей» :)

Эксперименты Эрана

Теперь проблема с переопределениями состоит в том, что реальные плагины контента (такие как Craft) не всегда работают. За исключением одного (насколько я знаю - спасибо Эрану): Sketch Data Populator от драгоценной дизайн-студии. При использовании плагина он влияет на секцию переопределения вместо исходного содержимого символа и прекрасно решает проблему заполнения переопределенных данных.

РЕДАКТИРОВАТЬ: Очевидно, плагин Craft поддерживает переопределения текста, поэтому мои извинения за ошибку (Когда я начал писать этот пост еще в августе, Craft не поддерживал переопределения текста, поэтому ошибка)

Заключение

Эта функция, безусловно, одна из самых интуитивных, с которыми я столкнулся в Sketch, но она все же лучше, чем Illustrator.
Подводя итог, можно сказать, что перед использованием этого метода важно учесть одну важную вещь: если вы попытаетесь изменить ширину или высоту основного компонента, весь ад на вас обрушится.
Я действительно знаю, что классные ребята из Anima App работают над тем, чтобы улучшить их плагин, чтобы он работал аналогичным образом, и это сделает компонент полностью отзывчивым (хотя при попытке моего метода с их плагином сегодня, 30 января, Sketch потерпел крах).

Надеюсь, этот пост помог, он мой первый, и мне потребовалось время, чтобы подготовиться и записать его. Удачного дня .