Skip to content

Design-system #23

@Rakovao

Description

@Rakovao

Чеклист

  • Организация страниц в файле: Твой ФФ, Задачи и Design-system
  • Актуализация всех экранов из прода
  • Оптимизация расположения блоков отдельных сервисов: экраны и их вариации должны быть организованы согласно user flow
  • Аудит компонентов
  • Написать принципы для дизайн-системы

ТЗ

1. Краткое описание задачи.

Создание дизайн-системы проекта для унификации интерфейсов, улучшения качества разработки и поддержки консистентности между различными продуктами команды. Дизайн-система станет основой для всех будущих UI решений и поможет оптимизировать процесс работы как дизайнеров, так и разработчиков.

2. Текущая реализация

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

3. Функциональные требования.

Актуализация всех экранов из прода

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

Организация страниц в файле

Файл должен быть структурирован следующим образом:

  • Твой ФФ: Здесь будут храниться все актуальные экраны, которые уже запущены в эксплуатацию.
  • Задачи: Эта страница предназначена для хранения экранов, которые находятся в разработке, проходят этап тестирования или дизайн-ревью.
  • Design-system: На этой странице будут собраны все переиспользуемые компоненты, такие как кнопки, инпуты, карточки и т.д., а также правила их использования.

Аудит компонентов

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

Оптимизация расположения блоков отдельных сервисов

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

Создание принципов дизайн-системы

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

5. Важность задачи

Дизайн-система является ключевым инструментом для масштабирования продуктов и повышения эффективности работы команды. Она позволяет:

  • Уменьшить количество ошибок при разработке новых экранов.
  • Ускорить и упростить работу дизайнеров.
  • Сократить время на согласование и внедрение новых фич.
  • Обеспечить единообразие пользовательского опыта.
  • Упростить процесс онбординга новых дизайнеров и разработчиков.

Этот эпик станет отправной точкой для всех дальнейших задач, связанных с развитием и поддержкой дизайн-системы.

Metadata

Metadata

Assignees

Labels

epic 💯Масштабная задача, целый сервис

Type

No type

Projects

Status

In Progress

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions