Как перенести в Фигму большие списки для форм и работать с реальными данными

3 декабря, 2020

Что делать, если нужно перенести на макет массив данных, а делать вручную долго и лень.

Женя Белодед
Ленивый дизайнер

Правила хорошего тона для дизайнера — работать с реальными данными интерфейса на макетах. Часто бывает так, что из «грязного» источника нужно перенести список или массив данных: адреса, названия услуг, токенов и другие. Можно потратить тучу часов на рутину и сделать копипасты ручками, а можно — полениться и сделать все за 5 минут. Вот, как такое возможно.

Исходные данные

Проект, на котором мы переделываем страницу регистрации спа-салона. Чтобы добавить салон в каталог, менеджеры заполняют форму. И один из шагов — отметить все услуги салона. Форма выглядит как бесконечное полотно услуг, которое вызывает неподдельный ужас. Нам нужно ее переработать, чтобы не пугать менеджера таким количеством чекбоксов.

Прежде чем закатать рукава и наводить красоту, вытягиваем всю инфу с сайта и переносим в Фигму.

Шаг 1. Группируем услуги

Если внимательно присмотреться, то понятно, что услуги уже сгруппированы. Но разница слишком слабая — делаем ее заметнее. Лезем в панель разработчиков и с помощью пары простых заклинаний с ЦСС, увеличиваем кегль и делаем жирненьким. Вжу-у-ух! — разделители стали заметнее.

Добавляем класс в инспекторе кода и задаем ему свойства — разделение стало нагляднее

Шаг 2. Достаем инфу с сайта

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

Первая мысль: добавить в любой текстовый редактор, поиском найти пробел и заменить на его отсутствие. Но такой вариант не подходит: пробелы между словами тоже пропадут.

Вспоминаем, что Эксель умный и умеет убирать первый пробел. Какой Эксель? Пфф. Вгоняем данные в Гугл-таблицу, убираем и получаем значения в столбике. Чтобы проще ориентироваться, сортируем по алфавиту.

Шаг 3. Переносим в Фигму

Руками копировать из Гугл-таблицы и вставлять в Фигму не вариант — слишком долго. Вспоминаем про классный плагин Майкрософта Content Reel — с помощью него можно быстро вставить рыбный контент или загнать свой.

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

Открываем плагин Content Reel, логинимся и получаем вкладочку My content. Жмякаем «New content» → «New text content».

Появляются поля с названием и самим контентом. Копируем нужный столбик и Гугл-таблиц и получаем возможность оперировать контентом в 55 строк.

Выделяем предварительно созданные текстовые поля в Фигме и нажимаем кнопку Apply All. Весь контент оттуда вставляется в документ в Фигме в нужном порядке.

Теперь осталось придумать как заставить человека нажимать такое количество чекбоксов. Но это уже совсем другая история…