Что приходилось делать дизайнерам до появления figma
Figma — простое решение для дизайнера, сложное решение для верстальщика
Если вы работаете в области web-разработки, то рано или поздно, вам суждено будет познакомиться с Figma. Смиритесь с этим фактом и начинайте изучать. Я же попробую описать данный продукт, с точки зрения повседневного пользователя.
Для начала стоит упомянуть о парочке приятных моментов, за которые дизайнеры любят использовать Figma. Что ж приступим:
Самый неоспоримый плюс – халява
В отличие от повседневных продуктов дизайна, будь то Adobe пакет (Photoshop, Illustrator, Adobe XD … ), или Bohemian Coding (Sketch) эта программа условно бесплатная для пользователей. Разумеется за определенные финансовые вливания Вы получите дополнительные плюшки, но и без оных, продукт выглядит вполне достойно. Будем надеяться, что данная политика не поменяется, и правообладатели не начнут закручивать гайки. Аминь.
Для тех кто не в теме – это способность одновременно работать над одним проектом нескольким людям. И когда я написал одновременно, то это действительно так, я как верстальщик, вижу, как дизайнер(или даже дизайнеры) правят проект realtime прям на своем мониторе. Выглядит этот эффект как teamViewer. Дизайнер больше не хранит свои макеты локально, теперь это всё живет в облаках. Не нужно больше обмениваться скриншотами с менеджером, процесс создания проекта стал публичным, необходим только браузер с нормальной скоростью Интернета.
Задействован принцип кроссплатформенности
Стала не важна операционная система (Windows, MacOS, Linux) верстальщика и дизайнера. Они смогут работать над одним проектом без проблемы несовместимости ОС.
Удобные быстрые клавиши
Если вы уже привыкли работать с графическими редакторами посредством hot key для вас не составит труда быстро освоиться с новым функционалом.
Программа имеет довольно толковое описание клавиш быстрого вызова, и к тому же они сильно повторяют функционал клавиш Photoshop или Sketch, за что авторам отдельное спасибо. Все ведь ленивые и не хотят опять обучаться, как вызвать элемент Pen.
Возможность работы с векторной графикой
В Figma можно работать не только с растровыми изображениями, но и с векторной графикой, экспортируя и импортируя готовые решения в формат SVG. Эта фишка очень полезна, особенно если вы беспокоитесь о производительности своего web проекта, который можно очень сильно ухудшить, если вставлять не тот формат, или не того размера.
Возможность создания компонентов
Да, для верстальщиков поясню, что в дизайне тоже есть компоненты. И им тоже даровано свойство Наследования (привет ООП). К примеру можно создать типовую кнопку, а потом “продублировать ” её по всем артбордам. И потом, когда от заказчика придёт желание перекрасить все кнопки в розовый горошек, это всё решается за пару кликов (разумеется, если дизайнер умеет данным свойством пользоваться)
В Фигме есть функционал настраиваемых плагинов, и их там довольно много.
Представлены как продукты частных компаний, так и реализации open source сообщества. Пока что, из-за частых обновлений софта можно увидеть забагованость функционала, но я уверен, что это поправят.
А теперь о негативных моментах, с которыми сталкиваются пользователи Figma в процессе работы, ну или о том, чего так не хватает, а очень надо.
Проблема с определением фактических размеров элементов и расстояния между ними
К сожалению, в процессе верстки постоянно сталкиваюсь с проблемою узнать реальное расстояние между элементами. Особенно плохо обстоят дела, если дизайнер забыл очистить картинки от прозрачного фона (transparent background) или некорректно прописал межстрочный интервал для текста.
Иногда эту проблему можно решить, выбрав элемент отсчета, а затем с зажатой клавишей Alt нажать на элемент, расстояние до которого необходимо узнать, но это не всегда работает.
Перекрытие и заблокированные слои
Очень часто происходят случаи, что получив ссылку на макет сайта, верстальщик не может изъять нужные элементы дизайна по причине того, что они перекрыты вышестоящими слоями, или же эти слои вообще заморожены.
Проблемы с текстом
а если открыть данный шаблон уже в режиме дизайнера, то уже можно наблюдать, что там Roboto Bold задействовано.
Семейство шрифта вроде ж одно и то, а только в процессе верстки его всё равно через свойство @font-face отдельно подключать надо, иначе эффекта как на макете не получить. И пока не затяните на свой проект, вы этого не узнаете (и можно долго играться со свойством font-width).
Если же вы работаете не только с открытыми Google шрифтами, но и используете личный подключаемый набор, а он ещё и кирилличный, то будьте готовы к приключениям.
Отдельные танцы с бубном начинаются, если ваш дизайнер очень любит градиентные шрифты с тенями и обводками.
Тут в код, предоставляемый Фигмой, можно вообще не смотреть. Как вариант решения проблемы вы можете сохранить данный текст в SVG (иногда это дешевле чем импортировать к странице новый шрифт), ну а если всё-таки будет необходимость заниматься решением данной проблемы на серьезном уровне, то опять забирайте макет на свой личный проект.
Тут правда у меня возникли вопросы, почему возле ползунков смены значения градиента разработчики поленились вывести хотя бы процент текущего значения, не говоря уже про угол направления градиента, и мне как верстальщику приходиться самому угадывать какое значение надо будет поставить в background: linear-gradient, а потом починить это через background-clip: text; Собственно свойство text-stroke в коде фигмы я пока тоже не встречал, хотя возможно это связано что оно ещё не во всех браузерах зеленое.
*Делитесь своими мнениями в комментариях, почему это может быть так сложно реализовать?
Figma является облачным продуктом
Иначе говоря, если у Вас нету связи с глобальной паутиной на хороших скоростях, возвращайтесь в свою пещеру к настенной живописи, или переходите на оффлайновые продукты. Тут Фигма увы бессильна и Ваше творчество так и останется недоступно для общественности, и не важно, что сроки горят, и завтра сдавать проект.
Работа в фигме расхолаживает дизайнера
Возможно, конечно, это лично моё субъективное мнение, но макеты, которые отдаются дизайнерами под верстку сайтов, ниже качеством по сравнению с макетами, выполненными в Photoshop или Sketch. (* я прям чувствую, что сейчас у кого-то подгорело)
И ладно, если с текстом это ещё может нормально прокатить, ленивый верстальщик с шестнадцатеричного представления цвета
скорее всего перейдет к rgba представлению
А вот если дизайнер решит делать такую штуку к блоку элементов (там где про background-color, color, background: linear-gradient ….), при этом, половина элементов будет с прозрачностью, а вторая, нет, то тут можно во вкладку Code и не смотреть.
В общем, Фигму нельзя рекомендовать как начальный инструмент для молодого дизайнера. Порог входа, тут пониже будет, но и нервы вы своими макетами коллегам испортите.
Отсутствие нормальной Темной темы
Это очень печально, но пока в Фигме нет возможности адекватно менять визуальное представление рабочего пространства под свои нужды. Особенно остро это стает когда пользуешься приложением, а не браузерной версией где можно извращается, ставя поверх браузера какие-то дополнения, плагины. Разуметься присутствуют плагины умельцев, но поскольку Фигма очень часто апдейтиться, то плагины за ней не успевают.
Лучше б конечно, чтоб за данный функционал отвечали те, кто пишет продукт
Личные попытки поставить Темную тему. (Windows 10, Chrome 76) были печальны.
*Возможно, у владельцев Mac-ов дела обстоят лучше. Делитесь в комментариях…
О том почему это важно и полезно можете посмотреть в презентации Тёмная сторона веба, Никиты Дубко Надеюсь что поправят. Всё-таки дизайнеры — тоже люди, и им тоже надо дать возможность комфортно работать 8 часов в сутки 5 дней в неделю.
Вот такой вот кратенький обзорчик Figma у меня вышел с пожеланиями и ворчанием.
Надеюсь, что мой пост прочитает кто-то из разработчиков данного продукта и сможет его улучшить. В любом случае за данным продуктом я вижу будущее, и желательно, чтоб он развивался в правильном направлении.
Figma или Sketch? Опыт дизайнеров компании AIC
Священная война между Sketch и Figma продолжается уже не первый год, и остановить её, кажется, не сможет ничто. Какие бы аргументы ни приводили представители того или иного лагеря, у противников всегда найдётся, чем ответить. Редакция Нетологии решила поделиться с вами мнением специалистов, которые работают с Figma и Sketch ежедневно — дизайнеров компании digital-консалтинга AIC. Ребята в своём блоге на Медиум опубликовали статью, с их разрешения мы размещаем её у нас, чтобы наконец разобраться — что же лучше?
Главный аргумент адептов Figma, апеллирующих к тому, что Sketch есть только под macOS, заставляет оппонентов только презрительно хмыкать. Ведь во-первых, если требуется выполнить определённые задачи, с которыми Sketch справляется успешней, всегда лучше обратиться к специалисту, который использует именно подходящую систему. А во-вторых, «macOS всегда лучше» (это уже отголоски другой «войны»).
Мы предпочитаем подход всесторонний — энциклопедический, если хотите. И поэтому ни Sketch, ни Figma в нашей работе не остаются обиженными. Причин тому несколько, и чтобы разобраться в них, лучше наглядно обозначить разницу между программами. Казалось бы, небольшую, но решающую.
Sketch — идеально для интерфейсов
В качестве главной задачи Sketch было сразу обозначено проектирование интерфейсов мобильных приложений и веб-сайтов, а поддержка возможности создания интерактивных прототипов немало поспособствовала тёплым отзывам аудитории. В 2012 году Sketch даже получил награду Apple Design Awards!
Учитывая год появления первой версии (всё-таки, Figma на шесть лет младше), Sketch куда чаще сравнивали с Adobe Photoshop. И одним из ключевых отличий по сравнению с мастодонтом можно назвать то, что новый редактор не использовал собственных средств для отображения создаваемого контента. За это отвечают инструменты macOS — QuickTime, Quartz Extreme, Core Image, Core Animation, OpenGL и ColorSync.
Одним из главных плюсов Sketch можно назвать его идеальные по точности инструменты.
Редактор строго заточен под дизайн интерфейсов и предназначен исключительно для того, чтобы выполнить поставленную задачу.
И хотя некоторые могут назвать отсутствие множества инструментов, как, например, в Photoshop, «минусом», в этом и есть фишка Sketch — это очень аккуратный прибор.
Другим несомненным козырем является удобство экспорта графики, кода и пресетов. При этом наряду с экспортом отдельных элементов, у Sketch есть удобная функция экспорта артбордов (если вам нужно сохранить каждый экран в виде отдельного файла) и слайсов (чтобы создать превью из нескольких экранов или отдельного фрагмента).
Это совсем не первичная функция, но в Sketch мне больше нравится инструмент обработки фотографий. Там диапазон изменений шире и гибче. Можно выкрутить яркость и контраст по максимуму, что может иногда привести к неожиданным и очень интересным результатам. В Figma можно лишь сделать «чуть-чуть посветлее.
Ну и, наконец, инструментарий Sketch проще, удобнее и интуитивно понятнее, нежели у подавляющего большинства подобных программ. Множество лишних панелей, разбросанных вокруг рабочей области, не будут вас отвлекать, а всё, что вам потребуется, будет показываться прямо в процессе работы. И это касается не только старых редакторов, но и более молодого Figma.
Для меня, наверное, главное преимущество — это чуть более удобная работа с символами и библиотекой, настройка оверрайдов в Sketch. Я люблю, чтобы всё было разложено по полочкам, а в последнее время, наблюдая за дизайнерами, замечаю, что Figma стимулирует неаккуратность. Там всё устроено так, что сложно избежать дикой вложенности в библиотеке, что слегка раздражает.
Разумеется, это далеко не всё. Sketch может, в частности, похвастаться массивной библиотекой плагинов и композитов для запуска проектов, а умные макеты помогут вам автоматически изменять размеры элементов. А некоторые до сих пор распевают дифирамбы во славу удобной пипетки, которая появилась в Sketch — но это скорее преимущество по сравнению с Photoshop, у Figma в этом плане всё тоже прекрасно.
Но как ни крути, без минусов не обходится ни единая программа. И главным недостатком Sketch на протяжении всех десяти лет существования этого редактора остаётся отсутствие совместимости! Большая часть дизайнеров относится к «макам» хорошо, а вот о разработчиках такого не скажешь. Так что при использовании Sketch придётся привыкнуть к тому, что обязательно потребуются посредники вроде Avocode или Zeplin, которые позволят открывать файлы Sketch в Windows и Linux.
Профессия
Графический дизайн
Figma — удобно для команд
Двумя своими главными целями при создании Figma разработчики называют возможность получения доступа к макету прямо из окна браузера и возможность совместной работы над документами. Это то, чего не хватает Sketch.
Figma позиционируется как онлайн-сервис, и в этом довольно существенное отличие этого редактора от Sketch, который является самостоятельной программой. Из-за разницы в подходе к реализации задачи, разнится и результат. Наглядный пример: производительность в Sketch до сих пор выше — это нативное приложение, там нет ограничений по занимаемой памяти. Figma, в свою очередь, ставит лимит в 2Gb, и при долгой работе проект может банально не открыться, если в нём уже слишком много макетов и слоев — в итоге вам придётся откатывать всё назад.
Именно такой подход можно назвать главным минусом Figma. По сути, программа обогнала своё время: когда работа по принципу web app не будет ограничена настолько жёсткими рамками, это станет гораздо более удобным, чем банальная работа на лэптопе или десктопе.
Figma подходит как для создания простых прототипов и дизайн-систем, так и сложных проектов, вроде мобильных приложений или даже порталов.
Программа пригодится вам и для других задач — например, с её помощью можно создать презентацию. Наша команда, например, делает это всё чаще — дизайнеры часто представляют свои проекты прямо из Figma, и даже менеджеры постепенно учатся работать в этом редакторе. Кажется, день, когда Figma станет универсальным инструментом, уже недалёк. А учитывая, что сейчас тренд на унификацию всего и вся, это вполне реалистичный сценарий.
В 2018 году Figma назвали одним из самых быстро развивающихся инструментов для разработчиков и дизайнеров. И главное, что создатели платформы всегда очень внимательно следят за фидбэком от пользователей. Как только появились отклики, где дизайнеры начали хвалить удобство командной работы при использовании Figma, разработчики сделали это своей главной фишкой. Не пытаясь бороться за какие-то занятые фронты, а занимая новые. Однако, у всего есть две стороны.
Плюсы от командной работы в Figma — это космос. Вся команда, от продакт-оунера и аналитиков до разработчиков, может находиться в одном пространстве и использовать то, что им нужно в данный момент. Аналитики экспортируют макеты для описания сценариев, разработчики смотрят стили для фронтэнда.
Но совместная работа имеет свои болезненные точки. И главное — это то, что я терпеть не могу когда кто-то подглядывает из-за спины в мой экран. А в Figma это можно делать даже на расстоянии в тысячи километров, когда несколько курсоров летают рядом с макетами, где ты работаешь, это как минимум отвлекает, а как максимум неприятно.
Так что уж как минимум привыкнуть к совместной работе придётся. В принципе, если смотреть на всё это объективно, то складывается чёткое впечатление, что это несомненный плюс. Но другая, субъективная сторона остаётся всегда. Хотя очень многие называют командную работу главным плюсом Figma.
Что же до остального, то это скорее вопрос привычки, уверены наши дизайнеры. Взять, например, незаметную, казалось бы, опцию в Sketch — возможность перекинуть картинку в программу прямо из браузера. В Figma этого нет.
Это очень важный момент, когда собираешь быстрый мудборд проекта, и не хочешь отвлекаться на инструментал. В Figma приходится сохранять картинки на компьютер, а уже после кидать их в программу.
Вечный спор — главные аргументы «за» и «против»
Из подобных нюансов и складываются личные предпочтения дизайнеров. И как бы парадоксально это ни звучало, на деле они обычно оказываются гораздо более значимыми, нежели те отличия, что по идее должны быть более заметны.
Figma выгодно отличается от Sketch тем, что при работе в этом редакторе не приходится синхронизировать физические файлы между устройствами. Эту проблему в Sketch можно обходить по-разному. Можно, например, использовать Dropbox, который можно установить на компьютер каждого участника проекта, но задержки, конфликтные копии и проблемы с передачей макетов всё равно могут появиться. В Figma же эта проблема решена изначально. Макеты в облаке доступны всем членам команды, а учитывая функцию автосохранения, о синхронизации можно не беспокоиться вовсе.
Другой, ничуть не менее важный момент: в Figma можно работать на любых устройствах, а в Sketch — только пересадив всю команду на «маки». А кого-то, возможно, и переучивать! Да, в общем картина, может быть, выглядит далеко не так грустно, как кому-то может показаться, и по большей части дизайнеры не против «маков». Но всегда остаются частные случаи, а исключения нередко бывают важнее правил.
Ну и конечно, возможность одновременной работы над проектом. Пока дизайнер доделывает макет, разработчик уже может анализировать его в реальном времени, а тестировщик сверять макет с поставленной задачей. Может в любой момент подключиться к делу второй дизайнер, который внесёт изменения одновременно с первым. Работу видят сразу все, и это обязательно ускорит процесс работы! Да, приватностью придётся пожертвовать, и никакого творческого уединения работающему над проектом художнику не светит. Но при работе над крупными заказами это чаще всего неизбежно.
Однако, как показывает практика, на эти три пункта далеко не все смотрят в первую очередь. Для многих важнее незаметные несведущему наблюдателю моменты — это те самые исключения, из которых складываются правила, о которых мы говорили выше. За примерами далеко ходить не нужно:
Моя главная боль в Figma — это ресайз фреймов. Вначале я часто забывал растягивать фреймы с зажатым Command, и весь макет разъезжался или появлялись дробные числа, так что приходилось возвращаться и исправлять. Но возможно, где-то существует волшебная галочка, про которую мне до сих пор неизвестно.
«В чём сила, брат?»
Так в чём же сила? Figma или Sketch удобней своего главного конкурента? Figma пригодится вам на случай, если работа идёт в команде — или, кстати, на удалёнке, когда контакт с другими участниками проекта ограничен. Ну и кроссплатформенность очень сильно помогает, что особенно заметно всё в тех же крупных проектах.
Если же вы делаете что-то соло, никаких постулатов нет. Но всё-таки задумайтесь о том, что всю жизнь работать в одиночку не выйдет. И чем дольше вы будете пытаться быть ближе к истокам, тем сложнее будет потом выбираться из родной норы.
Первые переходы в Figma оказались очень болезненными. Несмотря на то, что интерфейсы эти — практически братья-близнецы, многие фундаментальные отличия в организации проектов требуют времени, что бы освоится и привыкнуть. И главная боль перехода — отсутствие настраиваемых горячих клавиш. Это очень сильно выбивало из рабочего ритма и замедляло работу в разы. На уровне рефлексов нажимаешь привычные сочетания клавиш, а ничего не происходит. Или ещё хуже — происходит то, чего ты не ждёшь.
Нелогичные на первый взгляд принципы, по которым работают компоненты, вложение фрейма во фрейм (я так до сих пор и не нашёл ему практического применения и пользуюсь классическим подходом с символами на отдельной странице)… Отсутствие стилей слоёв, из-за которого приходится либо хранить используемые стили в библиотеке как отдельные формы, или бегать в поисках нужного стиля слоя.
И это, между прочим, слова человека, который считает, что «плюсы от командной работы в Figma — это космос». Привычка и действия, доведённые до рефлексов — вещи настолько же удобные и полезные, насколько и страшные. Поэтому пересесть с одного редактора на другой без массы проклятий в адрес этого другого, скорей всего, не получится.
Почему мы перешли на Figma. Честно о плюсах и минусах онлайн-редактора макетов и прототипов
Рассказывает Егор Сорокин из агентства «Лидер Поиска».
В 2016 году наша компания полностью перевела процесс прототипирования и веб-дизайна на молодой и развивающийся онлайн-редактор Figma (до этого мы проектировали в Moqups, а рисовали в Фотошопе). Мы попросили Егора, нашего дизайнера, рассказать о продукте и поделиться своими впечатлениями. Собственно, Егор и нашёл Фигму, досконально изучил её и внедрил в отдел дизайна «Лидера поиска». Слово заслуженному фигмоведу!
Сразу скажу: у меня нет макбука, поэтому все макеты я по старинке создавал в Фотошопе и мог лишь облизываться на недоступный мне Скетч. Объяснять недостатки такого подхода нет смысла: как только проект выходит за рамки одной-двух страниц, работать становится ресурсозатратно. Куча файлов с макетами, следить за единообразием сложно, вносить даже пустяковые правки — больно.
С Фигмой я работаю с первой версии (специально посмотрел: вышла 27 сентября 2016 года). Она стала настоящим глотком свежего воздуха. Наконец появился кроссплатформенный конкурент Скетча!
В сети полно статей, в деталях разбирающих Фигму. Опишу фишки, которые стали ключевыми именно для меня.
Всё, что нужно знать о рекламе в мобильных играх
Аналитический обзор Gameloft: рекламные форматы, портрет аудитории, надёжные бенчмарки.
Главные преимущества
Простота освоения
Забавно, но когда работаешь с продуктами Адоби 20 лет, перестаёшь замечать, насколько это монструозные и сложные программы с бесконечным количеством функций и возможностей. Осознаёшь это только тогда, когда кто-то просит тебя объяснить, как повторить какой-то трюк или решение. Порой это реально сложно.
Так вот, для того чтобы внедрить Фигму в работу и начать делать на ней проект, мне понадобилось несколько часов, а в течение пары дней я изучил абсолютно все её возможности. В дальнейшем достаточно просто следить за блогом и Твиттером фигмовцев, чтобы вовремя осваивать новые функции.
Так же просто с программой могут подружиться и недизайнеры. Наши менеджеры по первому попавшемуся курсу по Фигме за день получили необходимые знания и вовсю кроили прототипы.
Интерфейс Фотошопа. Под капотом еще тонна панелек и скриптов, которые я скрыл
А это — интерфейс Фигмы
Производительность
Фигма действительно быстрая. Работа в ней происходит на куче холстов, расположенных рядом. И если на моём неслабом, в общем-то, ноутбуке (i7, 32 Гб ОЗУ, SSD) Фотошоп уже на 5–7 холстах с хорошим количеством графики начинает ощутимо притормаживать (у Фотошопа в принципе проблема с артбордами), то Фигме и 20 холстов нипочём, — летает.
На этом документе Фотошоп прилично притормаживает
А Фигма легко справляется вот с такими количеством холстов
Это не значит, что у неё нет пределов. Фотошоп требователен прежде всего к процессору и объёму оперативной памяти, а Фигма — к видеокарте, поэтому на слабых ноутбуках с интегрированной видеокартой могут быть проблемы: при очень большом количестве холстов (3–5 страниц с 20 холстами каждый) документ грузится долго или вообще «вешает» маломощный компьютер.
Автоматическое сохранение и контроль версий
Онлайновость Фигмы отменяет необходимость постоянного сохранения макета и риск потерять данные. (Вы же тоже нажимаете Ctrl+S после каждого действия в Фотошопе? Если нет, значит, вы просто ещё ни разу не теряли работу за последние два часа из-за внезапного вылета программы.) А прекрасный контроль версий за последний месяц (Фигма делает автокопии, но можно настроить и вручную) избавляет от необходимости плодить кучу подверсий проекта. Здорово выручает, проверено лично.
Список версий проекта
Компоненты и фреймы
Это её основные фишки, и они действительно круты. По сути, фреймы — это холсты в холстах со своими отступами, направляющими, правилами выравнивания и масштабирования элементов.
Компоненты — те же фреймы, только в виде шаблонных блоков по аналогии со смарт-объектами в Фотошопе или символов в Иллюстраторе. Это потрясающе. Кнопки, наборы иконок, шапки, подвалы сайтов, формы обратной связи — всё можно превратить в компоненты и затем, как из конструктора, формировать готовые страницы.
Но самое главное — компоненты подчиняются родительской копии: меняешь что-то в ней, меняются и все дочерние. Об этом я мог только мечтать, когда возникал вопрос о том, чтобы изменить дизайн шапки или кнопки.
Раньше мне приходилось открывать 20 с хвостом psd-макетов, править там каждый блок, сохранять, закрывать, переотправлять. Залинкованные смарт-объекты с проставленными layer comps выручали, но это неудобные костыли.
А в Фигме всё работает из коробки и за пару кликов. Плюс дочерние копии самодостаточны: можно поменять параметры, например, цвет отдельно взятой кнопки, — остальные копии и родительский объект останутся незатронутыми. С компонентами скорость работы и оперативных правок на прототипах выросла в разы.
В pro-версии Фигмы (да, она бесплатная, чёрт побери!) можно создавать полноценную динамическую библиотеку компонентов, блоков, стилей для использования в различных проектах. Поменял главный компонент — и обновление произошло сразу в нескольких проектах, а разработчикам об этом пришла оповещалка. Для продуктового дизайна эта возможность позволяет постоянно актуализировать дизайн-систему. Я же обычно работаю над разными несвязанными между собой проектами, но сама парадигма библиотек отличная.
Так работают компоненты
Удобное выравнивание элементов
Помнится, в Фотошопе была вечная проблема с расстановкой элементов на определённом расстоянии (например, пункты меню или карточки товаров). Приходилось делать вручную или пользоваться сторонними скриптами. В Фигме это учли, работает чудесно. Берёшь элементы, нажимаешь кнопку — и готово: объекты разместились на заданном расстоянии, которое меняется на ходу. Более того, можно взять и поменять местами выровненные блоки простым перетаскиванием с сохранением отступов. Красота!
А ещё тут есть отличные функции Pack Horizontal и Pack Vertical, я её не встречал ни в одном редакторе, она позволяет быстро скомпоновать элементы вплотную друг к другу.
Пользуюсь выравниванием постоянно
Стили текста
Фигма не первая, кто это внедряет. Божественный Indesign в этом плане вне конкуренции, но я никогда не приму его в качестве программы для веб-дизайна, сколько бы ни зудели и умничали аксакалы российской веб-индустрии. Не для того он создан. Затем и Фотошоп ввёл стили текста. Но эта убогая функция в нём так и осталась убогой функцией. Работает не пойми как, медлительная до безобразия. Попробуй изменить стиль — и компьютер подвисает, тяжело пережёвывая макет. Я пару раз попробовал и бросил.
В Фигме работа со стилями быстрая и удобная. Прописал всю типографику, затем в течение нескольких секунд любые изменения применяются сразу на куче макетов и объектов.
Пример набора стилей
Копирование стилей объектов
В Фотошопе мне чертовски не хватало нормального копирования и переноса стилей с одного объекта на другой, всё было очень костыльно. В Фигме можно копировать как отдельные свойства (заливку, обводку), так и целиком весь стиль. А можно вообще создать заготовленные стили (так же, как и стили текста) и применять их к любому объекту. Далее достаточно изменить сам стиль, чтобы поменялся внешний вид всех связанных объектов.
Именно такие мелочи и оставляют приятное послевкусие от работы.
Привязки
Привязки — ещё одна функция, которую фигмовцы продвигали с первых версий, и она действительно отличная. Суть в том, чтобы привязать любой элемент к границам фрейма и сохранять его относительную позицию при изменении этих границ. Например, можно «прибить» подвал сайта к нижней границе страницы — и он всегда будет там, какой бы высоты ни был холст. Или оставить логотип в левом верхнем углу, а телефон в верхнем правом, заставить сайдбар тянуться на всю высоту макета, а текст в кнопке всегда быть по центру (и по ширине, и по высоте). В случае адаптивной вёрстки это даёт большую свободу, упрощая многие рутинные действия по изменению положения и размеров блоков.
Работа привязок объектов
Конечно, не всё работает так гладко. Чтобы хорошо овладеть навыком привязки, придётся повозиться, перебирать методом тыка и тестировать. Изменять размеры макеты можно в очень разумных пределах, иначе всё начинает ломаться и сваливаться. Например, изменить макет с ширины 320 px до 480 px можно, Фигма растянет всё красиво. А вот просто сузить макет шириной 1024 px до 768 px (и уж тем более до 320 px) уже не получится, придётся допиливать блоки руками и настраивать новые параметры. Но всё равно: привязка сильно выручает.
Удобство работы со слоями
После Фотошопа и Иллюстратора это просто отдушина. Организовано настолько хорошо, что можно не брать в руки мышь (частично фигмовцы скопировали подход у Скетча). Ты не отвлекаешься на выделение слоёв и их перетаскивание. Переход к дочерним слоям и обратно, переименование, в том числе групповое, перемещение фокуса по дереву слоёв — всё это на кончиках пальцев.
Работа с графикой
Фигма — это ещё и векторный редактор. Примитивы, перо, узлы, кривые Безье — всё есть. Однако в этом плане Фигма даже в подмётки не годится полноценному векторному редактору типа Иллюстратора, Corel Draw или Xara Designer. Для простейших манипуляций или иконок годится, но не более. То же касается и возможностей по цветокоррекции, маскировании объектов, простых операции над векторными объектами.
Но зато Фигма замечательно вставляет векторы из Иллюстратора через буфер обмена, открывает EPS- и SVG-файлы простым перетаскиванием на холст. Фигмовцы — молодцы, постарались, чтобы продукт был всеядным, а переход с других программ — максимально простым. Также Фигма умеет импортировать файлы Скетча. Не идеально, конечно: сложные макеты она открывает не совсем корректно, но это лучше, чем ничего.
Ещё одно: Фигма вставляет PNG-файлы из буфера обмена, сохраняя прозрачность! О, как мне этого не хватало в Фотошопе.
Интерактивные прототипы и анимированные переходы
Фигма пытается охватить всю область прототипирования, поэтому с первых версий тут есть функции интерактивных прототипов, которые стабильно регулярно обрастают новыми фишками. Сейчас это и анимированные переходы между макетами, и фиксация блоков при прокрутке, и возможность сразу посмотреть макет на мобильном телефоне через приложение. (У Фотошопа была отличная функция Device Preview по тому же принципу, но в CC2018 её зачем-то решили вырезать.) В общем, при желании можно соорудить полноценный «живой» прототип. Пусть ей далеко до Axure, но здесь всё сразу и из коробки.
Когда макетов много, схема прототипа превращается в военную карту Второй мировой
Командная работа
Сейчас одновременной работой над файлом никого не удивить, но удобство налицо. Много раз мы садились с менеджером и одновременно начинали накидывать прототипы рядом, на ходу перетягивая друг у друга удачные блоки и решения. Этакий мозговой штурм, который позволял за полчаса получить массу хороших решений. Это на порядок лучше, чем стоящие за спиной и тыкающие карандашом в монитор коллеги.
При этом вполне могло оказываться так, что на соседнем холсте одновременно с нами верстальщик продолжал работать, выверяя размеры и экспортируя элементы.
Комментирование
Доступы к макетам можно открывать не только коллегам, но и клиентам. Можно прямо к черновикам, можно к отдельным страницам в формате презентации. Каждый участник может оставлять комментарии к макетам, которые потом легко удалять по мере их отработки.
Передача разработчикам
Проблемой в веб-дизайне всегда была грамотная передача макетов верстальщикам. Хороший дизайнер учитывает, что всю красоту затем нужно будет сверстать, поэтому львиная доля времени тратилась на подготовку гайдов, по которым должен работать фронтенд. Фотошоп попробовал делать шаги в эту сторону со своим Export as CSS, а у Скетча появился Zepplin. Но настоящая свобода появилась в Фигме. Просто даёшь доступ верстальщику, он ходит по макету, выделяет элементы — и сразу видит параметры, свойства и отступы. Это очень упрощает работу.
Помимо обычного CSS Фигма даёт стили для Android и iOS, а верстальщики свободно могут экспортировать все необходимые графические элементы
Недостатки
Слабые возможности работы с текстом
Не обошлось и без недостатков. Стили в Фигме есть, но работа с типографикой слабая. Невозможно локально прописать межбуквенный интервал, настроить интерлиньяж и межабзацный отступ для одного конкретного абзаца, меняется всё сразу. Мне очень не хватает возможности сделать отрицательный отступ для абзацев, я использовал эту функцию в Фотошопе, чтобы скомпенсировать перенос строк. Попросил фигмовцев, обещали поправить, но уже год как жду. Скорее всего, не внедрят. Но повторюсь, Фигма — не программа для вёрстки книг, а лишь инструмент для веб-прототипирования.
Пример списка в Фотошопе. Обратите внимание на хитрые отступы в панели Paragraph. Они позволяют сохранять единый отступ пунктов списка по отношению к буллетам
Фигма так, к сожалению, не умеет
Обязательное наличие интернета
Онлайновость Фигмы — одновременно и достоинство, и недостаток. Мне как-то приятнее, чтобы файлы были у меня на диске. Иногда бывает так, что работаешь за городом с нестабильным интернетом, не хочется зависеть от обстоятельств. Хотя в принципе можно продолжать работать и при отключившемся интернете, при подключении Фигма синхронизирует изменения, главное — не закрывать макет. Файл с проектом можно сохранить на диск в формате FIG, но для того, чтобы открыть, понадобится сеть.
Некастомизируемые горячие клавиши
Фигма — приложение браузерное (десктопная версия не что иное, как просто оболочка веб-страницы), что сильно ограничивает её интерфейс, его нельзя кастомизировать.
Кроме того, поначалу меня очень расстраивало отсутствие возможности настраивать горячие клавиши. Те, что стоят по умолчанию, порой очень странные после Фотошопа, и не покрывают многих нужных в повседневной работе функций. Проблему я решил с помощью замечательной программы Autohotkey, после этого вопрос больше не возникал.
Плохой алгоритм экспорта
Экспорт SVG-файлов (иконки, например) пока ещё работает так себе, код на выходе довольно грязный, и весят такие файлы на порядок больше. Приходится пересохранять через Иллюстратор, лучше него пока никто не оптимизирует.
Экспортировать растровую графику тоже не всегда получается хорошо, нет фотошопной гибкости в настройке качества экспорта. Я попробовал использовать Фигму для дизайна наборов баннеров Гугла и Яндекс и столкнулся с тем, что не могу контролировать вес файлов на выходе, из-за чего баннерные сети заворачивали мои кампании.
Отсутствие расширяемости
Крутость продуктов Адоби и Скетча в расширяемости: ты можешь дописать скрипты и добавить плагины, тем самым восполнив недостаток какой-то функции. Фигме этого не хватает. В 2018 году фигмовцы дали в открытый доступ API. Сначала я порадовался, решив, что теперь-то народные умельцы завалят сеть скриптами и плюшками, но прошло полгода, а ничего революционного не произошло, пара вялых дополнений в виде тёмной темы и полуавтоматического экспорта гайда стилей. Как выяснилось, API оказался довольно куцым, с ним многого не наделаешь.
Вывод
Тем не менее Фигма — великолепная программа. Даже будь она платной, покупка однозначно оправдала бы себя. Фигма никогда не заменит ни Фотошоп, ни Иллюстратор в качестве графического редактора, она не для того. С монстрами прототипирования типа Axure Фигме тягаться сложно, но она выигрывает своей универсальностью и возможностью нарисовать полноценный сайт.
При этом Фигма обойдёт Скетч из-за его узколобой макофильности, а Adobe XD всегда останется позади (сейчас это хилый уродец, появившийся на год раньше Фигмы, но до сих пор едва научившийся дышать).
Для меня переход с Фотошопа на Фигму — это громадный шаг вперёд, многократно ускоривший и упростивший работу над проектами. Фигмовцы постоянно трудятся, внося всё новые и новые фишки. Возможно, к моменту выхода этой статьи появится что-то новое. Однозначно рекомендую всем дизайнерам, связанным с проектированием сайтов и интерфейсов.