Сегодня в 14:00 по мск, в рамках серии обучающих крекеров по фронтенд архитектуре Миша Синяков проведёт стрим. Расскажет про сервисный слой приложения, покажет как подружить реакт с приложением, как взаимодействовать с глобальным хранилищем. И сверстает небольшое приложение используя Дизайн-систему.
Стрим в дискорде по ссылке
https://discord.gg/QhBug8Qv
Стрим в дискорде по ссылке
https://discord.gg/QhBug8Qv
Друзья, нам важно ваше мнение о Дизайн-системе. Что вам нравится?
Anonymous Poll
78%
Дизайн
13%
Качество кода
22%
Удобство использования
65%
Отзывчивость команды ДС
17%
Количество компонентов
А что НЕ нравится?
Anonymous Poll
16%
Дизайн
42%
Качество кода
47%
Удобство использования
11%
Отзывчивость команды ДС
42%
Количество компонентов
11%
Напишу в чат
Привет! Мы продолжаем сбор обратной связи от пользователей Дизайн-системы.
Если вы юзаете наш инструмент, и вам есть что сказать — заполняйте опрос (2 мин).
Можно ругать, можно советовать, можно анонимно. Будет полезна любая информация от вас
Если вы юзаете наш инструмент, и вам есть что сказать — заполняйте опрос (2 мин).
Можно ругать, можно советовать, можно анонимно. Будет полезна любая информация от вас
Google Docs
Подключение Дизайн-системы
Привет, благодаря этой короткой форме, мы сможем понимать, кто использует нашу систему и быстрее реагировать на ваши запросы и потребности.
Релиз 5.0.8 имени Синякова-Ежкова
Благодарим Михаила Синякова за доработку ThemeProvider и добавление css переменных.
Cпасибо Денису Ежкову за найденные баги в Textarea и Multiselect
- ThemeProvider. Добавлен параметр useCssVariables, который создает CSS переменные согласно заданной теме
- Textarea. Изменена ширина компонента на 100%
- Multiselect. Исправлено отображение параметра error
- Checkbox, CheckboxGroup, RadioButton. Добавлены параметры size и view
Changelog
Благодарим Михаила Синякова за доработку ThemeProvider и добавление css переменных.
Cпасибо Денису Ежкову за найденные баги в Textarea и Multiselect
- ThemeProvider. Добавлен параметр useCssVariables, который создает CSS переменные согласно заданной теме
- Textarea. Изменена ширина компонента на 100%
- Multiselect. Исправлено отображение параметра error
- Checkbox, CheckboxGroup, RadioButton. Добавлены параметры size и view
Changelog
Дизайнеры, привет! В этом году Дизайн-систему Ростелекома стали активно применять разработчики. Сейчас её используют уже больше 20 проектов. Мы были заняты разработкой, поддержкой или другими проектами, поэтому библиотека для дизайнеров не обновлялась =( За это время в фигму завезли новые автолэйауты, варианты и прочие вкусняшки, компоненты успели морально устареть. Пора обновлять.
Мы с вами давно не виделись и потеряли контакт: используете ли вы Дизайн-систему в новых проектах? Ждете варианты в библиотеке или и так норм? Как обновить библиотеку, чтобы в ваших проектах ничего не поломалось? Давайте соберемся на полчасика в пятницу, после общего созвона, и пообщаемся. Мы по вам соскучились! ❤️
Мы с вами давно не виделись и потеряли контакт: используете ли вы Дизайн-систему в новых проектах? Ждете варианты в библиотеке или и так норм? Как обновить библиотеку, чтобы в ваших проектах ничего не поломалось? Давайте соберемся на полчасика в пятницу, после общего созвона, и пообщаемся. Мы по вам соскучились! ❤️
Обновление библиотеки 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