2025-12-01 21:17:21

Как объединить ячейки в таблице в фигме

Добро пожаловать в мир, где таблицы перестают быть просто набором строк и столбцов, а становятся инструментом визуальной коммуникации и смысловой организации информации. Если вы пришли из мира Excel или Google Таблиц, вас может озадачить отсутствие привычной кнопки «Объединить ячейки» в Figma.

И это не упущение разработчиков - это принципиально иной подход к дизайну. Figma не работает с таблицами как с математическими структурами данных; вместо этого она предлагает вам конструировать визуальные представления этих структур, где каждая деталь контролируется дизайнером.

В этом руководстве мы не просто изучим несколько приемов - мы освоим философию построения таблиц в современном дизайн-инструменте. Вы узнаете, как перейти от мышления «ячейка-данные» к мышлению «компонент-интерфейс», и откроете для себя три уровня мастерства: от базового векторного построения до профессиональной работы с компонентами и Autolayout. Давайте начнем этот путь, где каждая объединенная ячейка станет осознанным шагом к ясности и эстетике ваших проектов.

Подготовка

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

Поэтому таблица здесь - это не математический объект, а визуальная композиция из простых фигур (прямоугольников) и текста. "Объединение ячейки" фактически означает превращение нескольких визуальных ячеек в одну большую область, часто с удалением лишних разделителей. Это подход дизайнера, а не аналитика.

Создайте базовую сетку. Начните с построения вашей таблицы с помощью фреймов или прямоугольников. Самый простой способ - использовать инструмент "Прямоугольник" (R) для создания строк и столбцов, либо "Автолейаут" для строк, которые будут повторяться. Для начала сделайте таблицу в ее "разобранном" виде, где каждая ячейка - отдельный элемент.

Пошаговый метод объединения ячеек

Этот метод основан на работе с векторными контурами и является самым чистым и правильным с точки зрения дизайна. Он дает вам единый объект, который легко редактировать, заливать цветом и управлять его границами.

Нарисуйте основу

Создайте один большой прямоугольник - это будет контур вашей будущей объединенной ячейки.
Задайте ему заливку (часто белая или светлая) и обводку (цвет линий таблицы, например, #E5E5E5).

Создайте внутренние разделители

Для вертикальных линий: Скопируйте (Ctrl+C) прямоугольник, вставьте (Ctrl+V) и сделайте его очень узким (например, 1px в ширину). Установите нужную высоту. Это будет вертикальная граница между столбцами. Продублируйте ее (Ctrl+D) и расставьте.
Для горизонтальных линий: Аналогично, создайте тонкий прямоугольник (1px в высоту) и установите нужную ширину. Это будет горизонтальная граница между строками.
Совет: Используйте умные направляющие (включены по умолчанию) и распределение по высоте/ширине в правой панели, чтобы линии были идеально выровнены.

Соберите таблицу

Выделите все созданные прямоугольники (контур и внутренние линии) и сгруппируйте их (Ctrl+G) в один фрейм. У вас получилась "сетка".

Собственно "объединение"

Чтобы объединить несколько ячеек по горизонтали (столбцы): Выделите и удалите вертикальные линии-разделители, которые находятся между этими ячейками, внутри вашей будущей большой области.
Чтобы объединить несколько ячеек по вертикали (строки): Удалите соответствующие горизонтальные разделители.
Чтобы объединить и по горизонтали, и по вертикали: Удалите и те, и другие линии внутри области.
При необходимости отрегулируйте ширину и высоту основного контурного прямоугольника, чтобы он покрывал всю объединенную область.

Добавьте текст

Используйте инструмент "Текст" (T), создайте текстовое поле и поместите его поверх вашей объединенной ячейки. Центрируйте его с помощью направляющих.

Альтернативный и быстрый способ с помощью заливки

Этот метод - скорее визуальный трюк, но он невероятно быстр и идеально подходит для статичных таблиц, прототипов или когда вам нужно сделать merge "на скорую руку". Его суть в маскировке ненужных линий, а не в их удалении. Создайте полную сетку. Нарисуйте стандартную таблицу со всеми линиями (можно даже использовать компоненты для ячеек для скорости).

"Спрячьте" линии

Выделите ячейку (или прямоугольник), границу которой нужно "убрать" для эффекта объединения.
В панели "Обводка" (Stroke) измените цвет этой конкретной границы на белый (или на цвет фона таблицы). Визуально линия исчезнет, и ячейки "объединятся".
Важно: Этот способ требует аккуратности, так как при перемещении объектов "спрятанные" линии могут проявиться.

Профессиональные приемы и советы

Когда вы освоите базовые методы, эти приемы помогут вам работать с таблицами в Figma как настоящий профи. Они экономят время и создают гибкие, переиспользуемые системы.

Используйте компоненты и Autolayout для строк

Создайте компоненту (Ctrl+Alt+K) для стандартной ячейки.
Соберите одну строку из нескольких таких компонент, примените к ним Autolayout (Shift+A) с подходящими отступами.
Теперь вы можете легко дублировать строки. А для объединения ячеек в конкретной строке вы "разделяете экземпляр" компоненты (значок алмазика в панели слоев) и редактируете ее, например, растягивая на несколько колонок и убирая внутренние границы.

Работайте со стилями

Создайте стили цвета для заливки ячеек и стили обводки для линий таблицы. Это позволит вам менять оформление всей таблицы в одно мгновение.

Для сложных таблиц используйте плагины

В сообществе Figma (Community) найдите плагины по запросам "Table", "Data", "Merge Cells". Некоторые из них автоматизируют создание и редактирование таблиц, хотя часто базовые методы дают больше контроля.

Вывод

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

Метод, критерий	Лучше всего подходит для	Основное преимущество	Ключевой недостаток
Основной (векторное скульптурирование)	Финального, точного дизайна. Дизайн-систем. Сложных таблиц.	«Чистая» геометрия, полный контроль, лёгкость дальнейшего редактирования.	Относительно больше времени на первоначальное создание.
Альтернативный (визуальный трюк)	Прототипирования, быстрых правок, статичных презентаций.	Мгновенная скорость, простота на уже готовой сетке.	«Грязная» структура файла, риск проявить скрытые линии.
Профессиональный (компоненты + Autolayout)	Создания дизайн-систем, повторяющихся отчётностей, командной работы.	Масштабируемость, консистентность, невероятная скорость дублирования и обновления.	Требует времени на первоначальную настройку и дисциплины.

Главный вывод: начните с цели. Нужен ли вам быстрый скетч или pixel-perfect макет для передачи в разработку? Ответ на этот вопрос и укажет на оптимальный метод. Комбинируйте эти подходы, используя силу основного метода для ключевых элементов и скорость альтернативного - для итераций. Со временем вы разовьёте интуицию и сможете выбирать нужный инструмент моментально, создавая безупречные, функциональные и легко поддерживаемые таблицы в Figma.