Figma: возможности и как в ней работать

В мире проектирования интерфейсов сейчас сформировались несколько лагерей дизайнеров по инструментам. Из крупных: Figma, Sketch, Adobe XD. Помельче: Axure, Framer, Invision. Последняя группа инструментов больше подходит для прототипирования, тогда как для проектирования больше подходит первая. Если мы говорим только о проектировании, то я себя отношу к Figma-господам и давно уже вышел из лагеря Sketch-средневековья и тем более Adobe-инвалидов. Обзор остальных инструментов, возможно, будет позднее в статьях, а сейчас про программу Figma.

Что такое Figma

Figma — это облачный векторный графический редактор. Что значит «облачный»: макеты создаются в окне браузера или в программе, удерживаются в оперативной памяти, а сохраняются на серверах Figma. В принципе работать какое-то время можно без интернета и даже сохранить файл себе на жёсткий диск, но это намного хуже в плане удобства и скорости работы. Так же в Фигме есть версионность — можно отмотать время назад, если что-то удалил, а оно теперь нужно. На бесплатной версии только 30 дней. Можно работать в режиме мультиплеера и видеть курсор коллеги, вначале всех бесит, когда кто-то смотрит, как ты работаешь, а потом привыкаешь и это даже бодрит. Работать люди друг другу особо не мешают, как и в гугл документах.

Программа Figma

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

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

Программа для просмотра на мобильных устройствах помогает оценивать дизайн на реальных устройствах. Качаешь на айфон, логинишься, кликаешь с того же аккаунта в макете на нужный экран и смотришь на айфоне, как он себя ведёт. Анимации, скроллы и кликабельные прототипы поддерживаются.

Файлы в Figma

Структура файлов очень специфична, сначала бывает трудно. Есть команды (это папка с общим доступом), в них есть проекты (тоже папка с общим доступом), внутри уже сами файлы. В бесплатной версии можно передавать стили внутри проекта, а в платной — внутри команды. Есть ещё корпоративный тариф, его цена на сайте не указана. Он включает в себя надстройку «компания», в которую войдут все проекты и участники, когда-либо созданные со всех электронных почт корпоративного домена. Так же позволяет сделать общие стили уже для всех команд, что удобно для дизайн-систем, которые делает отдельная от остальных команда. Также у каждого всегда есть личные файлы «черновики». Их никто не видит кроме обладателя и тех, кого он сам туда пригласил. Много путанницы вызывает «недавнее», так как в нём свалено всё открытое тобой когда-то сразу в кучу по мере новизны. Даже чужое. Когда привыкнешь, увидишь, что удобно.

Как работать в Figma

Сначала придётся зарегистрироваться на сайте figma.com, ну и всё — нажимаешь плюсик в файлах и работаешь. Большинство горячих клавиш такие же, как в остальных редакторах, внизу есть кнопочка с вопросительных знаком, внутри — помощник по хоткеям. Подсвечивает те, которые ты уже использовал. Вот так.

В статье бессмысленно писать, как делать именно интерфейс в фигме, есть видеоуроки, но в целом всё очень просто. Кнопкой «A» (латинницей) вызываешь инструмент Artboard. Он же фрейм. В правой панели выбираешь заготовленный шаблон размера экрана или тянешь просто курсор, чтобы нарисовать свой. А в нём уже сетку и по ней интерфейс. Всё, как везде.

Преимущества и возможности

Основные преимущества:

• Всегда актуальный файл. Никакого final-last-final-update.psd в сотне вариаций, где актуальные части интерфейса разбросаны ровным слоем;
• Командная работа. Один пашет экраны, другой причёсывает иконки, третий вписывает тексты и подвёрстывает;
• Комментирование. Вот прямо на том, что смутило можно поставить коммент;
• Версионность. «Ой, я уже удалил этот файл» больше не прокатит. Прощай Abstract (отдельный сервис для версионирования Sketch);
• Универсальность. По минимуму есть и интерактивные прототипы и раздача файла на просмотр по ссылке и экспорт кода и вот вообще это всё; Прощай Avocode, Zeplin, Sympli (отдельные сервисы для отгрузки дизайна разработчикам);
• Работа с вектором. Векторные сетки — прсто изобретение богов. Если во всех программах вектор линеен и вот взять одну линию присоединить к середине другой нет возможности, то тут можно. Для рисования иконок — бесценно;
• Бесплатность. Полный функционал с небольшими ограничениями доступен всем пользователям;
• Мультиплатформенность. Да, можно запустить на линуксе и даже на винде;
• Плагины. Можно вообще всё. Вставлять иконки в два клика, трейсить изображения, находить и выделять миллион слоёв по общим свойствам (чтобы потом переписать в них разом текст, например);

