Фигма программа для дизайна как работать

Для дизайнеров в Интернете представлено много программ, но именно работа в Figma особенно популярна. Это бесплатный сервис, который прост в установке, а в его интерфейсе разберется даже новичок. Подойдет не только для веб-разработчиков и дизайнеров, но и для маркетологов, чтобы создавать инфографику.

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

Возможности сервиса Figma

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

Три фишки FIGMA

Сервис пользуется успехом не просто так. От многих графических редакторов Figma отличается тем, что:

• Имеет бесплатные функции. Сервисом можно пользоваться, но ряд возможностей будет ограничен: например, количество макетов, время, в течение которого будут храниться проекты и прочее.
• Функционал встроенных компонентов. Например, вы сделали несколько макетов в одном стиле, но в последний момент решили изменить какую-то деталь, которая повторяется во всех них. В других редакторах эту деталь нужно менять вручную в каждом макете. В Figma работа будет упрощенной: если меняется что-то в стиле одного элемента, то меняются все элементы, созданные в этом стиле.
• Возможность интеграции с другими программами. Можно переносить макеты, например, из Sketch или Zeplin, без искажения графиков, изображений и шрифтов. Также можно подключиться к корпоративному мессенджеру Slack, пространству Confluence и т. д.
• Возможность работы в браузере или в приложении. Для работы в Figma можно использовать веб-формат или установленное приложение, которое можно скачать с официального сайта. Просто регистрируете профиль и начинаете работать.
• Возможность командной работы. Это одновременно и преимущество сервиса: совместная работа в едином артборде.

Для вас подарок! В свободном доступе до 18.06 —>
Скачайте ТОП-10
бесплатных нейросетей
для дизайнера
Помогут находить референсы и изображения в 2 раза быстрее
Чтобы получить подарок, заполните информацию в открывшемся окне

• Гибкость фреймов. Они легко масштабируются, но есть и фиксированные размеры для разных устройств: ПК, планшет, телефон и т. д. При этом не нужно запоминать параметры – выбираете необходимый тип девайса и работаете в нем.
• Наличие истории предыдущих версий. Программа хранит ранние версии проекта 30 дней. Эта особенность программы здорово выручает, если возникает необходимость в просмотре прежних вариантов файла. Процесс сохранения автоматизирован: как только вносится изменение, происходит сохранение. Для удобства поиска каждой из версии можно присвоить название и описание.
• Облачный сервер хранения. Благодаря этому отпадает вопрос, как сохранить работу в Figma. Не нужно скачивать макет каждый раз после редактирования – файлы хранятся в облаке программы.

Если есть потребность в более расширенном функционале, то можно оформить платную подписку.

Figma с нуля за 1 час! (уроки веб дизайна для начинающих)

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

Системные требования Figma

Для работы в приложении нужно будет обратить внимание на параметры ОС. Но большинство ПК вполне совместимы с данной программой.

ОС должна отвечать минимальным требованиям:

• Windows младше 8.1;
• MacOS младше 10.10 (Yosemite);
• Linux ― версия не имеет значения.

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

Для исправной работы браузер должен иметь минимальные версии:

• версии Google Chrome старше 58;
• версии Mozilla FireFox старше 57;
• версии Safari старше 11.

Для бесперебойной работы Figma потребуется видеокарта не старше 2012 года. На современных моделях ПК такие уже не устанавливают.

Первые шаги работы в Figma

Итак, с чего начать работу в Figma?

Шаг 1. Регистрируемся:

• переходим на сайт figma.com;
• активируем кнопку Sign up;
• регистрируемся с помощью Google-аккаунт или e-mail.

Узнай, какие
ИТ-профессии входят
в ТОП-30 с доходом от 200 000 ₽/мес

Команда GeekBrains совместно с международными специалистами по развитию карьеры подготовили материалы, которые помогут вам начать путь к профессии мечты.

Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!

