Что в видео-уроке:
В уроке создаём блок доставки и оплаты, разделяем большой объём информации на понятные смысловые группы, настраиваем Auto Layout и списки, добавляем флаги стран и продолжаем визуальные приёмы из предыдущих блоков.
Разделяем информацию по смыслу
В блоке есть две разные категории информации: условия доставки и условия оплаты. Их лучше не объединять в один большой текстовый массив.
Основной объём занимает информация о доставке, поэтому ей отводим больше пространства. Условия оплаты оформляем как дополнительную смысловую группу и размещаем в отдельной карточке справа.
Так пользователь быстрее понимает структуру блока и может сразу перейти к интересующей его части.
Продолжаем стилистику предыдущих блоков
Вместо разработки нового визуального решения повторяем уже использованные приёмы: стеклянную карточку, круглые декоративные элементы, знакомые цвета и интервалы.
Это помогает поддерживать ритм страницы и делает блок частью общей системы, а не отдельной самостоятельной композицией.
Для внутренних отступов и расстояний используем те же значения, которые уже применялись в предыдущих блоках.
Настраиваем список через Auto Layout
Условия оплаты собираем в список с небольшими круглыми буллетами. Каждый пункт объединяем со своим текстом через Auto Layout, а затем собираем все строки в общий контейнер.
Если текст занимает две строки, буллет должен оставаться рядом с первой строкой, а не выравниваться по центру всей высоты текста.
Для этого контейнер с буллетом растягиваем по высоте через Fill container, а сам круг закрепляем относительно верхней части фрейма. Так положение маркера остаётся стабильным независимо от количества строк.
Добавляем страны доставки
Страны, в которые осуществляется доставка, можно подкрепить флагами. В уроке используются Казахстан, Беларусь, Армения и Кыргызстан.
Для таких элементов лучше искать SVG-файлы. Векторный формат позволяет свободно менять размер флага без ухудшения качества.
Один из удобных источников — страницы Википедии, где для флагов часто доступен исходный SVG-файл. Его можно сохранить и перенести непосредственно в Figma.
При кадрировании важно не потерять значимые элементы национального флага. Если на флаге есть герб или орнамент, композицию нужно корректировать аккуратно.
Собираем флаги в компоненты
Флаг и название страны объединяем в один небольшой компонент, а затем создаём его экземпляры для остальных стран.
После этого достаточно заменить текст и сам флаг, сохранив одинаковые размеры, интервалы и выравнивание.
Группу стран также удобно объединить через Auto Layout, чтобы управлять расстояниями между элементами централизованно.
Выделяем ключевые условия доставки
Под списком стран размещаем основные условия: самовывоз, стоимость или бесплатную доставку от определённой суммы и другие важные параметры.
Для них можно использовать другой тип маркера — например, небольшую галочку. Это помогает визуально отделить условия доставки от списка стран.
Особенно важные значения, например «бесплатно от 2 500», допустимо дополнительно выделить начертанием или акцентным цветом. Главное — проверить, чтобы количество зелёных акцентов не стало чрезмерным.
Уравновешиваем композицию
После размещения текста одна часть блока может оказаться визуально тяжелее другой. В данном случае дополнительный вес создаёт крупная стеклянная карточка справа.
Компенсировать его можно декоративными кругами в противоположной части блока. При этом лучше использовать элементы разных размеров, чтобы композиция не выглядела механически симметричной.
Круги не должны мешать чтению текста или конкурировать с основной информацией — их задача только поддерживать баланс.
Адаптируем эффекты под размер элементов
Эффекты, которые хорошо работают на крупном круге, не всегда можно без изменений перенести на маленький.
На небольших элементах градиент, внутренняя тень и свечение могут становиться слишком заметными или работать иначе по масштабу. Поэтому параметры приходится адаптировать: уменьшать свечение, менять его смещение и корректировать направление градиента.
Чем меньше декоративный объект, тем мягче обычно должны быть его эффекты.
Сохраняем ритм страницы
В этом блоке не появляется принципиально новых визуальных решений. Мы повторяем знакомые формы, цвета, стеклянные элементы и систему акцентов, но используем их в новой композиции.
Именно такое повторение помогает сохранять визуальный ритм: элементы узнаются от блока к блоку, но не копируются буквально. В результате весь лендинг воспринимается как единая дизайн-система.
