Обновление библиотеки Figma
У основных компонентов, применяемых в формах, появились компактные версии. Используйте их в плотных и насыщенных интерфейсах.
Новые размеры компонентов:
— Checkbox Small и Radio Button Small — 16×16
— Switch Small — 28×16
— Input Small и Select Small — 32 по высоте поля ввода
— Input XSmall и Select XSmall — 24 по высоте поля ввода
Предыдущий вариант Select Small перемещен в устаревшие. В новых проетах используйте обновленную версию. Старая версия не сломается, она так же доступна, но переименована в Deprecated Select и вынесена из папки контролов.
Добавили второй вид для чекбоксов и радиокнопок — акцентный, залитый акцентным цветом в состоянии selected.
Исправили баг иконки в списках мультиселекта.
Переименовали страницы в библиотеки, поэтому апдейт прилетит на большинство компонентов — не пугайтесь.
У основных компонентов, применяемых в формах, появились компактные версии. Используйте их в плотных и насыщенных интерфейсах.
Новые размеры компонентов:
— Checkbox Small и Radio Button Small — 16×16
— Switch Small — 28×16
— Input Small и Select Small — 32 по высоте поля ввода
— Input XSmall и Select XSmall — 24 по высоте поля ввода
Предыдущий вариант Select Small перемещен в устаревшие. В новых проетах используйте обновленную версию. Старая версия не сломается, она так же доступна, но переименована в Deprecated Select и вынесена из папки контролов.
Добавили второй вид для чекбоксов и радиокнопок — акцентный, залитый акцентным цветом в состоянии selected.
Исправили баг иконки в списках мультиселекта.
Переименовали страницы в библиотеки, поэтому апдейт прилетит на большинство компонентов — не пугайтесь.
Релиз 5.0.9 имени Егора Бастракова.
Поздравляем нашего архитектора, техлида и просто хорошего человека Егора с Днем рождения!
Изменения
— Input, InputPhone, InputEmail, InputAmount, Select. Добавлен параметр size
— Switch. Добавлен параметр size, удален z-index
— Input. Добавлен параметр onClear
— Select, Multiselect. Добавлен forwardRef
— Typography. Теперь принимает все стандратные атрибуты, такие как title
Storybook
— Input. Добавлен пример реализации InputPassword
Changelog
Поздравляем нашего архитектора, техлида и просто хорошего человека Егора с Днем рождения!
Изменения
— Input, InputPhone, InputEmail, InputAmount, Select. Добавлен параметр size
— Switch. Добавлен параметр size, удален z-index
— Input. Добавлен параметр onClear
— Select, Multiselect. Добавлен forwardRef
— Typography. Теперь принимает все стандратные атрибуты, такие как title
Storybook
— Input. Добавлен пример реализации InputPassword
Changelog
Дизайн таблиц практически готов, и уже активно кодим.
Решили немного показать, что смогут наши таблицы:
- Будут два размера, средний M и плотный S для больших данных;
- Фильтрация и сортировка в хэдере колонок;
- Драгнэдроп колонок;
- Ресайз ширины колонок;
- В дизайне в фигме предусматриваем несколько типов ячеек. В коде ячейка это контейнер, в которую можно поместить вообще всё что угодно;
- Разумеется таблицы в трёх стилях графики и в светлой и тёмной темах;
- Таблицы гибкие и настраиваемые практически под любые нужды. В фигме таблицы на вариантсах, а в коде на пропсах.
Решили немного показать, что смогут наши таблицы:
- Будут два размера, средний M и плотный S для больших данных;
- Фильтрация и сортировка в хэдере колонок;
- Драгнэдроп колонок;
- Ресайз ширины колонок;
- В дизайне в фигме предусматриваем несколько типов ячеек. В коде ячейка это контейнер, в которую можно поместить вообще всё что угодно;
- Разумеется таблицы в трёх стилях графики и в светлой и тёмной темах;
- Таблицы гибкие и настраиваемые практически под любые нужды. В фигме таблицы на вариантсах, а в коде на пропсах.
Изменения в библиотеке Global Style
Мы знаем, что вы часто используете иконки из Дизайн-системы, в некоторых проектах требуется изменить их размер. Поэтому мы добавили к иконкам параметр Resizable, если его включить, то при изменении размера фрейма иконка будет пропорционально масштабироваться. Как и в коде. Это позволит использовать смасштабированные иконки в компонентах, при смене инстанса иконка автоматически подстроится под новый размер.
Подкорректировали настройки теней, теперь верхняя грань объекта с тенью четче видна на фоне такого же цвета, как и объект. Добавили тени, падающие вверх.
Занесли в стили бордеры — сверху, справа, снизу, слева
Добавили 4 новые иконки в размерах 24×24 и 16×16
Добавили новый цвет в палитру — Transparent 3. Для легких, прозрачных бэкграундов. Цвет относится к палитре Transparent, в Фигме новые стили будут в папке «Transparent+», так удобнее работать с палитрой при проектировании в двух цветовых темах.
Мы знаем, что вы часто используете иконки из Дизайн-системы, в некоторых проектах требуется изменить их размер. Поэтому мы добавили к иконкам параметр Resizable, если его включить, то при изменении размера фрейма иконка будет пропорционально масштабироваться. Как и в коде. Это позволит использовать смасштабированные иконки в компонентах, при смене инстанса иконка автоматически подстроится под новый размер.
Подкорректировали настройки теней, теперь верхняя грань объекта с тенью четче видна на фоне такого же цвета, как и объект. Добавили тени, падающие вверх.
Занесли в стили бордеры — сверху, справа, снизу, слева
Добавили 4 новые иконки в размерах 24×24 и 16×16
Добавили новый цвет в палитру — Transparent 3. Для легких, прозрачных бэкграундов. Цвет относится к палитре Transparent, в Фигме новые стили будут в папке «Transparent+», так удобнее работать с палитрой при проектировании в двух цветовых темах.
Обновления в библиотеке Web
Добавили в типографику новый стиль Accent XS — для мелких акцентов.
Обновили компонент Input Number Stepper, чтобы цвет иконок и стиль текста был идентичен остальным видам инпутов.
Добавили дропдаун меню меньшего размера — Dropdown Menu Small.
Добавили иконку слева в инпуты и селекты. В инпутах и селектах размера Medium теперь можно отключить лейбл — пересобрали текстовые слои на автолейауте.
Добавили лоадеры двух типов (акцентный и стандартный), в трех размерах (Small 16×16, Medium 24×24, Large 32×32).
Добавили в типографику новый стиль Accent XS — для мелких акцентов.
Обновили компонент Input Number Stepper, чтобы цвет иконок и стиль текста был идентичен остальным видам инпутов.
Добавили дропдаун меню меньшего размера — Dropdown Menu Small.
Добавили иконку слева в инпуты и селекты. В инпутах и селектах размера Medium теперь можно отключить лейбл — пересобрали текстовые слои на автолейауте.
Добавили лоадеры двух типов (акцентный и стандартный), в трех размерах (Small 16×16, Medium 24×24, Large 32×32).
Разрабатываем название для Дизайн-системы. Какие варианты вам нравятся?
Anonymous Poll
22%
Atomaro
7%
Powerbit
28%
Uniqum
29%
Componentum
3%
Methodux
10%
Axiomum
17%
Modulation
29%
Intersystem
7%
Mass Center
9%
Bond Energy
Релиз 5.1.0 имени Доминики Норт
Благодарим Доминику за самоотверженную работу в сложный период становления Дизайн-системы
Новый компонент Loader.
— Typography. Добавлен новый вариант шрифта accentXS
— Colors. В палитру Transparent добавлен новый цвет transparent3
— InputNumberStepper. Изменен внешний вид кнопок
— Icons. Добавлены новые иконки EndOfLine, Equals, MiddleOfLine, StartOfLine, EndOfLine16, Equals16, MiddleOfLine16, StartOfLine16
— DropdownMenu. Добавлены новые параметры size, isEmpty, emptyText
— Select. Добавлены параметры для автокомплита autocomplete, filterOptions, onSearch, emptyText. Добавлены параметры dropdownSize, placeholder, clearable, onClear
— Multiselect. Добавлен параметр dropdownSize
— InputDate, InputEmail, InputPhone. Добавлены параметры clearable, onClear
— Input. Добавлен параметр iconLeft
Changelog
Благодарим Доминику за самоотверженную работу в сложный период становления Дизайн-системы
Новый компонент Loader.
— Typography. Добавлен новый вариант шрифта accentXS
— Colors. В палитру Transparent добавлен новый цвет transparent3
— InputNumberStepper. Изменен внешний вид кнопок
— Icons. Добавлены новые иконки EndOfLine, Equals, MiddleOfLine, StartOfLine, EndOfLine16, Equals16, MiddleOfLine16, StartOfLine16
— DropdownMenu. Добавлены новые параметры size, isEmpty, emptyText
— Select. Добавлены параметры для автокомплита autocomplete, filterOptions, onSearch, emptyText. Добавлены параметры dropdownSize, placeholder, clearable, onClear
— Multiselect. Добавлен параметр dropdownSize
— InputDate, InputEmail, InputPhone. Добавлены параметры clearable, onClear
— Input. Добавлен параметр iconLeft
Changelog
Мерч
Сейчас, когда почти весь мерч раздали, можно уверенно сказать — получилось, всем нравится)
Корпоративный мерч это всегда сложная задача, потому что люди не любят ощущать себя ходячей рекламой. Первая партия мерча была как раз такой — просто логотип на футболках, и всё.
Во второй версии хотелось уже чего-то классного, чтобы было не стыдно раздавать людям.
Ещё с тех времён, когда я был иллюстратором я знаю, как важен сценарий для картинки. Потому что сценарий — это история с определённым подтекстом и метафорой.
Картинка с Дартом Вейдером про то, во что мы искренне верим. Мы очень любим нашу работу и наш продукт и верим, что Дизайн-система хоть немножечко, но сделает счастливыми разработчиков, дизайнеров, продактов, проджектов, и целые команды.
Кстати, на свитшоте в узоре зашифровано послание, кто отгадает, пишите в личку, получите комплект :)
Сейчас, когда почти весь мерч раздали, можно уверенно сказать — получилось, всем нравится)
Корпоративный мерч это всегда сложная задача, потому что люди не любят ощущать себя ходячей рекламой. Первая партия мерча была как раз такой — просто логотип на футболках, и всё.
Во второй версии хотелось уже чего-то классного, чтобы было не стыдно раздавать людям.
Ещё с тех времён, когда я был иллюстратором я знаю, как важен сценарий для картинки. Потому что сценарий — это история с определённым подтекстом и метафорой.
Картинка с Дартом Вейдером про то, во что мы искренне верим. Мы очень любим нашу работу и наш продукт и верим, что Дизайн-система хоть немножечко, но сделает счастливыми разработчиков, дизайнеров, продактов, проджектов, и целые команды.
Кстати, на свитшоте в узоре зашифровано послание, кто отгадает, пишите в личку, получите комплект :)
🔥1
Привет!
Пройдите пожалуйста короткий, но очень важный опрос (2 мин)
Мы хотим актуализировать данные о проектах, которые используют Дизайн-систему. Это позволит нам быстрее реагировать на ваши потребности и запросы
Пройдите пожалуйста короткий, но очень важный опрос (2 мин)
Мы хотим актуализировать данные о проектах, которые используют Дизайн-систему. Это позволит нам быстрее реагировать на ваши потребности и запросы
Друзья, наши компоненты дорабатываются, исправляются баги, добавляются новые параметры.
Посмотрите, как можно управлять параметрами инпута (как в коде, так и в Figma)
Посмотрите, как можно управлять параметрами инпута (как в коде, так и в Figma)