Чтобы сделать таблицу в Фигме, соберите её из auto layout: одна ячейка становится компонентом, ячейки складываются в строку, строки в таблицу. Отдельного инструмента Table в дизайн-файле нет, поэтому есть ещё три пути. Режим Grid в auto layout раскладывает ячейки по сетке сам, плагин строит таблицу по заданному числу строк и столбцов, а в FigJam и Figma Slides таблица встроена и вставляется прямо из Excel.
Ниже разберём все четыре способа по шагам и ошибки, из-за которых столбцы разъезжаются. Если редактор для вас новый, сначала загляните в обзор возможностей Figma.
Рекомендуем курсы по Figma
Bonnie & SlideОсновы дизайна в Figma42 800 ₽4 недели
SkillboxFigma 2.029 394 ₽2 месяца
Академия СинергияFigma с нуля до PRO31 836 ₽2 месяца
CloudlessonsСупер Figma23 990 ₽1 месяц
НАДПОВеб-дизайн в редакторе Figma. Повышение квалификации33 400 ₽2 месяца
PurpleSchoolОсновы дизайна и Figma3 999 ₽2 месяца
CheckroiПодборка курсов по Figma356 курсов • 56 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
Какой способ выбрать
Названия кнопок и полей даём так, как они подписаны в программе. Русского интерфейса у Figma официально нет, об обходных путях рассказали в статье о Figma на русском языке.
| Способ | Где работает | Когда брать |
|---|---|---|
| Auto layout и компонент ячейки | дизайн-файл | таблица для макета интерфейса, которую будут править и передавать в разработку |
| Grid в auto layout | дизайн-файл | нужна ровная сетка или объединённые ячейки, как в дашборде |
| Плагин Table Creator | дизайн-файл | таблиц много, собирать их руками долго |
| Встроенная таблица | FigJam и Figma Slides | доска, презентация, перенос данных из Excel или Google Таблиц |
Короткое правило: для макета сайта или приложения берите auto layout, для слайда и доски берите встроенную таблицу.
Как сделать таблицу в Фигме через Auto layout
Это основной способ, им собирают таблицы в дизайн-системах. Таблица выходит «живой»: поменяли стиль одной ячейки, и он обновился везде. Опираемся на справку Figma по auto layout.
Шаг 1: ячейка
- Возьмите инструмент Text (клавиша T) и напишите текст ячейки, например «Тариф».
- Выделите текст и нажмите Shift + A. Вокруг текста появится фрейм с auto layout.
- В правой панели задайте Padding, например 12 по вертикали и 16 по горизонтали. Заливку фона и разделитель настройте в блоках Fill и Stroke.
- Превратите фрейм в компонент: Ctrl + Alt + K в Windows или ⌥ + ⌘ + K на Mac. Тот же пункт Create component есть в меню правого клика, порядок описан в справке о компонентах.
Шаг 2: строка и вся таблица
- Скопируйте компонент и вставьте нужное число раз (Ctrl + C, Ctrl + V). Каждая копия станет экземпляром, так описано в справке об экземплярах.
- Выделите ячейки одной строки и нажмите Shift + A. Направление поставьте горизонтальное, а Gap обнулите, чтобы ячейки встали вплотную.
- Продублируйте строку (Ctrl + D) столько раз, сколько нужно строк, выделите их все и снова нажмите Shift + A, уже с вертикальным направлением.
- Поменяйте тексты в ячейках. Для шапки сделайте отдельный компонент с жирным шрифтом и тёмным фоном.
Шрифт для ячеек выбирайте с кириллицей, список встроенных вариантов есть в подборке шрифтов для Фигмы.
Шаг 3: ширина столбцов
Ячейки по умолчанию обнимают текст (Hug contents), и столбцы получаются кривыми: «Тариф» узкий, «Безлимитный» широкий. Это главная беда ручной таблицы.
Решение: выделите все ячейки одного столбца через Shift и задайте им одну ширину в режиме Fixed width. Если таблица должна тянуться на всю ширину страницы, поставьте строкам фиксированную ширину, а ячейкам режим Fill container: такие слои растягиваются на всё свободное место во фрейме строки.
Строки или столбцы: что собирать первым
Таблицу можно собрать и наоборот, из вертикальных столбцов. У каждого варианта своя слабость.
| Структура | Плюс | Минус |
|---|---|---|
| Из строк | строку легко добавить, удалить или подсветить при наведении | ширину каждого столбца приходится держать вручную |
| Из столбцов | столбец сам подстраивается под самую длинную ячейку | если в одной ячейке текст перенёсся на вторую строку, ряды сбиваются по высоте |
Типовую таблицу с короткими значениями собирайте из строк. Столбцы выручают, когда длина данных заранее неизвестна, например в таблице сравнения тарифов.
Канал основателя Checkroi Вани Буявца3 800 человек читают мой Телеграм-канал про нейросетиСобрал промпты для Claude Code и ChatGPT, разборы ИИ-инструментов и лайфхаки по продвижению бизнеса в одном местеПрисоединитьсяТаблица через Grid в auto layout
В auto layout есть три направления: Vertical, Horizontal и Grid. Grid раскладывает объекты по ячейкам сетки, поэтому выравнивать столбцы руками не нужно. Шаги взяты из справки Figma о режиме Grid.
- Нарисуйте фрейм (клавиша F), добавьте ему auto layout через Shift + A и выберите направление Grid.
- В правой панели откройте выбор сетки и укажите Number of columns, например 4. Поле Number of rows по умолчанию стоит в auto: строки добавятся сами, когда закончатся свободные ячейки.
- Задайте отступы между ячейками в полях Gap between rows и Gap between columns. Для таблицы с линиями между строками ставьте 0.
- Вставьте во фрейм ячейки, хоть экземпляры компонента из прошлого раздела. Они займут места слева направо и сверху вниз.
- Чтобы ячейка заняла два столбца, поставьте ей Fill container и введите 2 в поле Column span. Так же через Row span объединяют строки.
Ширину столбцов здесь задают сами треки сетки: fixed, fill container в долях (1fr, 2fr) или hug contents. Доли fr работают так же, как в CSS Grid, и разработчик узнает в макете знакомую разметку. Как устроены колонки и отступы обычной сетки макета, разобрали в статье о том, как включить сетку в Фигме.
Grid удобен для дашбордов и карточек с разной шириной. Такие экраны чаще всего и рисует дизайнер интерфейсов, когда в продукте много данных. Собирать такие макеты от компонентов до прототипа учат на курсах по Figma.
Плагин Table Creator
Если таблиц в проекте десяток, ручная сборка надоедает. Table Creator на 12 ноября 2026 года установили больше 830 тысяч пользователей, порядок работы с ним автор описал на странице плагина.
- Установите плагин из Figma Community и откройте его в файле.
- Через Quick Actions найдите команду Create Table и нажмите Tab.
- Выберите шаблон, затем число столбцов и строк в формате 4×10, затем размер, например 600xHUG.
- Нажмите Enter, и таблица появится на холсте.
- Новый столбец добавляйте командой Insert Column, а поменять местами строки и столбцы поможет кнопка Switch Axes в панели свойств.
Ограничения автор перечисляет сам в разделе Limitations на странице плагина:
- объединять ячейки нельзя;
- строки нельзя вести как варианты компонента;
- копия таблицы остаётся связанной с оригиналом, пока не нажать Toggle Resizing или Detach Table.
Если нужна объединённая шапка, соберите эту таблицу через Grid. Как завести аккаунт и поставить десктопное приложение, рассказали в инструкции по регистрации в Figma.
Встроенная таблица в FigJam и Figma Slides
В доске FigJam и в презентациях Figma Slides таблица есть как готовый инструмент. Для макета интерфейса она не подходит, зато для планов, сравнений и отчётов собирается за минуту.
В FigJam
- Нажмите значок Table на панели инструментов или Shift + T и протяните мышью сетку нужного размера.
- Строку или столбец в конец добавляет синяя полоса у края таблицы, а в середину вставляет плюс на линии границы.
- Данные из Excel или Google Таблиц копируются и вставляются на пустое место холста через Ctrl + V.
- Готовую таблицу можно выгрузить картинкой, PDF или CSV через Export selection (Ctrl + Shift + E).
Всё это описано в справке о таблицах в FigJam. Если вставка не сработала, справка советует сохранить данные в формат CSV и импортировать файл.
В Figma Slides
- Откройте меню Assets на панели инструментов, выберите Table и протяните сетку.
- Скопированные ячейки из таблицы вставляются на пустой слайд, и Slides сам создаёт таблицу с нужным числом строк и столбцов.
- CSV-файл можно просто перетащить в презентацию.
- В одной таблице не больше 500 ячеек, большие данные придётся делить.
Лимит и шаги взяты из справки Figma Slides. Как собрать саму презентацию, рассказали в статье о том, как сделать презентацию в Фигме. А если данные сначала нужно свести в одну таблицу, пригодится инструкция о том, как вставить таблицу в Google Таблицу.
Как оформить таблицу, чтобы её читали
Сетка готова, теперь оформление. Таблицу в интерфейсе сканируют глазами, и пара правил оформления экономит пользователю секунды на каждой строке.
- Числа выравнивайте по правому краю, текст по левому. Так разряды встают друг под другом, и 1 200 легко сравнить с 12 000.
- Выберите что-то одно: чередующийся фон строк («зебру») или тонкие линии между ними. Если включить оба приёма сразу, таблица выглядит пёстрой.
- Шапку отделите весом шрифта или фоном, а не только цветом текста: светло-серую подпись на белом читать тяжело.
- Единицы измерения уносите в шапку: «Цена, ₽» вместо значка рубля в каждой ячейке.
- Длинный текст в ячейке обрезайте многоточием или разрешайте перенос, но одинаково во всём столбце.
Состояния строки
В живом интерфейсе строка бывает обычной, выбранной и под курсором. Сделайте для этого варианты компонента строки или ячейки, тогда в прототипе состояние переключается одним свойством. В таблице, собранной вручную из прямоугольников, так не выйдет.
Таблица на телефоне
Пять столбцов на экран телефона не помещаются. Обычно поступают одним из двух способов:
- Оставляют первый столбец на месте, а остальные прокручиваются вбок.
- Превращают каждую строку в карточку, где подписи столбцов стоят слева от значений.
Карточки подходят, когда строк немного: длинный список карточек приходится долго листать. Рисуйте мобильную версию сразу, а не в последний день перед сдачей макета.
Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 800 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в каналЧастые ошибки и как их исправить
| Что видите | Почему | Что сделать |
|---|---|---|
| Столбцы разной ширины в разных строках | ячейки в режиме Hug contents | задать ячейкам столбца одну фиксированную ширину или Fill container |
| Ячейки разъехались с зазором | в строке остался Gap | поставить Gap 0, разделители рисовать обводкой |
| Стиль поменялся только в одной ячейке | правили экземпляр, а не главный компонент | изменить главный компонент, экземпляры обновятся сами |
| После уменьшения числа столбцов в Grid ячейки перемешались | объекты из удалённого столбца переехали в ближайшие ячейки | вернуть ячейки на места вручную или сначала освободить крайний столбец |
| Копия таблицы из плагина меняется вместе с оригиналом | копии связаны через первую строку | нажать Toggle Resizing или Detach Table |
| Таблица из Excel не влезает в слайд | больше 500 ячеек | разбить данные на несколько таблиц |
Самая частая ошибка новичков — рисовать таблицу прямоугольниками и линиями. Выглядит так же, но любая правка текста превращается в двигание десятков слоёв. Собранная на auto layout таблица перестраивается сама. Чтобы отдать её разработчику или в презентацию, выгрузите фрейм в PNG или PDF по инструкции о том, как сохранить проект в Фигме.
Где освоить Figma системно
Таблица лишь одна из десятков задач, которые дизайнер решает каждый день. Компоненты, варианты и auto layout осваивают на курсах: там дают макеты для практики и разбирают ошибки. Мы сравнили программы разных школ в каталоге онлайн-курсов Figma, а если цель — профессия, смотрите путь UX/UI-дизайнера с нуля.
| Курс | Школа | Стоимость со скидкой | В рассрочку | Длительность | Обзор курса от Checkroi |
|---|---|---|---|---|---|
| Основы дизайна в Figma Перейти на сайт курса | Bonnie & Slide | 42 800 ₽ | 2366 ₽/мес. | 4 недели | Обзор курса |
| Figma 2.0 Перейти на сайт курса | Skillbox | 29 394 ₽ | 4899 ₽/мес. | 2 месяца | Обзор курса |
| Figma с нуля до PRO Перейти на сайт курса | Академия Синергия | 31 836 ₽ | 2653 ₽/мес. | 2 месяца | Обзор курса |
| Супер Figma Перейти на сайт курса | Cloudlessons | 23 990 ₽ | 1000 ₽/мес. | 1 месяц | Обзор курса |
| Figma с нуля до PRO Перейти на сайт курса | Skillbox | 39 334 ₽ | 1091 ₽/мес. | 2 месяца | Обзор курса |
Больше программ — в полном каталоге курсов по Figma