Скачивайте и используйте уже сегодня:

Александр Сагун
Эксперт GeekBrains

Топ-30 самых востребованных и высокооплачиваемых профессий 2023

Поможет разобраться в актуальной ситуации на рынке труда

Подборка 50+ ресурсов об IT-сфере

Только лучшие телеграм-каналы, каналы Youtube, подкасты, форумы и многое другое для того, чтобы узнавать новое про IT

ТОП 50+ сервисов и приложений от Geekbrains

Безопасные и надежные программы для работы в наши дни

Скачать подборку бесплатно
Уже скачали 21232

Далее скачиваем локальную версию приложения.

Шаг 2. Загружаем приложение:

• переходим на сайт figma.com;
• по пути Products → Downloads находим Desktop App;
• ориентируясь на ОС своего ПК, скачиваем нужный дистрибутив;
• не забываем дополнительно скачать шрифты из раздела Font Installers;
• производим запуск обоих установочных файлов;
• также скачиваем бесплатную версию программы Figma Mirror (Android или iOS) — это поможет нам понять, как будет смотреться наш дизайн на телефоне.

Теперь нужно авторизироваться в приложении, чтобы начать работу.

В верхнем углу правой части экрана находится значок +, на который нужно нажать, чтобы создать новый макет. Далее следует найти соответствующий формат будущего проекта и нажать на кнопку «Create file». При выборе пункта «Blank canvas» будет открыто стартовое рабочее поле.

Если у вас есть проекты, созданные в Sketch, то можете смело импортировать их в Figma – все элементы останутся в первоначальном виде. Причем импорт можно сделать путем простого перетаскивания файла из одного приложения в другое. Также доступен перенос отдельных элементов векторной графики формата SVG.

Дальнейшая работа в Figma

Теперь рассмотрим основы работы в Figma, а именно настройку стилей, фреймов, слоев и т. д.

Чтобы создать макет, нужно выделить определенный слой. Далее в разделе «Layout grid», находящемся по правую сторону в поле «Design», выбрать необходимые размерные параметры, уровень прозрачности и цветовое решение. Можно изменить формат сетки, оставив только столбцы или строки. Можно работать сразу с несколькими макетами, переключаясь между ними с помощью сочетания клавиш Ctrl + G.

Чтобы наглядно увидеть, как будет отображаться разработанный интерфейс на экранах с различным разрешением, нужно обратиться к разделу «Prototype». Далее в подпункте «Device» выбрать требуемый тип устройства и ознакомиться с результатом.

При желании можно поменять цвет деталей и изменить ориентацию положения (например, с горизонтального на вертикальное). Когда все настройки будут закончены, нужно активировать кнопку «Present» (находится слева от «Share»), чтобы увидеть качество отображения макета в указанном устройстве.

Только до 15.06
Скачай подборку тестов, чтобы определить свои самые конкурентные скиллы
Список документов:

Тест на определение компетенций

Чек-лист «Как избежать обмана при трудоустройстве»

Инструкция по выходу из выгорания

Чтобы зарегистрироваться на бесплатный интенсив и получить в подарок подборку файлов от GeekBrains, заполните информацию в открывшемся окне

Изображения легко интегрируются из различных ресурсов, например, из памяти ПК или копировать из Интернета. Главное — помнить о соблюдении авторских прав.

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

Вы можете сделать свою собственную библиотеку элементов из созданных ранее объектов, добавив их в раздел «Компоненты». То есть не нужно каждый раз создавать элемент заново. Для перемещения объекта в библиотеку его нужно выделить и одновременно зажать клавиши Ctrl + Alt + K – это преобразует объект в компонент.

Если вы начинаете редактировать детали основного компонента, то автоматически будут корректироваться все существующие копии. Чтобы найти ранее добавленный в библиотеку компонент, нужно обратиться к вкладке «Assets» в левой панели.

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

