DevNotes Live

Forwarded from Дайджест продуктового дизайна

Понедельничный подгон свежего о дизайн-системах:

1. Figma: Запустили свой сервер для подключения через протокол MCP, который помогает ИИ-продуктам и сервисам общаться между собой. Например, редакторы кода VS Code с Copilot, Cursor, Windsurf и Claude Code могут собрать код на основе макетов. Помимо сборки прототипов это упрощает работу с дизайн-системой — вот, например, быстрое создание компонента в Storybook на основе его версии в Figma (на основе инструкции по настройке MCP Figma от Colin Matthews). MCP — одна из самых крутых вещей, которая случилась с интернетом за последние годы и Microsoft считает этот протокол новым HTTP за его простоту и масштабируемость.

2. Шикарная коллекция простых кусков интерфейса в виде wireframes, которые отлично подходят для документации дизайн-системы. Версия для Figma.

3. SAS: Мощный пример работы с локализацией в дизайн-системе в Figma. Помимо работы с текстом они адаптировали базовые токены вроде размеров, чтобы учесть особенности разных языков.

4. Diataxis: Фреймворк помогает грамотно структурировать и понятно писать гайдлайны и техническую документацию в целом.

5. Storybook 9: Встроили инструменты тастирования Vitest: тесты взаимодействия, accessibility и визуальные, а также сделали карту покрытия тестами. Так же ужали код наполовину, сделали работу с React Native удобнее и добавили глобальные состояния (например, можно посмотреть компонент в тёмной теме, нужном размере экрана или локали),

6. Adobe: Как работает дизайн-система Consonant для маркетинговых материалов, которая связана с их основной дизайн-системой Spectrum.

7. Brad Frost: Примеры ситуаций, которые может объединять дизайн-система. Разные продукты, подбренды, маркетинговые кампании, цветовые режимы, технологические фреймворки.

#designsystems

Figma

Introducing our Dev Mode MCP server: Bringing Figma into your workflow | Figma Blog

Today we’re announcing the beta release of the Dev Mode MCP server, which brings Figma directly into the developer workflow to help LLMs achieve design-informed code generation.

1 view08:04