Обзор Figma

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, пора протестировать программу в реальных условиях ;).  

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *