Дизайн-тулы, с которыми мы работаем - Figma. – designstudio.AG

Дизайн-тулы, с которыми мы работаем - Figma.

На сегодняшний момент инструментов для дизайна более, чем достаточно. Наши дизайнеры выбирают для себя тот инструментарий, с которым им максимально комфортно работать. Кто-то оставил в фаворитах Photoshop, кому-то запал в душу скетч, а кто-то переходит на Abstract.

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

С Figma я работаю с первой версии. После перехода с Adobe Photoshop и Adobe Illustrator это было настоящим открытием для меня.

Я считаю это отличным конкурентом для Sketch и во многих моментах лучше, чем Sketch. 

Главные плюсы Figma

Простое знакомство и «безболезненное» быстрое обучение Figma.

Когда ты работаешь над большими проектами или у тебя много задач одновременно, ты начинаешь ценить свое время, время команды и заказчика. Figma стала настоящим глотком свежего воздуха для меня в плане быстрого освоения Figma, как инструмента для работы. Когда ты работаешь с Adobe или Sketch ты не замечаешь высокой загруженности программы Adobe или неудобство интерфейса Sketch. Осознаешь это только когда, когда тебе нужно работать с очень большим проектом, или нужно закончить какую-либо задачу за короткое время., выучить что-то новое или повторить какой-то трюк или решение.

Figma экономит твое время и заботиться о твоих нервах в этом плане 🙂

Чтобы познакомиться с Figma и ощущать себя комфортно в этом инструменте, мне понадобилась пара часов, в течении нескольких дней я полностью разобралась во всех возможностях интерфейса. Также не могу не заметить тот факт, что когда фигма выпускает обновление или добавляет новую фичу, она делает это очень мягко и это не напрягает тебя.

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

Веб-версия продукта.

Кроме десктоп-версии, есть и веб-версия программы. Незаменимая вещь для членов команды, которые не являются дизайнерами. Не обязательно нужно скачивать приложение из интернета и не нужно экспортировать отдельно png файлы для того, чтобы продемонстрировать дизайнерские решения команде. Нужно просто расшарить ссылку на проект и твою работу в онлайн режиме увидят те, кого ты указал в блоке «Экспорт по ссылке».

Есть автосохранение.

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

Figma все сделает за тебя, ее не надо об этом просить, она просто сохранит все твои изменения без лишних вопросов и всплывающих окон.

Единственное, необходимо подключиться к интернету.

Есть приложение на мобильный телефон Figma Mirror.

Идеальнее решение для дизайнеров, который разрабатывают мобильные приложения или мобильные версии сайтов. В любой момент, находясь рядом со своим компьютером, ты включаешь данное приложение у себя на телефоне, и по wifi оно передает данные с компьютера на твой телефон, и ты можешь видеть все свои изменения в реальном времени, на реальном девайсе и определить, удобно ли то или иное решение смотрится на экране телефона. Больше никаких сохраненных png, airdrop и сторонних приложений, все делается за один клик по иконке приложения в телефоне.

Приложение бесплатное.

Кстати, есть бесплатная версия.

Никаких trial-версий и использования программы бесплатно только первые 30 дней. Теперь ты можешь пользоваться Figma, если у тебя нет средств на оплату софта, например, если ты студент. Изучать Figma и познакомиться с ней гораздо легче и приятней, когда ты знаешь, что ты не ограничен по времени.

Единственное, будут небольшие трудности с командной работой, но это решается покупкой версии для компании или для команды людей. 

Командная работа.

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

Комментарии внутри макета.

Если вы устали писать комментарии в отдельных письмах, в задачах, боитесь, что дизайнер вовремя не увидит ваши правки и работа затянется, то вы решите эту проблему с помощью Figma.

В макете есть возможность оставлять комментарии в том, месте, в котором вам это нужно. Больше не нужно подходить и показывать пальцем в монитор или рисовать неопрятные, некрасивые красные круги на скринах. Теперь ваши комментарии будут красиво оформлены ровно в том месте макета, на котором вы захотите оставить комментарий. 

