Как в Taptop нарисовать линию, квадрат, круг и другие фигуры

В Taptop нет инструмента для рисования примитивов, как в Figma. Фигуры собираются из обычных блоков: вы задаете размеры, фон, границы, скругления и при необходимости поворачиваете элемент.

Квадрат и прямоугольник

Обе фигуры создаются одинаково — из Div Block. Разница только в пропорциях сторон.

Добавьте Div Block.

Задайте ширину и высоту, например 200px × 200px или 300px × 200px. Если значения равны — получится квадрат. Если разные — прямоугольник.

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

Круг и эллипс

Здесь логика та же, но добавляется скругление.

Добавьте Div Block.

Задайте ширину и высоту, например 200px × 200px или 300px × 200px. При равных сторонах получится круг, при разных — эллипс.

Задайте цвет фона или границы.

Задайте радиус — 50%.

Горизонтальная линия

1 вариант. С помощью размера и фона

Добавьте Div Block.

Задайте ширину блока — это будет длина линии, например 400px.

В настройке высоты укажите желаемую толщину линии, например 2 px.

Задайте цвет фона.

2 вариант. С помощью границы

Добавьте Div Block.

Задайте ширину блока — это будет длина линии, например 400px.

Задайте границу сверху или снизу — толщину и цвет.

Такой способ удобен, если линия является частью структуры блока.

Вертикальная линия

1 вариант. С помощью размера и фона

Добавьте Div Block.

Задайте высоту — это будет длина линии, например 200px.

В параметре ширины укажите желаемую толщину линии, например 2 px.

Задайте цвет фона.

2 вариант. С помощью границы

Добавьте Div Block.

Задайте высоту — это будет длина линии, например 200px.

Задайте границу слева или справа — толщину и цвет.

Линия под углом

Чтобы получить диагональ, элемент нужно повернуть.

Создайте горизонтальную или вертикальную линию.

Добавьте Трансформацию, нажав на «+» и в ее настройках задайте Вращение (Rotate) по оси Z на нужное количество градусов, например 45.

Повернутый квадрат (ромб)

Создайте квадрат с равными сторонами.

Добавьте Трансформацию, нажав на «+» и в ее настройках задайте Вращение (Rotate) по оси Z на 45 градусов.

При необходимости скорректируйте позиционирование.

Что важно учитывать

Любая фигура остается обычным блоком. Поэтому вы можете:

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

использовать абсолютное позиционирование

добавлять фигуре тени, прозрачность, эффекты

анимировать фигуру