Шаблон для группы вк новый дизайн: как сделать без дизайнера — Блог LiveDune

15 полезных ботов для ведения каналов и чатов в Telegram

BotFather Combot Controller Bot Notepost BaslayBot Telegraph Синхробот Дзена TGStat Alert Bot TGStat Bot Searchee Bot MotherSearch Daysandbox Perebot Livegram Bot LikeBot

Боты в Telegram — виртуальные помощники, которым можно поручить часть функций по управлению каналом или чатом. Они берут на себя рутинную работу: помогают организовать постинг, модерировать общение, формировать статистику.

Собрали 15 популярных Telegram-ботов, которые помогают администрировать сообщества в мессенджере.

Что нужно делать	Какой бот подходит
Готовить отложенные посты и красиво их оформлять	Controller Bot Notepost BaslayBot LikeBot
Модерировать общение в чатах и давать обратную связь участникам	Combot Notepost Daysandbox Livegram Bot
Собирать статистику канала/группы	Combot Controller Bot TGStat Alert Bot TGStat Bot
Интегрироваться с другими сервисами	Telegraph Синхробот Дзена
Искать информацию в Telegram	Searchee Bot MotherSearch

Как пользоваться Telegram-ботами

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

Для запуска перейдите по ссылке на нужного бота. Когда откроется диалоговое окно, нажмите кнопку «Запустить» — это команда /start. После её активации бот сам расскажет, чем может быть полезен, и объяснит, как начать работу.

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

Самый главный. С его помощью можно создавать других ботов в Telegram и управлять ими.

Бот умеет:

— Создавать и удалять новых ботов.

— Выдавать и отзывать токены авторизации — это API-ключи, при помощи которых бот подключается к каналу и может работать.

— Редактировать ботов: менять имя, описание, аватарку, команды.

— Изменять настройки встроенной обратной связи и конфиденциальности в группах.

API-ключ можно использовать для Telegram-ботов и сторонних сервисов. Например, так к мессенджеру подключаются чат-боты Unisender

Многофункциональный инструмент с гибкими настройками. Помогает модерировать сообщества любых размеров.

Бот умеет:

— Отправлять приветственные сообщения участникам и отвечать на самые частые вопросы.

— Модерировать сообщения: удалять спам и нежелательный контент, банить пользователей, настраивать запрет на постинг ссылок и многое другое.

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

Сервис для удобного отложенного постинга. Помогает запланировать и оформить публикации на несколько дней вперёд.

Бот умеет:

— Форматировать текст.

— Добавлять изображения, реакции, URL-кнопки.

— Создавать отложенные посты, настраивать время их публикации и удаления из канала.

— Редактировать публикации.

— Считать статистику канала по количеству участников.

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

Бот умеет:

— Создавать шаблоны публикаций, URL-кнопок, автоподписей.

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

— Подключать интеграцию с Notion, Evernote, Google Calendar, Google Sheets.

— Добавлять водяные знаки на фото, видео, анимации.

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

— Поддерживать режим премодерации и настраивать доступ для редакторов канала.

— Автоматически принимать и отклонять заявки на вступление, отправлять приветственные сообщения новым пользователям.

Чтобы пользователю было проще ориентироваться в функционале бота, про обновления и полезные лайфхаки пишут в канале @posting_bots

Ещё один инструмент для отложенного постинга с упором на оформление публикаций. Это сервис от создателей бота Notepost, но с меньшим количеством функций.

Бот умеет:

— Формировать контент-план из запланированных и опубликованных постов.

— Настраивать таймер публикации и открепления постов, автоповторы.

— Наводить порядок в медиа-файлах и редактировать альбомы.

— Добавлять водяные знаки на фото, видео и альбомы.

— Редактировать и менять расположение кнопок, добавлять кнопку комментариев.

