Функциональность

Что дает компонентный подход

  1. 1.
    Набор инструментов, позволяющих создавать «пуленепробиваемые» и адаптивные компоненты, доступные для кастомизации и повторного использования в любых проектах.
  2. 2.
    Систему принципов и соглашений по организации и подписи файлов, страниц макетов, экранов, прототипов и слоев проекта.
  3. 3.
    Унифицированную систему терминов, охватывающую все необходимые для разработки дизайна элементы и их свойства.
  4. 4.
    Эффективную и систему подготовки дизайнеров для профессиональной работы в Figma.

Какие проблемы решает

Хранение и поиск

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

Подпись слоев

Все слои, экраны и компоненты подписаны благодаря объектно-ориентированной логике, поэтому в исходниках легко разобраться и их легко поддерживать.

Автоматизация

Благодаря принципу построения всех компонентов и макетов с использованием Auto Layout — все экраны и компоненты автоматически перестраиваются, без необходимости двигать что-либо вручную.

Адаптивность

Возможность создавать создавать различные стилизации в соответствии с руководствами по стилю разных платформ на основе единого мастер-компонента.

Изменение в одном источнике

Все элементы проекта существуют в единственном экземпляре, но могут использоваться в десятках разных и разных проектах.

Pixel perfect

Благодаря внедрению Auto Layout во все компоненты - нет необходимости «подгонять» отступы и каждый раз перепроверять, чтобы ничего не сдвинулось».

Локализация

Простота создания дополнительных языковых версий интерфейса, без необходимости поддержки изменений в двух языковых версиях.

Управление состояниями

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

Улучшает организацию работы в команде

Делегирование

Устраняет страх дать полномочия внести изменения или выполнить доработки другому дизайнеру в существующий проект.

Командная работа

Дает инструменты для эффективного разделения труда между дизайнерами.

Коммуникация

Позволяет разговаривать «на одном языке» всем участникам проекта.

Реалистичность

Содержит принципы создания компонентов максимально приближенных к их структуре и поведению в коде мобильного приложения или веб-сайта.

Дополнительные возможности подхода

Дизайн-система

Легко подключатся к любой дизайн-системе.

Масштабирование библиотеки компонентов

Подход:
  1. 1.
    дает возможность расширять единую библиотеку компонентов организации с каждым новым созданным проектом.
  2. 2.
    предлагает логику наследования дочерних дизайн-систем для отдельного бренда и его проектов от общей дизайн-системы и библиотеки организации.

Эффекты внедрения подхода

  1. 1.
    Снижение сложности проектов.
  2. 2.
    Сокращение количества ошибок.
  3. 3.
    Ускорение разработки проектов.
  4. 4.
    Снижение порога вхождения в проект для новых специалистов.
  5. 5.
    Увеличение контроля и управляемости процессом разработки для руководителей.

Кому подойдет

Дизайнеры

  1. 1.
    Для работающих над крупными и сверх-крупными проектами;
  2. 2.
    Для стремящихся ускорить процесс разработки и увеличить качество проектов любого размера.
  3. 3.
    Для желающих повторно использовать наработки на ранее созданных проектах.

Организации и команды

  1. 1.
    Которые уже имеют дизайн-систему или только хотят ее создать;
  2. 2.
    Которые хотят расширять штат (или обновлять его в из-за высокой текучки) и в связи с этим безболезненно добавлять новых сотрудников без ущерба для скорости и качества для создаваемого интерфейса;

Прежде чем начать

Подразумевается, что учащийся, приступающий к изучению компонентного подхода как минимум знаком с основами UI-дизайна и имеет некоторый опыт создания веб-сайтов или интерфейсов.

Проблемы дизайнеров

  • Злюсь, когда вношу одинаковые правки в разных местах
  • Не могу найти достойный UIKit
  • Не получается быстро работать
  • Приходится делать много скучной работы
  • Программисты долго делают то, что нарисовал
  • С интерфейсом возникают проблемы после реализации
  • Тяжело работать с компонентами
  • Очень долго внедрять улучшения в проект
  • Беспорядок в слоях, потому что долго подписывать слои и придумывать как подписать
  • Сложно продумать все нюансы работы интерфейса, после реализации всплывают проблемы
  • Забываю отрисовать все состояния компонентов и это отнимает много времени
  • Сложно отслеживать поддерживать правильные отступы во всех местах

Какие задачи автоматизирует

  • Внесение «Правок»
  • Pixel Perfect
  • Поиск иконок
  • Адаптация под iOS и Android
  • Адаптация под размеры экранов
  • Подготовка исходников к разработке
  • Нейминг компонентов
  • Создание и поиск компонентов
  • Замена компонентов

Last modified 2mo ago