На чем написана фигма

Разработка инструмента веб-дизайнера на основе веб-приложения (Figma). Перевод

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

Вот почему мы создали Figma, командный инструмент работы над дизайном интерфейсов, как облачный сервис, распространяемый в виде веб-приложения.

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

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

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

CSS предоставляет ряд прекрасных алгоритмов рендеринга/раскладки текста, но не дает настроить их, или получить результат того, что сделал браузер, дабы использовать алгоритм раскладки текста как часть другого алгоритма.
Все браузеры предоставляют высокопроизводительныйГПУ-компоновщик, но в веб-среде нет никакой возможности прицепиться внутри алгоритма рендеринга и изменить поведение компоновщика, чтобы добавить оптимизации производительности или особые режимы смешивания.
В браузерах есть встроенные высокооптимизированныедекодерыизображений, которые декодят их асинхронно, вне UI-потока, используя возможности железа, но нет никакого API, чтобы передать в декодеры параметры позволяющие, например, учесть ориентацию по EXIF или предотвратить установку некорректного пространства цветов при использовании drawImage и getImageData.

Emscripten

Наш редактор написан на C++ и кросс-компилирован в JavaScript с помощью кросс-компилятора emscripten. Компилятор emscripten нацелен на asm.js, подмножество JavaScript поддерживаемое во всех современных браузерах, которое позволяет получить от JIT-компилятора JavaScript предсказуемый, компактный машинный код.

Такой подход имеет ряд преимуществ:

Мы полностью контролируем структуру памяти и можем использовать компактные 32-битные числа с плавающей точкой или даже байты, когда это целесообразно, вместо 64-битных double в JavaScript. Это очень важно для приложений вроде нашего, использующих большие объемы данных.
Сгенерированный код полностью контролирует выделение памяти, что значительно упрощает задачу получить рендеринг UI в 60 кадров в секунду, избегая пауз от сборки мусора. Все C++ объекты размещаются в зарезервированных диапазонах в предварительно выделенном типизированном масиве, так что сборщику мусора JavaScript тут просто нечего делать.
Сгенерированный код предварительно оптимизируется с использованием продвинутого компилятора LLVM. Комбинируя это с C++ template specialization мы получаем очень эффективный код, который всего лишь до 2х раз медленнее нативного.
Так же, гарантируется, что код asm.js свободен от точек деоптимизации, так что JIT-компилятор может произвести AoT-компиляцию и предоставить прогнозируемую производительность. Обычный JavaScript-код проходит через эвристические алгоритмы JIT-компилятора, поэтому его производительность может иногда дичайше варьироваться между последовательными прогонами того же самого кода.

Еще одна фишка, которая помогает, это использование для больших ресурсов хендлов для выноса из кучи вещей типа буферов для картинок и геометрических объектов. Мы создали внутренний API «IndirectBuffer» (заопенсорсили тут), который позволяет ссылаться на внешний типизированный массив и делает его доступным в C++. Вынос больших объектов из главной кучи снижает проблемы фрагментации памяти для долгоиграющих сессий, позволяя нам использовать больше ограниченного адресного пространства в 32-битных браузерах, и позволяя нам преодолеть ограничение в 31 бит на размер типизированного массива в 64-битных браузерах.

Сейчас asm.js уже весьма неплохо поддерживается, но на подходе немало крутых штук.
WebAssembly — это попытка реализации двоичного формата для кода asm.js, чтобы значительно снизить время парсинга, к которой примкнули все основные браузеры. Прямо сейчас, единственной формой многопоточности является использование веб-worker’ов с передачей сообщений, но спецификация общего типизированного массива (на подходе), сделает мультипоточность с общей памятью реальностью.

Рендеринг

Мы создали свой собственный движок рендеринга, чтобы быть уверенными, что контент рендерится быстро и единообразно на всех платформах. У браузеров есть великолепные механизмы работы с графикой, и мы изначально пытались использовать их, вместо того, чтобы создавать новый движок рендеринга. Без низкоуровневых API для доступа к дереву рендеринга браузера, доступными вариантами были HTML, SVG или 2D canvas.

Ни один из этих вариантов не был удовлетворительным по ряду причин:

HTML и SVG тащат за собой много лишнего багажа и часто работают намного медленнее, чем 2D canvas API из-за использования DOM. Они обычно оптимизированы для прокрутки, а не зума, и геометрия зачастую пересчитывается при каждом изменении масштаба.
Нет никаких гарантий того, что рендеринг пройдёт с аппаратным ускорением через GPU, и много вещей все еще рендерится на CPU.
Поддержка наложения масок, размытия и режимов смешивания в HTML и SVG дичайше варьируется от браузера к браузеру, и часто не производится сглаживание или на выходе имеем слишком низкое разрешение на дисплеях с высоким разрешением.
2D canvas API является API реального времени, а не отложенного, так что все геометрические объекты должны быть перезалиты в GPU для каждого кадра. Такое поведение расточительно без всякой нужды, и может стать узким местом.
Раскладка текста неодинакова между разными браузерами, а мало того и между версиями одного и того же браузера для разных платформ.
Мы хотели иметь возможность добавлять такие функции, как рисование угольчатого градиента, который не поддерживается ни одним из перечисленных API рендеринга.

Наш код выглядит почти как браузер внутри браузера; у нас есть свой DOM, свой компоновщик, свой движок раскладки текста, и мы подумываем добавить дерево преобразований, прямо как то, что используется для отображения HTML у браузеров.

Браузеры

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

Перед тем, как я начал работать над Figma, кастомные high-DPI курсоры были реально сломаны в вебе. Мне пришлось самому чинить Хром, Лису и Вебкит, ибо все они были поломаны по-своему. До сих пор нет одного общего способа работать с этим (SVG в Лисе, -webkit-image-set в Хроме и Вебките, и доисторический .cur формат в ИЕ), но хотя бы теперь все работает.

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

Есть еще много всего, что веб-платформа могла бы улучшить, что бы помогло улучшить Figma:

Наша величайшая боль — отсутствие доступа к контурам символов и таблицам кернинга, которые в настоящий момент вообще никак нельзя получить. Одним из основных опасений является вопрос безопасности, но битва уже проиграна. Мы надеемся, что доступ к данным шрифта будет открыт хотя-бы в режиме запроса разрешения у пользователя, как и другие, чувствительные к личной информации API. Хромовцы предложили способ починить это, над чем они сейчас и работают, но на горизонте больше никого и не маячит.
Мы бы с радостью добавили поддержку вставки содержимого в популярных форматах из буфера обмена (.ai, .pdf, и т.д.), но веб не позволяет этого делать. Единственные форматы в спецификациях — text/plain и text/html (наша Figma использует text/html с двоичными данными, закодированными в HTML-комментариях).
Ещё одна проблема для нас — отсутствие поддержки жеста щипка для трэкпада в OS X. Хромовцы добавили малоизвестный хак, при котором жест «щипок» отправляет событие колеса мыши с зажатым ctrl и вызывает preventDefault(), что позволяет странице управляться с этим. Это круто, и делает увеличение и панорамирование в Figma нативным по ощущениям. Я пытался добавить это в Лису, но эта попытка пока что застряла. Щипок в Сафари работает как увеличение, что сбивает с толку пользователей и это невозможно отключить.

Заключение

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

Данная статья — перевод статьи 2015-го года из блога команды Figma. Хотя статья и не новая, но вполне ещё актуальна. Это первая статья из цикла переводов блога команды Figma. Автор перевода — Сергей Дурнов.

Как работает Фигма?

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

Для чего используется онлайн-сервис?

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

Функции программы

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

Прототипирование

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

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

Компоненты

Онлайн-сервис позволяет создать две группы компонентов: основные и зависимые. Компоненты автор может создавать из иконок, кнопок, полей, заголовков, блоков или форм. Если нарисовать первый элемент, сделав его основным, то при копировании и наделении ее характеристиками основного компонента, второй элемент становится зависимым. Как следствие, все совершенные изменения будут автоматически подтягиваться для изменения второго блока.

Векторные сетки

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

Маски и эффекты

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

Возможности Фигмы

Пользователи высоко ценят Figma не только за ее функции, которые открываются перед ними, но и за ее уникальные возможности, которые были недоступны при использовании десктопного программного обеспечения (ПО).

Многопользовательский доступ

