Зефир. Загрузка дизайна на портал

Важно

Модуль «Брендирование» поддерживает две версии интерфейса Битрикс24: необновленную, под названием «Legacy» (до версии модуля intranet 25.900.0) и обновленную, под названием «Зефир» (после обновления intranet 25.900.0). Так как в обновлении «Зефир» интерфейс Битрикс24 был значительно изменен, модуль «Брендирование» в этом интерфейсе также выглядит иначе, чем в «Legacy». В связи с этим работа с Брендированием для дизайна «Зефир» и «Legacy» описана в этой инструкции в разных статьях.

В этой статье описан процесс импорта стилей из Figma для дизайна «Зефир». Аналогичная статья для дизайна «Legacy» находится здесь.

В этой статье будет показано, как скачать стили из шаблона Figma и загрузить их на корпоративный портал. Обратите внимание, что для выгрузки стилей из Figma вам понадобится приложение Figma для декстопа.

Шаги по установке плагина

Чтобы выгрузить стили из Figma вам понадобится скачать специальный плагин, который подготовил Улей. Шаги по установке:

  1. Перейдите по ссылке: https://disk.yandex.ru/d/qoZE90XWIVhucQ

  2. Введите пароль wehive

  1. Скачайте архив Hive-branding-zephir.rar и разархивируйте его.

  1. Откройте десктоп приложение Figma и перейдите к своему макету с дизайном корпоративного портала.

  2. Правой кнопкой мыши кликните по рабочей области Figma и выберите Plugins > Development > Import plugin from manifest

  1. Откройте папку со скачанным плагином и выберите файл manifest.

  1. Файл будет загружен в Figma и вы увидите, что в меню появился плагин Hive-Branding-zephir.

Выгрузка макета из Figma и загрузка на корпоративный портал

Шаги по выгрузке макета:

  1. Правой кнопкой мыши кликните по рабочей области Figma и выберите Plugins > Development > Hive-Branding-zephir.

  1. Откроются настройки экспорта. Убедитесь, что в блоке «Режимы коллекций» для настроек 1-5 выбраны следующие параметры:

  • Общие: Light

  • Авторизация: Dark + Light

  • Виджеты: Light

  • Шапка портала: Light

  • Кнопки: Light

Для корректного импорта не меняйте параметры.

  1. При необходимости включите опцию «Скрыть логотип Б24». В этом случае в настройки стилей будет добавлено CSS-свойство, которое скроет логотип Б24 в левой части шапки портала.

В дальнейшем это свойство можно будет найти и убрать в разделе Брендирования «Дополнительно».

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

  1. Нажмите кнопку «Сгенерировать».

  2. После генерации стилей нажмите «Скачать ZIP», чтобы скачать архив со стилями.

  1. Перейдите на корпоративный портал и откройте модуль «Брендирование».

  2. Нажмите на шестеренку в правом верхнем углу экрана, чтобы открыть настройки модуля.

  1. В поле «Импорт настроек» загрузите ранее скачанный файл дизайна из Figma.

  1. Новый дизайн сразу же отобразится на корпоративном портале.

Предыдущая
Зефир. Макет в Figma
Следующая
Настройки модуля