Legacy. Макет в Figma

Чтобы упростить для пользователей процесс дизайна портала, Улей подготовил интерактивный макет в Figma. Найти его вы можете по ссылке: [S] Брендирование Б24 / Конструктор "Classic". В этой статье будет рассмотрено, как работать с макетом.

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

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

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

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

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

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

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

Откройте макет и в левом меню кликните на раздел «Start». В этот момент появится область для редактирования макета. Здесь вы увидите следующие блоки: «Информация», «Упрощенный», «Детальный», «Шаблон (Orange)». Каждый блок можно передвигать с помощью мыши. Рассмотрим содержание этих блоков.

ИнформацияИнформация

В этом блоке дана краткая инструкция о том, как:

• скопировать макет себе в черновики Figmа;

• редактировать макет;

• загрузить стили из макета на корпоративный портал.

Все эти пункты более подробно описаны в данной инструкции.

Упрощенный шаблонУпрощенный шаблон

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

Макет состоит из трех разных страниц Битрикс24. На этих страницах учтены все элементы, которые можно изменить с помощью модуля «Брендирование»: кнопки, ссылки, виджеты, шапка, меню портала и так далее.

Детальный шаблонДетальный шаблон

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

Макет состоит из трех разных страниц Битрикс24. На этих страницах также учтены все элементы, которые можно изменить с помощью модуля «Брендирование»: кнопки, ссылки, виджеты, шапка, меню портала и так далее.

Шаблон (Orange)Шаблон (Orange)

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

Макет состоит из трех разных страниц Битрикс24. На этих страницах также учтены все элементы, которые можно изменить с помощью модуля «Брендирование»: кнопки, ссылки, виджеты, шапка, меню портала и так далее.

Редактирование макетовРедактирование макетов

Для редактирования макетов НЕ нужно выделять каждый элемент на страницах и менять его параметры. Редактирование всех элементов шаблона выполняется с помощью функционала Variables (переменных).

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

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

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

).

В результате откроется меню с настройками элементов корпоративного портала. Это меню практически идентично настройкам модуля «Брендирование».

Меню настроек variables

Сравнение настроек модуля и figma

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

• Все настройки раздела «Авторизация»

• Стили текста (сделать все буквы заглавными, всегда начинать с заглавной буквы и тому подобное)

• Скрыть/показать виджеты

• Загружаемые элементы, такие как фавикон и наборы иконок

Редактирование упрощенного шаблонаРедактирование упрощенного шаблона

Рассмотрим, как создать дизайн корпоративного портала с помощью упрощенного шаблона. Представим себе компанию, у которой есть фирменный стиль и основной цвет в нем — синий. Соответственно, синий должен быть доминирующим цветом на портале и в него должны быть окрашены кнопки, шапка активные ссылки и виджеты.

Чтобы выполнить эту настройку в списке Variables перейдем в раздел «Упрощенный шаблон». В этом разделе находится набор из пяти цветовых настроек. Данные настройки привязаны только к упрощенному шаблону — на другие два шаблона они не влияют.

Теперь изменим параметр «Основной цвет». В колонке «Упрощенный» кликнем на иконку с текущим цветом настройки. После этого появится меню для указания цвета. Здесь есть возможность:

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

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

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

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

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

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

Рассмотрим, как создать дизайн корпоративного портала с помощью детального шаблона. В качестве примера изменим цвет виджета «Важные сообщения». В списке Variables перейдем в раздел «Виджеты» > «Важные сообщения». Здесь нас интересует настройка «Цвет фона в шапке виджета». Кликнем на иконку параметров (

).

В результате откроется меню для указания цвета. Здесь будут показаны текущие цвета данного виджета во всех трех шаблонах. Так как сейчас мы работаем над детальным шаблоном, кликаем на цвет в одноименной строке и выбираем новый. После этого в детальном шаблоне изменится цвет у виджета «Важные сообщения». Аналогичным способом можно изменить любые другие элементы шаблона.

Редактирование шаблона Orange (копирование цветов из брендбука)Редактирование шаблона Orange (копирование цветов из брендбука)

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

В списке Variables перейдем в раздел «Шапка портала» > «Верхняя панель». Здесь нас интересует настройка «Цвет верхней панели». Кликнем на иконку параметров (

).

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

Аналогичным способом можно изменить любые другие
элементы шаблона и адаптировать шаблон под корпоративную тематику.

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

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

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

Нюансы работы с шаблоном FigmaНюансы работы с шаблоном Figma

При работе с шаблоном важно учитывать следующее:

Не все элементы Битрикс24 можно настроить в FigmaНе все элементы Битрикс24 можно настроить в Figma

Некоторые настройки можно задать только через модуль «Брендирование» и в настройках Figma они отсутствуют. К таким настройкам относятся:

• Все настройки раздела «Авторизация»

• Шрифт

• Стили текста (сделать все буквы заглавными, всегда начинать с заглавной буквы и тому подобное)

• Скрыть/показать виджеты

• Загружаемые элементы, такие как фавикон и наборы иконок

Настройка виджетов в Figma отличается от настройки в модуле «Брендирование»Настройка виджетов в Figma отличается от настройки в модуле «Брендирование»

В модуле «Брендирование» индивидуальные настройки виджетов имеют приоритет выше общих. Это значит, что настройки конкретного виджета будут перекрывать общие настройки заданные для всех виджетов.

В Figma эта логика работает наоборот. То есть, общие настройки виджетов будут перекрывать индивидуальные настройки каждого виджета. Чтобы индивидуальные настройки виджетов отображались в Figma нужно убедиться, что в разделе «Виджеты» > «Общие настройки» у всех общих настроек стоит прозрачность 0%.

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

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