Разработчики придумали ПО, которое удобно в совместной деятельности. Теперь работать над одним и тем же проектом можно сообща. Для этого достаточно создать команду, перейдя по ссылке «New team». Далее следует написать название проекта и выбрать тариф, который подходит для команды.

Облачное хранилище

Работа с визуальными материалами требует большого объема свободной памяти на компьютере. Но веб-дизайнеры и разработчики, которые используют Фигму, могут сохранять свои проекты в облаке — на сервере ПО. Дополнительное преимущество этого веб-ресурса — все правки автоматически сохраняются.

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

Гибкость фреймов

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

Десктоп

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

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

Как работать в Фигме?

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

Доступно обучение пользованию ПО в режиме-онлайн. Общая продолжительность курсов не превышает 24 часа. Обучающие видео доступны на видеохостингах, например, YouTube. Здесь предложена самая важная информация, без которой начинающему пользователю невозможно освоить функционал и интерфейс программного обеспечения.

Магловский способ творить магию: зачем Adobe купил Figma и как это изменит веб-дизайн

Фото Zac Wolff / Unsplash

Создатель Photoshop компания Adobe покупает своего самого заметного конкурента в области цифрового дизайна, стартап Figma, за $20 млрд. Основатели Figma в результате этой крупнейшей на рынке программного обеспечения сделки станут миллиардерами, но реакция на новость была неоднозначной. Некоторые эксперты считают, что Adobe сильно переплатила — ее капитализация после объявления о покупке за день уменьшилась на $29 млрд. А пользователи Figma опасаются, что дизайнерам эта сделка не сулит ничего хорошего

Студенты факультета информатики Университета Брауна Дилан Филд и Эван Уоллес задумывали свой стартап как доступную альтернативу Photoshop. Когда Figma запустилась в 2015 году, TechCrunch написал, что новая компания намерена «бороться» с Adobe. «Можно принять это за наивную наглость, но, вероятно, такая юношеская самоуверенность как раз и необходима, чтобы одержать победу над Голиафом в мире дизайна», — писал автор статьи, имея в виду под Голиафом Adobe. В интервью TechCrunch 23-летний Дилан Филд тогда заявил, что Adobe «не понимает, как устроена совместная работа», а их Adobe Creative Cloud «на самом деле является облаком только по названию».

В 2021 году Филд писал у себя в Twitter: «Наша цель быть Figma, а не Adobe». В 2022-м на этой же платформе он сообщил, что Figma теперь станет частью Adobe, которая покупает ее за $20 млрд.

Это двукратный рост оценки стоимости компании по сравнению с июнем 2021 года, когда Figma привлекла от инвесторов $200 млн при оценке в $10 млрд. По данным Forbes, Филд и Уоллес владеют примерно по 10% Figma, что означает, что после завершения сделки каждый из них станет миллиардером. Армия преданных поклонников Figma, которые исчисляются миллионами и которые привыкли платить за продукты от $12 до $45, опасается повышений цены и других ухудшений после поглощения, а инвесторы полагают, что Adobe переоценил своего молодого и дерзкого конкурента и предложил слишком много.

Поглощение конкурента

Adobe появилась в 1982 году и исторически специализировалась на программном обеспечении (ПО) для создания и публикации разнообразного контента, включая графику, фотографию, иллюстрацию, анимацию и мультимедиа в целом. Компания также расширилась до программного обеспечения для цифрового маркетинга и к 2021 году считалась одним из мировых лидеров в области решений для управления цифровым опытом клиентов.

Для Adobe поглощение конкурирующих компаний — привычная стратегия расширения собственного функционала и возможностей. В 2005 году Adobe приобрела Macromedia, разработавшую технологию, позже названную Adobe Flash, — с помощью этого подключаемого инструмента можно было интерактивно взаимодействовать с другими пользователями.

В январе 2019-го Adobe объявила о приобретении компании Allegorithmic, занимающейся 3D-текстурированием, в 2020 году — о покупке сервиса управления проектами Workfront, а в августе 2021-го купила облачную платформу для совместной работы с видео Frame.io. По данным Adobe, годовой регулярный доход Frame.io вырос более чем на 50% во II квартале, а продажи Workfront — более чем на 35%.

