Как в фигме сделать маркированный список

В Figma нет встроенной функции для создания маркированных списков, как в текстовых редакторах. Однако вы можете легко создать такой список вручную с помощью текстового инструмента и символов-маркеров, а затем использовать компоненты или плагины для автоматизации и ускорения процесса.

Figma — это мощный инструмент для проектирования интерфейсов, но он не заменяет текстовый редактор полностью. В нём отсутствуют некоторые привычные функции форматирования, такие как автоматические маркированные или нумерованные списки. Тем не менее, дизайнеры часто сталкиваются с необходимостью размещать структурированный текст: например, при создании презентаций, карточек продуктов, описаний функций или прототипов экранов с контентом. Умение грамотно организовать текстовые блоки — важная часть визуальной коммуникации. Особенно это актуально при работе над дизайн-системами, где требуется единообразие оформления списков на всех страницах проекта.
Создание маркированного списка в Figma требует понимания не только базовых инструментов, но и возможностей автоматизации через компоненты, auto layout и сторонние плагины. Без правильного подхода можно потратить много времени на ручное выравнивание, копирование и изменение стилей. Но при использовании современных методик этот процесс становится быстрым, масштабируемым и легко поддерживаемым.

Как сделать маркированный список вручную

Самый простой способ — использовать текстовый инструмент (T) и ввести каждый пункт списка вручную. Начните с выбора шрифта, размера и цвета текста, соответствующих вашему макету. Перед каждым пунктом вставьте символ маркера. Чаще всего используется круглый маркер •, который можно ввести с клавиатуры сочетанием Alt + 0149 (на цифровой клавиатуре Windows) или Option + 8 (на Mac). Альтернативные символы: ◦, ▪, ►, ➤ — выбирайте в зависимости от стиля проекта.
Для каждого нового пункта создавайте отдельный текстовый блок или пишите всё в одном фрейме, перенося строки вручную. Если вы используете один текстовый объект, убедитесь, что включена опция «Wrap text» в панели свойств, чтобы текст автоматически переносился по ширине фрейма. Это особенно важно, если пункты длинные и должны занимать несколько строк.

Пошаговая инструкция: ручной способ

1. Выберите инструмент Text (T) на панели слева.
2. Щёлкните на холсте и начните вводить первый пункт, поставив перед ним символ •.
3. Нажмите Enter, чтобы начать новый абзац, и повторите с тем же отступом и маркером.
4. Выделите весь текст и задайте нужные параметры шрифта: семейство, размер, межстрочный интервал (line height).
5. При необходимости выровняйте левый край маркеров с помощью сетки или направляющих.

Для визуального выравнивания используйте направляющие. Проведите вертикальную направляющую там, где должен начинаться текст после маркера. Это поможет вам вручную выставить отступ так, чтобы все строки начинались строго под одной линией. Также можно использовать функцию «Smart Animate» в рамках авто-компоновки, но об этом позже.

Использование Auto Layout для создания списков

