Год использования Figma. Опыт ExpertSender

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

Как начать работу

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

Figma — это онлайн-сервис, работает в браузере, но ещё есть десктопная версия — для работы в ней нужно авторизоваться и иметь постоянное интернет-подключение. Мы привыкли к десктопной версии, но существенной разницы между ними не обнаружили.

Даниил Луконин

ведущий веб дизайнер ExpertSender

«С первого дня разработки и взаимодействия с Figma я понял, что так выглядит любовь.»

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

Auto Layout

Он удобен тем, что можно задать базовые правила на начальном этапе дизайна, а остальные страницы собирать, как в конструкторе.

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

Плагины

Ещё один удобный инструмент. Библиотека плагинов постоянно пополняется, есть масса очень нужных дополнений. Например, плагин Material Design. Там 1000+ готовых компонентов пользовательского интерфейса и много шаблонов приложений. А плагин Unsplash ускоряет работу, когда в макет нужно вставить стоковую картинку.

Прототипы

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

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


Плюс есть такая штука, как Figma Mirror. С её помощью можно открыть свой макет через приложение на телефоне и смотреть адаптацию своих макетов/переходы/клики и протестировать удобство. В общем, довольны все: дизайнеры/верстальщики/менеджеры.

Figma Mirror — это веб приложение Figma, которое просто отображает текущий выбранный фрейм.


Библиотека стилей и компоненты

Теперь у нас в макете не бывает трёх кнопок разного размера или шестнадцати размеров шрифтов. Мы создаем одну библиотеку стилей, утверждаем с постановщиком задачи шрифты, кнопки, цвета и пользуемся только этими ограниченными стилями. Это помогает, когда в подвале (нижняя часть сайта) на пятнадцати страницах нужно поменять одно слово. В Photoshop это заняло бы три года и девять месяцев, а в Figma — две минуты.

Дополнительные инструменты

Они тоже на высоте. Например, если нужно быстро отрисовать что-то простое, это можно сделать с помощью пера, которое в Photoshop было реализовано отвратительно – а в Figma взял и сделал.

Export

Эта штука сильно упрощает жизнь и мне, и верстальщикам. Экспорт любого объекта займёт 3 секунды, будь то группа (объединяет несколько элементов вместе), фрейм (аналог холстов из привычных графических редакторов) или отдельный элемент. Экспортировать можно в форматах PNG, SVG, JPG и PDF.

Чем хороша Figma

Работа в online

В Figma можно работать онлайн и в браузере, и в десктопной версии. Теперь я могу хвастаться макетами даже с телефона где угодно. Главное, чтобы был доступ в интернет. А ещё не нужно постоянно жать Shift+S и боятся, что что-то не сохранится, если компьютер отключится. 

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

Взаимодействие с командой

Можно обсуждать вопросы прямо на месте через комментарии.

Ещё один из огромных плюсов: в проекте одновременно может работать вся команда. Это удобно, когда нужно вносить правки в ходе созвона в Skype, например. Особенно актуально, когда за окном коронавирус и половина команды работает на удалёнке.

Правки в режиме реального времени

Одновременно с двух компьютеров с менеджером проекта можно вносить правки онлайн.

И это суперудобно — не нужно проводить митинги или ждать, пока менеджер внесёт правки, чтобы продолжать работу.

Лёгкость передачи макета

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

Работа с SVG

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

Права доступа

Права можно давать на просмотр и редактирование. Это удобно, если менеджеру нужно показать вариант, но не хочется, чтобы он всё сломал занимался творчеством вместо дизайнера. То есть шанс открыть макет и увидеть новые блоки сведён к нулю. Но всё бывает…

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

Что изменилось с внедрением Figma

Мы не жалеем о переходе на Figma, потому что она улучшает и облегчает взаимодействие в команде, решает проблемы хранения и передачи макетов верстальщикам и разработчикам, так как хранит всё в облаке. А ещё не дает превратить жизнь дизайнеров в сплошные правки внутри самой Figma благодаря библиотеке компонентов и плагинам.

Продолжаем освоение Figma, и если у вас есть совет, что нам точно стоит попробовать, напишите!

Согласен

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