По мнению руководителя агентства разработки бизнес-стратегий «Экспонента» Виктории Добровольской, в последние несколько лет стратегия развития Adobe полностью сфокусирована на инструментах управления цифровым клиентским опытом. По ее словам, с 2019 года заметно, что компания ориентируется не только на директоров по маркетингу, но и на креативных профессионалов в целом.

Несмотря на многочисленные поглощения и усовершенствование ПО, с начала года бумаги Adobe потеряли более трети своей стоимости, а выручка компании в III квартале составила $4,43 млрд, показав рост менее 15% третий квартал подряд. Это, вероятно, связано с общим падением спроса на ПО для удаленной работы, таких как Zoom, после завершения пандемии. Кроме того, некоторые инвесторы ожидают от Adobe слабых результатов, потому что считают продукты компании устаревшими, дорогими и громоздкими.

Год на Фигме

Привет, меня зовут Паша Солодовников и я работаю старшим дизайнером в компании «Инфомаксимум». Чуть больше года назад мы всей компанией перешли на Фигму. В этом тексте я попытался раскрыть все этапы, через которые нам пришлось пройти на пути внедрения и использования нового инструмента. Если у вас мало времени или тупо лень читать, то листайте в самый низ к главе «Итоги». Там кратко собраны все плюсы и минусы.

Как было

Моя работа в «Инфомаксимум» началась в 2016 году. До этого момента я много лет работал в вэб-студиии и имел достаточно общие представления о том, как работает продуктовая фирма. По факту трудоустройства в «Инфомаксимум» мне сразу наметили огромный план работ: требовалось полностью переделать интерфейс текущего основного продукта компании «CrocoTime» + создать удобную дизайн-систему для последующих разработок.

Стоит сказать, что до этого над Крокотаймом работали только программисты. Дизайнера в штате не было. С одной стороны, это сильно развязывало руки. Не требовались длительные согласования по улучшению компонентов, отсутствие рамок как таковых. С другой стороны — не было никакой структуры. Максимум, что могли мне дать программисты по текущему продукту, — скинуть png-спрайты с иконками. Все остальное ищи сам внутри Крокотайма.

Основным инструментом в моем арсенале был фотошоп. В вэбе, где сайт обычно не превышает 20 страниц, мне было совершенно комфортно им пользоваться. Да и появившиеся в 2015 году артборды значительно упрощали создание интерфейсов (искренне так думал).

Если описать вкратце принципы работы дизайнера в фш, то получится следующее:

В локалке находилась папка с проектом. Открывалось 2 документа. В одном — элементы гайда. Во втором — ветка дизайна.
Производилась работа. Оба документа сохранялись как новые, чтобы, если что, можно было открыть предыдущую версию дизайна.
После утверждения дизайна верстальщику отправлялось сообщение «готово. версия файла такая-то».

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

От 20 артбордов в одном файле фш начинал жутко тупить и лагать. Загрузка одного документа могла занимать до 10 минут. Работать становилось невозможно.

Поиск альтернатив

Первыми грустить начали верстальщики. Для них получение нужных отступов, цветов и параметров в фотошопе каждый раз превращалось в проблему. Было принято решение внедрять Цеплин. С ним не заладилось с самого начала. Плагин для фотошопа наотрез отказывался заливать файлы. Чтобы залить один макет, требовалось перезагрузить компьютер. Гугление проблемы не дало результатов. Становилось понятно, что для дальнейшей работы нужен абсолютно новый инструмент.

Первым инструментом для замены фотошопа, естественно, был выбран Скетч. На каждом углу раздавались дифирамбы этому продукту. В целом, функционал действительно был крутой, но было одно большое НО. Он не работал на винде. За пределами мкад яблочную продукцию в офисе не так часто можно встретить. Чтобы заиметь в свое пользование макбук, многим приходилось брать кредит. Понятное дело, не каждый готов был пойти на этот шаг. 90% людей, с кем я работал над различными проектами, сидели на винде. Естественно, внедрять Скетч в команде, которая не пользуется iOS, — это глупая и мертворожденная идея.

Следующим инструментом стал Адоб ИксДи. К сожалению, в мае 2017 года этот инструмент был явно сырой. В нем из хорошего были только инструменты для повторяющегося контента и работа с прототипами. После того, как однажды у меня ИксДи вылетел и не сохранил 30 минут работы, я понял, что не готов сделать его основным инструментом в проектировании.

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

Начало работы с Фигмой