Пригодится тем, кто часто публикует лонгриды. Команда Telegram создала специальный текстовый редактор Telegra.ph. В нём удобно писать и форматировать длинные тексты. Пользователям статья отправляется в виде ссылки — они видят красиво оформленную страницу, не выходя из мессенджера.

Бот помогает:

— Быстро войти в редактор для постинга Telegra.ph.

— Управлять публикациями.

— Собирать статистику просмотров статей.

Сервис для тех, кто ведёт канал в Яндекс.Дзен.

Бот умеет:

— Публиковать посты из Telegram-канала прямо в Дзен.

— Определять и  транслировать только те публикации, которые подходят под формат Дзена — посты объёмом меньше 1500 символов, без видео и gif-файлов.

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

Инструмент для мониторинга репутации в мессенджере.

Бот умеет:

— Отслеживать упоминания о канале.

— Отслеживать свежие публикации в каналах и чатах по ключевым словам.

— Отправлять уведомления о репостах, упоминаниях и новых постах.

Бот для сбора статистики от сервиса Telegram Analytics. Это проект с открытой статистикой, который регулярно проводит исследования аудитории Telegram, публикует рейтинги каналов и публикаций. Сервис доступен на 5 языках и автоматически индексирует русскоязычные, украинские, англоязычные, узбекские и белорусские публичные каналы.

Бот умеет:

— Отслеживать количество подписчиков в динамике.

— Считать охваты постов и просмотры статей в Telegra.ph.

— Собирать статистику по вовлечённости.

— Мониторить индекс цитирования.

Сервис для поиска каналов по разным тематикам. Пригодится новостникам и тем, кто регулярно отслеживает повестку по своей сфере.

Бот умеет искать каналы в Telegram по тематике и названию.

Ещё один поисковой сервис. Работает как Google внутри Telegram.

Бот умеет искать посты по запросу. В выдаче показывается общее количество публикаций с найденным текстом и сами посты — от новых к старым.

Антиспам-бот, помогает модерировать сообщества с большим количеством участников.

Бот умеет:

— Удалять посты с ссылками от участников, вступивших в чат меньше суток назад.

— Удалять изображения и видео от новых пользователей.

— Удалять любые сообщения от новых пользователей в течение заданного времени.

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

Бот-переводчик пригодится админам чатов, куда заглядывают англоязычные пользователи.

Бот умеет переводить с английского на русский и с русского на английский.

Конструктор ботов для обратной связи в Telegram. Инструмент позволяет общаться с аудиторией анонимно и оперативно отвечать на вопросы пользователей.

Бот умеет:

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

— Поддерживать разные форматы сообщений — текстовые, фото- и видеофайлы, стикеры, голосовые сообщения.

— Сохранять контакты и историю диалогов.

— Делать рассылку сообщений пользователям.

— Сохранять статистику по отправленным сообщениям и вовлечённым пользователям.

Простой инструмент для оформления реакций к постам.

Бот умеет добавлять к публикациям кнопки с эмодзи и лайками.

В декабре 2021 года Telegram выпустил обновление, в котором реакции на сообщения стали встроенной функцией.

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

Поделиться

СВЕЖИЕ СТАТЬИ

Другие материалы из этой рубрики

Не пропускайте новые статьи

Подписывайтесь на соцсети

Делимся новостями и свежими статьями, рассказываем о новинках сервиса

«Честно» — авторская рассылка от редакции Unisender

Искренние письма о работе и жизни. Свежие статьи из блога. Эксклюзивные кейсы и интервью с экспертами диджитала.

Оставляя свой email, я принимаю Политику конфиденциальности

Наш юрист будет ругаться, если вы не примете 🙁

BloodHound и GPO Client Side Extension / Хабр

Продолжаем цикл статей «Учим старого псаовым трюкам», посвященных расширению возможностей BloodHound. Это популярный инструмент, который используется для сбора и анализа данных во время проведения пентеста внутренней инфраструктуры на базе Active Directory. BloodHound позволяет визуализировать некорректные настройки объектов Active Directory и строить цепочки атак. Его основная особенность – использование теории графов при анализе данных. В сегодняшнем посте рассмотрим способ представления GPO Client Side Extension в читаемом виде и добавление этой информации в базу BloodHound.