Робота аналогично работе с Photoshop. Есть возможность конструировать отдельные группы, помещать отдельные детали на передний или задний план. Нужные функции находятся в разделе «Layers», распложенного на панели в левой части интерфейса программы.

Рассмотрим кратко инструкцию по работе с Figma в составе команды.

При регистрации в программе происходит автоматическое формирование команды. При желании ее можно переименовать, щелкнув RButton мыши по нужному объекту и активировав функцию «Rename». Аналогичным путем можно удалить существующую команду. Если нужно создать новую группу для совместной работы, то необходимо кликнуть на «Create new team» в нижней части панели слева.

Популярные статьи

Чтобы добавить нового члена группы, нужно выбрать требуемую команду и нажать в правом верхнем углу на кнопку «Invite». Далее остается указать имя гостя, разрешить ему доступ к просмотру или редактированию и отправить приглашение.

Можно пойти и другим путем: в рабочем поле проекта, над которым проводится совместная работа, нужно нажать кнопку «Share». Затем остается настроить права и отправить приглашение. А еще можно просто скопировать и отправить ссылку тому, кого хотите пригласить.

Работа с текстом в Figma имеет много возможностей. В сервисе по умолчанию установлены шрифты Google. Если вы пользуетесь десктопной версией программы, то можете скачать и установить плагин Font Helper – это даст возможность пользоваться локальными шрифтами с вашего ПК.

Для создания текстового объекта нажмите в панели слева инструмент «Text» или активируйте кнопку с буквой «Т» в левой верхней части интерфейса. Все те параметры, которые можно менять и настраивать, будут отображаться в окне справа (цвет, тип, размер, стиль шрифта и т. д.).

Программа предусматривает установку плагинов, необходимых для повышения эффективности работы. Информацию о списке всех существующих плагинов можно найти на главной странице «Community» → «Explore», а установленные можно увидеть в разделе «Plugins» в настройках профиля.

Для просмотра параметров фрейма нажмите кнопку «F» – в правой части экрана отобразится панель с вариациями артбордов. В рамках одного проекта возможно выложить отдельно друг от друга несколько разноформатных фреймов.

При необходимости можно задать точные размеры артборда: нажимаете «F», далее в рабочем поле создаете фрейм, зажав левую кнопку мыши. Чтобы задать размеры, отпускаете левую кнопку.

3 тарифа онлайн-сервиса Figma

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

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

• количество файлов в черновиках не лимитировано;
• нет ограничений по числу зрителей и комментаторов;
• предоставлено три командных файлах с неограниченным числом редакторов;
• можно создать один командный проект;
• срок сохранения истории версий – 30 дней;
• нелимитированное облачное хранилище.

В этом тарифном плане добавлен более расширенный функционал. При оформлении годовой подписки стоимость составит 12$ с одного пользователя, при помесячной оплате – 15$ с одного пользователя. Для студентов и преподавателей учебных заведений дизайнерского направления этот тариф можно оформить бесплатно на два года. Для этого нужно заполнить небольшую анкетную форму на сайте и ждать ответного письма на e-mail.Тариф включает:

• нелимитированное число проектов;
• срок сохранения историй версий не ограничен;
• участие в частных проектах возможно только по приглашению;
• возможно коллективное использование командных библиотек.

• Тариф Organization

Тариф необходим для корпоративного использования редактора. Оплачивается сразу годовая подписка из расчета 45$ на одного пользователя в месяц.

• число проектов не ограничено;
• срок сохранения историй версий не лимитирован;
• участие в частных проектах только по приглашению;
• коллективное использование командных библиотек;
• системы и инструменты проектирования доступны для всей организации;
• централизованная командная работа;
• доступны частные плагины;
• возможность администрирования плагина;
• общие для всех шрифты;
• SSO-технология с повышенной безопасностью;
• возможность аналитики системы проектирования.

