Мой дэйли дайджест

одно техническое понятие в день

Figma

23 июня 2026 · ~12 мин чтения

инструмент дизайн веб совместная-работа

Figma

Figma — облачный векторный графический редактор для дизайна интерфейсов. Главная фишка: работает прямо в браузере и позволяет нескольким людям редактировать один файл одновременно, видя курсоры друг друга, как в Google Docs.

История

Что это такое

Figma — это векторный редактор + платформа для совместной работы + сообщество. Под капотом три слоя.

Векторный редактор. Ты рисуешь не пиксели, а формы: прямоугольники, эллипсы, путь (path) из точек Безье, текст, вложенные группы. Каждая форма описывается математически — координаты, кривые, заливки, обводки. Поэтому макет масштабируется без потери качества: его можно экспортировать в SVG, PNG любого размера, PDF.

Совместная работа в реальном времени. Когда ты двигаешь прямоугольник, изменение мгновенно прилетает остальным открывшим файл. Курсоры коллег видны на холсте с их именами. История версий пишется автоматически — можно откатиться к состоянию час назад. Никаких «figma_final_v3_правки_финал.fig» в папке.

Браузер. Никакой установки. Открыл ссылку — работаешь. Под macOS, Windows, Linux есть desktop-обёртки, но это просто Chromium со встроенной авторизацией. Файлы хранятся на серверах Figma; локального бинарного формата у дизайн-файлов нет (только Figma-специфичный JSON для экспорта).

Чем отличается от похожего:

Аналогии из жизни

1. Google Docs для дизайнеров.
Где работает: оба редактора в браузере, оба позволяют нескольким людям править один документ одновременно, оба хранят историю изменений.
Где ломается: Google Docs — про последовательный текст, у него линейная структура (символы и абзацы). Figma — про двумерный холст с произвольным расположением форм. Конфликты решаются принципиально по-разному: в Docs — на уровне символов, в Figma — на уровне свойств объекта.

2. Чертёжная доска в архитектурном бюро, но онлайн.
Где работает: общий лист, на котором всё видно и можно одновременно править.
Где ломается: на физической доске двое не могут чертить в одной точке. В Figma могут — кто кликнул последним, того и изменение. Это требует социальных договорённостей внутри команды («не лезь в мою фичу»), которых на доске не нужно.

3. Лего, у которого детали бесплатные и бесконечные.
Где работает: собираешь экраны из переиспользуемых компонентов (кнопка, поле ввода, карточка). Поменял компонент в одном месте — он обновился везде, где использовался.
Где ломается: Lego-детали жёсткие, у них фиксированные размеры. Figma-компонент гибкий — можно растягивать, менять цвет, скрывать части. Это мощнее, но требует дисциплины: без правил каждый чуть-чуть подкрутит «свою» версию кнопки, и через полгода в проекте 47 разных кнопок «почти одинаковых».

Как это работает

Слой 1: вектор в браузере на WebGL.

WebGL — это технология, которая позволяет браузеру рисовать графику напрямую через видеокарту (GPU), минуя медленные HTML-элементы. Figma использует WebGL, потому что обычный браузерный DOM не справляется с десятками тысяч объектов на холсте. Эван Уоллес написал собственный 2D-рендерер на WebGL — это позволило плавно работать с файлами, где сотни экранов и тысячи слоёв.

Когда ты двигаешь прямоугольник, происходит примерно следующее:
1. Браузер ловит событие мыши.
2. JavaScript-код Figma пересчитывает координаты прямоугольника.
3. Изменение записывается в локальную модель документа (структура в памяти, похожая на JSON).
4. WebGL-рендерер перерисовывает только изменившиеся пиксели (а не весь холст).
5. Изменение отправляется на сервер по WebSocket.

Слой 2: синхронизация через CRDT (Conflict-free Replicated Data Type).

CRDT — это семейство алгоритмов, которые позволяют нескольким копиям документа правиться независимо и потом сходиться в одно и то же состояние без конфликтов. Принцип: каждое изменение получает уникальный идентификатор и timestamp; математические свойства операций гарантируют, что какой бы порядок их применения ни был, итог один и тот же.

Figma использует свой вариант CRDT. Если ты передвигаешь прямоугольник, а коллега в этот же миг меняет его цвет — обе операции применяются, конфликта нет. Если двое одновременно меняют одно и то же свойство (например, оба меняют цвет того же прямоугольника) — побеждает тот, чья операция пришла на сервер последней (last-write-wins, «последний победил»).

Слой 3: серверная инфраструктура.

Серверы Figma (на AWS) держат «истинное состояние» каждого файла и рассылают обновления всем, кто его открыл. Сервер же ведёт историю версий: каждые несколько секунд снимается чек-поинт, плюс именованные версии («Перед редизайном») создаются вручную.

Что происходит при открытии файла:
1. Браузер запрашивает текущее состояние файла → сервер отдаёт полный снапшот (JSON-структура).
2. WebGL-рендерер строит из снапшота холст.
3. Открывается WebSocket-соединение для приёма real-time изменений.
4. Все локальные правки уходят через WebSocket; все правки коллег приходят оттуда же.

Компоненты, варианты, auto-layout.

Компонент — переиспользуемая часть интерфейса (кнопка, аватарка). Создаётся как «мастер», все его экземпляры (instances) ссылаются на мастер и обновляются автоматически. Варианты (variants) — это разные состояния одного компонента (кнопка primary/secondary, hover/disabled), упакованные в один логический объект. Auto-layout — встроенная система компоновки, аналог CSS Flexbox: задаёшь направление (горизонталь/вертикаль), отступы, выравнивание — Figma сама пересчитает позиции дочерних элементов при изменении содержимого.

Где встречается в обычной жизни

Где встречается в IT и бизнесе

Кто пользуется

Альтернативы и конкуренты

Когда НЕ стоит использовать

Связанные понятия

Литература и источники

Где встретилось у меня

Вчера весь день был спор с координатами SVG-генплана: позиции подписей шли «из Figma», а выноски к объектам — «на глаз». Проверял, точно ли фон в экспортированном SVG-фрейме совпадает с системой координат макета, нашёл, что Figma не экспортирует Line-слои как настоящие линии. Дальше встал вопрос вытащить точные координаты через Figma API.

Краткое резюме