Как оживить контент в 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-канал, там еще больше интересных материалов
Всем спасибо ❤