Стоит отдельно отметить, что сервис легок в освоении, поэтому любой новичок может начинать работу в Figma с нуля. Инструментарий программы позволяет реализовывать с командой совместные проекты. Многие разработчики и веб-дизайнеры уже отдали должное Figma. Если и вы планируете развиваться в этом направлении, то обязательно осваивайте программу.

Источник: gb.ru

Что такое Фигма и как в ней работать

Figma — это облачный инструмент для проектирования и прототипирования, который позволяет пользователям создавать и совместно работать над дизайном веб-сайтов, мобильных приложений и других цифровых продуктов. Дизайн-система figma появилась в 2016 году и уже к 2018 набрала огромную популярность среди дизайнеров. Это инструмент на основе браузера, то есть его можно использовать на любом устройстве с подключением к Интернету. Здесь мы расскажем вам, что такое figma.

Подпишитесь на рассылку

Раз в неделю мы будем присылать вам полезные материалы, подборку интересных кейсов и статей.

Возможности и особенности Figma

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

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

Интегрированные компоненты. Если вы создаете несколько объектов в одном стиле, вы можете корректировать их по всему макету, а не изменять каждый по отдельности, как в других графических редакторах. Кроме того, вы можете переносить дизайн из Sketch не теряя шрифты, без искажений в изображениях или векторах. Эту программу можно подключить к другим сервисам, таким как Slack, пространство Confluence и так далее.

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

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

Сохраняется история версий. Все итерации вашей работы с макетом хранятся в Figma 30 дней. За этот срок можно неограниченное количество раз вернуться к любому этапу работы и внести нужные правки. Можно дублировать версии и присваивать им индивидуальные названия. Файл сохраняется автоматом, как только вы внесли последнюю правку.

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

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

Совместная работа. Функции совместной работы Figma в режиме реального времени упрощают совместную работу команд над проектом с возможностью видеть изменения друг друга в режиме реального времени и оставлять комментарии.

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

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

Плагины. Figma имеет надежную экосистему плагинов с широким спектром доступных плагинов для расширения возможностей платформы.

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

В целом, Figma — это мощный инструмент для проектирования и прототипирования, который особенно хорошо подходит для команд и совместных рабочих процессов. Далее мы ответим на типичный вопрос: «фигма как пользоваться».

Figma для дизайнеров

Почему работа в figma привлекает в первую очередь именно дизайнеров? Вот основные причины:

• Очень простой интерфейс, в отличие от Adobe Photoshop или Adobe XD;
• Работа над проектом в команде набирает все большую популярность, а Фигма заточена именно на командную работу;
• Команда может работать, не привязываясь к операционной системе или конкретному компьютеру, главное, чтобы был интернет;
• Можно работать с Google Fonts;
• Можно экспортировать проект в Sketch;
• Отличная система взаимного комментирования и рецензирования внутри команды;
• Оперативная техническая поддержка со стороны Figma.

Недостатки Фигмы

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

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

Отсутствие защиты файлов в бесплатном тарифе. Любой пользователь, которому вы предоставите доступ для просмотра, может внести изменения в макет или скопировать его.

Зависимость от надежности интернет-соединения. В случае обрыва связи, ваша работа может прерваться в любой момент. Чтобы избежать досадных перерывов, прогружайте проект полностью после каждого внесения изменений. Для стабильной работы офлайн лучше использовать десктопное приложение.

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

Тем не менее, какие бы недостатки не содержала фигма, отзывы о программе в целом позитивные.

Начало работы в Фигме

Для начала работы зарегистрируйтесь или авторизуйтесь в figma официальном сайте.Для регистрации нажмите Get Started.

После входа появится рабочее пространство. Нажмите New design file, задайте необходимые параметры. Или импортируйте собственное изображение, нажав на иконку Import file.

Если предпочитаете работать офлайн, зайдите в свой аккаунт и в выпадающем меню выберите Get desktop app. Скачается десктопная версия.

Все, теперь вы можете начать делать новый макет.

