190521 teamgemini clopin 860x860 860x620 - История о том, как Dropbox перешел на Figma и структурировал свою дизайн-систему

Я всегда очень долго привыкаю к новым инструментам дизайна.

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

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

В течение двух лет команда разработчиков начала болтать о новом инструменте под названием Figma. Я был поражен – мы собираемся снова переходить на что-то новое?

Знакомство с Design Systems

Но я не успел ознакомится с Figma, т.к. ушел из компании, чтобы присоединиться к команде Design Systems в Dropbox.

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

Когда я присоединился к компании, дизайн продукта Dropbox был основан на Sketch, но несколько новых инструментов набирали обороты. Команда Design Systems почувствовала, что пришло время детальней изучить наш рекомендуемый набор инструментов, чтобы убедиться, что мы выполняем миссию нашей команды. Мы решили протестировать несколько инструментов (включая Figma) в течение нескольких месяцев для изолированных проектов. Ближе к концу пилотного проекта Кайл Турман присоединился к Design Systems в качестве менеджера по дизайну и подтолкнул нас к принятию окончательного решения.

Мы все согласились с тем, что перевод команды разработчиков в Figma имел смысл по нескольким причинам.

  1. С Figma очень легко взаимодействовать
  2. Она основана на облаке, как Dropbox
  3. Имеет улучшенные инструменты для администрирования сложных систем проектирования
  4. Основана на веб-технологиях, что делает ее кроссплатформенной

Dropbox и Figma

Учитывая миссию Dropbox по разработке более продвинутого способа работы, первые два пункта выше особенно повлияли на принятие нашего решения.

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

Мы предположили, что если бы компания перешла на Figma и наши файлы дизайна были доступны всем нашим партнерам по команде, мы смогли бы упростить процесс проектирования. Вместо того, чтобы создавать презентации, дизайнеры смогут собирать отзывы в приложении, а презентации станут менее формальными, так как товарищи по команде смогут следить за фактическими файлами.

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - История о том, как Dropbox перешел на Figma и структурировал свою дизайн-систему
Изображение Adam Noffsinger

И последнее, но не менее важное: мы ожидали, что взаимодействия по технической части также будут налажены. Мы были уверены, что спустя какой-то период инженеры захотят получить спецификации (и код) из Figma. Это позволило бы убрать внешние инструменты из нашего процесса, сделав дизайн самой спецификацией.

Процесс перехода

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

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

Мы разработали план, чтобы сделать переход реальностью.

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

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

Вскоре после этого у нас состоялась отличная сессия с командой Figma, включающая демонстрации, вопросы и ответы, и еще очень многое о Figma, больше, чем вы могли себе представить. Спасибо команде Figma за это.

Затем мы обозначили постоянные рабочие часы Figma, в которые дизайнеры Design Systems работали в течение нескольких недель, чтобы прояснить основные моменты.

Спустя некоторое время вся команда разработчиков продукта стала использовать Figma.

Фигма в Scale

Переход всех наших UI-комплектов на Figma был довольно сложным. Система проектирования Dropbox, которую мы называем Руководством по интерфейсу Dropbox (или, для краткости, DIG), является довольно масштабным.

Он охватывает веб, настольные (Windows и MacOS) и мобильные (iOS и Android). Включает в себя множество цветовых палитр и наборов иконок, используемых на разных платформах, общие компоненты на уровне платформы (т.е. используются как в Android / iOS), так и библиотеки компонентов для конкретных ОС (то есть используются только в macOS).

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

Если это звучит странно, вот визуальное представление, которое показывает, как мы структурировали наши библиотеки.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - История о том, как Dropbox перешел на Figma и структурировал свою дизайн-систему
Изображение Adam Noffsinger

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

Под Global Styles находятся Global Icons, которые включают в себя наш набор иконок для представления файлов и папок в дополнение к нашим иконкам состояния синхронизации, которые используются на Dropbox.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - История о том, как Dropbox перешел на Figma и структурировал свою дизайн-систему
Изображение Adam Noffsinger

Поскольку для мобильных и настольных компьютеров существует несколько библиотек, для конкретной ОС, мы разделили несколько общих стилей и компонентов для каждой платформы на стили Shared Mobile и Shared Desktop соответственно.

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - История о том, как Dropbox перешел на Figma и структурировал свою дизайн-систему
Изображение Adam Noffsinger

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - История о том, как Dropbox перешел на Figma и структурировал свою дизайн-систему
Изображение Adam Noffsinger

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - История о том, как Dropbox перешел на Figma и структурировал свою дизайн-систему
Изображение Adam Noffsinger

Куда мы направляемся дальше

Правда в том, что мы все еще новички в использовании Figma.То, как мы структурировали все, до сих пор работало только для нас, но оно уже в процессе развития. Прямо сейчас наша команда работает над реструктуризацией и объединением компонентов DIG в рамках дизайна и кода, что, несомненно, повлияет на разработку наших библиотек. В то же время мы переходим в центр документации DIG для использования встраивания Figma исключительно для создания компонентов изображений. Это нелегкая задача, но в конечном итоге наша документация станет намного свежее и более масштабной.

Если вы находитесь в процессе перехода от инструментов вашей команды разработчиков или разрабатываете систему дизайна в Figma, мы будем рады узнать, как вы это делаете.

Спасибо командам Dropbox Product Design и Design Systems за их крутую работу. Особая благодарность Кайлу Турману и команде Dropbox Design Ops.

Свежие вакансии
                        Регистратор доменных имен РЕГ.РУ Регистратор доменных имен РЕГ.РУ UX/UI дизайнер Удаленно Москва
                        MYTONA MYTONA Game UI/UX Designer Удаленно Санкт-Петербург
                        ООО "Компания В.И.К." ООО "Компания В.И.К." Дизайнер (в офис) Офис Краснодар 35 000 ₽
                        ООО РЖД-Технологии ООО РЖД-Технологии Графический дизайнер Офис Москва
                        Ак Барс Цифровые Технологии Ак Барс Цифровые Технологии UI/UX дизайнер Офис Казань от 70 000 ₽
Все вакансии

Оригинал: Adam Noffsinger

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Похожие записи

Организация пространства в дизайне. Отступы, сетки и лейауты

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

Почему дизайн-системы терпят неудачу и как заставить их работать в 2020 году

После отказа от нашей первой дизайн-системы в конце 2018 года мы создали новую и улучшенную дизайн-систему с нуля

Развитие дизайн-системы: Как мы создавали Slack Kit

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