Интеграция с двумя платформами: Mac, Windows.

Figma не ограничивается одной платформой, и как мы написали выше, работает еще и в веб-версии, что очень удобно для корпораций, который работают только с windows или mac, linux т.д.

Удобное интуитивное выравнивание.

Тут ребята из Figma очень постарались сделать эту функцию максимально полезной, а главное, она не мешает в работе, как во многих инструментах, а все-таки очень помогает.

Также удобное выравнивание одной кнопкой. В Photoshop и Illustrator всегда была проблема с выравниванием. Приходилось делать вручную или пользоваться сторонними скриптами. Берёшь элементы, нажимаешь кнопку — и готово: объекты разместились на заданном расстоянии, которое меняется на ходу. Более того, можно взять и поменять местами выровненные блоки простым перетаскиванием с сохранением отступов.

А ещё тут есть отличные функции Pack Horizontal и Pack Vertical, я её не встречала ни в одном редакторе, она позволяет быстро скомпоновать элементы вплотную друг к другу.



Компоненты и командная библиотека.

Один из способов ускорить создание продукта – унификация и стандартизация.

Это приводит к логичному решению внедрить систему компонентов: атомарную, на БЭМе или ещё какую. Figma это поощряет на этапе дизайна инструментами Components, Сonstraints, Library и Team Library. Появились эти штуки несколько месяцев как и каждый раз ускоряли нашу работу. В Sketch есть нечто подобное, однако лишь с помощью внешних инструментов, либо не такие мощные.

Встроенные Google fonts.

Так же в Figma есть встроенная библиотека шрифтов от Google (помимо ваших установленных шрифтов), что невероятно упрощает работу с подбором шрифтов в дизайне. Необходимые шрифты всегда под рукой, что очень удобно. Больше не нужно скачивать шрифты, долго их устанавливать, можно просто выбрать любой из библиотеки, которая, кстати, немаленькая.

Стили текста.

Фигма не первая, кто это внедряет.

В Фигме работа со стилями быстрая и удобная. Прописал всю типографику, затем в течение нескольких секунд любые изменения применяются сразу на куче макетов и объектов.

Копирование стилей объектов.

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

Именно такие мелочи и оставляют приятное послевкусие от работы. 


Привязки.

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

Интерактивные прототипы и анимированные переходы.

Прототипирование в Figma — это и анимированные переходы между макетами, и фиксация блоков при прокрутке. Есть возможность добавления самых разных анимационных переходов, для того, чтобы делать сложные прототипы. Также есть возможность в режиме «Просмотр» вставлять сиво макет в девайс (мок-ап) и смотреть, как это будет выглядеть в девайсе. P.S Очень удобно для заказчика.

Экспорт макета.

Так же не могу оставить без внимания еще одну функцию Figma — это экспорт макета в Zeplin, Avocode и Dribbble. Не смотря на то, что в Figma есть вкладка «Code» для разработчиков, чтобы они могли увидеть параметры внутри макета в удобном для себя виде, также тут есть интеграция в Zeplin, Avocode и Dribbble. Все это делается в Figma за пару кликов.

Но, не все идеально и Figma, как и любой продукт, имеет свои минусы, но их не так много:

Для работы необходим интернет.

Поскольку Figma это веб-приложение в браузере, без интернета она не работает, ведь виртуальные файлы хранятся в облаке, и туда же постоянно сохраняются.

Ломает сложный вектор при импорте-экспорте.

Иногда встречаются ситуации, когда сложная и нагруженная SVG импортируется в Figma некорректно. Для этого приходиться импортировать ее как png. Впрочем, такое случается в разных инструментах, таких, как Sketch и Adobe Illustrator.



Недостаточная иерархия файлов..

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


Нет интеграции с Craft и Abstract.

Для некоторых разработчиков и дизайнеров это незаменимые и удобные инструменты, но Figma не позволяет пока что работу с такими инструментами.

Обратная связь.






Ваше письмо было успешно отправлено. Мы скоро свяжемся
Отправить еще

Мы всегда на связи

Наша политика