Зефир. Макет в Figma

Чтобы упростить для пользователей процесс дизайна портала, Улей подготовил специальный конструктор (макет) в Figma. Найти его вы можете по ссылке: [S] Конструктор "Zephir" (1.0.2). Также ссылка на макет есть прямо на слайдере Брендирования в разделе «Общие».

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

Копирование макета в свой аккаунт FigmaКопирование макета в свой аккаунт Figma

Для доступа к макету введите пароль: wehive

Чтобы приступить к работе с макетом вам понадобится скопировать его в свои черновики в Figma. Для этого на макете Улья нажмите на стрелку вниз рядом с названием файла. Выберите пункт «Duplicate to your drafts».

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

Чтобы найти макет в своих черновиках перейдите на главную страницу Figma (https://www.figma.com/ ) и кликните на раздел Drafts. Макет всегда будет находиться в этом разделе.

Обзор макетаОбзор макета

Откройте макет и в левом меню убедитесь, что вы находитесь в разделе «Конструктор».

На странице будет видна область редактирования макета. Здесь доступно два шаблона для редактирования:

1. Шаблон страницы авторизации (Default/Page «Login»). Шаблон предназначен для дизайна страницы авторизации Битрикс24. Здесь есть возможность загрузить свою картинку фона и логотип компании, а также покрасить все элементы блока авторизации, включая QR-код.

Здесь доступно три блока настроек:

• Блок для загрузки изображений. Здесь выполняется загрузка логотипа компании и картинки фона. Обратите внимание, что в дальнейшем загруженные изображения нельзя будет скачать из Figma вместе с другими стилями и загрузить на портал. Изображения нужно загружать в модуль «Брендирование» отдельно.

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

• Блок с настройкой состояния элементов. У полей и кнопок на странице авторизации есть три состояния, для которых можно настроить стили: в покое (default), при наведении (hover), при клике (active). В блоке показано как выглядят поля и кнопки в этих трех состояниях.

2. Шаблон страницы портала (Light/Page «Portal»). Шаблон предназначен для дизайна всех элементов корпоративного портала Битрикс24: фона, шапки, левого меню, кнопок и другого контента. В данном шаблоне учтены практически все элементы, которые можно кастомизировать с помощью настроек Брендирования.

При этом, есть элементы дизайна, которые можно настроить только только на портале — в Figma они недоступны. К таким настройкам относятся:

• Спрятать блок «Скачать приложения».

• Спрятать блок «ПУЛЬС КОМПАНИИ».

• Фавикон.

• Все настройки блока «Контент».

• Все настройки блока «Другое».

• Некоторые настройки шапки портала.

Здесь доступно четыре блока настроек:

• Блок для загрузки изображения. Здесь выполняется загрузка картинки для фона портала. Обратите внимание, что в дальнейшем загруженное изображение нельзя будет скачать из Figma вместе с другими стилями и загрузить на портал. Изображение нужно загружать в модуль «Брендирование» отдельно.

• Блок с общим видом страницы портала. В этом блоке показан шаблон страницы корпоративного портала, где присутствуют все возможные элементы интерфейса, для которых можно задать свои стили. В процессе настройки здесь отображаются все изменения элементов, т.е. становится видно, как будет выглядеть портал в новом дизайне.

• Блок настроек верхней панели. В этом блоке показаны элементы верхней панели Битрикс24, для которых также предусмотрены настройки стилей: строка поиска и результаты поиска.

• Блок с настройками кнопок. У кнопок и ссылок в Битрикс24 есть три состояния, для которых можно настроить стили: в покое (default), при наведении (hover), при клике (active). В блоке показано как выглядят ссылки и кнопки в этих трех состояниях.

В нижней части макета находятся еще два шаблона: Custom / Page "Login" и Custom Light / Page "Portal". Эти шаблоны в данный момент находятся в разработке и не используются. Чтобы удалить эти шаблоны из своего макета, выделите их курсором и нажмите Backspace (Delete на Mac).

Редактирование шаблоновРедактирование шаблонов

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

Загрузка логотипа (страница авторизации)Загрузка логотипа (страница авторизации)

На странице авторизации есть возможность вывести логотип компании вместо стандартного логотипа Битрикс24. С помощью шаблона Figma можно увидеть как логотип будет выглядеть на странице авторизации и подобрать для него подходящий размер.

Рассмотрим процесс добавления логотипа в шаблон страницы авторизации. Для этого перейдите к блоку «Default/Авторизация».

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

Добавить изображение в рабочую область Figma можно через команду Ctrl+V (Command+V на Mac) или путем загрузки файла с ПК. Для загрузки файла с ПК кликните на иконку Figma в левом верхнем углу экрана и выберите File > Place image.

Выберите одно или несколько изображений, а затем кликните на рабочую область, чтобы добавить в нее файлы. Figma поддерживает различные форматы файлов: JPEG, PNG, SVG.

Когда логотип добавлен в рабочую область, кликните на него правой кнопкой мыши и нажмите «Copy».

Далее в блоке «Default/Авторизация» обратите внимание на фиолетовое поле с логотипом Битрикс24 и кликните на него правой кнопкий мыши, чтобы выделить.

Слева в Figma выводится список слоев. После выделения блок с логотипом будет подсвечен голубым цветом в списке.

Здесь найдите элемент Vector (для замены). Кликните на него, чтобы выбрать, а затем нажмите на этот же элемент правой кнопкой мыши, чтобы открыть меню действий.

В меню действий выберите Past to replace. В результате логотип Битрикс24 будет заменен на ранее скопированный вами логотип компании. Новый логотип сразу же отобразится в шаблоне страницы авторизации.

Теперь вы можете менять размер логотипа и его положение в области. Максимальный размер логотипа: 355х355 пикселей. В шаблоне уже задана максимально возможная ширина области для загрузки картинки: 355px. При необходимости эту ширину можно уменьшить, а также увеличить высоту области (до 355px максимум).

За размер области для картинки отвечает элемент «Default», который можно увидеть в списке слоев. Кликните левой кнопкой на название элемента, чтобы выделить его.

Справа в меню инструментов найдите блок Layot. Если здесь голубым цветом подсвечена кнопка Aspect ratio (соотношение сторон), кликните на нее, чтобы отключить данную опцию.

Теперь вы можете отдельно менять высоту и ширину области для загрузки логотипа. Для этого наведите курсор на нужный край элемента Default и растяните/уменьшите его до нужных размеров.

Вы также можете задать нужную ширину и высоту области в пикселях через панель инструментов. Для этого выделите элемент Default и в разделе Layout введите нужные значения в поля Dimensions, где W — ширина, а H — высота. Максимальная ширина и высота не могут превышать 355px.

Изображение логотипа можно перемещать внутри заданной области Default, а также менять его в размере. Все перемещения и корректировки логотипа будут сразу же отображаться на шаблоне страницы авторизации.

Чтобы изменить размер логотипа, выделите его в списке слоев. Справа в меню инструментов найдите блок Layout и включите опцию Lock aspect ratio (соотношение сторон). Благодаря этому изменение размера будет происходить пропорционально, с учетом соотношения сторон картинки.

Растяните/уменьшите выделенное изображение логотипа.

Вы также можете задать нужную ширину и высоту картинки в пикселях через панель инструментов. Для этого выделите картинку и справа в разделе Layout введите нужные значения в поля Dimensions, где W — ширина, а H — высота. Максимальная ширина и высота не может превышать 355px.

Чтобы изменить положение логотипа в области, зажмите его курсором и подвиньте в нужное место.

Если картинка будет заходить за границы области (элемент Default), то логотип будет выглядеть частично обрезанным.

Загрузка изображения фонаЗагрузка изображения фона

Для страницы авторизации и для страницы портала есть возможность загрузить свои фоновые изображения фона. С помощью шаблона Figma можно увидеть как новый фон будет выглядеть на этих страницах. Процесс загрузки изображений выглядит одинаково в обоих шаблонах.

Рассмотрим процесс загрузки картинки фона на примере шаблона страницы портала (Light/Page «Portal»).

Перейдите к блоку «Light / Общие» и кликните правой кнопкий мыши на область для загрузки картинки, чтобы ее выделить.

Слева в Figma выводится список слоев. После выделения область для загрузки картинки будет подсвечена голубым цветом в списке. Здесь найдите элемент horizontal-1920. Кликните на него, чтобы выделить. Затем, справа на панели инструментов найдите раздел Fill. Нажмите на изображение в строке Image.

В результате откроется меню для загрузки изображения с ПК. Нажмите Upload from computer и выберите нужную картинку фона.

Добавленное изображение будет автоматически растянуто по размеру области с сохранением пропорций. В шаблоне Light / Page "Portal" вы увидите, как новый фон будет выглядеть на странице портала.

Если в качестве фона портала нужно установить какую-то конкретную часть изображения, выделите в списке слоев элемент horizontal-1920, а затем дважды кликните на само изображение. Теперь вы можете растягивать изображение и передвигать его внутри области.

Если изображение фона нужно скрыть, выделите его в списке слоев и нажмите на иконку глаза.

Настройка элементов (цвет, скругление, обводка)Настройка элементов (цвет, скругление, обводка)

Настройка цвета, скругления и обводки в обоих шаблонах выполняется с помощью функционала Variables (переменных). Variables — это набор настроек элементов (кнопок, ссылок, фона и т.д). Когда вы меняете настройку одного элемента — она применяется ко всем аналогичным элементам шаблона. Например, если цвет зеленой кнопки поменяли на синий, то синими станут все аналогичные кнопки в данном шаблоне.

Как открыть меню VariablesКак открыть меню Variables

Чтобы открыть список переменных (Variables) кликните на пустое пространство рабочей области Figma. В правом меню появится пункт Variables. Нажмите на название или на иконку настроек (

).

В результате откроется меню с настройками элементов корпоративного портала.

Возможно, при первом открытии, меню Variables откроется в свернутом виде. Чтобы увидеть разделы с настройками нажмите на кнопку Show panel.

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

Настройки элементов в figma

Настройки элементов в брендировании

В блоке Collections находятся основные группы настроек, например «Общие» и «Авторизация». А в блоке Groups появляются подразделы выбранной группы настроек.

При этом, в силу технических особенностей, в меню Variables доступно меньше настроек, чем в самом модуле «Брендирование», поэтому какие-то стили нужно будет настраивать напрямую на портале.

Смена цвета у элементаСмена цвета у элемента

Рассмотрим, как перекрашивать элементы корпоративного портала и страницы авторизации. В качестве примера изменим цвет шапки портала с белого на оранжевый.

Чтобы выполнить эту настройку в меню Variables перейдем в раздел «Шапка портала». Здесь изменим параметр «Цвет верхней панели». В колонке Light кликнем на иконку с текущим цветом настройки. После этого появится меню для указания цвета. Здесь есть возможность:

• Выбрать цвет на цветовой палитре

• Указать цвет в виде HEX-кода

• Настроить прозрачность данного цвета

• Выбрать цвет из уже существующих в данном шаблоне

Как только новый цвет выбран, цвет шапки портала сразу же изменится в шаблоне. Аналогичным способом можно менять цвета любых других элементов в шаблоне авторизации и страницы портала: фона, кнопок, ссылок и т.п.

Настройки скругления и ширины обводкиНастройки скругления и ширины обводки

У виджетов и некоторых кнопок можно менять толщину обводки и радиус скругления углов. Рассмотрим как это сделать на примере виджета «Пульс компании».

Чтобы выполнить эту настройку в меню Variables перейдем в раздел «Виджеты» > «Пульс компании». Здесь изменим параметр «Толщина обводки». В колонке Light укажем значение 3 и нажмем Enter. У виджета сразу же появится обводка.

Аналогичным способом выполняется настройка скругления углов.

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

Как отменить изменения в шаблонахКак отменить изменения в шаблонах

Чтобы быстро отменить изменения зажмите сочетание клавиш Ctrl+Z (Command+Z на Mac). Чтобы вернуть изменения зажмите клавиши Ctrl+Y (Command+Y на Mac). При необходимости вы можете скопировать шаблон Улья повторно, чтобы начать редактирование заново.

Удаление и создание настроек и элементовУдаление и создание настроек и элементов

Мы не рекомендуем удалять/добавлять какие-либо Variables (переменные) и элементы шаблона. Это может повлиять на корректную работу шаблона, а также на экспорт настроек в Битрикс24.