{"id":14276,"url":"\/distributions\/14276\/click?bit=1&hash=721b78297d313f451e61a17537482715c74771bae8c8ce438ed30c5ac3bb4196","title":"\u0418\u043d\u0432\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u043b\u044e\u0431\u043e\u0439 \u0442\u043e\u0432\u0430\u0440 \u0438\u043b\u0438 \u0443\u0441\u043b\u0443\u0433\u0443 \u0431\u0435\u0437 \u0431\u0438\u0440\u0436\u0438","buttonText":"","imageUuid":""}

Как оживить контент в Figma

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

Есть пара очевидных плюсов актуализировать контент, а не оставлять в дизайне таблицу которая состоит из одинаковых строк:

  • Это красиво. Для заказчика макет будет выглядеть реалистично, а для тиммейтов это будет сигнал о том, что вы уделяете внимание деталям.
  • Это своеобразный тест дизайна. Под "нагрузкой" релевантных данных сразу же станут очевидны косяки. Вы сможете понять, что происходит когда в колонке "Имя" вместо компактного John Doe появится Montgomery McLaughlin.

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

Рандомизируем текст

Для имен всегда использовал Random Name Generator, не помню случая, чтобы мне не хватило его функционала.

Для username существует много плагинов-генераторов, но нужно быть внимательным к тому, что они выдают, чтобы не пришлось краснеть за yourmotherfucker_99. Я использую Content Reel, выбирая подходящую подборку из предложенных во вкладке Text.

Этот плагин вобще достоин отдельного внимания, он позволяет создать свой собственный текстовый список, который можно быстро применить в дизайне. К примеру нас интересует список игроков Chicago Bulls (внезапно). Просим всемогущий ChatGPT выдать нам сей список, далее женим его с нашим плагином и вуаля.

Для дат я использую Placeholdate, нахожу его самым подходящим, так как он позволяет кастомизировать формат даты как душе угодно и выбирать промежуток от-до.

Цены можно рандомизировать с помощью Amountify, он ограничен в своих возможностях (нельзя выбрать конкретный диапазон цен, только количество цифр в числе и всего 3 валюты), но для большинства случаев подойдет.

Рандомизируем изображения

Для userpic достаточно гибким является плагин User Profile (можно выбрать пол, эмоцию и даже цвет волос) а для рандомных изображений неплохо подходит широко известный Unsplash.

Но допустим вам надо автоматизировать загрузку изображений с вашего устройства. Не идеальным, но все же решением, будет все тот же Content Reel. Не идеальным потому что имеет лимит по количеству изображений (20 шт) и их размеру (максимум 300кб), но для подавляющего большинства случаев этого будет достаточно.

Рандомизируем Варианты

Допустим у нас есть компонент лейбла/тега с несколькими вариантами, и чтобы не переключать их вручную можем воспользоваться Variants Randomizer.

Интересно почитать как вы наполняете дизайн контентом, пишите в комментах⬇
Подписывайтесь на мой Telegram-канал, там еще больше интересных материалов

Всем спасибо ❤

0
1 комментарий
Tavus Illiyeva

dfccscscsc

Ответить
Развернуть ветку
-2 комментариев
Раскрывать всегда