Как в Фигме сделать таблицу: рисуем ячейки и столбцы

18 октября, 2023
  3 минут чтения

Как в Фигме сделать таблицу своими руками? Добавим ячейку через фрейм, напишем нужный текст, зададим параметры стиля – и соединим несколько ячеек в нужное количество строчек и столбиков.

Рисуем табличку

Очень многие начинающие (да и не только!) пользователи не понимают, как в Фигме нарисовать таблицу – и действительно, это не самое очевидное и простое действие. Но мы поможем вам разобраться и покажем один очень понятный и действенный способ создания сетки, в которую вы сможете добавить текст. Более того, вы сможете оформить сетку нужным вам образом: выбрать цвета и оттенки, ширину ячеек.

Читайте также: Как вырезать в Фигме изображение по контуру.

Итак, начинаем разбираться, как сделать таблицу в Figma? Заходим в редактор, открываем пустой новый файл и приступаем:

  • Первым делом ищем иконку фрейма (в виде стрелки) на верхней панели слева – и рисуем прямоугольник;
  • После этого на панели справа выставляем нужные параметры ширины и высоты – кроме того, вы можете отрегулировать их и мышкой вручную;

  • Затем переходим к иконке «Background», жмем на квадратик и выбираем нужный цвет (из палитры – или вводим цифровой код).

Первый шаг сделан! Но так как наша задача – понять, как в Фигме сделать таблицу с текстом, еще рано останавливаться.

  • Находим наверху иконку «Т», ставим на экране текстовое поле и вводим туда нужные данные;

  • Затем передвигаем поле с текстом внутрь фрейма, который создавали ранее, и выравниваем его подходящим способом.

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

  • После этого выбираем стиль текста, размер шрифта, его расположение – все эти параметры вы найдете на панели управления справа. Ура, кажется все получилось!

 

Готовы идти дальше? Вы уже на пути к тому, чтобы разобраться, как создать таблицу в Фигме!

  • Приближаем картинку до пиксельной сетки, затем находим на верхней панели инструмент «Line»;

  • Выбираем его и начинаем отрисовывать линии по контуру – прямо снизу и слева по созданному фрейму;

  • После этого выделяем обе линии и называем их в меню фрейма так, чтобы вы смогли разобраться, о чем идет речь.

Затем выделяем элемент мышкой и переводим его в компонент (для этого просто кликните правой кнопкой мыши на слое и выберите «Create Component»).

Ранее рассказали для вас, как отменить действие в Фигме, если вы ошиблись.

Вот и все, по сути – вы уже поняли, как добавить таблицу в Фигме! Готовый компонент можно дублировать, просто перетаскивая его вправо-влево или вверх-вниз, пока вы не получите нужное число столбиков и строк.

Разумеется, каждая ячейка кликабельна – в нее можно добавлять нужный текст, а потом редактировать его. Удачи, у вас все получится!

Автор

Эдуард По

Специалист в сфере IT и фриланса

Вам может понравиться

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

119!!!!1734088356.5767