Коротко о главном

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

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

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

Для быстрого доступа в к текущим проектам добавьте их в папку Favorites и они всегда будут под рукой.

Как создать группу в фигме? Группы — это коллекции элементов, которые можно объединить, чтобы упростить управление их свойствами.

Чтобы создать группу в Figma:

• Откройте файл Figma, в котором вы хотите создать группу.
• Выберите элементы, которые вы хотите объединить в группу. Можно выбрать сразу несколько элементов, удерживая клавишу Shift и кликая по ним левой кнопкой мыши.
• Выберите пункт «Группа» в меню «Структура» или нажмите клавишу Ctrl + G (или Cmd + G на Mac). Элементы будут объединены в группу.

Многопользовательский режим редактирования

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

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

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

Облачный сервер хранения файлов

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

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

Компоненты

Компоненты в фигма позволяют автоматически задавать групповые параметры к идентичным элементам макета и применять эти параметры к группе макетов. При прототипировании в фигме с помощью компонентов задают вид и размеры стандартных кнопок, виджетов, иконок, стиль списков. Например, заказчик попросил вас изменить размер и цвет виджета в прототипе. А у вас их 30! Что делать?

Менять все вручную в обычном редакторе займет много часов. А с использованием figma компонентов все изменения делаются парой кликов и применяются автоматически ко всей группе элементов.

Фреймы

Если вы работаете над макетом интерфейса для мобильного отображения, вам не обойтись без фреймов. В Figma фреймы (frames) представляют собой контейнеры для хранения и организации элементов интерфейса. Они могут содержать такие элементы, как текст, изображения, формы, иконки и т. д. Фреймы могут быть размещены на рабочей области и структурированы в слои, что позволяет легко управлять ими и создавать сложные макеты.

Как создать фреймы в фигме? Нажмите кнопку F. На панели свойств отобразятся параметры фрейма. Можно выбрать размер под определенную модель смартфона или создать фрейм по своим размерам.

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

При необходимости можно сразу выбрать самые популярные размеры Android и все размеры экранов iPhone.

Сетки

Продолжаем изучение фигма. Как работать с сеткой в этой программе? Сетка (Layout Grid) служит для выравнивания расстояний между элементами макета. С ее помощью можно также настроить размеры элементов и их количество. Причем можно настроить расстояние не только от центра, но и от краев объекта.

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

Вы можете сделать несколько сеток, применяя их к отдельному объекту или группе объектов. Количество колонок сетки для больших объектов — до 12, а для маленьких — до 24.

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

Десктопная версия

Дизайнеры ценят Figma за возможность коллаборации и функции облачного хранилища. Но что делать, если доступа в интернет нет или он нестабилен, а работу закончить нужно срочно? В этом случае на помощь приходит десктопное приложение.

Десктопная версия Figma устанавливается на компьютеры с Windows, macOS и Linux. При этом фигма нетребовательна к системным требованиям. Также существуют версии для мобильных устройств на Android, iOS.

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

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

Условная бесплатность

Фигма бесплатной или платной версии — какую выбрать? Формально Figma считается бесплатным приложением. Но за расширенный функционал придется доплатить. Рассмотрим самые распространенные в фигме тарифы.

В бесплатной версии (Starter) вам предложат:

• Создать 3 проекта;
• Доступ к 2 библиотекам;
• Месяц хранения истории на серверах Figma;
• Возможность совместной работы 2 дизайнеров.

Тариф Professional обойдется в $ 12 в месяц. Вот что можно получить за эти деньги:

• Проекты можно создавать без ограничения;
• Доступно большое количество библиотек;
• История изменения хранится пожизненно;
• Можно приглашать в команды новых учвстников.

Тариф Organization открывает все возможности и инструменты Figma. Ежемесячный платеж составит $ 45 в месяц. Вот эти возможности.

