Что произошло
В 2010 году небольшая нидерландская компания Bohemian Coding выпустила приложение для macOS под названием Sketch. Векторный графический редактор. Цена — $49,99. Размер — меньше 30 мегабайт. Один разработчик в основе: Питер Омвак (Pieter Omvliet), голландский программист, который решил, что дизайнерам интерфейсов нужен свой инструмент.
Решение казалось самоочевидным — и тем удивительнее, что до Sketch его никто не принял. К 2010 году индустрия проектирования интерфейсов существовала больше четверти века. Macintosh появился в 1984-м. Веб — в 1989-м. iPhone — в 2007-м. Миллионы дизайнеров проектировали экраны для компьютеров, телефонов и планшетов. И все они делали это в Adobe Photoshop.
Photoshop — программа для обработки растровых фотографий. Созданная в 1988 году братьями Нолл для цифровой фотографии и подготовки изображений к печати. Пиксели, слои, фильтры, цветокоррекция, ретушь. Photoshop умел всё — и именно поэтому не подходил для дизайна интерфейсов. Чтобы нарисовать в нём кнопку, дизайнер создавал прямоугольник, применял стиль слоя, добавлял текст — три слоя на одну кнопку. Чтобы изменить цвет этой кнопки на всех экранах — вручную, по одному слою. Экспорт для ретина-дисплеев — вручную, в двух разрешениях. Создать список из 20 элементов — копировать слой 20 раз и двигать каждый.
Альтернативой был Adobe Illustrator — но он проектировался для векторной графики и печати. Или Adobe Fireworks — ближе к UI-дизайну, но Adobe прекратила его развитие в 2013 году.
Sketch предложил радикально другой подход: инструмент, созданный специально для проектирования экранов.
Артборды — вместо одного бесконечного холста можно создать десятки экранов на одной странице: iPhone, iPad, десктоп, каждый со своим размером. Символы — повторяющийся элемент (кнопка, шапка, карточка) создаётся один раз и используется на всех экранах. Изменил символ — изменилось везде. Стили текста и цветов — палитра проекта в одном месте. Поменял фирменный синий — поменялся на всех артбордах. Экспорт — один клик генерирует изображения в @1x, @2x и @3x для iOS-разработки.
В 2012 году Sketch получил Apple Design Award — награду, которую Apple вручает приложениям, образцово использующим возможности macOS. Признание от компании, чья платформа стояла в основе работы большинства UX-дизайнеров, закрепило статус Sketch как нового стандарта.
Но у Sketch было ограничение, заложенное в архитектуру: это десктопное приложение для macOS. Файлы хранятся локально. Совместная работа — через экспорт и пересылку. Дизайнер рисует, сохраняет, отправляет файл разработчику. Разработчик открывает, изучает, задаёт вопросы. Менеджер продукта просит показать на экране. Версионирование — через дубликаты файлов: Main_v2_final_FINAL.sketch.
В том же 2012 году двое студентов из Университета Брауна — Дилан Филд (Dylan Field) и Эван Уоллес (Evan Wallace) — начали работу над инструментом, который решит эту проблему. Филду было 20 лет. Он бросил учёбу ради стипендии Тиля (Thiel Fellowship — $100 000 от Питера Тиля за обещание не возвращаться в университет) и основал компанию Figma.
Идея Figma была технически амбициозной: полноценный векторный редактор, работающий в браузере. Не упрощённый, не компромиссный — настоящий, с производительностью десктопного приложения. Уоллес написал графический движок на WebGL, который рендерил сложные макеты прямо в браузере, без плагинов.
Публичный запуск Figma состоялся в 2016 году. И когда дизайнеры впервые открыли файл и увидели, как в нём в реальном времени двигается курсор коллеги, — всё изменилось.
Контекст эпохи
2010–2012 годы — момент, когда мобильная революция окончательно изменила работу дизайнера. iPhone вышел в 2007-м, iPad — в 2010-м. Android набирал долю рынка. Каждому приложению нужен дизайн — и не один экран, а десятки: для разных устройств, разрешений, ориентаций. Объём проектирования вырос экспоненциально, а инструменты остались прежними.
Sketch попал в эту потребность точно. Он не пытался конкурировать с Photoshop во всём. Он отказался от 90% функций Photoshop и сделал оставшиеся 10% идеальными для UI-дизайна. В терминах модели Кано: Sketch убрал безразличные функции и отполировал обязательные. Это был инструмент, который уважал контекст работы дизайнера.
Figma пошла дальше. Она решила не только задачу «чем рисовать», но и задачу «как работать вместе». К 2016 году дизайн-команды выросли. Продуктовый дизайнер, UX-исследователь, визуальный дизайнер, фронтенд-разработчик, менеджер продукта — все участвовали в создании интерфейса, но каждый смотрел на свою копию файла. Figma сделала для дизайна то, что Google Docs сделал для документов: единый файл, в котором все работают одновременно.
Значение для UX
Sketch и Figma изменили не только инструментарий, но и культуру проектирования интерфейсов.
Дизайн-системы стали возможными. Символы Sketch и компоненты Figma — основа дизайн-систем: библиотек стандартизированных элементов интерфейса. Material Design от Google, Human Interface Guidelines от Apple, десятки корпоративных систем — все они живут в Figma как наборы компонентов, которые дизайнер перетаскивает на экран, а не рисует с нуля. Дизайн-система обеспечивает консистентность: кнопка выглядит одинаково на всех экранах продукта, потому что это один компонент, а не сто копий.
Барьер между дизайном и разработкой снизился. В эпоху Photoshop разработчик получал PSD-файл и вручную вымерял отступы, размеры, цвета. Sketch ввёл инспектор — панель, показывающую точные параметры каждого элемента. Figma довела идею до предела: Dev Mode автоматически генерирует CSS-код, показывает расстояния между элементами, экспортирует иконки. Разработчик не открывает файл дизайнера — он открывает тот же файл, только в режиме разработки.
Демократизация инструмента. Photoshop стоил сотни долларов (позже — ежемесячная подписка Adobe Creative Cloud). Sketch — $99 в год. Figma — бесплатно для индивидуальных пользователей. Студент, фрилансер, начинающий дизайнер — любой мог открыть браузер и начать проектировать. Порог входа в профессию снизился радикально.
Экосистема плагинов и сообщество. И Sketch, и Figma создали платформы для расширений. Плагины для автоматизации, генерации контента, проверки доступности, анимации. Figma Community — площадка, где дизайнеры публикуют бесплатные шаблоны, дизайн-системы, иконки. Тысячи ресурсов в открытом доступе. Профессия, которая раньше передавалась через мастер-классы и дорогие курсы, стала самообучаемой.
В 2022 году Adobe попыталась купить Figma за 20 миллиардов долларов. Для сравнения: в 2005 году Adobe купила Macromedia (Flash, Dreamweaver, Fireworks) за 3,4 миллиарда. Шестикратная разница отражает масштаб сдвига: инструмент для проектирования интерфейсов оказался ценнее, чем весь пакет для веб-разработки и анимации. Антимонопольные регуляторы Евросоюза и Великобритании заблокировали сделку, и в декабре 2023 года компании отказались от неё. Figma осталась независимой.
От карандаша к Photoshop, от Photoshop к Sketch, от Sketch к Figma — эволюция инструментов отражает эволюцию самой профессии. Дизайн интерфейсов перестал быть частью графического дизайна и стал отдельной дисциплиной — со своими инструментами, процессами и культурой сотрудничества.
Связанные статьи
- Что такое UX — Sketch и Figma создали инструментарий, в котором UX-дизайн из абстрактной дисциплины превратился в ежедневную практику с конкретными артефактами.
- Что такое HCD — совместное редактирование в Figma вовлекло в процесс проектирования разработчиков и менеджеров, приблизив дизайн к принципам человекоцентричного подхода.
- Эвристики Нильсена — дизайн-системы, ставшие возможными благодаря Sketch и Figma, помогают обеспечить консистентность интерфейса — одну из ключевых эвристик.
Из серии «История UX»:
- Macintosh и WIMP (1984) — Macintosh задал визуальный язык GUI, который Sketch и Figma помогают реализовывать сорок лет спустя.
- iPhone (2007) — мобильная революция iPhone создала спрос на инструменты, адаптированные под проектирование множества экранов для разных устройств.
- Модель Кано (1984) — Sketch убрал безразличные функции Photoshop и сфокусировался на обязательных для UI-дизайна — классическая логика модели Кано.