Создание Дизайн-Систем в Figma

Представляют: Анна, Алексия и Чед

Основные Принципы

1. Осторожно подходите к сложности

   • Упрощайте дизайн-системы, чтобы избегать жесткости и сложного обслуживания.
   • Избегайте чрезмерно сложных компонентов с большим количеством вариантов использования и настроек.
   • Не вводите ненужную сложность, копируя большие организации.
   • Пример: Нэйтан Кертис о убывающей отдаче от добавления большего количества компонентов.

2. Основывайтесь на своих приоритетах

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

3. Валидация перед выполнением

   • Применяйте итеративные подходы: начинайте с малого, тестируйте, собирайте отзывы и повторяйте.
   • Валидация изменений, чтобы предотвратить ненужные откаты и обеспечить доверие пользователей.

Создание пользовательской дизайн-системы

Сложность и Варианты

• Избегайте чрезмерно сложных наборов компонентов с сотнями или тысячами вариантов.
• Удостоверьтесь, что типичные случаи использования понятны пользователям.
• Разделите большие наборы компонентов, чтобы они были управляемыми.

Пропсы Компонентов

• Используйте пропсы компонентов для уменьшения размера и веса, направляя переопределения.
• Удостоверьтесь, что пропсы само-документируются для лучшей видимости в панели дизайна.
• Логически организуйте пропсы в панели дизайна для ясности.

Вложенные Экземпляры

• Аккуратно относитесь к обнаружению и избегайте перегрузки дизайнеров чрезмерным количеством опций.
• Переименовывайте повторяющиеся вложенные компоненты для ясности.
• Используйте документацию компонентов для предоставления дополнительной информации без засорения основного интерфейса.

Переменные и Стили

Различие между Стилями и Переменными

• Используйте индивидуальные переменные для конкретных элементов UI (цвета, отступы).
• Используйте сложные переменные для комплексных элементов UI (градиенты, тени, текст).

Текстовые Переменные

• Внедряйте отдельные переменные типографики в текстовые стили.
• Публикуйте только стили, скрывая переменные бэкенда для простоты.

Применение Переменных

• Используйте скоупинг для уменьшения загромождения и отображения только релевантных переменных.

Сотрудничество с Разработчиками

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

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

Документация и Ресурсы

• Используйте описания компонентов и ресурсы режима разработчика.
• Ссылки на storybook, GitHub или другие релевантные документы.
• Избегайте передачи файлов без четкой коммуникации и ресурсов.

Создание сообщества вокруг Вашей дизайн-системы

Поиск Чемпионов

• Найдите восторженных пользователей и влиятельных лиц в организации.
• Свяжитесь с ними и формализуйте их роли.

Предоставление Ресурсов

• Создавайте и делитесь образовательными материалами.
• Используйте существующие ресурсы Figma и создавайте собственные площадки для тренировок.
• Поддерживайте хорошую документацию и используйте доступные наборы для создания документов.

Признание Вкладов

• Включайте вклады в отзывы о производительности.
• Используйте значки, сертификаты и другие методы признания для награждения участников.

Использование Отзывов и Метрик

Качественные Данные

• Используйте комментарии и предложения по ветвям для сбора отзывов пользователей.
• Разработайте общий словарь или используйте теги для организации комментариев.

Количественные Данные

• Используйте метрики для измерения принятия, масштаба и состояния дизайн-системы.
• Плагины и встроенная аналитика Figma могут помочь в сборе и анализе данных.
• Экспортируйте данные в CSV для детального анализа.

API для Продвинутого Трекинга

• REST API Figma позволяет настраивать метрики и аналитические панели (например, кейс Pinterest).

Управление Изменениями и Обновлениями

Постоянная Адаптация

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

Планирование и Тестирование

• Планируйте изменения с образцами компонентов и тестовыми файлами для предвидения проблем.
• Устанавливайте четкий путь миграции для пользователей и эффективно коммуницируйте обновления.
• Вводите "режим устаревания", чтобы помочь пользователям идентифицировать устаревшие компоненты.

Заключение

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

Ресурсы и Итоги

• Ссылка предоставлена для доступа ко всем ресурсам, упомянутым в презентации.