Figma — что это? Обзор онлайн-сервиса + лайфхаки

Автор: Muraha-admin. Дата публикации: Блог, Инструментарий.

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

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

Возможности онлайн-сервиса Figma

Своим удобством Фигма обязана таким функциональным возможностям, которые всем нам знакомы по работе с Google Docs. Они похожи по функциям: вы разрабатываете макет, который автоматически сохраняется в облаке и открываете доступ на просмотр или редактирование третьим лицам.

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

5 возможностей Figma:

Совместная работа. Сервис позволяет дизайнеру, проектному менеджеру и копирайтеру вместе работать над проектом: править, задавать вопросы, комментировать разработку. Причем у каждого участника свой режим доступа: can edit или can view.

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

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

О чем еще стоит упомянуть в обзоре — Фигма интегрируется с такими сервисами: Zeplin, Sketch, Principle. Кстати, при переносе файлов из Sketch шрифты и изображения сохраняются. А благодаря интеграции с Principle вы сможете быстро создать анимацию любого уровня.

Почему мы влюблены в Figma. Плюсы и минусы

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

Плюсы

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

Файлы всегда под рукой. Вам нужно лишь зайти в аккаунт, чтобы просмотреть проект. А, чтобы поделиться работой, отправьте ссылку на проект. Забудьте об отправке объемных файлов на почту или в мессенджер и экономно используйте свободное пространство на компьютере.
Простота совместной работы над проектом. Вам нужно лишь создать команду, назвать ее, выбрать тариф и пригласить участников.
Есть бесплатный тариф для индивидуальных пользователей. Но с ограничениями: доступно 2 редактора, 3 проекта, и история версий сохраняется в течение 30 дней.

Минусы

Графический редактор Figma не работает без интернета. Но если учесть, что в большинстве современных офисов и кафе есть Wi-Fi, то этот недостаток не назовешь существенным.

Как пользоваться Figma: инструменты

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

Чтобы понять, как работать в Фигме, изучим её инструменты:

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

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

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

Шрифты. Используйте шрифты Google Fonts или установите свои инструменты. Применять их можно к одному или нескольким текстовым элементам, а также словам и буквам внутри объекта.

Play Button. Опция для тестирования сайта: проверьте, правильно ли работают кнопки, сохранена ли логика переходов и прочее.

8 лайфхаков от дизайнеров

Недостаточно владеть основными инструментами, чтобы стать повелителем Figma. Наши дизайнеры в обзоре программы поделились 8 советами, которые помогают им в работе. О том, как быстро выравнивать объекты, менять цвет и искать команды, читайте дальше.

Очистите рабочее пространство от панелей, чтобы не отвлекаться на детали. Для этого нажмите Ctrl + \.
Вместо поиска похожего оттенка в палитре, возьмите нужный цвет из рабочей области. Для этого кликните \.
Чтобы быстро найти нужный инструмент, откройте меню и вбейте его название в строку поиска.
Чтобы добавить рамку для группы элементов, выделите их и на панели справа выберите из выпадающего списка Frame.
Чтобы быстро изменить размер элемента, нажмите Ctrl + Shift + стрелка. Объект изменится на то число, что указано в Nudge Amount.
Для выравнивания объектов нажмите Shift + Ctrl + Alt + стрелка.
Чтобы сохранить одинаковое расстояние между объектами, выделите элементы и кликнете на значок Tidy Up внизу справа.
Также можно изменить расстояние между элементами. Для этого мышкой наведите на маркер между объектами и потяните его в нужную сторону.

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

Горячие клавиши Figma

Как найти все клавиатурные сокращения: нажмите на «?» в левом нижнем углу и откройте “Keyboard Shortcuts”. Или используйте комбинацию клавиш — Ctrl + Shift + ?.

Заключение

Что важно дизайнерам? Чтобы благодаря сервису работа над проектами двигалась быстрее и эффективне. Чтобы вся команда могла работать над проектом одновременно. Все эти вв Фигма.

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