Как создать токен в фигме
Перейти к содержимому

Как создать токен в фигме

  • автор:

Токены в дизайн системе

Рассказывает о токенах в дизайн системе Парфёнов Александр, продуктовый дизайнер Центра цифровых решений для корпоративного бизнеса.

О токенах в дизайн системе я узнал из выступления Юры Ветрова в далеком и прекрасном 2019 году на конференции Frontend Conf. «Интересная идея», подумал я тогда, и забыл про них еще на пару лет, переодически читая статьи разных дизайн системах, которы как грибы после дождя начали появляться то в одной крупной компании, то в другой. Применить накопившуюся информацию в реальных проектах не удавалось. Не хватало понимания, для чего это может быть нужно проекту и мне лично, а мотивация заниматься этим на боевых проектах была бесконечно мала.

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

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

Токены нужны, если:

— Вы делаете несколько приложений и сервисов, которые должны быть консистентны, иметь единый вид;

— Если вы планируете темезацию, будь — то светлая и темная тема одного приложения;

— Проектируете какое-то white label решение, которое кастомизируется под каждого заказчика.

«Это оно!», — подумал я и стал искать материалы в старых закладках, которые помогут разобраться в решении подобных задач. И разобравшись, сделал некоторые выводы для себя. Но обо всем по порядку.

Что такое дизайн токены?

Дизайн-токены — это переменные в мире дизайна, условно коробочки куда мы можем положить значения — отступы, цвета, типографика, стили объектов. Положив их в эту коробочку, мы можем на них ссылаться как на стиль объектов, которые мы добавляем на экран. Например, мы определили основной цвет нашего приложение как красный. Отлично, теперь мы создадим токен-коробочку, под этот цвет и назовём её ”color-primary”, и положим туда это значение. И на всех макетах, где будет использоваться наш основной цвет мы будем не прописывать цвет вручную, а ссылаться на нашу коробочку. Теперь представим, что нам нужно изменить оттенок нашего цвета в связи с ребрендингом, вместо траты 100500 человеко-часов для того, чтобы изменить цвет по всем макетам, мы просто заменяем его в коробочке. В коробочки вместо цвета может лежать любой стиль: цвет, скругление, тень или даже такие свойства типографики (размер, толщина, межстрочное, шрифт), как по одному, так и все вместе.

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

Как происходит процесс разработки web странички в самой простой её реализации: дизайнер нарисовал макет и отдал его разработчику, тот взял картинку и начал переписывать её кодом.

Руководство по настройке Figma для автоматической подготовки пользователей

Цель этого руководства — продемонстрировать действия, которые необходимо выполнить в Figma и Microsoft Entra ID, чтобы настроить идентификатор Microsoft Entra для автоматической подготовки и отмены подготовки учетных записей пользователей в Figma.

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

Необходимые компоненты

В сценарии, описанном в этом руководстве, предполагается, что у вас уже имеется:

  • Клиент Microsoft Entra.
  • Клиент Figma.
  • Учетная запись пользователя Figma с разрешениями администратора.

Назначение пользователей для Figma

Идентификатор Microsoft Entra использует концепцию, называемую назначениями, чтобы определить, какие пользователи должны получать доступ к выбранным приложениям. В контексте автоматической подготовки пользователей синхронизируются только пользователи и (или) группы, назначенные приложению в идентификаторе Microsoft Entra.

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

Важные рекомендации по назначению пользователей в Figma

  • Рекомендуется, чтобы один пользователь Microsoft Entra был назначен Figma для проверки конфигурации автоматической подготовки пользователей. Дополнительные пользователи и/или группы можно назначить позднее.
  • При назначении пользователя в Figma в диалоговом окне назначения необходимо выбрать действительную роль для конкретного приложения (если доступно). Пользователи с ролью Доступ по умолчанию исключаются из подготовки.

Настройка Figma для подготовки