• Корпоративный план использования;
• Все проекты защищены от несанкционированного копирования и изменений;
• Дополнительные инструменты безопасности;
• Открыт доступ ко всем библиотекам;
• Доступны общие шрифты;
• Подключение собственных плагинов и управление ими;
• Аналитика проекта.

Что такое Figma – большой обзор продукта

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

Что такое Фигма
Для чего нужна Фигма
Какие проекты можно создавать в Figma
Дополнительные возможности Фигмы
Как установить Фигму

Начало работы
Плюсы Figma
Минусы Figma
Подведем итоги

Перед вами большой обзор редактора Figma для начинающих.

Мы расскажем о его возможностях и недостатках, как установить Фигму и какие проекты можно на нем создавать.

Что такое Фигма

Фигма – это графический редактор, с помощью которого создают дизайны. Его применяют в работе дизайнеры, маркетологи, менеджеры продукта, разработчики. Для доступа в сервис нужен лишь интернет и браузер.

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

Для чего нужна Фигма

Редактор предназначен для создания прототипов сайтов или приложений, иллюстраций и векторной графики. В нем можно настроить совместную работу, вносить и обсуждать правки, причем как в браузере, так и через приложение на компьютере. Дополнительно в Фигме создают макеты сайтов для тильды.

В нем есть возможность импортировать дизайн.

Какие проекты можно создавать в Figma

• Отрисовка интерфейсов. Внешний вид продукта – кнопочки, иконки, формы, можно создавать в редакторе с добавлением эффектов. Например, создание анимации для баннеров, кликабельные кнопки, раскрываемые списки и т. д.
• Создание прототипов – модели будущего сайта или приложения. Такой прототип можно адаптировать под мобильные устройства. Их используют, чтобы показать заказчикам, как будет выглядеть проект. В редакторе можно отрисовать нужные страницы и настроить связи между ними. Предусмотрена даже интерфейсная анимация, которая постоянно совершенствуется. Это позволяет разрабатывать прототипы, максимально похожие на реальный продукт.
• Работа с векторными объектами. Можно создавать векторную графику, импортировать векторные объекты из редакторов Adobe Illustrator и Sketch, экспортировать дизайн в формат svg.
• Developer Handoff. Режим, позволяющий увидеть вкладку «код» в панели свойств. Он упрощает работу разработчиков. Они могут использовать направляющие для определения расстояния до объектов и их размера, копировать CSS-стили элементов, их код для Android и iOS.
• Редактор позволяет создавать блок-схемы, диаграммы, графики. В фигме встроен онлайн конструктор блок схем и есть большая библиотека компонентов. С их помощью можно перетаскивать элементы на холст и за считаные минуты создавать свою блок-схему, диаграмму или график. Готовый вариант можно экспортировать в png, svg или в другом удобном формате.
• Передача макетов разработчикам. Потребуется просто дать доступ к файлу с передачей права на просмотр. В таком режиме программисту будут доступны CSS-стили элементов интерфейса. Если он делает мобильное приложение, то сможет посмотреть код для iOS или Android. Для определения размеров элементов и расстояний между ними есть направляющие.

Дополнительные возможности Фигмы

Чтобы ускорить работу и добавлять новые функции, можно использовать плагины. В программе они расположены в разделе «Browse Plugins in Community».

Какие есть полезные плагины:

• BeatFlyer Lite. Для создания анимационных эффектов.
• Humaaans for Figma. Иллюстрации людей Пабло Стэнли.
• Iconify. Содержит более 40 тысяч векторных иконок, в т. ч. самых популярных, например, Jam Icons, Twitter Emoji, Material Design.
• Bullets. Для создания стильных маркированных списков.

Добавляются плагины через раздел «Plugins». Нужно в поисковой строке ввести нужный, нажать «Install». После добавления редактор требуется перезагрузить.

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

Что есть в библиотеке шаблонов:

• рекламные объявления;
• диаграммы;
• концепткарты;
• доски настроения;
• диаграммы связей.

Как установить Фигму

Работать в фигме можно через браузер, но это не очень удобно, т. к. доступ к некоторым функциям удобнее осуществлять из приложения, кроме того, редактор может тормозить.

Как скачать программу фигма на ПК:

• Откройте официальный сайт редактора, страницу https://www.figma.com/downloads/.
• Перейдите в «Desktop app»
• Выберите приложение для macOs либо для Windows.
• Скачайте архив, распакуйте и войдите в программу.
• Перед началом работы потребуется зарегистрироваться.

Купить фигма можно и в АльбаСофт – официального поставщика программного обеспечения IT оборудования, IT услуг.

Начало работы

Как зарегистрироваться в программе:

• На официальном сайте нажмите Sign up.
• Вам будет предложено авторизоваться через Google аккаунт или ввести пароль и электронную почту.
• Введите имя и род деятельности.
• Нажмите «Create Account».
• Подтвердите регистрацию через почту.
• При необходимости создайте команду и введите e-mail людей.
• Выберите тарифный план.
• Приступайте к осваиванию редактора.

Плюсы Figma

У редактора много плюсов, мы отобрали основные.

Облачное хранение данных

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

Актуальность версий

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

Кроссплатформенность

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

Фреймы

Фрейм – это отдельный законченный HTML-документ, который вместе с другими HTML-документами может быть отображен в окне браузера. По-простому – это холсты со своими отступами, направляющими, правилами выравнивания и масштабирования элементов. В редакторе есть стандартный набор фреймов с размерами популярных десктопных и мобильных устройств, распространенных бумажных форматов, фото для соцсетей. Преимуществом фрейма в фигма является то, что он может содержать другой фрейм. Чтобы создать фрейм выберите нужный пункт вменю или нажмите F на клавиатуре.

Компоненты

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

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

Многопользовательское редактирование

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

Условная бесплатность

Пользоваться фигмой можно совершенно бесплатно.

Какие возможности у бесплатного пакета:

• Возможность создать 3 проекта для команд и совместной работы.
• Есть неограниченное облачное хранилище.
• Доступ к двум (на выбор) бесплатным стартовым библиотекам.
• Срок истории версий проектов 30 дней.
• Над одним проектом одновременно могут работать 2 человека.

Есть еще два платных пакета:

• Professional. Возможности: число проектов команд не ограничивается; доступ в настраиваемые командные библиотеки; срок истории версий проектов не ограничивается; возможность настройки пользовательских файлов и прав использования.
• Organization. Дополнительно к возможностям по тарифу Professional добавлено: возможность использования приватных плагинов; аналитика системы проектирования; общие шрифты; ветвление и слияние; единый вход в систему и т. д.

Работа со стилями

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

Удобное выравнивание элементов

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

Обновляемость

Редактор постоянно улучшается, становится более удобным и функциональным.

Минусы Figma

Среди минусов опытные пользователи обращают внимание на следующие:

• Отсутствие корректной темной темы.
• В бесплатной версии низкий уровень безопасности проекта, что может повлечь его копирование недобросовестным заказчиком.
• Ограничены возможности работы с текстом: нельзя переносить текст по слогам, сделать отступ между абзацами, поставить межбуквенный интервал и настроить интерлиньяж.
• Набор горячих клавиш минимален, их может не хватить для быстрой работы и нет возможности их настроить.
• Иногда медленно загружаются сайты.
• Плохой алгоритм экспорта. При экспорте SVG-файлов могут возникнуть проблемы. Код на выходе довольно грязный, и весят такие файлы на порядок больше. Из-за этго не всегда получается хорошо экспортировать растровую графику.
• Нет русскоязычной версии, хотя интерфейс достаточно прост и в нем можно быстро разобраться.

FAQ

В чем отличие Фигмы от Photoshop?

У редакторов множество отличий:

Источник: www.sravni.ru