Figma — не табличный редактор, и это многих вводит в ступор. Но именно здесь и кроется ваше преимущество: умение грамотно построить таблицу в дизайн-среде отличает профессионала от любителя. Таблицы в интерфейсах — это не Excel, это структура, коммуникация и визуальная иерархия. И если вы до сих пор копируете их из Google Sheets скриншотами, пора остановиться. Я покажу, как создавать таблицы в Figma технически правильно, быстро и с возможностью адаптации под любые задачи — от простых списков до сложных дата-таблиц с сортировкой и фильтрами.
Создание таблицы в Figma: базовые способы
Существует три основных подхода к созданию таблиц в Figma, и каждый имеет свою область применения. Первый — ручное создание через фреймы и текстовые блоки. Второй — использование встроенных сеток (Layout Grid). Третий — применение плагинов для автоматизации. Выбор метода зависит от сложности таблицы, частоты её изменений и требований к адаптивности.
Ручной метод подходит для небольших статичных таблиц. Вы создаёте фреймы для ячеек, заполняете их текстом и группируете в строки. Это даёт полный контроль над каждым элементом, но масштабируется плохо. Стоит добавить десяток строк — и вы погрязнете в рутине.
Метод через сетки использует возможности Auto Layout и Layout Grid для создания структуры. Это более профессиональный подход, позволяющий быстро дублировать строки и изменять размеры столбцов. Требует понимания работы сеток, но окупается скоростью.
Плагины — это автоматизация для тех, кто работает с большими объёмами данных. Они генерируют таблицы из CSV, JSON или прямо из Google Sheets. Идеально для прототипов с реальным контентом, но требуют настройки и понимания форматов данных.
| Метод | Сложность | Скорость создания | Адаптивность | Подходит для |
| Ручное создание | Низкая | Медленная | Низкая | Простые таблицы до 20 ячеек |
| Через сетки | Средняя | Средняя | Высокая | Любые регулярные таблицы |
| Плагины | Низкая | Быстрая | Средняя | Большие массивы данных |
Базовый принцип — любая таблица состоит из контейнеров (строк) и содержимого (ячеек). В Figma контейнеры — это фреймы с Auto Layout, а содержимое — текстовые блоки или другие фреймы. Понимание этой структуры критично для создания таблиц, которые не развалятся при изменении контента.
Пошаговая инструкция создания таблицы через сетки
Метод через сетки — золотой стандарт для создания таблиц в Figma. Он сочетает скорость, гибкость и профессиональный подход. Разберём процесс пошагово, от создания основы до финальной настройки.
Шаг 1: Создайте основной фрейм
Нажмите F и создайте фрейм нужной ширины. Это будет контейнер всей таблицы. Назовите его Table. Включите Auto Layout через Shift + A. Установите направление Vertical, отступы между элементами — 0.
Шаг 2: Создайте строку заголовков
Внутри основного фрейма создайте новый фрейм (F) для заголовков. Назовите его Header Row. Включите Auto Layout, направление — Horizontal. Добавьте текстовые блоки для каждого столбца. Установите для них выравнивание и паддинги (например, 16px по горизонтали, 12px по вертикали).
Шаг 3: Настройте ширину столбцов
Выделите текстовые блоки в заголовке. В настройках Auto Layout установите для каждого либо Fixed Width (фиксированная ширина), либо Fill Container (заполнение доступного пространства). Для большинства таблиц используйте комбинацию: первые колонки фиксированные, последняя — растягивается.
Шаг 4: Создайте строку с данными
Дублируйте строку заголовков (Cmd/Ctrl + D). Замените текст заголовков на данные. Теперь у вас есть шаблон строки. Скопируйте его нужное количество раз. Все строки автоматически выстроятся друг под другом благодаря Auto Layout.
Шаг 5: Добавьте разделители
Создайте линию (L) толщиной 1px. Растяните её на всю ширину таблицы. Установите цвет с низкой прозрачностью (например, #000000 с opacity 10%). Разместите линии между строками или добавьте нижнюю границу через Stroke в настройках фрейма строки.
Шаг 6: Создайте компонент
Выделите строку с данными и создайте из неё компонент (Cmd/Ctrl + Alt + K). Теперь изменения в мастер-компоненте автоматически применятся ко всем экземплярам. Это ключевой момент для масштабирования таблиц.
Дмитрий Ковалёв, ведущий UI/UX дизайнер
Когда я делал редизайн дашборда для аналитической платформы, столкнулся с задачей создать таблицу на 300+ строк. Ручной подход отпал сразу. Собрал систему через Auto Layout и компоненты за 40 минут — включая все состояния (hover, selected, error). Заказчик потом вносил правки в контент сам, просто редактируя текст в экземплярах. Таблица не разваливалась. Это и есть настоящий профессионализм — когда инструмент работает на вас, а не наоборот.
Автоматизация работы: лучшие плагины для таблиц
Плагины превращают Figma в инструмент для работы с реальными данными. Вместо Lorem Ipsum вы получаете настоящие имена, даты, числа — всё, что нужно для убедительного прототипа. Разберём три категории плагинов и конкретные решения для каждой задачи.
Генераторы таблиц из данных
Плагин Table Paste — простейший способ импорта данных из Excel или Google Sheets. Копируете ячейки, вставляете через плагин — получаете готовую таблицу с сохранением структуры. Минус — ограниченная кастомизация стилей.
Content Reel позволяет подключать Google Sheets напрямую и обновлять данные в реальном времени. Идеально для живых прототипов, где контент меняется. Требует настройки API-ключей, но результат того стоит.
Airtable to Figma — для тех, кто работает с базами данных. Синхронизирует записи из Airtable, автоматически создаёт карточки или строки таблиц. Мощный инструмент для сложных систем дизайна.
Конструкторы таблиц
Table Creator — визуальный редактор, где вы задаёте количество строк и столбцов, настраиваете стили, паддинги, границы. Результат — полностью кастомизированная таблица без ручной работы. Не подходит для импорта данных, но отлично справляется с созданием пустых шаблонов.
Управление стилями
Themer и Design Tokens позволяют применять глобальные стили к таблицам. Вы меняете цвет заголовка в одном месте — он обновляется во всех таблицах проекта. Критично для больших систем дизайна, где таблиц десятки.
Практический совет: не используйте плагины для маленьких таблиц на 3-5 строк. Настройка займёт больше времени, чем ручное создание. Плагины оправданы от 20+ строк или при частых обновлениях контента. Всегда проверяйте, поддерживает ли плагин Auto Layout — таблицы без него превращаются в неуправляемый хаос при любых изменениях. 📊
Адаптивные таблицы в дизайне интерфейса
Адаптивность таблиц — это не просто уменьшение ширины. Это стратегическое решение о том, какие данные критичны, а какие можно скрыть или реструктуризировать. Десктопная таблица на 8 столбцов не влезет на мобильный экран — и это факт, с которым нужно работать, а не игнорировать.
Первая тактика — приоритизация столбцов. Определите 2-3 ключевых столбца, которые должны быть видны всегда. Остальные скрывайте на малых экранах или выносите в отдельные строки. Например, в таблице заказов на мобильном показываете только номер заказа, статус и сумму. Дату, адрес и детали — в раскрывающейся карточке.
Вторая тактика — трансформация структуры. Табличная форма на десктопе превращается в карточную на мобильном. Каждая строка становится отдельной карточкой с вертикальным расположением данных. Это радикально, но часто единственный способ сохранить читаемость.
| Ширина экрана | Формат таблицы | Видимые столбцы | Механика взаимодействия |
| Desktop (1200px+) | Полная таблица | Все (6-10) | Сортировка, фильтры, массовые действия |
| Tablet (768-1199px) | Сокращённая таблица | Приоритетные (4-6) | Горизонтальный скролл для остальных |
| Mobile (320-767px) | Карточки | Ключевые (2-3) | Раскрытие деталей по тапу |
Третья тактика — горизонтальный скролл. Не всегда зло, если реализован правильно. Зафиксируйте первый столбец (обычно это имя или ID), остальные пусть скроллятся. Добавьте визуальный индикатор — тень или градиент — показывающий, что контент продолжается за краем экрана.
Технически адаптивность в Figma реализуется через constraints и Auto Layout. Установите для основного фрейма таблицы Left and Right constraints — он будет растягиваться по ширине. Для столбцов используйте Fill Container с минимальной шириной, чтобы они не схлопывались.
Продвинутый приём — использование вариантов компонента для разных брейкпоинтов. Создаёте три варианта строки таблицы: Desktop, Tablet, Mobile. Переключаете их в зависимости от размера фрейма. Figma автоматически покажет правильную версию.
Анна Соколова, продуктовый дизайнер
Работала над медицинским приложением, где таблица анализов была ключевым экраном. На десктопе 12 столбцов с параметрами крови. Попытка уместить это на мобильном провалилась — превратилось в нечитаемую кашу. Решение: оставила на телефоне только название анализа, значение и норму. Всё остальное — в детальную карточку. Конверсия в запись к врачу выросла на 23%, потому что люди наконец смогли понять свои показатели.
Критическая ошибка — пытаться сохранить всю информацию на маленьком экране. Пользователь не будет пинчить и скроллить в трёх направлениях. Он просто закроет приложение. Адаптивная таблица — это решение о жертвах: что убрать, чтобы оставшееся работало. 📱
Продвинутые методы создания таблиц в Figma
Переходим к техникам, которые отделяют системных дизайнеров от исполнителей макетов. Здесь речь о компонентных системах, состояниях, интерактивности и масштабируемости на уровне продуктовых команд.
Создание системы компонентов для таблиц
Правильная таблица в Figma — это не один компонент, а иерархическая система. Базовый уровень — атомарные элементы: ячейка текста, ячейка с иконкой, ячейка с бейджем. Средний уровень — строки с разными состояниями (default, hover, selected, disabled). Верхний уровень — сама таблица как композиция строк и заголовков.
Создайте базовый компонент ячейки с вариантами: Type: text/icon/badge/checkbox, State: default/hover/active. Используйте variants для переключения между типами. Внутри каждого варианта — Auto Layout с правильными паддингами и выравниванием. Это основа, на которой строится всё остальное.
Строка таблицы — компонент, собранный из ячеек. Включите для неё Auto Layout, направление Horizontal, spacing 0. Добавьте варианты состояний: State: default/hover/selected/error. Настройте фоновые заливки для каждого состояния. Теперь при создании таблицы вы просто вставляете экземпляры строк и переключаете нужные состояния.
- Cell/Text — текстовая ячейка с Auto Layout
- Cell/Icon — иконка + текст
- Cell/Badge — статусный бейдж
- Cell/Checkbox — чекбокс для выбора
- Cell/Action — кнопки действий
- Row/Header — строка заголовков с сортировкой
- Row/Data — строка с данными (все состояния)
- Row/Empty — заглушка для пустой таблицы
- Row/Loading — состояние загрузки
- Table/Default — базовая таблица
- Table/WithFilters — с панелью фильтров
- Table/WithPagination — с пагинацией
- Table/Responsive — адаптивный вариант
Интерактивные прототипы таблиц
Статичная таблица в 2025 году — архаизм. Добавьте интерактивность через прототипирование Figma. Создайте варианты строки с состоянием hover и настройте переход While Hovering. Для кликабельных ячеек добавьте вариант pressed и переход On Click.
Сортировка столбцов реализуется через варианты заголовка: Sort: none/ascending/descending. Добавьте иконку стрелки, которая меняет направление. При клике на заголовок переключайте вариант и анимируйте переход списка данных. Да, это потребует создания трёх версий таблицы, но результат убедит любого стейкхолдера.
Работа с большими объёмами данных
Таблица на 100+ строк убьёт производительность Figma, если создавать её как набор отдельных фреймов. Решение — виртуализация через компоненты. Создайте мастер-компонент строки и 10-15 его экземпляров в таблице. Этого достаточно для визуальной демонстрации. Реальные данные подгружайте через плагины только при необходимости.
Для прототипов с прокруткой используйте трюк: создайте длинный фрейм (3000-5000px высотой), заполните его повторяющимися строками. Включите вертикальный скролл. Figma обработает это легко, потому что строки — экземпляры одного компонента, а не уникальные объекты.
Документирование и передача в разработку
Таблица в макете — половина дела. Разработчикам нужны спецификации. Используйте режим Inspect в Figma для автоматической генерации CSS. Добавьте комментарии с пояснениями логики состояний, breakpoints для адаптива, правил сортировки и фильтрации.
Создайте отдельную страницу в файле — Table Components Documentation. Разместите там все варианты компонентов с подписями: что это, когда использовать, какие свойства можно менять. Это сэкономит часы объяснений на созвонах и снизит количество вопросов "а как тут должно быть".
Продвинутый уровень — не просто нарисовать таблицу, а построить систему, которая масштабируется на весь продукт. Один раз правильно сделанные компоненты работают годами, адаптируются под новые задачи и позволяют дизайнить в 10 раз быстрее. Это и есть разница между ремесленником и архитектором интерфейсов. 🏗️
Figma не задумывалась как табличный редактор, но именно поэтому грамотное создание таблиц здесь — маркер профессионализма. Вы научились строить структуру через сетки и Auto Layout, автоматизировать рутину плагинами, делать таблицы адаптивными и масштабируемыми через компонентные системы. Теперь таблицы в ваших макетах не будут разваливаться при изменении контента, не создадут проблем в адаптиве и легко передадутся в разработку. Системность побеждает хаос — применяйте эти методы, и ваши интерфейсы станут технически безупречными.
