Figma

Figma – это онлайн-редактор для проектирования интерфейсов: в нём рисуют макеты сайтов и приложений, собирают кликабельные прототипы и передают дизайн разработчикам. Работает в браузере и в приложениях для компьютера, а файлы хранятся в облаке.

Раньше дизайнер присылал заказчику PDF или пачку картинок, правки шли списком в письме, а через неделю никто не помнил, какая версия последняя. С Figma вы получаете ссылку. Открываете её в браузере, листаете экраны, кликаете по кнопкам прототипа и оставляете комментарий прямо на нужном блоке. Дизайнер видит его там же и отвечает в той же ветке.

Кто делает Figma и что в неё входит

Редактор разрабатывает американская компания Figma, Inc., её основали Дилан Филд и Эван Уоллес. С 2025 года акции компании торгуются на Нью-Йоркской фондовой бирже. Со временем из одного редактора выросло семейство продуктов. На октябрь 2026 года на официальном сайте перечислены, среди прочих:

Для заказчика сайта почти всегда важен только Figma Design: в нём живут макеты, а остальное подключают по ситуации.

Общий файл, компоненты, автолейаут и Dev Mode

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

Повторяющиеся элементы (кнопки, карточки товаров, формы) дизайнер делает компонентами. Поменял компонент один раз, и он обновился на всех экранах. Из компонентов, цветов и шрифтов собирают UI-кит, а для больших продуктов и дизайн-систему. Автолейаут (Auto layout) помогает блокам подстраиваться под разную ширину экрана, это нужно для мобильной версии сайта. Мобильные экраны утверждают вместе с десктопом: если их дорисовывают в конце наспех, вёрстка потом расходится с макетом. Для рутины есть плагины из каталога Figma: наборы иконок, проверка контраста текста, генерация таблиц.

Разработчик открывает тот же файл в Dev Mode и видит отступы, размеры, цвета и готовые фрагменты стилей. Например, для кнопки:

.button {
  padding: 16px 32px;
  border-radius: 12px;
  background: #7B3FF2;
}

Это подсказка, а не готовая вёрстка. Сайт всё равно собирают в коде или на CMS, но спорить о том, «какой тут был отступ», уже не приходится.

Кому принадлежат макеты и что проверить при приёмке

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

• Договоритесь в начале проекта, в чьей команде будут файлы, и пропишите передачу исходников в договоре.
• После сдачи попросите перенести проект в команду компании или сохранить локальную копию файла в формате .fig.
• Комментируйте прямо в макете, а не в мессенджере: правки не потеряются и будут привязаны к экрану.
• Принимайте прототип, а не одни статичные картинки: по нему видно, как человек пройдёт от главной до заявки. Красота экрана удобства не гарантирует, его проверяют сценарием: сколько шагов до заявки и где можно застрять. Подробнее в статьях Прототип сайта и Юзабилити.
• Проверьте, что нарисованы состояния: кнопка при наведении, форма с ошибкой, пустая корзина. Если их нет в макете, разработчик придумает их сам и на каждой странице по-разному.

Figma, Penpot, Sketch или Photoshop

Доступ к сервису и оплата из России

По справке Figma на октябрь 2026 года, компания ограничила доступ только аккаунтам под санкциями США, Великобритании и ЕС. При этом она не продаёт платные услуги новым клиентам из России и не принимает оплату от клиентов из России. Условия могут меняться, поэтому перед стартом проекта уточняйте их у вендора. Если хранить макеты в зарубежном облаке нельзя по требованиям безопасности, присмотритесь к редакторам, которые можно развернуть на своём сервере, например Penpot.

Если нужен кликабельный прототип, проектирование интерфейса или дизайн сайта, посмотрите услуги Разработка прототипов, UI/UX-проектирование и Разработка веб-дизайна сайта.

Просмотр, сохранение, тарифы и замена

Источники

• Figma: официальный сайт, список продуктов
• Figma Help Center: политика для клиентов из России и Беларуси
• Figma Help Center: Dev Mode и история версий
• Penpot: официальный сайт