Как в figma сделать таблицу

В Figma таблицы не существуют как отдельный нативный элемент, но именно это и делает их создание мощным инструментом для дизайнеров, которые хотят контролировать структуру, выравнивание и адаптивность данных. Многие считают, что Figma не подходит для работы с табличными данными — это заблуждение. На самом деле, благодаря гибкости компонентов, сеток и авто-лэйаутов, можно создавать сложные, масштабируемые и полностью настраиваемые таблицы, которые идеально подходят для интерфейсов веб-приложений, дашбордов и административных панелей. Главное — понимать, как работать с базовыми инструментами не как с «рисованием», а как с проектированием систем.

Зачем создавать таблицы в Figma

Таблицы — один из самых распространённых элементов интерфейсов, особенно в B2B-продуктах: CRM, аналитика, административные панели, системы учёта. Даже если вы работаете над мобильным приложением, где таблицы заменены на карточки, понимание структуры данных критично для правильного проектирования потоков. В Figma таблицы позволяют не просто визуализировать данные — они помогают проверять читаемость, баланс цветов, иерархию и доступность до того, как код будет написан.

Представьте, что вы проектируете панель управления для бухгалтерской системы. Клиент требует отображение 12 колонок с данными о транзакциях. Если вы просто нарисуете таблицу вручную — вы потратите часы на каждый вариант. Но если вы создадите компонент строки с авто-лэйаутом — вы сможете за минуту сгенерировать 100 строк, протестировать разные стили заголовков и даже смоделировать состояние «выделенной строки» или «ошибки в данных».

Как создать простую таблицу: пошаговая инструкция

Создание базовой таблицы в Figma — это не рисование, а структурирование. Вот пошаговый алгоритм:

1. Создайте новый фрейм (F) — это будет контейнер всей таблицы. Установите ширину, соответствующую вашему макету (например, 1200px для десктопа).
2. Внутри фрейма нарисуйте прямоугольник — это будет ячейка. Высоту задайте 48px (стандартная высота строки в Material Design и Apple HIG).
3. Скопируйте этот прямоугольник столько раз, сколько нужно колонок (например, 5). Расположите их в ряд, с зазором 1px между ними — это будет граница ячеек.
4. Выделите все ячейки и нажмите Cmd/Ctrl + G, чтобы сгруппировать их в одну строку.
5. Скопируйте строку нужное количество раз — например, 10 строк для демонстрации данных.
6. Выделите все строки и создайте группу. Теперь у вас есть базовая таблица.

Для заголовка создайте отдельную строку с другим стилем шрифта — например, SemiBold 14px, цветом #1D1D1D, и фоном #F5F5F5. Разместите её сверху. Это разделит логические блоки и упростит дальнейшую работу.

Использование компонентов и вариантов для таблиц

Теперь, когда вы поняли структуру, переходите к профессиональному уровню: компоненты. Это ключ к масштабируемости.

Превратите строку с ячейками в компонент: выделите группу, нажмите Cmd/Ctrl + Alt + K. Дайте имя — например, «Table Row». Теперь вы можете дублировать его, и все копии будут связаны.

Создайте варианты:
— «Default» — стандартная строка;
— «Hover» — с фоном #F0F7FF и тонкой тенью;
— «Selected» — с жирной левой границей (#0066CC) и цветом текста #003366;
— «Error» — красный фон (#FFF0F0) и красная граница.

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

Для заголовка создайте отдельный компонент: «Table Header». Он может быть настроен с фиксированной высотой и выравниванием текста по центру. Используйте его как базовый элемент для всех таблиц в проекте.

Как настроить авто-лэйаут для автоматического выравнивания

Авто-лэйаут — главный инструмент для точного позиционирования. Без него таблицы «поплывут» при изменении контента.

Выделите все ячейки в одной строке → в панели свойств выберите «H Stack» (горизонтальный стек). Установите:
— Spacing — 1px (для границ);
— Horizontal padding — 16px (для отступов внутри ячеек);
— Vertical padding — 12px;
— Align items — Center (по вертикали);
— Fill container — включено.

Теперь, если вы измените ширину одной ячейки — все остальные автоматически подстроятся. Чтобы задать фиксированную ширину колонок, выделите каждую ячейку в стеке и установите вручную: например, 120px, 200px, 80px — в зависимости от содержимого.

Для заголовков используйте тот же принцип, но с выравниванием текста по центру. Не забудьте отключить «Fill container» для заголовка — он должен быть шире, чем строки, если таблица имеет полосу прокрутки.

Создание адаптивных таблиц для разных экранов

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

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

2. Превращение в карточки — на мобильном экране каждая строка превращается в вертикальную карточку с заголовками. Это требует создания отдельного компонента «Mobile Row», но обеспечивает лучшую читаемость.

3. Скрытие второстепенных колонок — с помощью компонентов и условных вариантов можно создать «сокращённую» версию таблицы, где скрываются менее важные поля (например, ID, IP-адрес). Пользователь может раскрыть их через кнопку «Показать всё».

Для реализации используйте Auto Layout + Constraints. Установите для фрейма таблицы ширину 100%, а для каждой ячейки — фиксированную ширину. Затем создайте Prototype с breakpoints: 1200px, 768px, 375px. Переключайте компоненты в зависимости от ширины.

Частые ошибки и как их избежать

Даже опытные дизайнеры допускают ошибки, которые снижают качество таблиц:

• Нет выравнивания по типу данных — числа должны быть выровнены по правому краю, текст — по левому. Неправильное выравнивание нарушает визуальный ритм.
• Использование только цвета для выделения — если пользователь с нарушениями зрения не видит разницу между белым и светло-серым, таблица становится недоступной. Всегда добавляйте границы, иконки или жирный шрифт.
• Слишком много колонок — более 7 колонок без прокрутки ведут к перегрузке. Проверяйте: можно ли прочитать строку за 3 секунды?
• Неиспользование компонентов — если вы рисуете каждую строку вручную, вы не сможете масштабировать и обновлять стиль. Это ведёт к хаосу в макетах.
• Отсутствие состояний — таблица без hover, selected, error — выглядит как статичный PDF, а не интерфейс.

Проверяйте таблицы через инструмент «Inspect» — убедитесь, что все отступы, шрифты и цвета соответствуют дизайнерской системе. Используйте «Component Properties» для быстрого изменения текста в строках без ручного редактирования.

Экспертное мнение: как дизайнеры используют таблицы в реальных проектах

Её ключевая рекомендация: всегда думайте о таблице как о системе, а не как о наборе ячеек. Создайте документ с правилами: как изменяется цвет при hover, как обрабатываются длинные тексты (обрезка с точками? перенос?), как выглядит пустая таблица. Это делает ваш дизайн предсказуемым и профессиональным.

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

Заключение

Таблицы в Figma — это не ограничение, а возможность. Они позволяют проектировать сложные, точные и масштабируемые интерфейсы, которые легко передать разработчикам. Главное — отказаться от мышления «нарисую как в Excel» и перейти к системному подходу: компоненты, авто-лэйаут, варианты, правила выравнивания. Чем раньше вы внедрите эти практики, тем быстрее ваш дизайн станет стандартом в команде.

• Создавайте таблицы через компоненты и авто-лэйаут — это гарантирует масштабируемость.
• Выравнивание по типу данных (числа — вправо, текст — влево) повышает читаемость на 30%.
• Используйте варианты для состояний: hover, selected, error — это делает интерфейс живым.
• Для мобильных устройств применяйте карточки или скрытие колонок — не сжимайте таблицу.
• Проверяйте таблицы через инструмент Inspect и прототипы — не полагайтесь на визуальное восприятие.