Figma - Это онлайн-редактор для дизайна интерфейсов, нацелен он в основном на веб, но подходит и для создания презентаций, баннеров, постов для соц. сетей, мудбордов, да и вообще как черновик для идей.
Хоть Figma и используется в основном дизайнерами, этот инструмент подойдёт также и заказчикам, менеджерам, smm специалистам, маркетологам, разработчикам, тестировщикам и обычным пользователям и ниже разберём почему:
Хоть Figma и используется в основном дизайнерами, этот инструмент подойдёт также и заказчикам, менеджерам, smm специалистам, маркетологам, разработчикам, тестировщикам и обычным пользователям и ниже разберём почему:
Обратная связь внутри проекта
Главная особенность это возможность смотреть и редактировать макеты онлайн совместно с другими пользователями.
Можно оставлять комментарии (горячая клавиша С), которые тут же увидят остальные участники. В комментариях можно отмечать пользователей с помощью символа @, они получат уведомление на почту и точно не пропустят ваш комментарий. Они все сохраняются внутри проекта и доступны в любое время, а новые непрочитанные комментарии почемаются. Комментарии очень сильно облегчают коммуникацию между дизайнером\разработчиком\заказчиком.
Главная особенность это возможность смотреть и редактировать макеты онлайн совместно с другими пользователями.
Можно оставлять комментарии (горячая клавиша С), которые тут же увидят остальные участники. В комментариях можно отмечать пользователей с помощью символа @, они получат уведомление на почту и точно не пропустят ваш комментарий. Они все сохраняются внутри проекта и доступны в любое время, а новые непрочитанные комментарии почемаются. Комментарии очень сильно облегчают коммуникацию между дизайнером\разработчиком\заказчиком.
Если дизайнер демонстрирует вам макет, можно кликнуть по его иконке, тогда ваша камера автоматически будет следить за курсором дизайнера.
Так же Figma автоматически сохраняет историю изменений, благодаря которой можно просмотреть кто и какие правки вносил, а также вернуться к старой версии если что-то пошло не так. На бесплатном тарифе отображается история за последние 30 дней. На платном история неограничена. Помимо автоматических сохраненией, в историю можно добавлять свои точки (Ctrl + Alt + S)
На платном тарифе ещё доступна голосовая связь при совместной работе в проекте.
Доступ в любом месте в любое время
Макеты Figma сохраняются онлайн и их можно просмотреть в браузере с любого устройства, нужен только доступ в интернет.
Можно делиться макетом или прототипом, также можно создать ссылку на конкретный фрейм (рабочая область) тогда при загрузке всего макета, камера сразу передвинется к нужному фрейму.
Макеты Figma сохраняются онлайн и их можно просмотреть в браузере с любого устройства, нужен только доступ в интернет.
Можно делиться макетом или прототипом, также можно создать ссылку на конкретный фрейм (рабочая область) тогда при загрузке всего макета, камера сразу передвинется к нужному фрейму.
В проекте можно раздать роли участникам, также можно ограничить сам проект - либо полностью закрыть доступ, либо запретить копирование и скачивание элементов из него.
Экспортировать готовые макеты можно в PNG, JPG, SVG и PDF. Ещё Figma умеет открывать файла для Sketch без необходимости иметь macOS или устанавливать дополнительное ПО. А сам проект можно сохранить локально на компьютере в формате .fig и потом импортировать его обратно.
При отключении интернет соединения фигмой можно пользоваться и дальше, но тогда не будет автоматического сохранения и данные потеряются при закрытии проекта, только если у вас не локальный файл.
Экспортировать готовые макеты можно в PNG, JPG, SVG и PDF. Ещё Figma умеет открывать файла для Sketch без необходимости иметь macOS или устанавливать дополнительное ПО. А сам проект можно сохранить локально на компьютере в формате .fig и потом импортировать его обратно.
При отключении интернет соединения фигмой можно пользоваться и дальше, но тогда не будет автоматического сохранения и данные потеряются при закрытии проекта, только если у вас не локальный файл.
Прототипы
Прототипы позволяют “потыкать” ваш продукт, как будто он уже создан. Пройти путь пользователя и заранее определить ошибки при проектировании интерфейса. Также прототипы позволяют увидеть анимацию, добавленную дизайнером.
Пример 1
Пример 2
P.S. В прототипе при клике на макет он подсвечивает элементы, к которым привязано действие
Прототипы позволяют “потыкать” ваш продукт, как будто он уже создан. Пройти путь пользователя и заранее определить ошибки при проектировании интерфейса. Также прототипы позволяют увидеть анимацию, добавленную дизайнером.
Пример 1
Пример 2
P.S. В прототипе при клике на макет он подсвечивает элементы, к которым привязано действие
И перейти из прототипа в исходный файл можно выбрав это действие в верхнем меню с названием
Делаем презентации, баннеры и посты
Если раньше вы пользовались Canva, которая недоступна в РФ, то Figma может стать отличной заменой. Тут есть раздел “Community”, где можно можно найти готовые шаблоны для презентации, постов, баннеров и много чего другого. Раздел активно пополняется новыми работами. Поиск можно вести на русском языке, но желательно всё-таки использовать английский.
Если раньше вы пользовались Canva, которая недоступна в РФ, то Figma может стать отличной заменой. Тут есть раздел “Community”, где можно можно найти готовые шаблоны для презентации, постов, баннеров и много чего другого. Раздел активно пополняется новыми работами. Поиск можно вести на русском языке, но желательно всё-таки использовать английский.
Figma хоть и рассчитана на веб, из-за чего в ней слабо развита работа с растром, но она обновляется и добавляет новые инструменты в этом направлении. Так уже можно добавлять видео и гифки в макеты, но их просмотр доступен только в режиме прототипа.
На помощь приходят плагины, которые предоставят новую функциональность или ускорят работу. Вот некоторые из них:
Unsplash - Добавляет в макет или заменяет выделенный элемент изображением с бесплатного фотостока;
Elements - Более 100 тысяч готовых элементов с прозрачным фоном (автомобили, растения, животные и т.п.);
Artboard Studio Mockups - автоматическая генерация мокапов из различных категорий в отличном качестве. Есть платные, но и бесплатных очень много и они добавляются;
Iconofy - Более 100 тысяч иконок со всех популярных сетов и не только, есть поиск по названию (на английском), также можно выбирать из конкретного сета (Material Design, FontAwesome и т.д.);
uiGradients – готовые градиенты на любой вкус;
Blobs – плагин создает разнообразные шейпы неправильной формы.
На помощь приходят плагины, которые предоставят новую функциональность или ускорят работу. Вот некоторые из них:
Unsplash - Добавляет в макет или заменяет выделенный элемент изображением с бесплатного фотостока;
Elements - Более 100 тысяч готовых элементов с прозрачным фоном (автомобили, растения, животные и т.п.);
Artboard Studio Mockups - автоматическая генерация мокапов из различных категорий в отличном качестве. Есть платные, но и бесплатных очень много и они добавляются;
Iconofy - Более 100 тысяч иконок со всех популярных сетов и не только, есть поиск по названию (на английском), также можно выбирать из конкретного сета (Material Design, FontAwesome и т.д.);
uiGradients – готовые градиенты на любой вкус;
Blobs – плагин создает разнообразные шейпы неправильной формы.
Помимо плагинов ещё существуют виджеты - это интерактивные компоненты, которые тоже могут упростить работу. Например:
lil todo - Компонент TODO лист;
lil notes - Компонент для заметок
Voice Memo - Позволяет записывать голосовые сообщения для всех участников в FigJam
lil todo - Компонент TODO лист;
lil notes - Компонент для заметок
Voice Memo - Позволяет записывать голосовые сообщения для всех участников в FigJam
FigJam
Это интерактивная онлайн-доска для совместной работы. Это отдельный сервис, но он доступен внутри фигмы и может взаимодействовать с обычными проектами. Например элементы из FigJam могут быть легко скопированы в проект с Figma, а компоненты дизайна в FigJam.
Этот инструемнт может заменить вам Miro или draw.io, так как тут тоже можно создавать структуру, различные блок схемы, делать заметки и всё это совместно с другими участниками. И тут тоже присутствуют готовые шаблоны.
Это интерактивная онлайн-доска для совместной работы. Это отдельный сервис, но он доступен внутри фигмы и может взаимодействовать с обычными проектами. Например элементы из FigJam могут быть легко скопированы в проект с Figma, а компоненты дизайна в FigJam.
Этот инструемнт может заменить вам Miro или draw.io, так как тут тоже можно создавать структуру, различные блок схемы, делать заметки и всё это совместно с другими участниками. И тут тоже присутствуют готовые шаблоны.
Почему стоит уметь пользоваться Figma
Это популярный инструмент, который упрощает и ускоряет работу.
Он бесплатный, многие дизайнеры им пользуются, а значит делятся ссылкой на макет, при получении которой незнающий человек впадает в ступор.
А теперь по фактам:
Инструменты сервиса позволяют чуть ли не полностью вести проект в одном месте, оставлять комментарии и просматривать их историю и историю самого проекта, плюс виджеты, через которые можно добавлять задачи и следить за их выполнением.
Будет полезно
Изучение:
Горячие клавиши:
Лучше использовать десктопную версию, а не браузерную, так как будет лучше производительность, не будет конфликта горячих клавиш или их отсутствия и появится возможность использовать свои шрифты.
Это популярный инструмент, который упрощает и ускоряет работу.
Он бесплатный, многие дизайнеры им пользуются, а значит делятся ссылкой на макет, при получении которой незнающий человек впадает в ступор.
А теперь по фактам:
- Отличная замена заблокированной Canva, наличие готовых шаблонов.
- FigJam как замена Miro и подобных. Зачем делать всё в разных местах, если можно в одном.
- Figma и FigJam бесплатные, есть платный тариф, но даже для дизайнеров бесплатного хватает с головой.
- Упрощение и ускорение коммуникации с дизайнерами.
- Очень прост в изучении, даже если кажется что это не так и учитывая отсутствие русского языка. Для недизайнеров достаточно изучить основы, а пользы потом будет вагон, особенно когда привыкнете к сервису.
- Доступ в любое время, в любом месте и с любого устройства.
- Ограничение доступов к проекту и запрет на его клонирование, если для вас это важно.
- Интерактивные прототипы позволяют выявить возможные недочёты и несоответствия ещё на этапе проектирования и лучше понять, что вам нужно. В PDF такое не сделаешь.
Инструменты сервиса позволяют чуть ли не полностью вести проект в одном месте, оставлять комментарии и просматривать их историю и историю самого проекта, плюс виджеты, через которые можно добавлять задачи и следить за их выполнением.
Будет полезно
Изучение:
- Бесплатный базовый курс по Figma от Tilda Education.
- Основы Figma за 7 минут - Видео 2 года и интерфейс немного отличается от текущего, но функциональность такая же.
Горячие клавиши:
Лучше использовать десктопную версию, а не браузерную, так как будет лучше производительность, не будет конфликта горячих клавиш или их отсутствия и появится возможность использовать свои шрифты.
- Ctrl + Shift + ? - скрывает\показывает внизу панель с возможными горячими клавишами
- Ctrl + \ - скрывает\показывает боковые панели инструментов
- Shift + 0 - отображает макет в 100% масштабе (1:1)
- Shift + Ctrl + 4 - скрывает\показывает сетку на макетах
- Ctrl + E или Ctrl + Shift + O(З) - преобразует текст в векторных элемент
- I(Ш) - пипетка
- [ - переместить слой назад, за всеми слоями
- [ - переместить слой вперёд, перед всеми слоями
- Зажатый пробел + зажатая левая кнопка мыши или зажатая средняя кнопка мыши - перемещение по рабочей области
- Зажатый Ctrl + колесико мыши — приближаться к объектам и отдаляться от них