Перед настройкой Figma для автоматической подготовки пользователей с помощью идентификатора Microsoft Entra необходимо получить некоторые сведения о подготовке из Figma.

  1. Войдите в консоль администрирования Figma. Щелкните значок шестеренки рядом с вашим клиентом. Screenshot of the Figma admin console. A tenant named A A D Scim Test is visible. Next to the tenant, a gear icon is highlighted.
  2. Перейдите в раздел General (Общие) > Update Log in Settings (Обновить параметры входа). Screenshot of the General tab of the Figma admin console. Under Log in and provisioning, Update log in settings is highlighted.
  3. Скопируйте идентификатор клиента. Это значение будет использоваться для создания URL-адреса конечной точки SCIM для ввода в поле URL-адреса клиента на вкладке «Подготовка» приложения Figma. Screenshot of the S A M L S S O section in the Figma admin console. A Tenant ID label and an adjacent link that says Copy are highlighted.
  4. Прокрутите вниз и щелкните Generate API Token (Создать токен API). Screenshot of the S C I M provisioning section in the Figma admin console. A link labeled Generate A P I token is highlighted.
  5. Скопируйте значение API Token (Токен API). Это значение будет введено в поле «Секретный токен» на вкладке «Подготовка» приложения Figma. Screenshot of a page in the Figma admin console. Under Your provisioning A P I token, a placeholder for the token is highlighted.

Добавление Figma из коллекции

Чтобы настроить Figma для автоматической подготовки пользователей с помощью идентификатора Microsoft Entra ID, необходимо добавить Figma из коллекции приложений Microsoft Entra в список управляемых приложений SaaS.

Figma in the results list

  1. Войдите в Центр администрирования Microsoft Entra как минимум облачные приложения Администратор istrator.
  2. Перейдите к приложениям>Identity >Applications>Enterprise. Новое приложение.
  3. В разделе «Добавление из коллекции» введите Figma, выберите Figma в поле поиска.
  4. Выберите Figma в области результатов и добавьте это приложение. Подождите несколько секунд, пока приложение не будет добавлено в ваш клиент.

Настройка автоматической подготовки пользователей в Figma

В этом разделе описаны инструкции по настройке службы подготовки Microsoft Entra для создания, обновления и отключения пользователей и (или) групп в Figma на основе назначений пользователей и (или) групп в идентификаторе Microsoft Entra.

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

Чтобы настроить автоматическую подготовку пользователей для Figma в идентификаторе Microsoft Entra, выполните следующие действия.

  1. Войдите в Центр администрирования Microsoft Entra как минимум облачные приложения Администратор istrator.
  2. Обзор корпоративных приложений>удостоверений>Enterprise applications blade
  3. Из списка приложений выберите Figma. The Figma link in the Applications list
  4. Выберите вкладку Подготовка. Screenshot of the Manage options with the Provisioning option called out.
  5. Для параметра Режим подготовки к работе выберите значение Automatic (Автоматически). Screenshot of the Provisioning Mode dropdown list with the Automatic option called out.
  6. В разделе Учетные данные администратора введите https://www.figma.com/scim/v2/ в поле URL-адрес арендатора, где TenantID — это значение полученное в Figma ранее. Введите значение токена API в поле Секретный токен. Нажмите кнопку «Тестировать Подключение», чтобы убедиться, что идентификатор Microsoft Entra может подключиться к Figma. Если установить подключение не удалось, убедитесь, что у учетной записи Figma есть разрешения администратора, и повторите попытку. Tenant URL + Token
  7. В поле Почтовое уведомление введите адрес электронной почты пользователя или группы, которые должны получать уведомления об ошибках подготовки, а также установите флажок Send an email notification when a failure occurs (Отправить уведомление по электронной почте при сбое). Notification Email
  8. Щелкните Сохранить.
  9. В разделе «Сопоставления» выберите «Синхронизировать пользователей Microsoft Entra» с Figma. Figma User Mappings
  10. Просмотрите атрибуты пользователя, синхронизированные с идентификатором Microsoft Entra с Figma, в разделе «Сопоставление атрибутов». Атрибуты, выбранные как свойства сопоставления, используются для сопоставления учетных записей пользователей в Figma для операций обновления. Нажмите кнопку Сохранить, чтобы зафиксировать все изменения. Figma User Attributes
  11. Чтобы настроить фильтры области, ознакомьтесь со следующими инструкциями, предоставленными в руководстве по фильтрам области.
  12. Чтобы включить службу подготовки Microsoft Entra для Figma, измените состояние подготовки на On в разделе Параметры. Provisioning Status Toggled On
  13. Определите пользователей и (или) группы для подготовки в Figma, выбрав нужные значения в поле Область в разделе Параметры. Provisioning Scope
  14. Когда будете готовы выполнить подготовку, нажмите кнопку Сохранить. Saving Provisioning Configuration