И тут в твиттере мне на глаза попадается сообщение Алекса Мурашко о новом релизе Фигмы. Отзыв был очень комплементарным, и я пошел изучать новый инструмент. Установив десктоп-версию и проработав полдня, я понял, что влюбился ❤. Фигма позволяла мне делать то, что раньше невозможно было и представить:

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

Неделю попробовав и обкатав все возможности Фигмы, я решил презентовать идею перехода на нее директору. Аргументы были следующие:

Мы можем в 2 раза увеличить скорость работы отдела дизайнеров
Верстальщики еще лучше смогут делать свою работу. Пиксель перфект и все такое
Фигма позволяет отслеживать создание дизайна реалтайм (очень работающая фича для любителей контролировать все процессы)
Больше не придется держать множество версий. В фигме с легкостью можно откатиться к сколь угодно давнему дизайну.

Дальше мне задали ожидаемые вопросы, к которым я готовился заранее:

— Как долго займет перевод всех экранов из фш в Фигму?

— Около 3 недель. Но если мы этого не сделаем, то просто потеряем время в ожидания загрузки макетов

— Сможет ли второй дизайнер, да и вообще команда, работать в Фигме?

— Фигма как инструмент в разы проще фотошопа. Привыкание к новому займет не больше двух недель. Результат от работы в Фигме будет заметен сразу, что уменьшит негатив в команде.

— Фигма может работать оффлайн? Что будет, если вдруг отключится интернет?

— Фигма может работать оффлайн. Любой макет вы можете сохранить себе и работать над ним. Но для того, чтобы команда увидела изменения, придется дождаться появления интернета. Отключение интернета кратковременно (1–2 часа) большой роли не сыграет, а если больше суток, — то вся компания встанет.

— Сколько стоит фигма?

— 12 $ за редактора (дизайнера). Нас 2, поэтому уложимся в 24$ (1 500 ₽ по тому курсу). Это гораздо дешевле, чем врайк, и в разы дешевле бух. программ, которыми мы пользуемся. (Я очень сильно ошибался тогда в количестве редакторов, которые потребуются для работы над всеми проектами. Сейчас мы платим около 120$)

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

После месяца успешной работы в Фигме мы решили за нее заплатить. Я отправился на сайт, но там была только стоимость, а ссылки “где и кому можно передать деньги” — не было. Я пошел в десктоп-версию, но там тоже отсутствовал механизм оплаты продукта. Написал создателям фигмы в чат поддержки и получил вот такой вот забавный ответ:

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

Что мы сейчас делаем в Фигме

Мы отказались от переделки Крокотайма и полностью погрузились в новые проекты. За прошедший год у нас получилось спроектировать и отдать в разработку:

Новый сайт компании
Proceset — система автоматического определения процессов, над которыми работают сотрудники
MMWT — программа автоматического планирования выхода сотрудника на работу, с учетом множества параметров.

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

собрать в одном месте все элементы интерфейса (не могу назвать это дизайн-системой). Из-за этого мы могли быстро собирать экраны систем, не тратя свои силы на рутину.
уменьшить время на внесение изменений благодаря компонентам. В какой-то момент нам стало понятно, что текстовые стили не отвечают нужным требованиям. Страшно представить, сколько времени бы ушло у отдела дизайна на их изменение в 260+ макетах, если бы не было компонентов.
проверять и презентовать свои идеи с помощью прототипов. Был случай, когда шейхи в Саудовской Аравии не поняли, что мы показываем им прототип. и хотели прямо на презентации купить систему 🙂
улучшить общение между дизайнерами и программистами. Комментируя ошибки или недочеты прямо на макетах, мы стали быстрее и лучше понимать друг друга. Джира и Врайк — все же слишком «сухие» и формальные языки общения.

Итоги

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

Уменьшение скорости загрузки. Если первоначально фигма загружалась 2–3 секунды, то теперь иногда приходится ждать 2–3 минуты. Скорее всего, это связано с большим объемом монтажных областей в одном проекте.
Большие картинки в прототипах могут очень долго загружаться
Шрифты не из Гугл Фонтс. Даже установленные внегугловские шрифты на компе не всегда находятся в списке доступных в Фигме.
Работа с svg. Если не перевести исходную иконку из набора символов в силует, то потом могут вылезти косяки в верстке.
Фигма Миррор. Приложение для просмотра макетов с телефона. У меня не заработало. Но макеты (в том числе и прототипы) и без этого хорошо открываются.

