Создадим фигуру Четверть круга:
I.Для удобства продублируем четверник и выставим ему полупрозрачность 50%:
II.Также продублируем горизонтальную трубу, только без фигур Фланцы:
Для серого прямоугольника выставим размер 40x28:
Для полупрозрачного слоя выставим размер 30x28:
Разместим его снизу: он пригодится позже.
III.Добавим круг 100x100 с заливкой #929292:
IV.Используя встроенные инструменты Figma, заменим круг на четверть круга:
1.
2.
3.
V.Теперь круг нужно повернуть на 90 градусов по часовой стрелке:
Альтернативный подход, если в вашем редакторе нет встроенных инструментов для изменения круга
1.Создадим прямоугольник 50x100. Разместим его в правой половине круга:
2.Продублируем данный прямоугольник и расположим дубликат горизонтально в верхней части круга:
3.Объединим два прямоугольника с помощью Boolean-операции Union (Объединение):
4.Выберем Union слой, потом Круг и выполним Boolean-операцию Subtract (Вычитание):
5.Четверть круга готова:
|
VI.Создадим новый круг 44x44:
VII.Выберем новый круг 44x44 и четверть круга, а затем применим Boolean-операцию Subtract (Вычитание):
VIII. Переместим четверть круга от центра в правый верхний угол, чтобы сравнить толщину угловой и горизонтальной трубы (они должны быть одинаковыми):
Приблизим для проверки:
Всё в порядке: толщина совпадает.
IX.Если мы добавим Фланцы, то между ними и Трубой будет зазор. В данном случае зазор 14px (потому что под Фланцем тоже должен быть фон с заливкой):
X.Создадим дубликат полукруга. Он будет использоваться в качестве полупрозрачного слоя:
XI.Теперь воспользуемся серым прямоугольником, который мы оставили в нижней части фигуры:
Переместим его на место зазора, предварительно изменив размеры на 14x28:
XII.Продублируем данный прямоугольник и разместим в верхней части трубы:
XIII.Теперь нужно объединить два прямоугольника с трубой при помощи Boolean-операции Union (Объединение):
Boolean-операция Union прошла успешно:
XIV. Преобразуем слой Union в единый path. Для этого в контекстном меню фигуры выбираем Flatten:
XV. Вернёмся к дубликату трубы, которую мы оставили для полупрозрачности:
XVI. Переместим его на уровень выше и выставим радиальный (Radial) градиент:
1.Выставим три точки Stops со следующими значениями:
Stops |
Color |
Opacity |
44% |
#FFFFFF |
0% |
72% |
#FFFFFF |
100% |
100% |
#FFFFFF |
0% |
Значения Stops подбираются экспериментальным путем так, чтобы полупрозрачный градиент обычных труб плавно перетекал в полупрозрачный градиент четверти круга.
2.У данного градиента есть две опорные точки:
3.Верхнюю точку нужно разместить в центр четверти круга полупрозрачности:
4.Нижнюю точку нужно разместить в правый нижний угол полупрозрачности:
Полупрозрачный градиент для трубы готов.
5.Добавим для полупрозрачного градиента ещё два небольших прямоугольника с точно такой же полупрозрачностью.
Для этого воспользуемся прямоугольником, который находился в нижней части фигуры:
6.Изменим размеры данного прямоугольника на 2x28 и переместим, чтобы он закрыл зазор:
7.Создадим дубликат и разместим такой же прямоугольник в верхней части:
XVII. Вернёмся обратно к слою Union, который на предыдущих этапах был преобразован в path:
XVIII. Данный слой нужно переименовать в "change_color".
XIX. Удалим слой четверника, который служил ориентиром:
XX. Переместим в правую, потом в верхнюю часть фигуры "item_flansch":
XXI. Проверим все элементы данной фигуры:
XXII. Сгруппируем все элементы и назовем группу "quarter_circle":
Четверть трубы готова.