Существует множество графических редакторов для дизайнеров: Photoshop, Adobe XD, Sketch, Canva и т. д. Среди них выделяется Figma (Фигма) ― один из самых популярных и удобных продуктов для UX/UI-дизайна. В ней можно проектировать прототипы и работать командой в онлайн-формате. Если вы дизайнер, рекомендуем хотя бы на базовом уровне освоить Фигму.
В этом гайде мы расскажем вам, что такое Figma, какие у неё возможности и кому она может пригодиться. После того, как прочитаете нашу статью, вы разберётесь, как работать с Figma.
Что такое Figma
Figma ― графический кроссплатформенный онлайн-редактор. Он предназначен в основном для веб-разработчиков и дизайнеров интерфейсов. Через два блока мы расскажем, кто ещё может пользоваться редактором.
Figma можно скачать на компьютер или работать в браузере. Главное преимущество этого редактора ― возможность совместной работы над проектом. Все данные хранятся в облаке, поэтому можно работать над макетами без скачивания.
В Figma можно создавать:
- прототипы сайтов и приложений,
- векторные иллюстрации,
- составляющие интерфейса ― кнопки, иконки и др.
Существует ли Figma на русском языке
Её не существует. Не пытайтесь найти версию на русском языке. Скорее всего, файлы на сайтах с такими заголовками заражены. Вы скачаете вредоносную программу и поймаете вирус на компьютер.
Не переживайте, если не знаете английского. У сервиса дружественный интерфейс ― вы поймёте, куда нажимать. Плюс при регистрации вас ждет небольшое обучение: 6 всплывающих подсказок, которые сориентируют вас.
Чем Figma отличается от Photoshop
До появления Figma самым популярным инструментом для работы у дизайнеров был Photoshop. Но у него было достаточно минусов, чтобы при появлении нового сервиса разработчики и дизайнеры интерфейсов перешли в Figma.
Что есть в Figma и чего нет в Photoshop:
- онлайн-доступ,
- есть бесплатный тариф,
- возможность командной работы над проектом,
- можно экспортировать отдельные элементы,
- единая система шрифтов Google Fonts,
- можно демонстрировать проект заказчику в программе,
- возможность импортировать файлы в формате Sketch,
- кроссплатформенность ― можно работать с любого устройства и из любой операционной системы,
- можно дать онлайн-доступ клиенту или руководителю для наблюдения,
- можно оставлять комментарии,
- есть техподдержка.
Photoshop и Figma предназначены для решения разных задач. Photoshop больше подходит для работы над дизайном, а Figma — для создания макетов и прототипов.
В каких профессиях может потребоваться работа с Figma
Выше мы уже сказали, что в программе Фигма в основном работают дизайнеры интерфейсов и веб-разработчики. Но есть ещё несколько профессий, которым тоже будет удобно вести проекты в этом сервисе.
Кому нужна Figma:
- веб-дизайнерам,
- проектировщикам,
- дизайнерам интерфейсов,
- UX-исследователям,
- аналитикам,
- маркетологам,
- руководителям проектов.
Преимущества и недостатки
Фигма — это относительно новый редактор, он активно обновляется и совершенствуется.
Преимущества:
- просто освоить ― интуитивно понятно, как начать работу,
- работает быстро ― облачный сервис не задействует мощность компьютера, поэтому работа с несколькими холстами не затормаживает компьютер,
- автоматическое сохранение версий ― шанс потерять несохранённую работу сводится к нулю,
- контроль версий ― сервис делает автокопии,
- изменения в исходной копии вносятся во все остальные автоматически,
- выравнивание и привязка объектов в фрейме,
- просто работать со стилями текста,
- командная работа и комментирование,
- удобно демонстрировать макет заказчику ― есть функция встроенной презентации.
Недостатки:
- нужен интернет,
- нельзя кастомизировать горячие клавиши,
- интерфейс только на английском языке,
- ограниченность времени хранения и числа макетов в базовой версии.
Инструменты и возможности Figma
Разберёмся, как работать в Фигме, какие инструменты и возможности у неё есть.
Многопользовательский режим редактирования
До появления Figma не было доступного всем инструмента, который обеспечивал бы общий доступ к проекту. Для MacOS создали Sketch, а для других операционных систем решения не существовало.
Начать работу в командном режиме просто.
Облачные технологии дают возможность совместного доступа к проекту. Если вам нужны макеты на компьютере, вы можете их скачать в расширении fig.
Облачный сервер хранения файлов
Figma — это онлайн-редактор. У него есть своё облачное хранилище, где хранятся все файлы, и пользователь работает над ними. Фигма практически не задействует мощности вашего компьютера ― вы можете работать с огромным количеством холстов без потери скорости.
Компоненты
Удобный раздел для тех, кто работает со множеством мелких повторяющихся элементов. С его помощью можно превратить группу объектов в компонент и внести изменения кликом мышки. Например, эту функцию можно использовать, если надо изменить цвет кнопок во всём макете.
Чтобы объекты и группы объектов на разных артбордах стали компонентом, кликните на объект, нажмите на значок сверху и создайте копии. Теперь все изменения будут отражаться одновременно на всех фреймах.
Компоненты выделяются фиолетовым цветом, а родительский помечается ромбиком сверху:
Фреймы
Фреймы (артборд, холст) — это рабочие пространства. Чтобы вызвать панель фреймов, нажмите F. Есть библиотека предустановленных артбордов.
Можно сочетать рядом несколько фреймов, как на примере ниже:
Вы можете создать свой авторский фрейм: поставьте курсор на свободное место, нажмите и растяните прямоугольник до нужного размера.
Сетки
Сетка во фрейме — это направляющие, которые помогают дизайнеру в Figma ровно размещать объекты и упорядочивать их. Частота линий, цвет и прозрачность могут быть разными ― они настраиваются в окне при нажатии.
Чтобы настроить сетку, нажмите «+» рядом с надписью Layout Grid:
По умолчанию установится значение расстояния между линиями 10 px. Задайте необходимую ширину сетки:
Задайте количество колонок, их цвет и прозрачность. Вы можете настроить тип сетки, выравнивание, отступы ― кликните по стрелочке рядом с Grid.
Если вы работаете с мелкими деталями, вам может понадобиться дополнительная разметка. Чтобы добавить нужные линии, щёлкните ещё раз на «+».
Отличия десктопной версии Figma от браузерной
Несмотря на всю схожесть версий, у скачиваемой Фигмы есть некоторые преимущества перед браузерной версией.
Отличия десктопной версии:
- можно работать офлайн ― изменения синхронизируются, когда появится интернет,
- работают горячие клавиши,
- есть вкладки внутри программы,
- загружает макеты и его элементы быстрее,
- можно настроить папку загрузки файлов,
- можно разрабатывать плагины,
- предустановленное расширение для шрифтов.
Если вы хотите посмотреть макет, провести презентацию, показать макет в режиме прототипирования, то браузерной версии будет достаточно. Для работы же лучше скачать десктопную версию.
Работа с изображениями
Изображения в Фигме — это не отдельные объекты, а заливка фрейма.
Как добавить изображение:
- перетащить с рабочего стола на фрейм,
- добавить через File,
- использовать инструмент Place Image.
Изображение загружается с автоматическим параметром заполнения.
Параметры заливки изображений:
- Fill ― изображение заполняет фрейм без учёта пропорций,
- Fit ― изображение должно отразиться полностью, но при несовпадении пропорций и фрейма появляется пустое место или картинка обрезается,
- Crop ― изображение можно приблизить только нужным кусочком, а лишние части обрезать,
- Tile ― изображением можно «замостить» фрейм.
Работа со стилями и цветами
В Figma удобно работать с изображениями. Вы можете отрегулировать цвета, яркость отдельных частей рисунка и общую яркость, контраст, насыщенность.
Стили градиентов:
- linear,
- radial,
- angular,
- diamond.
Чтобы добавить градиент на рисунок, кликните на «+» в разделе Fill и выберите подходящий:
Регулируйте настройки градиента: подбирайте нужный цвет, интенсивность, количество точек градиента и т. д.
Вы можете создать свой фирменный стиль или воспользоваться уже готовыми вариантами из библиотеки. Нажмите на кнопку, которая показана на скрине:
В этом списке вы можете выбрать из уже созданных стилей или собрать свой вариант. Нажмите «+» и назовите свой стиль. Так он сохранится у вас в библиотеке:
Слои и группы
Слои — это содержимое фрейма: картинки, текст, видео. Принцип работы со слоями в Фигме очень похож на Photoshop.
Слои располагаются слева от основной рабочей области. Вы можете создавать группы, менять порядок элементов.
Чтобы объединить элементы внутри фрейма, нажмите клавиши Ctrl + Alt + G на Windows и Cmd + Opt + G на MacOS.
Чтобы разгруппировать объекты, нажмите Ctrl + Shift + G на Windows и Cmd + Shift + G на MacOS.
Типографика
Figma работает с Google шрифтами ― они унифицированы и не слетают при передаче макета. Но если вы хотите использовать свои варианты, установите плагин Font Helper для десктопной версии и используйте шрифты с вашего компьютера.
Нажмите на букву Т в верхней панели сервиса, чтобы создать текст. Все настройки вы найдёте справа от рабочей поверхности:
Установка плагинов
У Figma есть библиотека плагинов, которые можно установить бесплатно. Они помогают оптимизировать работу дизайнера.
В разделе Community кликните на Plugins и прейдёте в раздел Explore:
В настройках профиля вы можете посмотреть, какие плагины у вас уже установлены.
Тарифы Figma
У Фигмы есть 3 тарифа, расскажем подробнее о каждом.
Starter
Это базовый бесплатный тариф. Создатели Фигмы рекомендуют его использовать для личных целей и теста сервиса командой.
В тариф входят:
- неограниченное количество файлов в черновиках,
- неограниченное количество зрителей и комментаторов,
- неограниченное количество редакторов в 3 командных файлах,
- 1 командный проект,
- 30-дневная история версий,
- неограниченное облачное хранилище.
Professional
На этом тарифе у пользователей появляется больше возможностей. Он стоит 12$ с человека, если оплатить год использования, и 15$ с человека, если платить помесячно. Этот тариф предоставляется бесплатно на 2 года студентам и преподавателям направления дизайн.
Чтобы получить бесплатную версию Фигмы, надо зайти на сайт, заполнить небольшую анкету и ждать инструкций по почте.
В тариф входят:
- неограниченное количество проектов,
- неограниченная история версий,
- частные проекты только по приглашениям,
- совместно используемые командные библиотеки.
Organization
Этот тариф предназначен для корпоративного использования сервиса. Ежемесячная стоимость — 45$ с человека, подписка оплачивается сразу на год.
В тариф входят:
- неограниченное количество проектов,
- неограниченная история версий,
- частные проекты только по приглашениям,
- совместно используемые командные библиотеки,
- системы проектирования для всей организации,
- централизованные команды,
- частные плагины,
- администрирование плагина,
- общие шрифты,
- sso + повышенная безопасность,
- аналитика системы проектирования.
Системные требования Figma
Параметры запуска и установки десктопной версии Figma зависят от операционной системы. Скорее всего, ваш компьютер спокойно потянет Figma.
Минимальные требования к операционной системе:
- Windows не старше 8.1,
- MacOS не старше 10.10 (Yosemite),
- Linux ― любая версия.
Для тех, кто работает в Фигме из браузера, надо следить за обновлениями приложения.
Минимальные версии браузеров для корректной работы:
- Google Chrome 58+,
- Mozilla FireFox 57+,
- Safari 11+.
Чтобы Фигма стабильно работала, на вашем компьютере должна стоять видеокарта не старше 2012 года. На современные модели такие не ставят.
Как скачать программу Figma на компьютер
У Figma есть несколько вариантов работы ― не обязательно открывать её только в браузере. Если вы, например, путаетесь во множестве вкладок, то версия для компьютера облегчит вашу жизнь.
Зайдите на сайт программы Figma в раздел Downloads. Нажмите на нужную версию согласно операционной системе и следуйте инструкциям установщика.
Если вы часто работаете с телефона или планшета, можете скачать приложение Figma Mirror для мобильных устройств.
Как пользоваться Figma
Начать работать в Figma не сложно. Расскажем, что нужно сделать для старта.
Регистрация или авторизация
Перед тем как вы сделаете свой первый проект, вам надо войти в свой аккаунт или создать его.
Нажмите кнопку Sign up.
Откроется окно, в котором вам предложат войти с помощью вашего аккаунта Google или использовать логин и пароль заранее созданного профиля. Если вы уже есть в Figma, залогиньтесь. Если вы ещё не зарегистрированы, надо создать аккаунт.
Создание нового файла
Чтобы создать новый файл, нажмите на кнопку в правом верхнем углу:
После этого откроется основная рабочая область. Выберите необходимые размеры фреймов, расположите их на столе и начинайте работать.
Разработка прототипов в Figma
Прототип — это макет сайта или приложения. В Figma можно наглядно представить, как люди будут взаимодействовать с продуктом. Дизайнер отрисовывает экраны, а затем добавляет связи между ними. Благодаря предустановленным размерам экранов устройств, можно сразу оценить прототип.
Скрин прототипа с ютуб-канала Веб-дизайн & Александр Решетников
В этой статье мы рассказали всё самое важное и полезное о Фигме. Этот сервис легко освоить новичку, потому что у него дружественный интерфейс. Это удобный онлайн-инструмент для совместной работы над проектом, который сделал проще жизнь разработчиков и дизайнеров. Если вам интересно развиваться в этом направлении, то без Figma не обойтись.
