Как в Фигме сделать таблицу своими руками? Добавим ячейку через фрейм, напишем нужный текст, зададим параметры стиля – и соединим несколько ячеек в нужное количество строчек и столбиков.
Рисуем табличку
Очень многие начинающие (да и не только!) пользователи не понимают, как в Фигме нарисовать таблицу – и действительно, это не самое очевидное и простое действие. Но мы поможем вам разобраться и покажем один очень понятный и действенный способ создания сетки, в которую вы сможете добавить текст. Более того, вы сможете оформить сетку нужным вам образом: выбрать цвета и оттенки, ширину ячеек.
Читайте также: Как вырезать в Фигме изображение по контуру.
Итак, начинаем разбираться, как сделать таблицу в Figma? Заходим в редактор, открываем пустой новый файл и приступаем:
- Первым делом ищем иконку фрейма (в виде стрелки) на верхней панели слева – и рисуем прямоугольник;
- После этого на панели справа выставляем нужные параметры ширины и высоты – кроме того, вы можете отрегулировать их и мышкой вручную;
- Затем переходим к иконке «Background», жмем на квадратик и выбираем нужный цвет (из палитры – или вводим цифровой код).
Первый шаг сделан! Но так как наша задача – понять, как в Фигме сделать таблицу с текстом, еще рано останавливаться.
- Находим наверху иконку «Т», ставим на экране текстовое поле и вводим туда нужные данные;
- Затем передвигаем поле с текстом внутрь фрейма, который создавали ранее, и выравниваем его подходящим способом.
Обратите внимание, здесь нет точной инструкции о том, какие отступы выбирать – все зависит от размера ячейки и от результата, который вы хотите получить.
- После этого выбираем стиль текста, размер шрифта, его расположение – все эти параметры вы найдете на панели управления справа. Ура, кажется все получилось!
Готовы идти дальше? Вы уже на пути к тому, чтобы разобраться, как создать таблицу в Фигме!
- Приближаем картинку до пиксельной сетки, затем находим на верхней панели инструмент «Line»;
- Выбираем его и начинаем отрисовывать линии по контуру – прямо снизу и слева по созданному фрейму;
- После этого выделяем обе линии и называем их в меню фрейма так, чтобы вы смогли разобраться, о чем идет речь.
Затем выделяем элемент мышкой и переводим его в компонент (для этого просто кликните правой кнопкой мыши на слое и выберите «Create Component»).
Ранее рассказали для вас, как отменить действие в Фигме, если вы ошиблись.
Вот и все, по сути – вы уже поняли, как добавить таблицу в Фигме! Готовый компонент можно дублировать, просто перетаскивая его вправо-влево или вверх-вниз, пока вы не получите нужное число столбиков и строк.
Разумеется, каждая ячейка кликабельна – в нее можно добавлять нужный текст, а потом редактировать его. Удачи, у вас все получится!
