Приблизительное время чтения: 9 минут
Фигма — это основной инструмент продуктового дизайнера, так говорят профессионалы. Сложно с этим не согласится. Фигма сейчас самый популярный сервис для дизайна. Инвесторы оценивают его в 10 млрд долларов. Это примерно как 1/10 нашего Газпрома. Разница лишь в том, что в Фигме 300 сотрудников, а в Газпроме 500.. тысяч. В этом видео мы поговорим о Фигме, как она помогает фрилансерам и корпорациям, что в ней можно делать, а что нельзя. И почему она убивает дизайн?
История Figma
История Фигмы началась в 2012 году. С того, что начинающий программист, Дилан Филд бросает обучение в престижном вузе ради участия в стартапах. Миллиардер Питер Тиль выдаёт молодому Филду грант на 100000$, при том, что никакого конкретного проекта у Филда нет, он хочет создать технологический стартап, который «позволит людям выражать себя творчески в интернете» так он это описал.
Название по-русски звучит как «плод воображения», а сокращенно Фигма.
Дилан пробует множество идей, но ничего не заходит, и некоторые инвесторы которые так вложили в него деньги, начинают их забирать, а сотрудники — увольняются, не веря в успех предприятия.
Успех
Филд придумывает разные генераторы мемов, пробует себя вы программном обеспечении для дронов… и в какой-то момент ему везет. Сервис позволяющий добавлять себя на фотографии с Обамой начинает пользоваться успехом у сторонников демократической партии, что не удивительно.
На волне успеха, Филд решает создать продукт, который станет для дизайнеров тем же, чем стал Google Docs для тех кто работает с текстом, а Github — для тех кто программирует. Один сценарий, один процесс, одно место для работы, и один источник данных, в котором вся команда может редактировать одновременно.
Именно функция командной работы в Фигме, позволила ей обойти конкурентов. И первыми кто заинтересовался этим новым продуктом стали корпорации. Фигма идеально подходит для больших компаний — её использует Notion, Dribbble, GitHub, Zoom, Airbnb и многие-многие другие.
Чем заинтересовала Figma
Она упорядочивает процесс создания дизайна, больше не думать о пересылке исходников. Каждый член команды имеет постоянный доступ ко всему проекту, а самому опытному можно доверить создания дизайн системы, на основе которой все остальные будут работать.
Это просто киллер фича для больших компаний, где множество сотрудников работает над одним проектом, часто бывает что-то кто на встрече, кто заболел или в отпуске. Или даже, у меня, в большой компании не могли настроить нормальную локальную сеть между ПК и маками и исходники носили на флешке. Но как говорит основатель Фигмы Дилан Филд, «нашим продуктом пользуются все от корпораций до русских фрилансеров».
Это было немного обидно. Фрилансеры же любят Фигму, за то что она простая, легкая, работает на любых компьютерах и бесплатная. Точнее раньше была бесплатной.
Как Фигма стала платной
Тут нам как раз подгадили большие корпорации, которые не воспринимали бесплатный продукт всерьез. Ну в принципе логично, бесплатный проект всегда может закрыться без объяснения причин. Поэтому Дилан решил ввести оплату. Я тогда в этом не очень разобрался. У меня было много файлов с открытым для редактирования доступом, я их перенес в раздел проектов, чтобы все было аккуратненько и в первый месяц заплатил за всех пользователей, почти 150 долларов).
Облачность Фигмы – это минус
Вообще в «облачности» Фигмы кроется и первый жирный минус. В Америке не предполагают, что есть страны где внезапно может рухнуть весь интернет. И как показал нам пример Казахстана и Беларуси — это большая проблема. Дизайнеры не могли работать локально на своих компах и сорвали все дедлайны. Хорошо, что отключения бывают не часто, а если Фигма просто тормозит, можно воспользоваться VPNом.
Основная её проблема в другом. На волне популярности Фигмы, многим начинает казаться, что для работы дизайнером надо знать — только Фигму. Фигма намертво связана с дизайном, при поиске на любую дизайнерскую тему всплывает Фигма. И почти любой вопрос по дизайну заканчивается… «а как это сделать в Фигме?». Фигма только один из инструментов, пусть и самый популярный. И тут мы подходим к самому главному вопросу…
Главный плюс Фигмы и отличия от других программ
Фигма отлично подходит для создания дизайн систем и проектирования сайтов и приложений на их основе — особенно если вы работаете в команде. С самого появления веб-дизайна специалисты искали способ совместно работать над проектами. Например, Студия Лебедева для этого отказалась от фотошопа, который всегда был стандартом для проектирования сайтов и перешла в Индизайн. Это программа для верстки книг и многостраничных буклетов. Ключевое её преимущество в том, что сам фал исходника практически ничего не весит, в нем только текст и описание где должны быть картинки, а сами картинки перелинкованы ссылками на отдельные файлы.
Таким образом один дизайнер мог разрабатывать и контролировать общий стиль сайта, другой рисовал иллюстрации и баннеры, обрабатывал фото людей, ну а новички делали простые внутренние страницы и адаптивы.
Огромный минус Индизайна был в отсутствие пикселей, понятно что в программе заточенной под печать всё измерялось в миллиметрах и пунктах. И провести изящную одно пиксельную линию было не возможно. Вскоре пиксели появились, но все равно Индизайн остался невероятно сложным для новчиком. Нельзя было просто взять стажера и попросить его поправить странички и дать ему Индизайн.
Сначала Скетч, а затем Фигма перевернули рынок. Скажем так, упростили вход для новичков.
Для чего не подходит Figma
Но как проходит любой урок по Фигме, преподаватель говорит возьмите любую фотографию, и находит самую красивую. В итоге получается отличный кейс. В реальной же работе, может просто не быть красивых фотографий по ваше теме, или клиент пришлет вам кривые обрезанные фотографии со своего телефон, которые требуют обработки. Для этого вам понадобиться фотошоп.
Кроме того, есть некоторые типы задач — которые начинающие дизайнеры тоже начинают делать в Фигме, хотя она для них совершенно не подходит. Прежде всего кейсы. Большинство новчиков, нарисовав сайт или приложение хотят его выложить как можно быстрее. Я их понимаю, у меня тоже самое с выпуском видео. Но мало кто знает, что опытные дизайнеры собирающие десятки тысяч просмотров и лайков на Бихансе делают сам интерфейс за пару дней, а потом несколько недель, а то и месяцев делают его «подачу», то есть кейс на Биханс. У некоторых на ОДИН кейс уходит до полугода. Хорошая подача невозможна без фотошопа, то есть программы для обработки изображений.
Бывают конечно исключения, когда начинающий дизайнер настроен исключительно на продуктовую работу в большой компании. Он проводит настоящие исследования, строит карты пути потребителей, определяет в них точки, где пользователи испытывают проблемы и решает их. Такой технический кейс можно сделать и в Фигме. Но большинство дизайнеров хочет работать с более широким кругом клиентов — брать частные заказы, работать на бирже. Такие клиенту любят виpуал, и прежде всего оценивают т.н. красоту работы, которая невозможна без фотошопа.
Насколько бы ни был хорош ваш интерфейс, то есть сам сайт или приложение — вам понадобятся фотографии людей — которые придется обработать, отрезать от фона, или сделать коллажи.
Главная фишка
Между тем, одна из главных фишек которая делает подачу интересной, это показать вашу работу в реальной обстановке. Графические дизайнеры любят показать текстуру материала, загнутые странички или немного смятые плакаты. Такая подача обогащает визуальную часть работы, добавляет деталей в скучные прямоугольники.
Некоторые веб-дизайнеры тоже кстати рисуют страницы, особенно адаптивные как длинную согнутую ленту. Даже если вы не хотите так заморачиваться, и просто нашли в интернете мокап, например айфон в интересном ракурсе, вам все равно придется подгонять под него ваше изображение, возможно где-то добавить блики и рефлексы, добавить шумов.
Или например вы хотите показать телефон с вашей работой в руке у человека, это сильный ход, он добавляет в работу эмоций. Сделать это в Фигме будет невозможно. Если картинку в ракурсе с горем пополам вы ещё как то развернете, то подретушировать её уже не получиться. Это чисто фотошопная работа.Дальше — анимация. Безусловно анимация это отличный способ оживить сайт или ваш кейс на Бихансе, а может даже и добиться вау-эффекта. Но вот в чем проблема — Фигма не предназначена для анимации, да и не нужна она в большинстве случаев.
Как я уже говорил, опытные дизайнеры делают кейс несколько месяцев, а некоторые новички успевают по несколько в неделю. Новички экономят время на поиске хороших референсов, то есть примеров похожих по теме сайтов, экономят время на поиске фотографий. Даже на самой верстке текстов экономят. Тут под версткой я понимаю расположение текстовых блоков, размер заголовков, межбуквенное и межстрочное, а не то чем занимаются программисты.
Так вот — на всем важном сэкономили, сайт выглядит на троечку, но анимацию залепили. Анимация это как вишенка на торте — когда все отлично, все ровно, выверено можно сделать. Но это совершенно не обязательно.
Работа с видео
Один из самых простых вау-эффектов — это видео фон. Обычно этот какой-то ролик из интернета, который вы немного нарезаете, сокращаете и возможно затемняете, чтобы на хорошо читался основной текст и кнопки.
В Фигме добавить видео не получится, очевидно что для работы с видео нужны видео редакторы. Тот же Affter Effects от Adobe.Что-то конечно в Фигме можно имитировать, но это как есть суп вилкой, теоретически можно, а на практике — зачем?
Печать
Ну и самое главное — печать, в Фигме нельзя делать материалы в печать. В Фигме нет цветовых профилей, ведь она заточена под создание цифровых продуктов и все цвета в ней задаются в цветовой модели RGB. Основа этой модели черный цвет, а излучение в каждом канале дают оттенок. Если сложить все три цвета вместе будет белый. В печати наоборот. Цветовая модель — CMYK. Смешение трех цветов даёт черный, точнее в реальной жизни грязно серый, поэтому есть четвертая чисто черная краска.
Ребята, которые занимаются печатью всегда проверяют чтобы черный текст печатался только черной краской, без вкрапления остальных, так же они считаю сумму красок. Каждый канал в CMYK измеряется в процентах, максимально в каждом канале может быть 100% — 4 канала в сумме 400%. Это слишком много, типографии не принимают больше 320%. Иначе бумага будет долго сохнуть, а то и деформируется. Работы с CMYK в Фигме нет. Поэтому, опять же, теоретически, если вы делаете простенькие визитки, и клиент вам сказал сделайте красным, без уточнения оттенков — вы можете на свой страх и риск это нарисовать и отправить в печать. Но в минимально серьезных компаниях, уже есть свои фирменные цвета и повторить их на печати из Фигмы вы не сможете.
Итоги
- Фигма это отличный инструмент командной работы над цифровыми продуктами, будь то сайт, сервис или приложение. Но Фигма это не комбайн вроде фотошопа.
- В Фигме удобно сделать стили текста и компоненты, но если вам понадобиться сочная фотография, анимация элементов или фона — для этого есть отдельные специализированные инструменты.
- А если вам понадобиться что-то в печать, особенно презентации, буклеты или книги — то есть многостраничные материалы — не дай бог вам это делать в Фигме.
- При этом Фигма крайне популярна, дизайнеры на ютубе это знают и вместо того чтобы рассказать как что-то делать правильно, они рассказывают как это сделать в Фигме, а что у вас получиться на выходе, это их уже не волнует.
В итоге Фигма, как вирус, заполняет собой всё и некоторые новички уже начинают верить, что если просто найти правильный плагин, то можно и в печать в ней делать. Каждой задаче — свой инструмент!
