Добавить элементы в письмо | Creatio Academy
Элемент Картинка
Элемент Картинка (Рис. 1) используется для добавления в шаблон произвольных изображений. Он состоит из двух частей: непосредственно изображения и графического контейнера.
Рис. 1 — Добавление изображения
Панель настройки картинки
В этой области можно просмотреть и изменить настройки стиля изображения.
Рис. 2 — Панель настройки картинки
Параметр | Описание |
|---|---|
Навигационная цепочка (1) | Воспользуйтесь навигационной цепочкой для перемещения между настройками вложенных элементов шаблона. |
Настройки картинки | Чтобы добавить картинку в шаблон, в поле загрузите изображение или введите его URL-адрес. На заметку. Элемент Картинка поддерживает URI данных. Вы можете вставить изображение в кодировке base64 вместо URL. Ссылка — если необходимо, чтобы по щелчку на изображение пользователь переходил на определенную страницу, укажите URL-адрес нужной страницы. Подсказка — краткая информация об изображении, которая будет отображаться при наведении курсора на картинку. На заметку. Подсказки обычно используются для добавления в шаблон неочевидной информации о картинке. Альтернативный текст — послание, которое мотивирует получателя загрузить графические элементы в письмо. В некоторых почтовых клиентах может быть применена настройка, которая по умолчанию отключает изображения во входящих письмах. Заполните поле Альтернативный текст описанием изображения, чтобы получатели увидели его вместо пиктограммы, заменяющей отсутствующее изображение. |
Размер, px | Укажите ширину и высоту картинки. Загруженная картинка масштабируется автоматически, поля Ширина и Высота заполняются значением “Авто”. Автоматическое масштабирование картинки выполняется по размеру графического контейнера, а не по исходному размеру изображения, поэтому картинка может отображаться деформированной. Укажите хотя бы один из параметров, чтобы при масштабировании соблюдалось соотношение сторон, как в исходном изображении. Укажите оба параметра, чтобы принудительно изменить размер изображения до указанной высоты и ширины без учета соотношения. |
Выравнивание | Настройте горизонтальное выравнивание для картинки (по левому краю , по центру или по правому краю ). На заметку. Выравнивание может не дать видимого эффекта в зависимости от соотношения параметров изображения и контейнера. |
Отступы, px | Укажите расстояние (в пикселях) между картинкой и ее границами. Отступы указываются отдельно для каждой из границ. |
Скругление углов | Укажите радиус скругления углов картинки. Если вы хотите сохранить острые углы, оставьте этот параметр незаполненным. Эта настройка определяет радиус скругления для всех четырех углов картинки. На заметку. Используйте элемент HTML и код со встроенными стилями CSS, чтобы настроить эллиптические углы и другие специальные эффекты. |
Фон | Укажите цвет фона графического контейнера. По умолчанию использование фона для новых элементов неактивно. Чтобы активировать настройку фона, установите признак (2). Чтобы отключить использование фона для текущей картинки, этот признак необходимо снять. Чтобы настроить однотонный фон, нажмите и в открывшемся окне выберите необходимый цвет. На заметку. Фон заполняет полностью весь графический контейнер. |
Границы | Здесь выполняется настройка границ картинки. По умолчанию использование визуальных границ для новых изображений неактивно. Чтобы активировать настройку границ, установите признак (3). Чтобы указать цвет границ, нажмите и в открывшемся окне выберите необходимый цвет. В поле укажите ширину границы. Для скрытой границы установите стиль “Hidden”. В меню (4) выберите стиль границ. По умолчанию при активации использования границ устанавливается стиль “Solid”. Для выбора в списке доступны следующие стили:
На заметку. Граница определена, но не отображается. В этом стиле ширина границы фактически равна “0”.
Определите, какие границы использовать, при помощи признаков Верхний, Нижний, Слева и Справа. |
Например, если для картинки настроены отступы больше нуля, то вокруг изображения будет виден цветной фон. Если в изображении есть прозрачные участки, то под ними также будет виден цветной фон.
Элемент Кнопка
Элемент Кнопка (Рис. 3) предназначен для визуализации ссылок призыва к действию. Также элементы Кнопка называются “призыв к действию” и по сути являются ссылками, представленными в виде кнопок.
Рис. 3 — Добавление кнопки в шаблон
Элемент контента Кнопка не тождественен HTML-элементу <button>.
Для добавления в шаблон HTML-элемента <button> воспользуйтесь блоком контента HTML.
Панель настройки кнопки
В этой области можно просмотреть и изменить настройки стиля кнопки.
Рис. 4 — Панель настройки кнопки
Параметр | Описание |
|---|---|
Навигационная цепочка (1) | Воспользуйтесь навигационной цепочкой для перемещения между настройками вложенных элементов шаблона. |
Ссылка для перехода | По URL-адресу, указанному в этом поле, будет выполнен переход при клике на кнопку. |
Шрифт | В этой группе настроек определяются свойства шрифта текста на кнопке. Набор шрифтов дизайнера шаблонов — укажите шрифт кнопки. Перечень шрифтов, доступных к использованию в письмах, настраивается в справочнике Набор шрифтов дизайнера шаблонов. Размер, px — укажите высоту шрифта в пикселях. Чтобы изменить цвет шрифта, нажмите и в открывшемся окне выберите необходимый цвет. Высота строки, px — укажите расстояние между строками текста и границами элемента. Максимально допустимая высота строки составляет 250 пикселей, а минимальная не может быть меньше высоты шрифта. Расстояние между символами, px — укажите расстояние между символами в надписи. |
Размер, px | Укажите ширину и высоту кнопки в пикселях. |
Выравнивание | Настройте для кнопки горизонтальное (по левому краю , по центру или по правому краю ) и вертикальное (по верхней границе , по центру или по нижней границе ) выравнивание для кнопки. На заметку. Применение к стандартной кнопке различных параметров выравнивания по вертикали, скорее всего, не даст видимого эффекта из-за недостаточной высоты элемента. |
Внешние отступы, px | Укажите расстояние, которое должно отделять кнопку от границ секции и/или соседних элементов контента. Это расстояние указываются отдельно для каждой из сторон кнопки. |
Отступы, px | Укажите расстояние (в пикселях) между текстом кнопки и ее границами. Отступы указываются отдельно для каждой из границ. |
Скругление углов | Укажите радиус скругления углов кнопки. Если вы хотите сохранить острые углы, оставьте этот параметр незаполненным. Эта настройка определяет радиус скругления для всех четырех углов кнопки. На заметку. Используйте элемент HTML и код со встроенными стилями CSS, чтобы настроить эллиптические углы и другие специальные эффекты. |
Фон | Укажите цвет фона кнопки. По умолчанию для кнопок активно использование фона. Чтобы отключить фон, снимите признак (2). Установите признак, чтобы применить все настройки фона кнопки. Чтобы настроить однотонный фон, нажмите и в открывшемся окне выберите необходимый цвет. |
Границы | Здесь выполняется настройка границ кнопки. По умолчанию использование визуальных границ для новых кнопок неактивно. Чтобы активировать настройку границ, установите признак (3). Чтобы указать цвет границ, нажмите и в открывшемся окне выберите необходимый цвет. В поле укажите ширину границы. Для скрытой границы установите стиль “Hidden”. В меню (4) выберите стиль границ. По умолчанию при активации использования границ устанавливается стиль “Solid”. Для выбора в списке доступны следующие стили:
На заметку. Граница определена, но не отображается. В этом стиле ширина границы фактически равна “0”.
Определите, какие границы использовать, при помощи признаков Верхний, Нижний, Слева и Справа. |
Элемент Текст
Элемент Текст (Рис. 5) используется для добавления текста сообщения в шаблон письма. У этого элемента, кроме панели настройки в правой части окна, есть также панель инструментов, которая открывается в рабочей области дизайнера при выделении элемента.
Рис. 5 — Добавление элемента Текст в шаблон письма
Панель настройки текста
Здесь выполняется настройка базового шрифта и стилей текста.
Рис. 6 — Панель настройки текста
Параметр | Описание |
|---|---|
Навигационная цепочка (1) | Воспользуйтесь навигационной цепочкой для перемещения между настройками вложенных элементов шаблона. |
Шрифт | В этой группе настроек определяются характеристики шрифта, которым будет написан ваш текст в письме. Набор шрифтов дизайнера шаблонов — укажите шрифт текста. Размер, px — укажите высоту шрифта в пикселях. Чтобы изменить цвет шрифта, нажмите и в открывшемся окне выберите необходимый цвет. Высота строки, px — укажите расстояние между строками текста и границами элемента. Максимально допустимая высота строки составляет 250 пикселей, а минимальная не может быть меньше высоты шрифта. Расстояние между символами, px — укажите расстояние между символами в надписи. |
Размер, px | Размер, px — укажите высоту шрифта в пикселях. |
Выравнивание | Настройте для текста горизонтальное выравнивание (по левой границе , по центру , по правой границе или растянуть по ширине ). |
Высота, px | Укажите высоту текстового контейнера (в пикселях). В этом поле указывается фиксированная высота текстового контейнера. Такой контейнер не будет адаптироваться под размер и количество текста. |
Отступы, px | Укажите расстояние (в пикселях) между текстом и границами контейнера. Отступы указываются отдельно для каждой из границ. |
Фон | Укажите цвет фона текстового контейнера. По умолчанию использование фона для новых элементов неактивно. Чтобы активировать настройку фона, установите признак (2). Чтобы отключить использование фона для текущего элемента, этот признак необходимо снять. Чтобы настроить однотонный фон, нажмите и в открывшемся окне выберите необходимый цвет. |
Перечень шрифтов, доступных к использованию в письмах, настраивается в справочнике Набор шрифтов дизайнера шаблонов.
Элемент Меню
Элемент Меню представляет собой навигационную панель, которая состоит из перечня ссылок (Рис. 7).
Для этого элемента можно настроить разное отображение для компьютеров и мобильных устройств.
Рис. 7 — Добавление меню в шаблон письма
Рис. 8 — Панель настройки меню
Параметр | Описание |
|---|---|
Навигационная цепочка (1) | Воспользуйтесь навигационной цепочкой для перемещения между настройками вложенных элементов шаблона. |
Конструктор меню | Добавляйте, удаляйте или перемещайте ссылки навигации. Для перехода к настройке пункта меню кликните по его названию в конструкторе. Для добавления нового пункта меню нажмите Добавить ссылку. Чтобы удалить ссылку, нажмите кнопку . Единственную ссылку в меню удалить нельзя. |
Выравнивание | Настройте выравнивание для ссылок в меню. |
Гамбургер меню | Установите признак, чтобы на мобильных устройствах меню трансформировалось в “гамбургер” — ссылки можно было отобразить или скрыть под иконкой-“гамбургером”. |
Выравнивание иконки | Настройте выравнивание для иконки-“гамбургера” (по левой границе , по центру или по правой границе ). Это поле отображается только в том случае, если установлен признак Гамбургер меню. |
Цвет иконки | Нажмите , чтобы изменить цвет иконки-“гамбургера”. Это поле отображается только в том случае, если установлен признак Гамбургер меню. |
Элемент Пункт меню
Элемент Пункт меню (Рис. 9) представляет собой ссылку, которая входит в родительскую навигационную панель, состоящую из навигационных ссылок.
Рис. 9 — Добавление пункта меню
Рис. 10 — Панель настройки пункта меню
Параметр | Описание |
|---|---|
Навигационная цепочка (1) | Воспользуйтесь навигационной цепочкой для перемещения между настройками вложенных элементов шаблона. |
Ссылка для перехода | Укажите URL-адрес для перехода. |
Шрифт | В этой группе настроек определяются характеристики шрифта, который будет использоваться для пункта меню. Набор шрифтов дизайнера шаблонов — укажите шрифт для пункта меню. Перечень шрифтов, доступных к использованию в письмах, настраивается в справочнике Набор шрифтов дизайнера шаблонов. Подробнее: Настроить шрифты в дизайнере контента. Размер, px — укажите высоту шрифта в пикселях. Чтобы изменить цвет шрифта, нажмите и в открывшемся окне выберите необходимый цвет. Высота строки, px — укажите расстояние между строками текста и границами элемента. Максимально допустимая высота строки составляет 250 пикселей, а минимальная не может быть меньше высоты шрифта. |
Отступы, px | Укажите расстояние (в пикселях) между текстом и границами контейнера. Отступы указываются отдельно для каждой из границ. |
Элемент [Разделитель]
Элемент Разделитель (Рис. 11) используется для размежевания соседних элементов горизонтальными линиями или полями.
Рис. 11 — Добавление разделителя в шаблон письма
На панели настройки вы можете задать высоту разделителя, а также указать цвет и толщину горизонтальной линии.
Рис. 12 — Панель настройки разделителя
Параметр | Описание |
|---|---|
Навигационная цепочка (1) | Воспользуйтесь навигационной цепочкой для перемещения между настройками вложенных элементов шаблона. |
Настройки разделителя | В этой группе настроек вы можете задать стиль, цвет и толщину горизонтальной линии разделителя. |
Отступы, px | Укажите расстояние (в пикселях) между линией разделителя и границами элемента. Отступы указываются отдельно для каждой из границ. |
Фон | Используйте эту группу настроек для того, чтобы настроить или удалить фон разделителя. |
Элемент [Отступ]
Элемент Отступ (Рис. 12) используется для разделения смежных элементов пустым пространством, по аналогии с прозрачной горизонтальной линией.
Рис. 12 — Добавление отступа в шаблон
Рис. 13 — Панель настройки отступа
Параметр | Описание |
|---|---|
Навигационная цепочка (1) | Воспользуйтесь навигационной цепочкой для перемещения между настройками вложенных элементов шаблона. |
Размер, px | Заполните поле Высота, чтобы определить размер отступа. |
Фон | Укажите цвет фона отступа. По умолчанию использование фона для новых элементов неактивно. Чтобы активировать настройку фона, установите признак (2). Чтобы отключить использование фона для текущего элемента, этот признак необходимо снять. Чтобы настроить однотонный фон, нажмите и в открывшемся окне выберите необходимый цвет. |
кнопки и формы для ввода информации — Дизайн на vc.ru
76 220 просмотров
Продолжаем создавать собственную дизайн-систему в Figma. Сегодня будет много букв и картинок. Мы поговорим о том, как я делаю компоненты для кнопок, инпутов, чекбоксов, радиобоксов, выпадающих списков и прочих элементов, которые часто встречаются в дизайне сайтов и интерфейсов.
В прошлой статье мы создавали стили для текста, заливок, стили теней, а также компонент для плашек.
В своем Telegram-канале я регулярно делюсь полезными ссылками, своими статьями, мыслями о своей работе.
Кнопки
Кнопки могут иметь несколько состояний:
- Кнопка в спокойном состоянии.
- Кнопка при наведении.
- Кнопка, подсвеченная при навигации по странице при помощи таба.
- И неактивная кнопка.
Сегодня мы рассмотрим, как отрисовать все эти состояния и легко переключаться между ними.
Кнопки в Figma можно создать двумя способами: с использованием Auto Layout (масштабируются вместе с текстом внутри) и кнопки с текстом, расположенным по центру вне зависимости от того, до какого размера масштабирована сама кнопка. В разных ситуациях удобны разные варианты кнопок.
Базовый (родительский) компонент кнопки с использованием Auto Layout
Создаем прямоугольник нужного размера, задаем скругление углов и прочие эффекты, если нужно.
Подбираем цвет из палитры, которую мы создавали в предыдущей статье. У меня это будет синяя кнопка. Если забыли создать нужны стиль — создаём, добавляем в нашу систему.
С помощью Text Tool (T) пишем название кнопки. Задаем стиль текста, зарезервированный в нашей дизайн-библиотеке специально для кнопок (смотри предыдущую статью).
Применение текстового стиля в Figma Татьяна Маслакова
Жмем на иконку с тремя точками в панели справой. Делаем настройки, как на картинке. Теперь границы рамки текста будут изменяться в размере вместе с самим текстом по мере набора фразы.
Настройка центрирования текста в кнопке в Figma Татьяна Маслакова
Далее выравниваем слой с текстом относительно прямоугольника по центру. Для этого, выделив оба слоя, последовательно жмем две иконки вверху в правой панели:
Выравнивание объектов в Figma Татьяна Маслакова
Затем выделаем оба слоя и запаковываем в компонент, задаем компоненту имя.
Сразу поговорим об именовании компонентов: чтобы слева на вкладке Assets наши компоненты расположились в одной группе, их следует именовать через слеш. Например я хочу, чтобы все кнопки у меня попали в папку Button. Для этого я использую в именах префикс button /. Например button /blue и так далее. Таким же образом можно создавать подпапки. Заранее продумайте, как вы хотите объединить создаваемые вами компоненты и придумайте названия для папок.
Чтобы объединить компоненты в одну группу, назначаем всем им грамотные имена с использованием / Татьяна Маслакова
Это удобно также и при замене компонентов в instance. Они там также объединяются в группы.
Чтобы объединить компоненты в одну группу, назначаем всем им грамотные имена с использованием «/» Татьяна Маслакова
Итак, мы задали имя новому компоненту кнопки. Далее, не снимая выделения с компонента в панели справа ищем вкладку Auto Layout и жмем плюс.
Теперь, если мы захотим отредактировать текст кнопки, ее размер будет изменяться вместе с этим текстом.
Изменяя два правых параметра на вкладке Auto Layout, добиваемся подходящего размера отступов по вертикали и горизонтали от границ текста до края кнопки.
Доработка функционала кнопки
Мы можем расширить функционал компонентакнопки, к примеру, добавить в кнопку иконку, которую можно будет скрывать или показывать в слуае необходимости.
Рисуем необходимые иконки, задаем им цвет из палитры. Запаковываем в компоненты. Задаем имена так, чтобы они группировались.
Иконки для кнопок Татьяна Маслакова
Внимание: размеры компонентов должны быть одинаковыми. У меня получилось поле 20×20 пикселей. Иконка внутри компонента может не занимать все это поле, но сами компоненты иконок должны быть идентичны по размеру.
Копируем одну из иконок и помещаем ее экземпляр внутрь компонента с кнопкой, у меня иконка встанет перед текстом.
Помещаем иконку в кнопку с Auto Layout в Figma Татьяна Маслакова
Остальные иконки пока оставляем в покое. Позже я покажу, как можно легко манипулировать кнопками.
Скрываем на палитре слоев новую иконку, чтобы базовое изображение кнопки было простым, при в процессе работы с экземплярами кнопки, мы сможем отобразить иконку, если она понадобится в дизайне.
Базовый компонент готов.
Другие состояния кнопки
Наведение
Создаем экземпляр компонента кнопки (Contrl+d или Comand+d самого компонента или перетащить новую кнопку из панели Assets).
Выделим новый экземпляр и зададим параметры оформления для этого состояния кнопки: настраиваем цвет, обводку, можем добавить тень, другие эффекты (не забываем при этом предварительно задать стиль для используемых эффектов). Можно применить настройки и к тексту (цвет, шрифт, начертание и т.п.).
Я изменила стиль заливки кнопки, у меня кнопка будет чуть чуть темнеть при наведении.
Теперь выделяем экземпляр кнопки и снова запаковываем ее в компонент, даем имя с использованием /. Новый компонент теперь наследует компонент базовой кнопки. Если мы что-то поменяем в базовой кнопке (кроме цвета, который мы переопределили), это сразу отразится на состоянии других кнопок, созданных на основе базового компонента кнопки.
Компонент кнопки при наведении в Figma Татьяна Маслакова
Активность по табу и неактивная кнопка
Это состояние делается аналогичным образом. Создается экземпляр компонента базовой кнопки и изменяются нужные параметры: заливка, стиль, эффекты.
У меня активные по табу кнопки будут иметь синюю тень. Для этого я дополнительно создала стиль для тени. Как это сделать, читайте в предыдущей статье.
Для неактивной кнопки (которую нельзя нажать и она в интерфейсе например будет активирована позже) я сделала полупрозрачный фон, чтобы кнопка интересно смотрелась не только на белом, но и на на неоднородном цветном фоне.
Для этого был создан новый стиль заливки с прозрачностью в 15%. У теста внутри кнопки была понижена непрозрачность до 50%.
Компоненты различных состояний кнопки в Figma Татьяна Маслакова
Кнопки без Auto Layout, которые можно масштабировать
Иногда необходимо четко вписать кнопку в сетку проекта, либо сделать кнопку огромной на всю ширину контента.
Начинаем так же, как в пред. варианте: создаем прямоугольник, текст, центрируем их и создаем компонент. Но в этот раз вместо Auto Layout мы будем задавать Constraints: Center, Center:
Создание компонента кнопки в Figma без Auto Layout Татьяна Маслакова
Если в кнопках нужны иконки, то нужно сгруппировать текст и иконку и применить Auto Layout только на саму эту группу. А далее уже центрировать с помощью Constraints всю группу внутри кнопки.
Constraints для фонового прямоугольника: Left+Right, Top+Bottom.
Состояния масштабируемой кнопки: создаем экземпляр компонента масштабируемой кнопки, настраиваем внешний вид.
Запаковываем все в еще один компонент с настройками Constraints: Left+Right, Top+Bottom.
Auto Layout в данном случае не используется.
Кнопки могут состоять не только из прямоугольника и текста. Очень интересно смотрятся разного рода кнопки, построенные шейпах с различными настройками Constraints или Auto Layout:
Нестандартный дизайн кнопок в Figma Татьяна Маслакова
Используя описанные принципы, мы можем создать компоненты кнопок другого цвета, кнопки с обводкой и т.д. Главное правило: компоненты должны наследоваться от компонента базовой кнопки. Этот компонент будет влиять на остальные и задавать им базовые свойства.
Таким образом можно легко управлять всеми кнопками сразу через базовый компонент:
Управление всеми кнопками через базовый компонент в Figma Татьяна Маслакова
Итак, мы создали много разных компонентов кнопок, унаследованных от одного базового компонента. Посмотрите, как легко менять варианты кнопок через instance, отображать или скрывать дополнительную иконк, менять сами иконки:
Гибкое манипулирование кнопками Татьяна Маслакова
Мы еще не раз применим в нашей библиотеке принцип наследования.
Благодаря этому, изменения всей системы будут занимать минимум времени и наша дизайн-система будет очень гибкой и легко перестраиваемой под различные проекты в совершенно разных стилях.
Благодаря этому, изменения всей системы будут занимать минимум времени и наша дизайн-система будет очень гибкой и легко перестраиваемой под различные проекты в совершенно разных стилях.Инпуты (поля ввода)
Вспомогательный компонент form_stroke/simple
Далее мы рассмотрим различные формы ввода информации. Для их создания нам понадобится небольшой вспомогательный компонент form_stroke/simple.
Обратите внимание на именование компонента — я заранее его задаю с использованием /, чтобы позднее добавить в группу компонентов form_stroke другие вспомогательные компоненты
Компонент form_stroke/simple будет содержать в себе стиль оформления самого прямоугольника формы ввода. Я сделала обычный прямоугольник со сругленными углами, с заданными параметрами заливки и обводки. Constraints прямоугольника: left+right и top+bottom.
вспомогательный компонент для создания форм ввода в Figma Татьяна Маслакова
В своих дизайнах мы можем не ограничиваться только прямоугольником.
Например Это может быть и просто линия снизу компонента, которая позволит получить стильное поле ввода с подчеркиванием полей вместо прямоугольников.
Не забываем использовать наши готовые стили заливок, эффектов, при необходимости добавлять в библиотеку новые стили, если они потребуются.
Активность по табу и ошибочное состояние базового компонентаИтак, компонент готов. Я вынесла его отдельно, чтобы у нас была единая точка редактирования стиля для всех форм и чекбоксов — это довольно удобно.
Активность по табу и ошибочное состояние базового компонента
Также нам потребуютсся два унаследованных компонента от form_stroke/simple для активных состояний по табу и состояний ошибки ввода. Для этого делаются 2 новых экземпляра form_stroke/simple, настраивается их вид и эти экземпляры запаковываются в компонента. Имена компонентам я задала по тем же правилам, что и базовый компонент, чтобы Оби объединились в группу
Вспомогательные компоненты для различных состояний подложки у формы ввода в Figma Татьяна Маслакова
Создаем само поле ввода (инпут)
Для создания поля ввода нам может понадобиться:
- Ранее созданный базовый компонент
- Отдельный текстовый слой с названием формы
- Отдельный текстовый слой для вводимого текста
- Текст ошибки
Эти элементы могут располагаться по-разному в зависимости от желаемого стиля.
Название формы например может стоять над основным полем, а может располагаться внутри него. Название также может скрываться или нет при попытке ввести текст. Текст ошибки также может располагаться в разных местах — сверху, справа и т.д.
Создадим новый компонен на основе базового form_stroke/simple и поместим внутрь компонента также перечисленные выше текстовые слои:
Создаем компонент поля ввода в Figma Татьяна Маслакова
Не забываем для вложенного компонента и текстов настраивать constraints. Например вводимый текст в форме и компонент form_stroke/simple имеют настройки left+right и top+bottom. Название и ошибка форм в нарисованном мною варианте привязаны к верхнему краю.
А вот так легко можно менять состояние ошибки и активность поля ввода:
Меняем экземпляр базового компонента через Instance Татьяна Маслакова
Создаем дополнительные компоненты для форм ввода в этих двух состояниях
В моем варианте был использован Auto Layout на названии формы и тексте ошибки, чтобы текст ошибки мог сдвигаться, правее от названия.
3 состояния поля ввода Татьяна Маслакова
Выбрала такие имена компонентов:
- form/simple_form
- form/simple_form_error
- form/simple_form_active
Выпадающие списки
Компонент выпадающего списка будет создаваться на основе компонента поля ввода. Для этого мы разместим друг над другом этот компонент и иконку треугольника или головку, которая будет открывать саму выпадушку.
В нашей библиотеке уже есть белая галочка. Сделаем еще один компонент с галочкой нужного нам цвета, используя компонент белой галочки. Для этого в экземпляре этого компонента перекрасим иконку в нужный цвет и снова запакуем в компонент (можно и не делать отдельный компонент, а перекрасить уже внутри формы, это уже вопрос кому как удобнее).
Чуть позже нам понадобится перевернутая иконка галочки для открытого списка. Так что сразу создадим и компонент для нее, отразив базовый компонент по-вертикали.
Иконки для раскрытия и закрытия выпадающего списка Татьяна Маслакова
Обратите внимание на имена иконок. они находятся в группе icon, подгруппе arr.
Создаем экземпляр компонента form/simple_form, размещаем в нем первую иконку, запаковываем в компонент form/dropdownlist.
Constraints для иконки: right и center.
Constraints для form/simple_form: left+right и top+bottom.
компонент выпадающего списка в Figma Татьяна Маслакова
Открытый выпадающий список
Нарисуем открытие выпадающего списка.
Элементы списка
Создадим вот компонент как на картинке:
Вспомогательный компонент для элемента списка Татьяна Маслакова
Constraints текстового слоя: left+right и top+bottom.
Для линии left+right и bottom.
Это будет один итем списка, который будет появляться при открытии выпадушки.
Делаем экземпляр этого компонента и запаковываем его в еще один компонент.
Переопределяем стили, чтобы добиться нужного вида элемента при наведении мышки (у меня задан цвет заливки и скрыта линия у родительского компонента).
Компонент для элемента списка при наведении Татьяна Маслакова
Прокрутка
Нам также понадобится компонент для прокрутки. Это 2 прямоугольника, совмещенные друг с другом.
Constraints нижнего прямоугольника: left+right и top+bottom. Верхнего left+right (либо center в зависимости от того, какой эффект нужен при масштабировании) и top.
Компонент прокрутки в Figma Татьяна Маслакова
Сам список
Теперь из экземпляров двух компонентов элементов списка собираем конструкцию:
Собираем выпадающий список в Figma Татьяна Маслакова
Используйте Auto Layout, чтобы быстро выровнять элементы.
Для каждого внутреннего элемента списка Auto Layout в левой панели должна быть выбрана такая опция:
Для всего списка Auto Layout выделяем иконку fixed width:
И ставим всему списку constraints: left+right, top.
Таким образом мы задали масштабирование нашей выпадушки по-горизонтали.
Вспомним, что в первой статье мы делали компонент плашки. Пришло время его применить. Совмещаем нашу конструкцию с компонентом плашки и запаковываем в новый компонент selectlist/all. У плашки делаем видимой треугольник-стрелку сверху.
Для плашки настраиваем constraints: left+right, top+bottom.
Список дополнительно засовываем во фрейм с активно галочкой Clip Content. Для фрейма настраиваем constraints: left+right, top+bottom, а для списка внутри фрейма left+right, top. Таким образом лишняя часть списка будет скрываться за счет масштабирования всего компонента.
Добавляем сверху полосу прокрутки с constraints: right, top+bottom.
Собираем выпадающий список в Figma Татьяна Маслакова
Компонент открытого состояния выпадающего списка
Наконец-то собираем полностью весь компонент открытого выпадающего списка:
Берем компонент form/dropdownlist, при помощи instance заменяем в нем иконку на перевернутую.
Запаковываем этот компонент в новый list/dropdownlist_open. Настраиваем constraints: left+right, top+bottom.
Создаем экземпляр компонента выпавшего списка selectlist/all — переносим его и ставим под новый компонент.
Далее в палитре слоев переносим слои компонента form/dropdownlist внутрь компонента list/dropdownlist_open.
Создание компонента открытого выпадающего списка в Figma Татьяна Маслакова
Списку настраиваем left+right, bottom.
Ошибка и активность выпадающего списка
Меняя instance подложки, получаем 2 дополнительных состояния выпадающего списка. Для ошибки надо дополнительно не забыть отобразить текст ошибки.
Компоненты для разных состояний выпадающего списка Татьяна Маслакова
В итоге мы создали несколько состояний компонентов для инпутов и выпадающих списков. За счет праильного именования и наследования переключаться между этими компонентами очень просто.
Использование компонентов форм ввода и выпадающих списков в Figma Татьяна Маслакова
Чекбокс/радиобокс
Cоздадим новый компонент для чекбоксов и радиобоксов.
Будем создавать 4 состояния:
- чекбокс активен
- чекбокс неактивен
- радиобокс активен
- радиобокс неактивен
Вспомогательные иконки
Создадим вспомогательные компоненты-иконки для правой части чекбоксов и радиобоксов.
Иконки для компонентов чекбоксов и радиобоксов Татьяна Маслакова
Эти компоненты созданы с подложной из компонентов Выделим правую часть этого компонента в отдельные иконки-компоненты.
В качестве основы мы будем использовать компонент form_stroke/simple и form_stroke/active для активных состояний, чтобы их стиль наследовался самими чекбоксами и радиобоксами.
Поскольку сама иконка довольно мелкая, мы переопределим радиус скрепления углов прямоугольника в этих компонентах для чекбоксов, настроив нужный нам вид.
У меня будет радиус 5 пикселей.
Все 4 иконки я именую по одному правилу через слеш, чтобы потом было удобно менять их в компоненте чекбокса-радиобокса.
Базовый компонент чекбокса
Создаем компонент для чекбокса. Он будет базовым других состояний чекбокса и для всех вариантов компонента радиобокса. Называем его form/checkbox_select.
Создание компонента для чекбокса в Figma Татьяна Маслакова
Дополнительные состояния чекбокса и компоненты для разных состояний радиобокса
Активный чекбокс и чекбокс со снятым выделением, а также все вариации компонентой раддиобокса получаются при помощи компонента form/checkbox_select наследованием. Для этого мы создаем 2 экземпляра компонента form/checkbox_select, далее помощью Instance заменяем иконки на нужные нам заранее подготовленные компоненты:
Создание компонентов для чекбоксов и радиобоксов в Figma Татьяна Маслакова
Подведем итог
У нас получилась уже довольно большая библиотека компонентов, которая уже на данном этапе позволит нам быстро создавать различные интерфейсы, включающие в себя кнопки, инпуты, выпадающие списки, чекбоксы и радиобоксы, прокрутки и прочее.
Компоненты кнопок, инпутов, чекбоксов, радиобоксов в Figma Татьяна Маслакова
Все компоненты получились достаточно гибкими и легко настраиваемыми. Посмотрите как легко можно менять стили всех форм разом:
Гибкие компоненты в Figma. Наследование компонентов. Татьяна Маслакова
В других своих статьях я рассказываю, как создавать компоненты для поиска, списков и преимуществ.
Читайте продолжение здесь.
Ждите в ближайшее время новых статей. Принимаю пожелания, какие компоненты, часто используемые в веб-дизайне, можно было бы описать в будущих статьях.
Behance — мои лучшие работы
Публикую, заметки и мысли о своей работе, Figma, портфолио, дизайн-системах, автоматизации задач и ускорении работы. Делюсь ссылками, крутыми кейсами. Новые статьи о дизайн-системе также публикуются здесь.
Buttons Бесплатные стоковые фотографии, изображения и фотографии кнопок
Откройте для себя неограниченное количество изображений кнопок и стоковых изображений в высоком разрешении для коммерческого использования.
Вид сверху на красочные пуговицы в форме сердца на фоне серой ткани
Вид сверху на мастерскую с макетом деталей и инструментов для рукоделия
Бородатый мужчина смотрит на ноутбук с медицинским веб-сайтом на экране в современном офисе
Обрезанное изображение дизайнерского степлера листы бумаги для скрапбукинга открытка
Крупный план молодого дизайнера-мужчины, работающего с цветными пуговицами в мастерской
Обрезанный вид второго пилота, использующего рычаг управления двигателем в авиасимуляторе
Крупный план стильной джинсовой рубашки с карандашом в кармане
Вид сверху бумага с надписью «коммерческая аренда», ручка, калькулятор и очки на столе
Обрезанный снимок маленькой дочери, застегивающей рубашку для отца
Обрезанный вид женщины, использующей ноутбук рядом с упакованными подарками
Красивая улыбающаяся зрелая женщина, сидящая на ярко-желтом диване с пультом дистанционного управления от телевизора
Обрезанный вид человека с багажом, нажимающего кнопку в современном лифте
Клубки хлопчатобумажной пряжи с пуговицами для одежды и английскими булавками на деревянном столе с копировальным пространством
Молодой ремонтник в полный рост поворачивает кнопку духовки, сидя возле ящика с инструментами на кухне снимок бизнесмена в костюме, нажимающего кнопку громкой связи на рабочем месте
Вид сбоку отца, застегивающего пуговицы на рукаве рубашки сына
Вид сверху на документ с надписью о коммерческой аренде, ручкой, калькулятором, ноутбуком и очками рядом с ноутбуком на столе
Обрезанное изображение дизайнера, берущего блестки для украшения открытки
Обрезанное изображение деловой женщины с контрактом, нажимающей кнопку конференц-телефона на столе в офисе
Красивый мужчина сидит на диване с попкорном в миске и держит пульт дистанционного управления
Вид доллара сверху банкноты рядом с блокнотом с надписью «Аренда и покупка», маркером и калькулятором
Вид сверху на документ с письмами о банкротстве рядом с калькулятором и молотком
Обрезанный снимок бизнесмена с ноутбуком и контрактом, использующего громкую связь в офисе
Обрезанный вид мужчины, держащего бутылку пива и пульт дистанционного управления в руках на белом фоне
Обрезанный снимок красивого бизнесмена, использующего конференц-телефон на столе в офисе
Обрезанный снимок бизнесмена, сидящего за конференц-телефоном на столе в офисе
Обрезанный снимок деловой женщины, нажимающей кнопку громкой связи на деревянном столе
Избирательный фокус агента, пишущего в блокноте с арендной платой и надписью рядом с деньгами и калькулятором
Обрезанный вид человека, нажимающего кнопку на клавиатуре компьютера рядом с красочными подарками на сером фоне
Вид сверху на рабочее место швеи на столе с тканью, планшетом и эскизами
Вид сверху на набор для шитья и набор швейных принадлежностей, изолированных на сером
Уверенный бизнесмен сидит на рабочем месте и смотрит на конференц-телефон на столе в офисе
Возбужденный мужчина держит миску с попкорном и кричит дома
Крупный план цветущего букета возле терминала в руках флориста, баннер
Избирательный фокус бутылок с пивом на журнальном столике
Обрезанный снимок бизнесмена, использующего конференц-телефон на рабочем месте
Клубок хлопчатобумажной пряжи с наперстком и пуговицами одежды на деревянном столе, изолированном на бежевом фоне
Обрезанный вид инженера, держащего цифровой планшет с пустым экраном и нажимающего кнопку на коммутаторе в центре обработки данных
Вид под высоким углом на молодую счастливую деловую женщину, занимающуюся бумажной работой и разговаривающую по конференц-телефону на столе в офисе
Обрезанный снимок деловой женщины, нажимающей кнопку конференц-телефона на столе в офисе
Красивая улыбающаяся зрелая женщина, сидящая на ярко-желтом диване и нажимающая кнопки на пульте дистанционного управления телевизора
Обрезанное изображение художницы, держащей шаблон для скрапбукинга открытки ручной работы
Вид сверху на чашку кофе рядом с ноутбуком и планшетом с договором аренды на столе
Обрезанный вид женщины, держащей ручку переключения передач, сидя в машине
Современная стиральная машина с черным дисплеем, изолированным на сером
Зрелый афроамериканец, использующий ноутбук, в то время как женщина сидит на диване с пультом дистанционного управления
Кадрированный снимок бизнесмена, использующего конференц-телефон на рабочем месте
Крупный план наушников, калькулятора и различных школьных принадлежностей на желтом фоне
Кадрированный снимок дизайнера, берущего кусок скотча
Кадрированный снимок бизнесмена со стильными наручными часами, нажимающего кнопку конференц-телефон на столе в офисе
Web Buttons Стоковые фотографии и изображения
Набор векторных современных градиентных кнопок app или game.
модные градиентные цвета с тенями.ПРЕМИУМ
Разноцветные пуговицы на синем текстиле в ряд. ПРЕМИУМ
Рукописный текст, пишущий привет, пятница. концептуальное фото Вы говорите это, чтобы желать и надеяться на еще одну хорошую прекрасную неделю. ПРЕМИУМ
Абстрактные веб-кнопки с падающей тенью, изолированные на желтом фоне. векторные кнопки с белой рамкой для веб-дизайна, приложений, баннеров и многого другого.PREMIUM
Катушки с нитками и кнопки на деревянном столе. читать больше, купить сейчас, скачать, забронировать сейчас, посмотреть коллекцию кнопок с градиентными цветами и значками с тенями. ПРЕМИУМ
Большая коллекция пуговиц подробнее. набор различных красочных кнопок. веб-иконки. vector illustrationPREMIUM
Установите воронку продаж со стрелками, графическую диаграмму ноутбука, щит доллара, пользователя человека в деловом костюме и значок тайм-менеджмента. vectorPREMIUM
Набор из 10 наборов контурных иконок. Коллекция видения, динамита, защиты и других элементов.
PREMIUM
Набор векторных кнопок в стиле современного материала. PREMIUM
Градиентные неоновые кнопки. кнопка со стрелкой для вызова действия, покупка в Интернете, больше, далее, обучение, загрузка. современная коллекция меню для навигации в приложении, странице сайта, интерфейсе. цветной 3d округлый баннер. вектор.ПРЕМИУМ
Набор векторных современных модных кнопок. flat style.PREMIUM
Набор ноутбуков с информацией, круглосуточной поддержкой по телефону, вопросами и ответами, текстовой справкой в виде речевого пузыря и значком. vectorPREMIUM
Набор: чемодан, пачка бумажных денег, ожерелье-медальон, билет в кино, старинная монета и значок старинного пистолета. vectorPREMIUM
3D-рендеринг падающих значков социальных сетей.PREMIUM
Красочные кнопки в форме сердца на старинном деревянном столе. векторПРЕМИУМ
Набор зеленых иконок на белом фоне. vector illustration.PREMIUM
Красочный веб-сайт веб-кнопок дизайн векторной иллюстрации глянцевый графический лейбл Интернет подтверждает шаблон баннера.
закругленные пустые меню отражение бизнес-навигации скачать интерфейс. ПРЕМИУМ
Кнопка «Продолжить» ПРЕМИУМ
Цветные швейные кнопки состав на зеленом пастельном фоне. плоская планировка с копией пространства. PREMIUM
Векторный набор современных плоских кнопок приложения или игры. модные плоские цвета с тенями.ПРЕМИУМ
Набор игральных карт, игровой автомат с клубникой, приглашение на покерный турнир, вишня, наручники и значок. vectorPREMIUM
Плоские красочные кнопки для различных целейPREMIUM
Промышленность и технологии векторные иконки, коллекция веб-значков с плоским дизайном, бизнес-инфографика шаблонPREMIUM
Минимальный набор уведомлений пользователя, облачные вычисления и проверка плоских значков для веб-разработки. кибератака, например, значки технической документации. электрическая вилка, совместная работа сотрудников. векторПРЕМИУМ
Коллекция веб-кнопок, набор элементов. векторные шаблоны, баннеры и этикетки, средства массовой информации, иконки лент для веб-сайта или приложения, панели меню навигации.
ПРЕМИУМ
Набор фруктов сливы, без жестокого обращения с животными, без ГМО, органическая косметика, пакет молока и значок диеты веганской пищи. vectorPREMIUM
Установите цифровое криптоискусство nft, технологию блокчейна, гистограмму роста, кибербезопасность, обмен эфириума и значок eth. vectorPREMIUM
Набор цветных кнопок для Интернета в нескольких модных градиентах, изолированных eps 10.PREMIUM
Установить поршень двигателя, рулевое колесо, двигатель автомобиля, автосервис, проверить автомобиль, проверить и значок манометра в шинах. vectorPREMIUM
Набор добровольца, гуманитарной помощи, швабры, карты или значка, отпечатка лапы и бесплатного знака. векторPREMIUM
Футбольные красочные веб-иконкиPREMIUM
Значок крикетного стадиона — бесплатный векторный значокPREMIUM
Крупный план пальца на кнопке клавиатуры со словом биотехнологияPREMIUM
Красочная блестящая и чистая кнопка для веб-сайтов и использования в Интернете, векторная иллюстрацияPREMIUM
Набор сердце с текстом секс, презерватив, фаллоимитатор вибратор, пояс силиконовый мяч кляп, кожаный хлыст и значок анальные бусы.
vectorPREMIUM
Цветная кнопка градиента. читать, просматривать и узнавать больше кнопок. купить сейчас, подписаться и раскрасить кнопки комментариев векторный набор. круглые точки как пауза, продолжение, загрузка для веб-сайта или игрыPREMIUM
Электричество, мощность, набор векторных значков энергии, плоский дизайн красочных кнопок, инфографический шаблон в 5 цветовых вариантахPREMIUM
12 круглых инфографик и бизнес-иконокPREMIUM
Письменная записка, показывающая онлайн-мошенничество. бизнес-концепция использования интернет-услуг для обмана жертв и кражи денег. ПРЕМИУМ
Минимальный набор евро, план развития и контрольный список плоских иконок для веб-разработки. включение, фабрика электричества, значки умных часов. принят платеж, флажок. кнопки круга со значком. vectorPREMIUM
Минимальный набор гардероба, пузырей скидок и плоских иконок онлайн-покупок для веб-разработки. ножницы, багаж, бумажник иконки. держите футболку, медаль со скидкой, любовные очки веб-элементы.
векторПРЕМИУМ
Набор наушников, мужчина с гарнитурой, круглосуточная поддержка по телефону и значок руководства пользователя. vectorPREMIUM
Большой набор кнопок для дизайна сайта на сером фоне. веб-иконки. разные цвета элементов и градиент. vectorPREMIUM
Установите схему электрической цепи, предохранитель, электрическую панель, светодиод, выключатель света и значок розетки. vectorPREMIUM
Набор современных кнопок для веб-сайта и пользовательского интерфейса. векторный значокPREMIUM
Набор векторных иконок для веб-сайта изгиб бумаги с эффектом векторные элементы дизайна для дизайнаPREMIUM
Набор кнопок в современном стиле для веб-сайта, мобильного приложения и инфографики. различные цвета градиента. современная векторная иллюстрация в плоском стиле. PREMIUM
Минимальный набор отвергнутой книги, наушников и плоских иконок жестов перемещения для веб-разработки. график совместной работы, видеоконференция, иконки доставки посылок. билеты, служба доставки.
vectorPREMIUM
Набор старинных кнопок на старом деревянном столеPREMIUM
Набор иконок для мобильного интерфейса на белом фоне: векторная иллюстрацияPREMIUM
Набор красочных веб-иконок или кнопок для веб-сайта, домашней страницы, Интернета или социальных сетей, изолированных на прозрачном фоне. векторный дизайн. ПРЕМИУМ
Нефтяная промышленность, бензин, значки линий по производству нефти. поиск сотрудника, творчество, иконки солнечных батарей. лучший результат, пользователь, веб-элементы быстрой оплаты. vectorPREMIUM
Наклейка для социальных сетей Storie, различные этикетки insta на белой коробке, вакцинация, опрос, обратный отсчет, упоминание значка, пожертвование. шаблон экрана пользовательского интерфейса на современном градиентном фоне. ПРЕМИУМ
Бесплатный символ,вектор.PREMIUM
Бизнес, финансы, коммерция, корпоративная линия вокруг современных иконок, векторные иллюстрации.PREMIUM
Установите телефонную книгу, конференцию в видеочате и встречу.
белая квадратная кнопка. vectorPREMIUM
Набор современных градиентных приложений, страниц сайта или игровых кнопок. модные градиентные цвета. flat design.PREMIUM
Набор листьев или листьев, органическая косметика, без упаковки молока, чеснока, мяса и значка болгарского перца. vectorPREMIUM
Интернет глянцевые иконки. векторные кнопки.ПРЕМИУМ
Магнит притягивает. щелчок, лавровый венок и иконки капли масла простой набор. солнце, рождественский падуб и никаких интернет-вывесок. указатель курсора, награда лауреата. значок линии. редактируемый штрих. vectorPREMIUM
Набор: фаллоимитатор, вибратор, презерватив, анальные шарики, а также 18 роликов, силиконовый кляп с ремнем и значок речевого пузыря. vectorPREMIUM
Одежда, концепция одежды, набор векторных иконок, плоский дизайн, красочные кнопки, инфографический шаблон в 5 цветовых вариантах. векторПРЕМИУМ
Рукописный текст не стесняйтесь. слово «не стесняйся и не стесняйся» часто используется в качестве приглашения.
ПРЕМИУМ
Технология написания текста в формате CMS. бизнес-фото, демонстрирующие программы, которые используются для создания и анализа цифрового контента. ПРЕМИУМ
Дизайн шаблона формы входа в красочный фанк. ПРЕМИУМ
Векторные плоские веб-кнопки. vector illustration.PREMIUM
Магнит притягивает. простой набор значков обновления, онлайн-видео и поврежденных файлов. речевой пузырь, мобильный опрос и знаки привлечения. ротация, видео экзамен. технологический набор. значок обновления строки. векторПРЕМИУМ
Зеленая кнопка для веб-дизайна. ПРЕМИУМ
Минимальный набор значков отчетов, рисунков и головоломок для веб-разработки. разговорный пузырь, работа в команде, значки трофеев. тайм-менеджмент, кибератака, веб-элементы онлайн-химии. vectorPREMIUM
Установите противогаз, пламя огня, запрет на курение, сигнализацию, звонок и значок сирены. vectorPREMIUM
Набор новых красочных наклеек. наклейки продуктов с предложением, интернет-магазины, рекламные акции продуктов.
векторные иллюстрацииПРЕМИУМ
Набор кнопок для веб-дизайна. кнопки призыва к действию. vector illustration.PREMIUM
Дизайн векторацветные значки в отверстиях легко адаптируются к любому фонуPREMIUM
Плоские красные кнопкиPREMIUM
Установите самолет, летную шляпу с очками, табло аэропорта, реактивный истребитель, радар и значок. vectorPREMIUM
Установите маяк, здание музея, звонок гостиничного сервиса, чемодан, пожалуйста, не беспокойте и значок рулевого колеса корабля. vectorPREMIUM
Установите горящую свечу, надгробие с крестом, тыкву, косу и икону ведьмин метлы. векторПРЕМИУМ
Установите сердцевину яблока, нефтяную вышку, проблему загрязнения, эко-символ листа, календарь с осенними листьями и иконку. vectorPREMIUM
Набор кнопок в современном стиле. различные цвета градиента. современная векторная иллюстрация в плоском стиле. PREMIUM
Красочные кнопки на синем фоне крупным планомPREMIUM
Набор речи пузырь папа, нагрудник, велосипед для детей, насос, коляска и значок бутылки.
vectorPREMIUM
Набор векторных кнопок веб-элементов, плоский дизайн пользовательского интерфейсаPREMIUM
Значок перезагрузки — бесплатный векторный значокPREMIUM
Значок контакта на зеленом абстрактном фонеPREMIUM
Рабочий, набор векторных значков сотрудников, инфографический шаблон, плоский дизайн красочных веб-кнопок в 5 цветовых вариантах. с шестеренкой внутри, текстом речевого пузыря cmyk, изображением пейзажа, руководством по цветовой палитре и значком карандаша со скрещенной линейкой. vectorPREMIUM
Золотые веб-кнопки с различными закладками и значкамиPREMIUM
Множество разноцветных кнопок на синей поверхности. ПРЕМИУМ
Установить онлайн-заказ и доставку, расположение кафе-ресторана, чашку кофе с собой и значок «Быстро на машине». vectorPREMIUM
Плоские иконки для веб и мобильных устройствPREMIUM
Концептуальный почерк, показывающий критерии приемлемости. концепция, означающая указанные показатели при оценке способности деталиPREMIUM
Иконки пользовательского интерфейса для покупокPREMIUM
Простой набор значков пивного бокала, наградного приложения и значков линии оптовых товаров.