На этом преимущества не заканчиваются. Минусы тоже есть, но они незначительные.

Простота освоения

Figma, Sketch и Adobe XD — почти близнецы в плане интерфейса, потому что он очень практичный и простой. По факту, большинство дизайнеров пользуются только прямоугольником и текстом из панели инструментов, А также свойствами объекта из правого сайдбара — вот они обширны. Панель слоёв используют только самые большие молодцы, которые сразу нормально именуют слови и группы и упорядочивают их для любимых разработчиков. Кто так не делает — не молодец. Вот и весь интерфейс, освоить на базовом уровне его очень просто. Дальше идти в освоении сложнее, появляются свойства, которых в обычных редакторах нет — привязки к краям, стили, сетки, вложенные фреймы и так далее, но всё равно намного легче всем даётся, чем фотошопное ломание рук. Есть ещё шутка про корел, но тут я узнал, что это не шутка, и кто-то реально в нём ещё делает интерфейсы.

Производительность

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

Векторные сетки

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

Компоненты

Аналог символов в Sketch, очень хорошим свойством компонент является то, что они могут быть вложенные, то, что внутри них могут быть сетки (к которым привязаны объекты и маленькие компоненты) и то, что они могут быть общими для всех проектов команды. Можно подключить к каждому файлу несколько библиотек компонент. Например главную и специфичную для конкретного проекта.

Стили

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

Стили бывают такие:

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

Autolayout

Просто спасение. Делаешь кнопку в компоненте, в дочерней переписываешь текст, и размер кнопки меняется под него. Более продвинутый уровень — Список из вертикального автолейаута, который сам перевёрстывается при удалении компонент из него, а каждый объект списка — горизонтальный автолейаут, в котором если, скажем, удалить картинку вначале, всё сдвинется влево, как в реальном интерфейсе. Немного понижает гибкость, но очень увеличивает автоматизацию при создании дизайна интерфейса. автолейаут — это тоже фрейм, и он тоже может быть компонентой, но привязка к краям внешнего фрейма уже не работает. Подкостыливается пробелами или объектами с прозрачностью 0%.

Многопользовательский режим редактирования

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

Работа с графикой

Все обложки и большинство иллюстраций для этого блога я делаю в фигме. Помимо интерфейсов, она позволяет на базовом уровне работать с векторной графикой, но инструментов маловато, это не Adobe Illustrator. Что можно: рисовать кривые безье, фигуры, использовать маски, использовать режимы наложения, немного крутить свойства растровых изображений, экпортировать ПДФ. Что нельзя: всё остальное. Например, нет CMYK и цветовых профилей, не получится сделать вёрстку книги, или покрутить 3D обьект внутри графики. Для простых иллюстраций, которых сейчас пользователю и надо, фигма подходит отлично.

Контроль версий

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

Фреймы

Аналог экранов, но не только. В каждом фрейме может быть помещён ещё один фрейм. Это нужно для того, чтобы, например, когда один фрейм скроллится, другой оставался на месте, или чтобы при растягивании макета на разрешение побольше в одном фрейме объекты тянулись, а в другом были зафиксированы. Если приноровиться — очень удобно. При экспорте в ПДФ фреймы превратятся в слайды.

Версия: платная или нет

В бесплатной версии дают до двух одновременных редакторов на команду (это важно, так как в другой команде ты можешь быть только с правами на просмотр, например). Если ваша компания покупает фигму, то важно понимать, что редактор для одной команды и редактор для другой — считаются как два редактора. Каждая команда оплачивается независимо. Если есть сисадмин, который за всё платит и администрирует — он тоже тарифицируется, как редактор. Если сравнивать с годовой лицензией Sketch, то фигма в год получается чуть-чуть дороже. Но если сложить со всеми инструментами, которые нужны скетчу для достижения того же уровня удобства — фигма дешевле.

Итог

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

(1 votes, average: 5,00 out of 5)

Загрузка...