Фигуры: прямоугольники, круги, линии

Любой интерфейс — это набор простых фигур: прямоугольники-кнопки, круги-аватары, линии-разделители.

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

Figma даёт несколько базовых фигур, и из них собирается большинство элементов интерфейса. Кнопка — это прямоугольник со скруглением и текстом. Аватар — круг с картинкой. Иконка — векторные линии. Начнём с прямоугольника.

Рисуем первую фигуру

1. В нижнем тулбаре нажмите на инструмент фигур или клавишу R (Rectangle — прямоугольник).
2. Зажмите левую кнопку мыши на холсте и протяните — появится прямоугольник.
3. Хотите идеальный квадрат? Зажмите Shift во время рисования.
4. Отпустите мышь. На правой панели в разделе Design появятся ширина W и высота H — их можно вписать вручную.

Аналогично работают другие фигуры: O — эллипс (с Shift — круг), L — линия. Многоугольник и звезда живут в выпадашке инструмента фигур.

Меняем свойства

Выделите фигуру и посмотрите на правую панель:

• Fill (Заливка) — цвет фигуры. Кликните по цветному квадрату, выберите оттенок.
• Stroke (Обводка) — рамка вокруг фигуры, со своей толщиной и цветом.
• Corner radius (Скругление) — округляет углы прямоугольника. Для кнопок ставят 8-12.
• Effects (Эффекты) — тени и размытие.

Прямоугольник как кнопка

  W: 160   H: 48
  Fill:        #2563EB   (синий)
  Corner radius: 8
  + текст «Купить» поверх
  ----------------------
  результат:  [  Купить  ]

Точное скругление углов

Если навести на угол прямоугольника, появится маленький кружок-маркер — потяните его, чтобы скруглить визуально. Для разных углов раскройте опции скругления (иконка рядом с полем) и задайте каждый угол отдельно.

Эффекты: тени и размытие

Раздел Effects на правой панели добавляет фигуре глубину. Нажмите + и выберите тип эффекта: Drop shadow — внешняя тень (для карточек и кнопок), Inner shadow — внутренняя тень (для вдавленных полей ввода), Layer blur — размытие самого объекта, Background blur — размытие того, что под объектом (эффект матового стекла). У каждой тени настраиваются смещение по X и Y, размытие, разброс и цвет с прозрачностью.

Не злоупотребляйте тенями. Современный интерфейс использует мягкие, едва заметные тени с большим размытием и низкой прозрачностью (например, чёрный с opacity 8-12%). Жёсткая чёрная тень выдаёт новичка. Хорошее правило: тень должна намекать на возвышение элемента, а не кричать о себе.

Векторные фигуры и перо

Помимо готовых фигур, Figma умеет рисовать произвольные контуры пером — инструмент Pen (клавиша P). Кликами вы расставляете опорные точки, а между ними тянутся линии; зажав и потянув, получаете кривые Безье. Это нужно для иконок и нестандартных форм. Для начала достаточно знать, что перо существует — большинство иконок вы будете брать готовыми из библиотек-плагинов, а не рисовать вручную.

Горячие клавиши

Частые ошибки

• Растягивают круг в овал. Чтобы получить идеальный круг, держите Shift при рисовании эллипса.
• Путают заливку и обводку. Fill закрашивает фигуру целиком, Stroke — это только рамка по контуру.
• Скругляют углы на глаз. Лучше вписать число в поле Corner radius — так все кнопки будут одинаковыми.

Совет профи: фигуры — это будущие компоненты

Когда рисуете фигуру, уже думайте, чем она станет. Прямоугольник со скруглением 8 и текстом — это будущая кнопка-компонент. Круг с заливкой-фото — будущий аватар. Привыкайте задавать аккуратные, «круглые» числа: ширина 160, высота 48, радиус 8, а не 161.3 на 47.6. Системные значения позже легко превратятся в переменные и стили. И ещё: не плодите фигуры там, где хватит одной — например, рамку лучше делать обводкой (Stroke) той же фигуры, а не отдельным прямоугольником поверх. Чистая геометрия из ровных чисел — фундамент, на котором держится вся дальнейшая работа с авто-лейаутом, компонентами и передачей в код.

Чек-лист

• Нарисовал прямоугольник, круг и линию.
• Поменял заливку и обводку.
• Скруглил углы через Corner radius.
• Задал точные размеры в полях W и H.

Итоги. Базовые фигуры — кирпичи интерфейса. Вы научились их создавать, задавать точные размеры, менять заливку, обводку и скругление. Дальше разберём ключевое понятие — фреймы, без которых не построить настоящий экран.