Variables to Table — плагин преобразует переменные в виде таблицы.
Palettes Variables — создание и синхронизация цветовых тем используя переменные.
Consta news
🔹NEW Pixso
Мы опубликовали несколько библиотек дизайн-системы Consta в Pixso (Beta):
На цветовых переменных:
– Consta UI-Kit
– Consta Table
– Consta Graphics
На старых цветовых стилях:
– Consta Charts
– Consta Drill Elements
Для обратной совместимости:
– Consta Default, Dark, Display Colors
– Consta Default Typography
– Consta Spaces
⚠️ Почему Beta?
Некоторые компоненты могут работать с ошибками. Мы уже знаем о части из них, а про другие можем узнать только от вас :) Будем благодарны за обратную связь. В ближайшие недели постараемся довести библиотеки до максимального сходства с Figma.
Ссылка на библиотеки в Pixso
Что дальше:
Готовим публикацию оставшихся библиотек и параллельно переезжаем на Variables (шрифты, отступы).
Еще кое-что для Pixso:
Мы сделали плагин Consta Props Styler — он строит таблицу свойств для компонент-сета в один клик (по аналогии с Propstar в Figma). Забрать можно здесь.
🔹NEW Figma
– Перевели Consta UI-Kit на цветовые переменные. Теперь в библиотеке нет отдельных версий под каждую тему — переключение делается прямо в настройке Appearance → Variable Mode.
– Навигация в менеджере ассетов стала проще.
Что дальше:
Переезд шрифтов и отступов на Variables. Обновление UI-Kit выйдет в ближайшие пару недель, затем подтянем и остальные библиотеки.
🔹Компоненты в UI-Kit
– NEW Banner — статусная плашка с кнопками для закрепленных сообщений.
– NEW File Icon — новая иконка формата файла: много предзаготовок + возможность собрать свою.
– Tag — иконка теперь настраивается через Boolean-свойство, поправили размеры для S и XS.
– Badge — выбор иконки вынесен в список свойств.
– Groups — компоненты, у которых есть Group-версия, сделали отдельными от групп, как на портале:
– AvatarGroup (добавили настройку View для всей группы разом)
– SwitchGroup
– BadgeGroup
– CheckboxGroup
– CollapseGroup
🔹Еще кое-что для Figma
Сделали плагин Consta Style Replacer. Он помогает заменить цветовые стили на переменные по совпадению имен. Если библиотека опубликована в вашей команде — заведите у себя переменные и замените стили за пару кликов. В следующей версии добавим возможность работы с переменными из удаленных библиотек.
Смотреть в Figma community
Стэй тунед!
Costa news
Привет! На связи команда Consta, и мы к вам с новостями.
Темизация и цветовые токены
Мы готовимся к масштабному обновлению механик работы с темами — как в дизайне, так и в коде.
Что изменится:
• Откажемся от расчёта оттенков цветов через PostCSS в переменных компонентов.
• Вместо этого введём Color Ramps — цветовые шкалы, построенные на базе базовых цветов. Оттенки из Color Ramps будут использоваться внутри компонентов.
• Для удобства кастомизации тем разработаем инструмент генерации Color Ramps, чтобы вы могли создавать их самостоятельно.
• Расширим набор цветовых переменных и статусных цветов для более гибкой работы с состояниями компонентов.
• Обеспечим полную связку дизайна и кода — все цветовые и другие переменные будут синхронизированы.
Плавный переход
Для комфортного перехода текущие значения переменных перенесём в Figma Variables вместо старых стилей.
Со следующей среды начнём публиковать группы компонентов, уже переведённых на переменные.
Этот шаг — промежуточный этап перед полным обновлением тем. Пока в Figma Variables мы выносим только цвета, но скоро добавим шрифты, отступы и другие параметры для полной синхронизации с кодом.
Кроме того, мы разработали плагин, который позволит быстро заменять стили на переменные в существующих компонентах — это упростит перевод ваших кастомных компонентов на новые цветовые переменные.
Consta в Pixso
В связи с выходом Pixso 2.0 готовим запуск Consta UI-Kit в этом инструменте на базе переменных. Ожидайте публикацию уже на этой неделе!
Стэй тунед!
Плагин «Color Scale Variables» by Jonny Gwillim
Плагин для удобного создания цветовых тем и сохраняя их в переменные.
🎨 Скачать плагин 🎨
#plugin
