Figma: Рисуем билет

В новом уроке предлагаю нарисовать такой интересный с визуальной точки зрения веб-элемент, как билет. В этом формате преподносят итоговую информацию о купленном билете на поездку, перелёт или посещение мероприятия.

Создаём фигуру «Прямоугольник» и задаём радиус скругления углов:

Теперь обозначим отрывную часть. Для этого нарисуем круг, используя «Эллипс» (клавиша O/Щ) и зажатую Shift. Сразу продублируем получившийся круг (Ctrl+C, Ctrl+V). Расположить круги нужно таким образом, чтобы они наполовину заходили на основу:

Выделяем все три слоя (основу и круги), а затем выбираем тип связки фигур «Вычитание верхних фигур»:

Нарисуем линию отрыва. Для этого нарисуем «Пером» (P/З) линию с обводкой, для которой определим пунктирный стиль. Все настройки ниже:

Ещё нам нужен акцентный край справа, где будет указано наименование поставщика услуг. К примеру, компания «Соловьёв Эйр». Для этого продублируем слой с прямоугольной основой, уменьшим её длину или нарисуем новую фигуру, и настроим радиусы углов так, чтобы справа они были закруглены, а слева скругление отсутствовало:

Разместим все необходимые надписи. При этом нужно учитывать, что основная информация указывается крупным шрифтом контрастного цвета, а второстепенные данные — размером поменьше и цветом менее насыщенным:

Осталось изобразить направление. Так же, как мы рисовали линию отрыва, проводим линию от пункта отбытия к пункту прибытия. Можно продублировать имеющуюся линию и изменить её положение. Немного меняем настройки пунктира, чтобы получились точки:

Добавляем (рисуем) иконочку самолёта и веб-элемент готов!