Auto Layout — одна из самых полезных функций Figma для создания динамических и адаптивных интерфейсов. Она идеально подходит для построения маркированных списков, потому что позволяет автоматически выстраивать элементы друг за другом с заданными отступами.
Создайте фрейм с включённым Auto Layout (Ctrl/Cmd+Shift+[). Внутрь поместите два элемента: текстовый блок с маркером (например, •) и основной текст. Выстройте их горизонтально, задайте расстояние между ними — обычно 8–16 пикселей. Затем скопируйте эту пару столько раз, сколько нужно пунктов. Auto Layout автоматически добавит вертикальный отступ между строками.

Настройка межстрочного интервала и отступов

В панели свойств Auto Layout вы можете точно контролировать:

• Горизонтальный отступ (padding) — чтобы текст не прилипал к краям контейнера;
• Вертикальный gap — расстояние между пунктами списка;
• Выравнивание по вертикали и горизонтали;
• Направление: vertical (вертикальный список) или horizontal (редко, для особых случаев).

Рекомендуется использовать gap в 8px, 12px или 16px — стандартные значения, соответствующие дизайн-гайдлайнам. Межстрочный интервал (line height) внутри текстового блока должен быть согласован с типографикой проекта: обычно 1.4–1.6 для читаемости.

Превращение списка в компонент: переиспользование и масштабирование

Если вы работаете над крупным проектом или дизайн-системой, важно сделать список переиспользуемым. Лучший способ — создать компонент из одного пункта списка и использовать его на разных страницах.
Создайте фрейм с Auto Layout, содержащий маркер и текстовое поле. Превратите его в компонент (выделите → Ctrl/Cmd+Alt+K). Теперь вы можете копировать этот компонент и менять текст внутри экземпляров. Это гарантирует единообразие стиля, отступов и поведения.

Создание вариантов компонента (variants)

Figma позволяет создавать варианты компонентов. Например, вы можете сделать:

• Разные типы маркеров: круглый, квадратный, стрелка;
• Размеры: small, medium, large;
• Цветовые схемы: primary, secondary, disabled.

Свяжите эти параметры через свойства компонента. Тогда при использовании на макете можно будет быстро переключаться между вариантами без редактирования слоёв.

Для полноценного списка создайте отдельный компонент-контейнер, в который вложены несколько экземпляров пункта. Такой «групповой компонент» можно использовать как готовый блок в прототипах.

Плагины для автоматизации списков в Figma

Хотя Figma не имеет встроенной функции списков, сообщество разработало множество плагинов, которые значительно упрощают работу с текстом. Вот наиболее полезные:

• Bullet List Generator — создаёт маркированный список из вставленного текста, разделяя строки по переводам.
• Auto Layout Lists — генерирует список с Auto Layout, поддерживает разные маркеры и стили.
• TypeTool — продвинутый инструмент для типографики, включая списки, цитаты и стили текста.
• Content Reel — позволяет хранить и вставлять готовые списки как фрагменты контента.

Как использовать плагин Bullet List Generator

1. Установите плагин из Figma Community или через меню Plugins → Find plugins in Figma Community.
2. Скопируйте текст, который нужно превратить в список (каждая строка — отдельный пункт).
3. Запустите плагин, вставьте текст, выберите тип маркера и настройки отступов.
4. Плагин автоматически создаст выровненный список с Auto Layout.

Маркированные списки в дизайн-системах

В дизайн-системах маркированные списки — это не просто текст, а часть языка интерфейса. Они должны соответствовать общим принципам типографики, цвета, отступов и доступности. Поэтому важно заранее определить правила их использования.
Создайте документированный компонент List в библиотеке, включающий:

• Типографические стили (шрифт, размер, вес, line height);
• Цвет текста и маркеров;
• Стандартные отступы (gap, padding);
• Допустимые вариации (плотный/рассыпанный, с иконками, с вложенностью);
• Примеры использования и антипаттерны.

Вложенность списков

Для многоуровневых списков используйте вложенные Auto Layout-фреймы. Второй уровень должен иметь дополнительный левый отступ (indent) — обычно 24–32 px. Маркеры могут отличаться: например, • для первого уровня и ◦ для второго.
Не рекомендуется делать более трёх уровней вложенности — это снижает читаемость. Если структура сложная, рассмотрите альтернативы: аккордеон, древовидную навигацию или таблицу.

Распространённые ошибки и как их избежать

Даже опытные дизайнеры допускают типичные ошибки при работе со списками в Figma. Вот основные из них и способы их устранения.

• Несогласованные отступы. Когда каждый пункт выравнивается вручную, возникают микронесоответствия. Решение: использовать Auto Layout и направляющие.
• Разные стили текста. Пункты имеют разный размер шрифта или цвет. Решение: применять текстовые стили (text styles) и компоненты.
• Отсутствие масштабируемости. Список нельзя быстро изменить или переиспользовать. Решение: создавать компоненты и использовать плагины.
• Игнорирование доступности. Слишком мелкий шрифт или низкий контраст. Решение: проверять цветовую контрастность (минимум 4.5:1 для нормального текста).

Экспертное мнение

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

Рекомендуется разрабатывать списки в контексте реальных сценариев использования: на мобильном экране, в модальном окне, в карточке товара. Тестируйте читаемость при разных размерах экрана и условиях освещения.

Вопросы и ответы

Заключение

Создание маркированного списка в Figma требует комбинации ручной точности и автоматизации. Хотя встроенного инструмента нет, использование Auto Layout, компонентов и плагинов позволяет достичь профессионального результата с минимальными временными затратами.

• Всегда используйте Auto Layout для выравнивания и масштабирования списков.
• Превращайте пункты в компоненты для переиспользования и контроля стилей.
• Устанавливайте проверенные плагины для автоматизации рутинных задач.
• Соблюдайте единые правила типографики и отступов в дизайн-системе.
• Тестируйте списки на читаемость, доступность и адаптивность.