Фигма для веб дизайна - главные отличия от других графических редакторов

Фигма — относительно новая бесплатная программа для веб дизайнера, который знает цену своему времени и идёт в ногу с тем самым временем. 

1. Figma программа, которая работает в браузере

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

Веб приложение - это круто в плане того, что можно использовать Figma на любой платформе (Windows, Mac, Linux). Для первых двух, даже есть десктопная версия, которая по сути ничем не отличается от браузерной.

2. Фигма работает в облаке

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

Вы просто делаете работу, как дизайнер, закрываете браузер, а всё уже и так сохранено, и ничего не пропадет никогда.

Это значительно ускоряет работу, особенно для больших команд.

3. Командная работа в Figma

Раз уж заговорили о больших командах нужно сказать, что Фигма — это как раз то, что им нужно. Больше никаких костылей, типа Zeppelin и тому подобное — все работает из одного клиента. Не нужно всем участникам проекта иметь рабочий Mac.

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

4. Чат

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

5. Контроль версии

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

Контроль версий работает так же, как и Git, если вы знаете, что это такое. Только работает он намного проще и приятнее.

А если, с Гит не знакомы, то Полное руководство GIT для начинающих https://beonmax.com/courses/git/ вы также найдёте на beONmax. 

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

6. Constraints

И в Sketch такое есть, только кто нам скажет, когда это появилось — до выхода Фигма или после?)) Да ладно?! Неужели после?)) в общем, constraints.

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

То есть, при масштабировании родителя все его внутренние части будут находиться в чётко обозначенном месте.

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

7. Сетка в Фигма

Модульная сетка в Фигма — это нечто прекрасное. Это не просто направляющие, по которым вы можете выравнивать блоки сайта — это настоящий супер-инструмент!

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

Сетка создается только внутри фрейма, а вот фрейм можно создать и внутри другого фрейма, причем количество вложенностей не ограничено и для каждого фрейма можно создавать свою сетку.

8. Компоненты в Figma

Это не новинка, в Скетче такое уже давно есть и называется там символами. В чем-то они похожи, а в чем-то и отличаются.

Так при создании нового компонента в Фигма, он (компонент) не перемещается на отдельный артборд, а остается там, где и был создан. Создавая дочерние элементы компонента, вы не создаёте его копии, как таковые, а делаете нечто иное.

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

Но есть масса способов, которые лечат эту проблему на этапе создания самого компонента. Об этом мы поговорим на уроке про компоненты (раздел Профессиональные инструменты Figma) - смотрите полную программу курса Figma для Веб дизайнера - с нуля до профессионала https://beonmax.com/courses/figma/.

9. Шрифты гугла всегда с вами

Потому, что это веб приложение, и оно всегда онлайн и с ним всегда вся библиотека гугла. То есть все, что есть на гугл.фонт все есть и у вас в Фигма.

Это просто прекрасно — ничего не нужно докачивать. Но есть и минус — посмотреть в динамике изменение шрифта для подбора не получится — нужно обязательно его выбрать, чтобы он применился. Так думают неопытные пользователи.

Опытные используют для лечения такой проблемы плагин. О плагинах и том как их использовать мы поговорим в соответствующем уроке - (раздел Профессиональные инструменты Figma) - смотрите полную программу курса Figma для Веб дизайнера - с нуля до профессионала https://beonmax.com/courses/figma/.

10. По мелочи

- Svg и PDF экспорт, причем очень быстрый экспорт в один клик

- Интеграция с avocode, zeppelin, dribble

- Живой чат поддержки. Воистину живой — ответ 2-3 часа

- Фигма бесплатная для отдельных пользователей и для небольших групп на два редактора

А теперь немного о “плохом”

Зависимость от сети. Фигма не работает без интернета, равно, как и ваш браузер

Маленькое комьюнити. Инструмент довольно новый, и информации о том что и как тут не очень много. В материалах к курсу по Фигма вы найдёте ссылки на самые популярные в рунете ресурсы, чаты и сайты по Figma, и станешь полноценным членом этого сообщества.


Все больше дизайнеров и компаний по всему миру переходят на Figma.

Обо всех этих инструментах максимально подробно идет речь в курсе Figma для Веб дизайнера - с нуля до профессионала https://beonmax.com/courses/figma/.