После этого начнется начальная синхронизация пользователей и (или) групп, определенных в поле Область раздела Параметры. Начальная синхронизация занимает больше времени, чем последующие синхронизации, которые происходят примерно каждые 40 минут до запуска службы подготовки Microsoft Entra. С помощью раздела «Сведения о синхронизации» можно отслеживать ход выполнения и следовать ссылкам на отчет о действиях подготовки, который описывает все действия, выполняемые службой подготовки Microsoft Entra в Figma.

Дополнительные сведения о том, как читать журналы подготовки Microsoft Entra, см. в разделе «Отчеты о автоматической подготовке учетных записей пользователей».

Дополнительные ресурсы

  • Управление подготовкой учетных записей пользователей для корпоративных приложений
  • Что такое доступ к приложению и единый вход с помощью идентификатора Microsoft Entra?

Следующие шаги

Импорт из Figma

Во вкладке Account перейдите к блоку Personal access tokens и введите название токена, например, Tilda.

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

Импорт макета в Zero Block
Нажмите на меню с тремя точками внутри Zero Block и нажмите на пункт Import.

Перейдите в Figma. Откройте макет (Layout), выберите нужный Frame, в адресной строке скопируйте ссылку на Frame.

Чтобы импорт происходил корректно, необходимо добавлять в один Zero блок один Frame из Figma
В открывшемся окне добавьте ссылку на Frame и API токен, полученный в настройках Figma.

Подождите, пока макет импортируется.

Если вы добавили правильную ссылку и со стороны API Figma не происходили ошибки, то макет импортируется в Zero Block.

Обратите внимание, что по умолчанию изображения грузятся с серверов Figma, поэтому для загрузки их в Тильду нужно зайти в настройки элементов с изображениями и нажать на кнопку Upload to Tilda.

Требования к макету и особенности импорта
Макет (Layout)

Макет необходимо создавать на фрейме с шириной в 1200 px.

Импортировать макет лучше блоками, а не добавлять весь макет в один блок.

Группы элементов

Любую группу можно импортировать картинкой, для этого в названии нужно указать image. Если указать svg, то будет svg формат.

Доступен импорт групп, если внутри есть другие группы, то все элементы будут в группе первого уровня

Кнопки и шейпы

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

Если на шейпе есть эффект, который нельзя воспроизвести в Zero, то он импортируется с изображением эффекта на фоне.

Разделы «Справочного центра»:

  • Как устроена Тильда
  • Настройки сайта
  • Редактирование страницы
  • Продвижение сайта
  • Домен и сертификат
  • Интернет-магазин
  • Формы приёма данных
  • Статистика сайта
  • Zero Block
  • Конструктор писем
  • Тарифы и платежи
  • Потоки и новости
  • Личный кабинет
  • Разработчикам

Сообщить о нарушении прав

Если вы считаете, что пользователь Tilda Publishing нарушает ваши права, отправьте нам сообщение через форму

Как связаться с поддержкой

Для консультаций по функциям платформы используйте форму обратной связи в вашем личном кабинете или напишите на team@tilda.cc

Что такое токен в Figma?

Маркер — это элемент дизайна в Figma, который можно использовать для быстрого изменения внешнего вида всего компонента. Например, с помощью маркера можно изменить размер шрифта или цвет всего текста в кнопке сразу.

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

СОВЕТ: Эта статья посвящена токенам в Figma, но не объясняет, что такое токен. Токен — это цифровой актив, который может быть использован для представления активов реального мира. Они часто используются в онлайн-играх и виртуальных мирах.

Вы также можете создавать токены сразу из нескольких элементов, выбирая их и нажимая кнопку «Создать токен». После создания токена он появится в разделе «Токены» на боковой панели.

Чтобы применить маркер к элементу, выберите его, затем нажмите кнопку «Применить маркер» в правой боковой панели. Вы также можете применить маркеры сразу к нескольким элементам, выделив их и нажав кнопку «Применить маркер».

Что такое маркер в Figma?
Токен — это элемент дизайна в Figma, который можно использовать для быстрого изменения внешнего вида всего компонента.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *