Что такое Figma и зачем она нужна?

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

Что такое Figma и чем она отличается от графических редакторов

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

Второе важное отличие — файл живёт не на вашем компьютере, а в облаке. Ссылку на макет можно отправить заказчику или разработчику, и они откроют актуальную версию без экспорта, архивов и переписки с файлами на 200 МБ.

Зачем нужна Figma: что в ней делают

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

Плюсы и минусы Figma

За что её выбирают:

• Понятный интерфейс — первый макет можно собрать в первый же день.
• Совместная работа в реальном времени: дизайнер, заказчик и разработчик в одном файле.
• Ничего не нужно устанавливать — работает в браузере на Windows, macOS и Linux.
• Готовые шаблоны и плагины под типовые задачи.

Где она неудобна:

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

Инструменты и плагины

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

С чего начать новичку

1. Зарегистрируйтесь на официальном сайте Figma через электронную почту или аккаунт Google.
2. Создайте первый файл и повторите экран сайта, который вам нравится, — так инструменты усваиваются быстрее всего.
3. Разберитесь с компонентами и автоматическими отступами: это две вещи, которые отличают аккуратный макет от набора прямоугольников.
4. Свяжите два-три экрана переходами и посмотрите прототип в режиме просмотра.
5. Соберите маленькую дизайн-систему: цвета, шрифты, кнопки.

Где учиться работать в Figma

Figma — основной инструмент UI/UX-дизайнера, но сама программа ещё не профессия: нужны типографика, цвет, сетки, композиция и понимание пользователя. На курсе веб дизайна Figma изучают именно в этом контексте — вместе с Miro, Illustrator и Webflow, за 3 месяца, с выпускным проектом в портфолио на Behance. Как собрать из работ портфолио, разобрано в статье портфолио веб-дизайнера.