Как оживить контент в 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.

Итого

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

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

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