Где-то год назад мой набор программ для ежедневной работы пополнился еще одним инструментом визуализации. Я наткнулся на него в статье на Медиуме и с тех пор ничего удобнее для себя так и не встретил. Сегодня речь пойдет о Figma.
Так как я не дизайнер, а моя работа периодически подкидывает мне задачи, где нужно быстро реализовать какой-то макет, в этом тексте будет мало информации полезной не новичкам. Зато, если вы ищете удобный продукт для задач оформления ваших идей, я надеюсь смогу вам помочь такой обрести.
Маленькие радости
Итак, первая радость от Figma начинается на этапе ценника. Это бесплатный продукт, если для вашей модели использования хватает базового функционала. За 12 долларов в месяц вы уже получите неограниченное число подключений (что нужно для реально больших команд и проектов), продвинутое логирование изменений и много чего еще. Figma во многом похожа на Adobe XD, который с недавних пор также перестал что-то стоить для решения простых задач.
Вдогонку за условно-бесплатной моделью распространения идет и удобство использования. Figma может работать прямо из браузера, минуя клиент (который, к слову, тоже есть), и доступна как на Windows, так и на Mac. Даже для мобильных операционок есть приложение, которое позволяет просматривать созданные макеты. Вместе с ценником это два больших камушка в огород Sketch, хотя напрямую я бы их не сравнивал.
Такая кроссплатформенность делает из инструмента практически швейцарский нож, ведь ситуаций и задач, под которые Figma подходит очень много. Я постараюсь сейчас как раз на их примере и описать, на что Figma способна для задач простого обывателя.
Ситуация — Макеты
По работе я довольно много занимаюсь техническим писательством и постановкой задач для разработчиков корпоративных систем. Рассказывать о проблеме и о том, как мне хотелось бы ее решить, можно очень долго. Гораздо эффективнее показать какие то предложения и идеи в виде графики. Быстро набросать расположение элементов в интерфейсе и при этом не скатиться в совсем эскизы от руки на бумажке, или указать на проблемы в уже реализованных формах. Все это очень удобно делать в Figma.
Figma позволяет очень быстро создавать любые артборды, а потом удобно экспортировать их вовне, масштабируя под нужный вам размер.
Но иногда статичных макетов может не хватить. Если задача комплексная, а ваш вклад в выстраивании бизнес-процесса велик, вы захотите, чтобы разработчик предельно ясно понимал не только основной концепт, но и каждую мелочь взаимодействия отдельных элементов.
Тут на выручку приходит вкладка Prototype, которая позволяет быстро и наглядно представить переходы между экранами или просто наладить связи между действиями пользователя и реакцией системы. Точно такой же функционал я нахваливал и у Adobe XD. Кстати Figma в этом плане даже несколько слабее, потому что не совсем рассчитана на создание финального продукта. В продукте Adobe есть куча разных анимаций переходов, а его интерфейс дружелюбнее.
Но давайте вспомним, что Figma по большому счету бесплатна и есть везде. Это поможет забыть о мелких недочетах.
Вкладка Prototype полезна и в случае, если вам нужна какаято сложная логика переходов слайдов в презентации. Заранее назначаете действия на кнопки и получаете целый набор интерактивных возможностей.
Ситуация — Композиция
Мне часто приходится делать разные презентационные материалы. Да и в целом все мы занимаемся время от времени каким-то оформительством. И как же часто головную боль доставляет позиционирование элементов и попытки уместить большой объем информации в очень ограниченный формат слайда или страницы.
Навык композиции нужно развивать, читая клевые книжки, фотографируя, рисуя и просто наблюдая за окружающим миром. Со временем задача оформить какой-то материал перестанет казаться такой мучительно сложной.
Но пока вы учитесь, работа не может простаивать, и ждать задачи не будут. Поэтому на помощь каждому оформителю приходит ее величество сетка. Figma как раз позволяет очень удобно с ней работать.
Figma это программа про удобный и скоростной дизайн. Главное не лениться и сразу выстраивать иерархию элементов на артборде. Не нужно все кидать в кучу, а потом сожалеть, что элементы то и дело наползают друг на друга. Лучше с самого начала рабочего процесса создать логику расположения и группировки слоев и четко ей следовать. Ну хотя бы стараться так делать.
Сетка позволяет строить логику расположения элементов на экране, которую команда может перенести на весь проект. В Figma вы можете сделать подобие дизайн-документа, которое будет описывать сколько блоков информации может быть в ваших раздаточных материалах и как они должны быть расположены относительно друг друга.
Сетка нужна еще и в случае, если ваш макет нужно будет впоследствии масштабировать под другой размер экрана или формат. И конечно, если вы отдаете свою работу верстальщику, сетка строго обязательна.
Для задач верстки может пригодиться и вкладка Code, где легко собрать все стили с артбордов или стили конкретного элемента. Удобно, чтобы быстро отдавать CSS проекта и говорить с фронтендом на одном языке.
Ситуация — Совместная работа
Сейчас сложно представить серьезный рабочий инструмент без поддержки функций ко-воркинга. В Figma есть магическая кнопка Share, которая дает возможность пользователю с ссылкой видеть макет, или, при наличии выданных вами прав, изменять его.
Совместный доступ можно организовать как к проекту целиком, так и только к отдельному артборду. Таким образом можно разделить области видимости для разных участников команды в рамках одной большой задачи.
Помимо уже описанных удобств Figma предлагает работу с компонентами, чтобы было проще поддерживать макеты и не приходилось тратить время на создание одних и тех же кнопок зеленого цвета для подтверждения действий пользователя в формах. А если заплатите 12 долларов в месяц, созданная вами библиотека будет доступна всей команде, которая работает над проектом и у которой есть к нему доступ.
Еще нравится, как здесь реализована работа с градиентами. В Photoshop я всегда путаюсь в громоздком интерфейсе их настройки. Возможно, Adobe дает большую гибкость, но мне она ни к чему, а нужный градиент я могу получить в Figma за несколько кликов.
Кроссплатформенность Figma дает еще одну неочевидную радость. Теперь я могу редактировать макеты на своем дряхленьком IPad прямо из браузера, даже не устанавливая приложение на устройство. В редкие моменты это выручает. А приложение Figma Mirror для iOS позволяет увидеть макет в деле на нужном вам устройстве.
Иногда при проектировании интерфейса требуется один из базовых системных элементов (чекбокс, поле ввода, всплывающая подсказка или модальное окно). Для этого в Figma есть популярные UI-киты (например, Google и Facebook), откуда можно выдернуть нужный элемент и скопировать к себе в макет.
Примерно так выглядят основные преимущества Figma для меня и моих рабочих ситуаций. Надеюсь, статья убедит кого-то отложить на время Powerpoint и немного обогатит набор инструментов для создания интересных и эффективных визуализаций.
Читайте больше статей в моем блоге.