GPO – объект домена, и он обладает атрибутами, которые определяют, что данный GPO будет выполнять. За это отвечают атрибуты gpcuserextensionnames (применение GPO в контексте пользователя) и gpcmachineextensionnames (применение GPO в контексте компьютера). Эти атрибуты представляют собой GUID Client Side Extension (CSE). Сопоставление GUID CSE и функционала можно найти на странице Microsoft. У GPO также есть четкая структура каталогов и наименования файлов. Корневой каталог для GPO определяется атрибутом gpcfilesyspath. Проще говоря, атрибуты gpcuserextensionnames и gpcmachineextensionnames – это инструкции и указатели на определенные файлы, которые будут применяться.

Групповая политика Default Domain Policy

CSE представляет собой набор GUID, а название не всегда дает представление о том, какие инструкции выполняет групповая политика, поэтому возникла идея написать скрипт, который будет преобразовать CSE в читаемый вид и добавлять информацию в базу Neo4j.

Займемся созданием скрипта в PowerShell. Сначала нужно составить hashtable, который будет использоваться для преобразования CSE. Ссылка на перечень выше.

$GpoGuidRef = @{
'00000000-0000-0000-0000-000000000000' = 'Core GPO Engine'
'0E28E245-9368-4853-AD84-6DA3BA35BB75' = 'Preference CSE GUID Environment Variables'
'0F6B957D-509E-11D1-A7CC-0000F87571E3' = 'Tool Extension GUID (Computer Policy Settings)'
'0F6B957E-509E-11D1-A7CC-0000F87571E3' = 'Tool Extension GUID (User Policy Settings) / Restrict Run'
'1612b55c-243c-48dd-a449-ffc097b19776' = 'Preference Tool CSE GUID Data Sources'
...
'0F3F3735-573D-9804-99E4-AB2A69BA5FD4' = 'Advanced Audit Policy Snapin'
}

Результаты будем записывать в файл:

[string]$OutFile = "Result_" + $(Get-Date -f ddMMyyyyhhmmss) + ".log"

Так как атрибуты gpcuserextensionnames и gpcmachineextensionnames представлены в виде [{CSE}{CSE}][{CSE}{CSE}], нужно составить шаблоны регулярных выражений для извлечения данных из квадратных и фигурных скобок:

$extPattern = "(?<=\[)[^]]+(?=\])"
$guidPattern = "(?<=\{). +?(?=\})"

Первый шаблон извлекает информацию из квадратных скобок, а второй – из фигурных.

На следующем шаге нужно выгрузить все групповые политики. Здесь будет использоваться ADSI-запрос, результат которого затем будет обрабатываться.

$DomainObject = [System.DirectoryServices.ActiveDirectory.Domain]::GetCurrentDomain()
$CurrentDomain = "LDAP://" + ([ADSI]"").distinguishedName
$Domain = $DomainObject.name
$ObjectSearcher = New-Object System.DirectoryServices.DirectorySearcher([ADSI]$CurrentDomain)
$DirEntry = New-Object System.DirectoryServices.DirectoryEntry
$ObjectSearcher.SearchRoot = $DirEntry
$ObjectSearcher.Filter = "(&(objectClass=groupPolicyContainer))"
$ObjectSearcher.PageSize = 1000
$Objects = $ObjectSearcher.FindAll() 

Теперь в цикле нужно извлечь атрибуты gpcuserextensionnames, gpcmachineextensionnames и атрибут objectguid, который будет использоваться как идентификатор для поиска GPO в базе neo4j. По очереди будет выполняться проверка наличия данных в атрибутах. Потом шаблоны регулярных выражений извлекают CSE и преобразуют в читаемый вид. На последних этапах формируются набор преобразованных данных и строка запроса Cypher.

