
Figma — что это? Обзор онлайн-сервиса + лайфхаки
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, пора протестировать программу в реальных условиях ;).