Figma: лучший сервис для дизайнеров и веб-разработчиков

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

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

Создание аккаунта

Для начала работы откройте главную страницу сайта. В правом верхнем углу или по центру нажмите Get started for free.

Введите адрес электронной почты и придумайте пароль. Или войдите через аккаунт Google. Дополнительно можно подписаться на новостные обновления Figma.

Аккаунт создан. Теперь сервис попросит ответить на несколько вопросов:

• Как вас зовут? Имя будет отображаться в учетной записи.
• Какой работой вы занимаетесь? Нужно выбрать один из предустановленных вариантов: маркетингом, дизайном, образованием и так далее. Если ни один из пунктов не подходит, нажмите Other.
• Где вы работаете? Например, в школе, агентстве, компании или занимаетесь фрилансом.
• С кем вы обычно сотрудничаете? Выберите только один вариант: с партнерами, клиентами или ни с кем.
• Хотите пригласить коллег? Если да, то пригласите их в свою команду, указав адреса электронных почт.

• Что привело вас в Figma? Выберите один или несколько вариантов: поиск нового сервиса, использование платформы для развлечений, разработка проекта, просто проверка площадки и другое.
• Использовали ли вы продукты Figma ранее? Выберите один вариант ответа: да, много раз; да, иногда; нет, это первый раз.
• Какой план вы предпочитаете? Start (бесплатный, но с ограниченным функционалом) или Professional (для команд).

• Что бы вы хотели сделать в первую очередь? Выберите один из трех вариантов и нажмите Finish.

После ответа на вопросы вас перенаправит в рабочую область. Здесь находятся четыре главных инструментах сервиса.

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

Дизайн и прототип

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

Вот как выглядит рабочая область инструмента:

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

Итог — черновая версия продукта. Ее легко презентовать, отредактировать и согласовать изменения с заказчиком в онлайне, а затем отправить разработчикам на доработку.

Интерфейсы

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

Мы иногда слышим фразу: «юзабилити сайт». Это означает, что веб-ресурсом удобно пользоваться (тоже самое относится и к приложениям). Но чтобы обеспечить максимальный комфорт для пользователя, все элементы необходимо грамотно вписать в дизайн-систему продукта. Каждая часть должна повторять выбранный стиль и не выбиваться из общей концепции.

В Figma вы можете свободно перемещать, масштабировать и изменять свойства элементов на всех экранах проекта одновременно.

Векторная графика

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

• Перо. Используется для создания фигуры произвольной формы. Ее легко отредактировать: нажмите два раза и поправьте нужный узел. Механика простая и не отличается от других векторных программ.

• Карандаш. С его помощью вы можете нарисовать любую фигуру. Зажмите левую кнопку мыши и проведите любую линию в рабочей области.

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

Юзабилити-тесты

Это проверка прототипа. Юзабилити-тесты необходимо проводить до начала разработки, чтобы избежать критичных ошибок. Изменить прототип дешевле, чем исправлять код.

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

Презентации

Вы можете создать презентацию по любой теме и показать результат со своего экрана или сохранить готовую работу в отдельный файл. Для удобства есть возможность экспорта в PDF. Для этого перейдите в меню File и нажмите Export frames to PDF.

Как создать новый проект

Для создания нового проекта в личном кабинете нажмите New design file.

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

В меню File представлены инструменты, с помощью которых можно изменить текущий файл: например, сохранить копию или экспортировать в формате PDF.

Меню Edit предназначено для работы с элементами дизайна в файле.

Меню View отвечает за масштабирование макета и навигацию по нему (можно включить пиксельную сетку, комментарии, линии маски, фреймы и многое другое).

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

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

Adjust — инструмент, отвечающий за регулировку параметров шрифта. Здесь можно настроить отступы, размер шрифта, его насыщенность, увеличить или уменьшить высоту строки, настроить межбуквенное расстояние.

Vector — меню управления векторами проекта. Здесь вы можете создавать простые и сложные объекты.

Инструменты

Чтобы быстро и эффективно работать с Figma, необходимо освоить базовые инструменты. Специалисты с опытом быстро разберутся с функционалом, а новичкам придется повозиться.

Сетки

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

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

Чтобы настроить его размер и сетку, перейдите на панель справа и нажмите Layout grid.

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

Вы можете изменить сетку. На той же панели выберите Grind и нажмите +, затем Rows и настройте параметры.

Чтобы с сеткой было удобнее работать, пользуйтесь направляющими. Примените их ко всей странице или только к выделенному фрейму. Зажмите на клавиатуре комбинацию клавиш Shift + R и перетащите направляющую.

Слои и группы

В файле важен порядок (особенно в тех случаях, когда над проектом работают несколько специалистов). Указывайте правильную последовательность и названия, чтобы не искать нужные фреймы и слои. Группируйте элементы и слои, создавайте несколько страниц для одного проекта. Не ленитесь на этом этапе. В будущем вы скажите себе «спасибо» и не запутаетесь в большом количестве фреймов.

Стили

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

Пример: вы создаете прототип страницы и понимаете, где будет находиться заголовок, подзаголовок и основной текст. Для экономии времени просто выделите заголовок и сохраните настройки шрифта.

Выделите нужный текст, нажмите синюю и кнопку и знак +. Укажите любое название и кликните Create style.

Для редактирования сохраненного стиля зайдите в настройки.

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

Компоненты

Компоненты — это возможность создавать связи между однотипными единицами интерфейса или целыми разделами.

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

1. Нарисуйте простой прямоугольник.
2. Установите требуемые параметры.
3. Впишите в текст.
4. Сгруппируйте элементы (на Windows нажмите Ctrl + G).

Скопируйте кнопку и меняйте настройки этой группы объектов.

Затем превратите эту группу объектов в компонент сочетанием клавиш Ctrl + Alt + K на Windows. Если изменить настройки скопированного объекта, они никак не повлияют на исходный компонент.

Для открепления объекта от исходного компонента нажмите Detach instance в меню.

Auto Layout

С помощью инструмента можно задавать отступы между объектами и автоматически выравнивать соседние модули.

Кнопка с Auto Layout подстроится под длину текста автоматически — ее размер не придется редактировать.

Редактирование фотографий и изображений

В Figma вы не найдете многообразия инструментов растровых редакторов. Есть только базовые функции (изменение параметров, фильтры, эффекты). Но этого «стандартного набора» вполне хватает для решения базовых задач.

Как добавить изображение в проект:

1. Откройте меню File.
2. Выберите пункт Place Image.
3. Найдите нужное изображение на компьютере.
4. Нажмите правой кнопкой мыши по рабочей области.

Изображение успешно добавлено. Чтобы его отредактировать, дважды нажмите по добавленной картинке. Откроется окно визуального редактора. Здесь представлены основные параметры.

Тут вы можете изменить экспозицию, контраст, насыщенность, температуру, тон, светлые тона и добавить тени. Есть также редактирование наложения слоев, которое сделано по типу Adobe Photoshop.

При изменении свойств изображений вам могут понадобиться следующие функции:

• Fill. Изменение свойств заливки.
• Crop. Обрезка изображения.
• Tile. При выборе этой опции область экрана будет заполнена небольшими копиями основного изображения.

Удалить фон с изображения просто так не получится. Эта функция отсутствует в Figma. Рекомендуем использовать нейросеть Remove Background, которая за 5 секунд уберет фон.

FigJam

FigJam — это интерактивная онлайн-доска для дизайнеров. Сервис помогает коллективно обсуждать идеи, согласовывать решения, проводить брейнштормы и ретроспективы. Главное преимущество инструмента — возможность работы в реальном времени.

Плюсы для членов команды:

• Мозговой штурм. Можно обдумывать и развивать идеи. Инструмент подходит для решения многих проблем.
• Диаграммы. Подходят для ситуаций, где есть несколько путей развития. Выглядит это так:

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

Сервис предлагает более 300 готовых шаблонов. Вы также можете разработать собственный вариант и работать в нем.

AI

Разработчики Figma добавили в сервис функции искусственного интеллекта. Кратко рассмотрим шесть полезных фишек, которые упростят работу пользователям:

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

• Автоматическое переименование слоев. Всего одним щелчком мыши вы можете контекстно переименовать и упорядочить все слои. Тиммейты скажут вам спасибо!

• Добавление релевантного контента. Генерируйте и заменяйте текстовый контент прямо в макетах. Добавляйте больше реалистичных дизайнов!

• Мгновенное удаление фона. Нажмите на объект и удалите его одним щелчком мыши. Процесс займет меньше секунды. Больше не нужно пользоваться «ручным выделением» и «стиранием».

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

• Генерируйте, сортируйте, обобщайте. Инструмент FigJam AI поможет вам мгновенно визуализировать сложные идеи в простые диаграммы, сортировать отзывы и автоматизировать трудные задачи.