На выходе будет множество запросов MATCH, поэтому используется инструкция CALL {}.

 foreach($object in $Objects)
{
$objectGuid = [guid]$Object.Properties.objectguid.Item(0)
if ($Object.Properties.gpcmachineextensionnames -ne $null)
{
$exts = [Regex]::Matches($Object.Properties.gpcmachineextensionnames, $extPattern).Value
$collects =  @()
foreach ($ext in $exts)
{
$guids = [Regex]::Matches($ext, $guidPattern).Value
$collects += $GpoGuidRef[$guids] -join ': '
}
$collectionGuid =  '"{0}"' -f ($collects -join '","')
Add-Content $OutFile "CALL {MATCH (g:GPO) WHERE g.objectid =~ '(?i)$objectGuid' SET g.machineextname = [$collectionGuid]}"
}
if ($Object.Properties.gpcuserextensionnames -ne $null)
{
$exts = [Regex]::Matches($Object.Properties. gpcuserextensionnames, $extPattern).Value
$collects =  @()
foreach ($ext in $exts)
{
$guids = [Regex]::Matches($ext, $guidPattern). Value
$collects += $GpoGuidRef[$guids] -join ': '
}
$collectionGuid =  '"{0}"' -f ($collects -join '","')
Add-Content $OutFile "CALL {MATCH (g:GPO) WHERE g.objectid =~ '(?i)$objectGuid' SET g.userextname = [$collectionGuid]}"
}

После запуска скрипта получаем файл с результатами выполнения в виде запросов Cypher.

Полученные данные надо скопировать, вставить в поле запроса в Browser Neo4j и нажать кнопку «выполнить». Теперь, если перейти в BloodHound и выбрать групповую политику, можно увидеть, что в разделе EXTRA PROPERTIES появились новые поля.

На этом сегодня все. А наши предыдущие посты о расширении возможностей BloodHound можно почитать здесь, здесь и здесь. До новых встреч!

Автор: Дмитрий Неверов, руководитель группы анализа защищенности внутренней инфраструктуры, «РТК-Солар»

30+ Иконки ВКонтакте Иллюстрированные, безвозмездные векторные изображения и клипы

Иллюстрированные

• Görsel
• Фотографии
• Иллюстрированные 900 06
• Vektörler
• Видео

vk icons videosunu görüntüleyin

37

vk icons без лицензионных отчислений сток illüstrasyonu ве вектор grafiğini inceleyin veya daha fazla сток görsel ве вектор grafiği keşfetmek için йени бир арама başlatın.

Телефон:

Попюлер

mektup vk öğesi tasarım — vk icons stock illustrations

mektup vk öğesi tasarım

letter vk monogram logo tasarımı — vk icons stock illustrations

Letter VK Monogram Logo Tasarımı

kv veya vk alfabeleri soyut logo monohram amblemi — иконки vk стоковые иллюстрации

KV veya VK Альфабелери Союз Лого Monohram Amblemi

кв вея вк альфабелери союз логотип monohram amblemi — vk icons стоковые иллюстрации0016 KV veya VK Alfabeleri Soyut Logo Monohram Amblemi

буква vk circle logo tasarımı — иконки vk иллюстрации

Letter VK Circle Logo Tasarımı

кв veya vk alfabeleri soyut logo monohram amblemi — vk icons стоковые иллюстрации Логотип Soyut Monohram Amblemi

i̇lk harf logosu kv, vk, logo şablonu — vk icons stock illustrations

İlk harf logosu KV, VK, logo şablonu

vk ilk düğün davetiyesi, aşk simge şablon vektör — vk icons stock illustrations

VK ilk düğün davetiyesi, aşk simge şablon vektör

k, vk, uk инициалы, штриховые рисунки в прямоугольнике, логотип инструмента — vk icons stock illustrations

K, vk, Великобритания, инициалы, штриховые рисунки, прямоугольник, логотип инструмента вк harf şablonu logo tasarımı — vk icons stock illustrations

Daire simgesi ile kırmızı ve mavi çizik VK harf şablonu logo. ..

vk altıgen şekil harfler tasarım — vk icons stock illustrations

VK altıgen şekil harfler tasarım

минимальный логотип vk. иконка вк на роскошном фоне. Идея логотипа основана на инициалах монограммы kv. буквенный символ профессионального разнообразия и логотип kv на заднем плане. — иконки vk стоковые иллюстрации

Минимальный логотип ВКонтакте. Иконка ВК на роскошном фоне. Идея логотипа…

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

Профессиональный инновационный начальный логотип VK и логотип KV. Буква ВК…

буква АК ВК монограмма почерк подпись личность элегантный бизнес логотип дизайн вектор — vk иконки фондовые иллюстрации

буква АК ВК монограмма почерк подпись личность элегантный…

минимальный стиль листа начальный логотип вк — иконки vk стоковые иллюстрации

минимальный лист стиль начальный логотип вк

винтажные королевские начальные буквы логотип вк. — vk icons стоковые иллюстрации

Винтажные королевские буквицы Логотип ВК.

mektup vk öğesi simgesi tasarım şablonu — vk icons stock illustrations

mektup vk öğesi simgesi tasarım şablonu

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

Professional Innovative Начальный логотип ВК и логотип КВ. Письмо ВК…

vk ilk düğün davetiyesi, aşk simge şablon vektör — vk icons stock illustrations

VK ilk düğün davetiyesi, ask simge şablon vektör

red vk brush letter logo design. концепция логотипа художественных рукописных букв. — vk icons стоковые иллюстрации

Red VK Brush Letter Logo Design. Художественные Рукописные Буквы…

ВК Письмо Фотография Камера Стиль — ВКонтакте Иконки Сток Иллюстраций

ВК Письмо Фотография Камера Стиль

минимальный логотип вк. значок буквы kv на фоне роскоши. Идея логотипа на основе инициалов монограммы vk. буквенный символ профессионального разнообразия и логотип kv на заднем плане. — vk icons стоковые иллюстрации

Минимальный логотип ВК. Иконка буквы KV на роскошном фоне….

vk daire şekli mektup tasarım — vk icons stock illustrations

vk daire şekli mektup tasarım

kv veya vk alfabeleri soyut logo monohram amblemi — vk icons stock illustrations

kv veya VK Alfabel Эри Соют Логотип Monohram Amblemi

кв вея вк альфабелери союз логотип monohram amblemi — vk icons стоковые иллюстрации ми

кв вея вк alfabeleri soyut logo monohram amblemi — vk icons stock illustrations

KV veya VK Alfabeleri Soyut Logo Monohram Amblemi

vk монограмма, перекрывающаяся буква v, буква k логотип. корпоративный жирный шрифт буква м значок подписи. геометрические формы технологии. — иконки vk стоковые иллюстрации

Вензель ВК, буква v внахлест, логотип буква k. Корпоративный смелый…

vk daire şekli vektör tasarımı — иконки vk стоковые иллюстрации

vk daire şekli vektör tasarımı

минимальный логотип vk. значок буквы kv на фоне роскоши. Идея логотипа на основе инициалов монограммы vk. буквенный символ профессионального разнообразия и логотип kv на заднем плане. — vk icons стоковые иллюстрации

Минимальный логотип ВК. Иконка буквы KV на роскошном фоне….

altın vk monogramı beyaz izole. — иконки vk стоковые иллюстрации

Altın VK monogramı beyaz izole.

vk altıgen şekil harfler tasarım — vk icons stock illustrations

vk altıgen şekil harfler tasarım

vk monogram shape smoke style — vk icons stock illustrations

vk monogram shape smoke style

kv veya vk alfabeleri soyut logo monohram am blemi — иконки vk стоковые иллюстрации

KV veya VK Alfabeleri Soyut Logo Monohram Amblemi

beyaz arka planda gölge olan basit vk harf işareti simgesi — vk icons stock illustrations

Beyaz arka planda gölge olan basit vk harf işareti simgesi

кв вея вк альфабелери логотип монограм амблеми — вк иконки стоковые иллюстрации

VK Team делится библиотеками компонентов VKUI Figma | by VK Team

Чтение: 5 мин.

·

14 мая 2020 г.

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

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

На странице сообщества VK Figma доступны четыре библиотеки:

• Базовая библиотека VKUI, содержащая более 650 иконок и все цветовые маркеры для светлого и темного режима (в виде стилей)
• Библиотека VKUI для iOS и библиотека VKUI для Android, содержащая компоненты для iOS и Android, созданные с использованием токенов из базовой библиотеки, а также шаблонов мокапов приложений
• Цветовая палитра VKUI, содержащая маркеры цветов, используемых в приложениях ВКонтакте

Получить доступ к исходным элементам

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

Мини-приложения ВКонтакте

Дизайн-система VKUI используется не только нашей командой, но и большим сообществом разработчиков и дизайнеров мини-приложений. Они создают сервисы, доступ к которым можно получить во второй вкладке мобильного приложения ВКонтакте. Когда-то небольшой каталог превратился в гигантскую платформу VK Mini Apps с более чем 16 тысячами мини-приложений и ежемесячной базой пользователей более 30 миллионов человек.

Почти все мини-приложения используют компоненты VKUI. Это упрощает процесс проектирования и значительно ускоряет разработку, поскольку быстрее собрать проект, используя готовые элементы. Мини-приложения расширяют функционал приложения ВКонтакте и открываются без проблем. Пользователи едва ли могут увидеть разницу между двумя интерфейсами.

Вот несколько примеров проектов сторонних разработчиков, выполненных с использованием VKUI:

• Планировщик задач Antodo
• Приложение Universe
• Фитнес-приложение для дома и спортзала FitQuest
• Образовательное приложение PDD 2020 ПДД

90 016 Предлагайте идеи VK Designers

С помощью наших компонентов вы можете создавать экраны мобильного приложения VK и вносить предложения в сообщество VK Designers, где мы публикуем самые смелые идеи и даже внедряем некоторые из них в приложение.

Помимо элементов интерфейса, мы также делимся полными экранами приложения ВКонтакте, которые можно использовать в качестве шаблонов. Там вы можете найти экраны со списками друзей и сообщества, настройками, музыкой, сообщениями и даже окном чата. Все они были созданы с использованием только компонентов.

Существуют также шаблоны простых мини-экранов приложений, которые облегчат начало работы.

Нашей целью было добавить компоненты в Figma таким образом, чтобы дизайнерам не приходилось отсоединять их от основных компонентов при их использовании. Если бы им пришлось это сделать, они бы поняли, что эта функциональность не закодирована, и для ее реализации потребуется некоторое время.

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

Auto Layout в Figma предоставляет гораздо более широкий спектр возможностей, приближая макет, сделанный в визуальном инструменте, к его реализации в коде. Это позволяет вам создавать целые экраны с использованием компонентов и не беспокоиться о том, что вам придется вручную изменять элементы, если их содержимое изменится. При использовании Auto Layout вы можете иногда столкнуться с ограничениями растяжения. Мы используем различные уловки, чтобы их обойти, но это история для другой статьи

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

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

В Figma с помощью плагина Appearance мы смогли реализовать возможность смены режимов прямо в макете как для отдельных элементов, так и для целых страниц. Стили меняются в зависимости от их названия, например, с Светлый текст / Основной — Темный текст / Основной . Вот как это работает со всеми нашими 200+ токенами.

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

Мы подготовили руководство, которое поможет вам начать работу с VKUI в Figma.