Другой взгляд на минусы Фигмы вы можете найти в этом и этом посте Ярослава Бизула в его телеграм канале. Там же, кстати, есть хорошая история их команды, которая со Скетча ушла на Фигму. Вот она.

Сервис. За год вышло действительно много полезных и важных доработок в инструменте. Очень приятно, что создатели очень быстро и качественно отвечают на возникающие вопросы.
Одновременная работа. Это правда очень удобно. Если раньше, чтобы показать, что надо исправить, мне приходилось делать скрин и стрелочками отмечать, какой элемент надо изменить, то теперь я просто открываю макет и показываю курсором на ошибку.
Прототипы. Это очень мощный инструмент для презентации своих идей. И мега удобно, что для этого не требуется сторонний сервис. + прототипы шикарно работают на любых устройствах без дополнительных программ.
Компоненты. Уменьшают рутину, ускоряют работу, убивают ошибки. Очень круто, что можно выбирать какой из параметров компонента надо обновить: размер, цвет, стиль или все вместе.
Стили. Я очень часто раньше грешил тем, что вместо того, чтобы скопировать код цвета, просто брал пипетку и на глаз выбирал нужный цвет. Это приводило к ужасному количеству цветов в проекте. С появлением стилей контролировать цветовую гамму, шрифты и настройки теней стало значительно проще.
Доступ к макетам. Предоставить какой-то макет человеку вне компании без смс и регистрации — даёте доступ к просмотру по ссылке. Наоборот, хотите, чтобы ваш дизайн не уплыл за пределы вашего отдела, — добавляете в проект только людей из команды. Не хотите, чтобы верстальщик случайно что-нибудь подвинул в макете, — выдайте ему право только на просмотр. Черезвычайно удобно
Работа инструментов. Ни один инструмент не бесит. Все работает ровно так, как и должно быть.
Возможность откатиться к любому изменению за любой, сколько угодно длительный период времени
Удобная интеграция с Джира и Конфлюенс. Проект менеджер будет вам дико благодарен за установку этой интеграции, ведь теперь ему не потребуется при малейшем изменении макета менять скриншоты. Заливаете прямую ссылку на монтажную область, и все данные сами автоматически обновляются. Колоссальная экономия времени и нервов.

Функционал Фигмы, который прошел мимо нас

Вот несколько возможностей, которые по ряду объективных причин прошли мимо нас:

Фигма Апи. Мы делаем продукты для крупных компаний, которым по соображениям безопасности важно, чтобы все установленные у них программы работали автономно, без прямого подключения к интернету. Возможно, мне получится уговорить разработчиков использовать Фигма Апи, когда мы наконец-то начнем переделывать текущий сайт. Вот примеры того, как в других компаниях используют эту возможность.
Импорт из Скетча. Мы не работаем со сторонними дизайнерами, которые что-либо делают в Скетче. Но объективно, для вэб-студий и проектных компаний эта возможность крайне необходима.

Функционал, который хотелось бы увидеть в будущем

Меня радует, как развивается Фигма, и было бы очень круто увидеть следующие сервисы и инструменты в дальнейшем:

Отдельный сервис для анимации. Надеюсь, что руководство Фигмы не наступит на грабли фотошопа и не сделает из инструмента многоцелевой комбайн для всех (и никого). Благодаря тому же Апи можно отмечать в Фигме элементы, которые надо заанимировать. Они будут появляться в отдельной программе, и там будет полноценный функционал, как у Принципа или хотя бы Cпирита
Добавление состояний при наведении/нажатии. Это бы значительно оживило прототипы и позволило еще больше приблизиться к готовому продукту
Возможность разворачивания Фигмы на своем сервере. Этот функционал позволил бы многим компаниям с повышенными требованиями безопасности применять Фигму в своей работе. Ну и зависимость от интернета стала бы намного меньше.

Главная мысль, которую я хотел бы вам донести: держите себя открытым для поиска и внедрения новых инструментов в своей работе. Чем больше будет ваш арсенал достижения цели, тем быстрее и качественнее вы сможете делать свои проекты.

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