Различные функции AI Figma можно найти в продуктах Figma Design, FigJam и Figma Slides. Более подробная информация находится в разделе Help Center.

На момент написания обзора (июль, 2024) все функции AI Figma находятся в бета-тестировании и могут работать некорректно. К тому же, доступ к ним пока есть не всех пользователей. Функции искусственного интеллекта бесплатны, но после завершения бета-тестирования может взиматься плата.

Тарифы

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

Кому пригодится Figma

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

Дизайнерам

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

Разработчикам

Программистам нравится режим Developer Handoff. Он позволяет увидеть вкладку «код» на панели устройств. Разработчики могут использовать направляющие, чтобы определить расстояния до объектов и их размер, копировать CSS-стили элементов, их код для Android и iOS.

Блогерам

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

SMM-специалистам

SMM-специалисты могут использовать разные шаблоны для постов в социальных сетях, чтобы создавать баннеры и другие креативы. Также есть возможность создавать презентации.

Менеджерам

Менеджеры могут вести в Figma проекты с помощью двух полезных инструментов:

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

Пример диаграммы Ганта:

Редакторам

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

Пример создания блок-схемы:

Плюсы Figma

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

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

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

Простота в освоении. Проблема большинства графических редакторов заключается в перегруженности. У Figma тоже очень много инструментов, однако меню выполнено понятно, не возникает проблем с поиском инструментов. Все функциональные элементы под рукой, а горячие клавиши упрощают работу и экономят время. Специалисту хватит 3-4 дней, чтобы полностью освоить Figma. Новичкам придется сложнее, но после прохождения пары уроков даже начинающие пользователи смогут создать простой прототип.

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

Автоматическое сохранение. После внесения изменений Figma сама сохраняет изменения. Не нужно, как в Adobe Photoshop, каждый раз нажимать Ctrl + S. Проект точно сохранится и не потеряется.

Мультиплатформенность. Разработчики Figma продумали все для мелочей и сделали акцент на удобстве. Воспользоваться полным функционалом программы можно прямо в браузере. Для любителей десктопных версий есть приложения для операционных систем Windows, MacOS и Linux.

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

Векторная графика. Figma предназначена для растра, но инструмент включает все возможности и для векторной графики. Да, возможности сервиса не дотягивают до функционала Corel Draw или Adobe Illustrator, но если вам нужно сделать простые действия с векторными объектами, то фишек Figma будет достаточно.

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

• Unsplash. Позволяет сразу загружать изображения в Figma. Как воспользоваться: просто выберите область, в которую хотите вставить картинку, или импортируйте ее на холст с оригинальным размером.
• Magic Cut. Плагин для удаления фона. В Figma есть инструмент перо, который делает тоже самое, но с Magic Cut процесс намного быстрее.
• Charts. Фича для отрисовки диаграммы. Чтобы получить визуализацию, введите свои данные.
• Table Creator. Плагин для создания таблицы (прямо как в Google Sheets или Microsoft Word).
• Mockup. Инструмент позволяет увидеть в Figma дизайн своей работы на мокапах. С помощью сервиса можно поместить макет на реальные объекты.

Для поиска подходящего плагина перейдите в основное меню, откройте вкладку Plugins и нажмите Find more plugins. Вас перенаправит на официальную страницу сообщества Figma.

Удобное выравнивание элементов. Программисты грамотно реализовали выравнивание элементов (например, когда их нужно расположить на одинаковом расстоянии друг от друга). Объекты меняются местами простым перетаскиванием. Все отступы сохраняются.

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

Горячие клавиши. Для быстрой работы пользуйтесь горячими клавишами. Все сочетания можно посмотреть в пункте Keyboard Shortcuts.

Минусы Figma

Слабый функционал для работы с текстом. У сервиса очень мало инструментов для работы с типографикой. Есть стили текста, но представленных вариантов не хватает для создания чего-то оригинального. Также нет возможности задать межбуквенный интервал, настроить отступы отдельного абзаца и прописать междустрочный пробел.

Интернет. Figma — облачный сервис. Для работы потребуется хорошее интернет-соединение (иначе файлы не будут сохраняться в облачном хранилище). Если вы находитесь на даче или в отдаленной местности с плохим покрытием, создавать макеты не получится.

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

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

Отзывы

Сильная сторона Figma — функциональность. Специалисты используют программу из-за колоссального количества удобных фишек. Особенно отмечают возможность командной работы: «Вся команда, от продукт-оунера и аналитиков до разработчиков, может находиться в одном пространстве».

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

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

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

Вывод

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