Программа figma что это

Зачем разработчику изучать Figma: 10 важных особенностей

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

Что такое Figma

Figma — бесплатный онлайн-редактор веб-интерфейсов, используемый как отдельными дизайнерами, так и командами веб-разработчиков. Функционал позволяет создавать:

• макеты сайтов и отдельных страниц;
• интерактивные макеты;
• анимацию;
• иллюстрации;
• логотипы.

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

Интерфейс Figma с открытым макетом

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

Важные особенности Figma

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

Легко освоить

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

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

Оптимизация

Если в проекте требуется разработать дизайн более 5 страниц в одной рабочей области, то программы по типу Photoshop начинают подтормаживать даже на неплохих компьютерах. Когда речь идет о более крупных проектах, то даже открывать документ в Photoshop становится “больно”.

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

Автоматическое сохранение

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

Перечень сохраненных редакций

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

Создание шаблонов

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

Перечень созданных шаблонов

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

Стилизация текста

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

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

Привязка к элементам

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

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

Возможность создания интерактивных прототипов

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

Пример интерактивного прототипа

Таким образом верстальщик сразу может видеть, как должен работать сайт целиком, что упрощает процесс разработки. Это еще является и преимуществом при составлении ТЗ для верстальщиков и разработчиков, так как они могут видеть все на наглядном примере.

Доступность командной работы

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

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

Комментирование

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

Пример комментария в Figma

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

Перенос стилей в код

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

Отображение CSS в Figma

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

Расширение возможностей Figma

Для Figma существуют как официальные дополнения, так и возможность создать собственные с использованием API-библиотек. API плагинов Figma позволяет разрабатывать свои собственные плагины, если представленные возможности недостаточны для реализации текущего проекта. Если нет возможности самостоятельно писать плагины, то можно загрузить уже готовые от других разработчиков. Представлены как платные, так и бесплатные решения.

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

Заключение

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

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

Что такое Figma и как с ней работать

В Figma делают прототипы, интерфейсы, векторную графику, презентации.

Анастасия Хамидулина
Автор статьи

Графический редактор Figma появился в 2016 году. Тогда уже было несколько программ, чтобы разрабатывать интерфейсы. Гиганты — Sketch и Adobe XD. Но уже через три года Figma обогнала последний по популярности.

Сейчас ее используют не только дизайнеры. Функция совместного доступа позволяет работать над проектом разным специалистам одновременно. Копирайтерам — создавать и править тексты. Программистам — смотреть информацию для кода. Менеджерам — следить за этапами разработки.

Что делают в Figma

✔️ Прототип

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

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

В прототипах Figma можно переходить с экрана на экран и следить, удобно ли пользоваться продуктом

✔️ Интерфейс

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

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

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

✔️ Векторная графика

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

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

Поэтому все иконки отрисовывают в векторе. И в Figma для этого есть привычные инструменты:

С его помощью создают фигуры произвольной формы. Их легко редактировать: кликните дважды и поправьте нужный узел.

Механика не отличается от других векторных программ: перемещайте узлы, удаляйте, вытягивайте по обеим сторонам или по одной

• Карандаш

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

Фигура сразу превратится в векторный объект

• Простые фигуры

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

Выберите размер, цвет фигуры и обводки

✔️ Юзабилити-тест

Это проверка прототипа. Ее важно проводить до начала разработки, чтобы избежать критичных ошибок. Изменить прототип намного быстрее и дешевле, чем исправлять код.

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

✔️ Презентации

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

Презентацию можно экспортировать в PDF

✔️ Логотипы

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

Логотип экспортируют в векторный формат, например в SVG

Инструменты

⭐️ Сетки и макеты

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

Чтобы создать новый фрейм, выберите соответствующий инструмент на панели сверху

Затем нужно настроить его размер и задать сетку, по которой будете работать.

Перейдите на панель справа, выберите настройку Layout grid и задайте размер

По умолчанию Figma создаст сетку типа Grid, похожую на тетрадь в клеточку.

Обычно Grid используют для мобильных приложений

Чтобы поменять сетку, на той же панели нажмите на Grid, затем на +, выберите тип сетки Rows, задайте нужные параметры.

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

Кроме сетки есть направляющие. Примените их ко всей странице или только к выделенному фрейму. Для этого включите линейку в рабочей области — Shift + R. Перетащите направляющую.

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

⭐️ Слои и группы

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

Вся информация об объектах находится слева от рабочей области

⭐️ Стили

Чтобы шрифты и их настройки, цвета и эффекты гармонично существовали в одной дизайн-системе, создают собственную библиотеку стилей.

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

Для этого выделите нужный блок с текстом, перейдите в меню настроек справа, нажмите и далее +

Дайте понятное название этому стилю и нажмите Create style

Чтобы отредактировать сохраненный стиль, зайдите в его настройки

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

⭐️ Компоненты

Это объекты, копии которого меняются вместе с ним. Например, в проекте должно быть много кнопок. Чтобы не редактировать каждую из них, создайте одну и сделайте ее компонентом. Для этого нарисуйте простой прямоугольник, задайте ему нужные параметры и впишите текст. Затем сгруппируйте все элементы: Ctrl + G на Windows и ⌘ + G на Mac.

Далее превратите эту группу объектов в компонент с помощью символа в верхней части экрана. Либо сочетанием клавиш: Ctrl + Alt + K на Windows и ⌘ + Alt + K на Mac.

Скопируйте кнопку и меняйте настройки этой группы объектов

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

Чтобы открепить объект от исходного компонента, выберите Detach instance в меню

⭐️ Auto Layout

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

Кнопка с Auto Layout подстроится под длину текста автоматически: ее размер не придется редактировать

Функция Auto Layout находится на панели справа. Выберите, как выстроятся объекты внутри фрейма:

— отступы между элементами;

— одинаковые поля со всех сторон.

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

Packed — расположить элементы рядом друг с другом.

Space between — распределить элементы равномерно по всему фрейму с Auto Layout.

⭐️ Плагины

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

Плагины условно делят на несколько типов:

• чтобы работать с графикой;
• генерировать контент;
• создавать анимацию;
• организовывать порядок в проекте.

Подходящий инструмент ищите на официальной странице сообщества Figma.

Преимущества

Режим совместной работы

В Figma одновременно могут работать несколько участников — и на Windows, и на MacOS. Все изменения сохраняются автоматически. Еще можно оставлять комментарии к любым элементам.

Облачный сервер

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

Десктопное приложение и Figma Mirror для смартфонов

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

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

Импорт Sketch-файлов

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

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

Тарифы

1️⃣ Бесплатный тариф:

• три файла Figma и три файла FigJam — коллективная онлайн-доска для заметок;
• неограниченное количество личных файлов, соавторов;
• плагины и шаблоны;
• мобильное приложение.

Изменения хранятся 30 дней. Нельзя ограничивать копирование: если отправите ссылку заказчикам или членам команды, они смогут продублировать проект.

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

2️⃣ Figma Professional — $12 за редактора в месяц при годовой оплате, $15 — при ежемесячной:

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

3️⃣ Figma Organization — $45 за редактора в месяц, только годовая оплата:

• общеорганизационные библиотеки;
• аналитика дизайн-системы;
• управление доступом к ссылкам;
• неограниченное количество команд;
• частные плагины.

Тариф подходит дизайн-студиям с большой командой и крупными проектами.

Из-за санкций на момент публикации статьи платные тарифы неактуальны: Figma приостановила продажи в России. Доступен только базовый бесплатный тариф.

Как зарегистрироваться и установить

Нажмите Sign up

После регистрации вы сможете сразу создать проект в браузерной версии. Либо скачать ПК-версию или мобильную программу.

Освойте Figma с нуля на курсе «Профессия веб-дизайнер». За три месяца научитесь делать сайты-одностраничники, рекламные баннеры и интерфейсы, соберете проекты в портфолио, чтобы было проще находить заказчиков. Во время учебы выполните реальные заказы для «Перекрестка», Hoff, Qiwi и других крупных брендов.

Источник: sky.pro

Figma — что это за программа?

Что такое Figma и что из себя представляет эта программа?

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

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

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

12 причин почему стоит обратить внимание на Figma и использовать её в своей работе

1. Скорость работы

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

2. Большой функционал в бесплатной версии Figma

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

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

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

4. Автоматическое сохранение

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

5. История версий

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

6. Удобно демонстрировать работу

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

7. Интерактивные прототипы

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

8. Возможность комментирования.

Можно добавлять комментарии к проекту. Если кто-то оставит комментарий в вашей работе, то уведомление об этом придет к вам на email и вы увидите его в интерфейсе фигмы.

9. Бесплатные файлы для работы

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

10. Компоненты

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

11. Стили текста и графики

Также есть возможность создавать стили текста или графики и использовать их повторно.

12. Auto Layout

Эта функция позволит сэкономить время на выравнивании и перестраивать элементы дизайна автоматически. Например возьмем простую форму. В ней настроена функция auto layout, если продублировать поле, то все перестроиться автоматически и ничего не придется двигать вручную. Аналогично дело обстоит с кнопками. Если в кнопке настроена эта функция, то при изменении текста, отступы перестраиваются автоматически.

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

Хотите лучше разобраться с Figma? Сделайте 2 простых действия.

1. Подпишитесь на рассылку и получите бесплатный урок по созданию дизайн макета сайта и 24 раздела бесплатно.

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

По итогу этого урока у вас будет дизайн макет сайта Landing Page (посадочная страница) в вашем портфолио, который вы сможете показать вашим потенциальным заказчикам. Ниже пример.

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

Figma: обзор программы для веб-дизайна

Каждый, кто работал с Google Docs, знает, насколько удобно хранить и редактировать документы онлайн. Можно вместе работать над статьями, открывать их с любого компьютера, создавать инструкции и презентации с общим доступом.

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

Что такое Figma

Это графический редактор для веб-дизайна. В Figma можно создавать:

• интерактивные прототипы сайтов и мобильных приложений;
• элементы интерфейса — иконки, кнопки, меню, окна, формы обратной связи;
• векторные иллюстрации.

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

Можно заходить в Figma через браузер или же скачать программу на компьютер. Она подходит как для Windows, так и для Mac. В десктопной версии можно работать офлайн, а когда появляется доступ к интернету, изменения синхронизируются.

Преимущества Figma для работы

Исходники документов хранятся в облаке

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

Командная работа над макетами

Как и в Google Docs, в Figma можно работать над документом вместе: давать доступ на просмотр и редактирование, параллельно работать над макетом — на экране будут видны курсоры разного цвета.

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

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

Если вы работаете в аккаунте сами, все функции бесплатны. Просто регистрируетесь и начинаете работать. Можно давать доступ на просмотр документа — это тоже бесплатно.

Бесплатные email рассылки

Создайте аккаунт в SendPulse и отправляйте до 15 000 писем бесплатно каждый месяц!

Сколько стоит Figma

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

Бесплатный план

План дает базовые возможности:

• прототипирование в Figma;
• атрибуты кода;
• доступ для просмотра и комментирования;
• хранение документов без ограничений;
• импорт документов из Sketch и других форматов.

• нельзя совместно редактировать документы;
• история версий хранится 30 дней.

$12 за пользователя с правами редактирования/месяц

Расширенные возможности для командной работы:

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

$45 за пользователя с правами редактирования/месяц

Это план для больших организаций.

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

Как начать работать с Figma

После регистрации на почту приходит приветственное письмо со ссылкой на раздел «Помощь», видеоуроки, форум и другие ресурсы:

Интерфейс понятный — слева панель со слоями, которая включает элементы проекта, сверху панель инструментов, справа панель свойств.

Когда вы начинаете работать с редактором, появляются уведомления с подсказками:

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

Как научиться работать в Figma

Познакомиться с редактором и изучить основы предлагают в онлайн-университете «Нетология». На сайте доступны записи открытых занятий «Figma: лайфхаки быстрой работы дизайнера».

Практические уроки по работе с Figma на русском есть на YouTube каналах:

• «Наука Дизайна», 15 уроков;
• «Школа дизайна UX Mind School», 12 уроков;
• «Moscow Digital Academy Дизайн и практика», 6 уроков.

Электронную книгу «Руководство по Figma» выпустил дизайнер интерфейсов Александр Окунев. В книге рассматриваются 23 темы: обзор интерфейса, формы, перо и векторные сети, градиенты с примерами в Figma, кадрирование и цветокоррекция, компоненты, оверрайды и другие.

Новости и советы по работе с редактором публикуют в Телеграмме:

• Figma Design Channel — официальный канал новостей и советов по Figma;
• «Фигма-чат» — здесь участники задают вопросы по работе в редакторе и помогают друг другу советами;
• Figma Tips — публикует новости, подсказки, обзоры функционала, горячие клавиши, ресурсы.

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

Прототипирование

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

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

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

Компоненты

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

Компоненты в Figma можно делать основными (Master components) и зависимыми (Instances). Если вы нарисовали кнопку, сделали ее компонентом, а потом скопировали, то первая кнопка будет основным компонентом, а вторая — зависимым. Изменения, которые вы внесете в основной компонент, будут применятся к зависимому.

Чтобы сделать элемент компонентом, выберите опцию «Создать компонент» на верхней панели или кликните правой кнопкой мыши на слое и в меню выберите «Создать компонент» (Create Component).

Создать зависимый компонент можно несколькими способами: удерживать Alt при перетаскивании, использовать команду Duplicate или обычный копипаст:

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

Векторные сетки

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

Кроме того, векторные сетки облегчают работу с HTML: можно скопировать SVG код из внешнего источника и вставить его как векторный слой прямо в редактор. Или сохранить векторный объект из Figma как SVG код. Для этого кликните правой кнопкой мыши на элементе, выберите «Копировать как SVG» и вставьте код в HTML или другой веб-проект, с которым работаете.

Встроенное комментирование, редактирование и доступ

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

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

Контроль версий

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

Чтобы просмотреть историю версий, выберите в выпадающем меню сверху опцию «История версий». Справа на странице появится панель с историей изменений. Версиям можно присваивать названия, восстанавливать, дублировать.

В бесплатной версии видны изменения за последние 30 дней. В платной сохраняется история всех изменений с момента создания проекта.

Как работать в Figma: создаем макет электронной книги

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

1. Залогиниться и создать новый документ.

2. Нажать на панели вверху «+» и создать рамку (Frame), чтобы разместить объект на полотне.

3. Заполнить проект слоями: текстовыми блоками, прямоугольниками и рисунками.

Вот, что у нас получилось:

Ограничения Figma

Редактор создан в первую очередь для веб-дизайна. Поэтому в нем неудобно работать с полиграфией. В Figma нет CMYK палитры и переключения размерности сетки на см/мм. Чтобы подготовить макет для баннера, листовки или ролл-апа для печати, нужно созданный в Figma файл загрузить в другую программу, что предназначена для полиграфии. И только потом его отдавать на печать.

Еще одно ограничение Figma в том, что макеты из Photoshop нельзя импортировать прямо. Один из вариантов — перевести их в формат Sketch, а потом перенести в Figma.

Подведем итог

Figma выглядит как хорошо продуманный инструмент, сделанный дизайнерами для дизайнеров. Главные достоинства редактора:

• Позволяет совместно работать над документами — создавать и редактировать командой в режиме реального времени.
• Хранит документы в облаке — макеты не занимают место на диске, их не нужно заливать, чтобы показать коллегам или заказчику.
• Кроссплатформенность — возможность работать с редактором на Windows, Mac, Linux.
• Возможность создавать интерактивные прототипы, векторные сетки, главные и зависимые компоненты.

Надеемся, что обзор сделал для вас Figma более понятной и вдохновил на работу. Создавайте в Figma макеты и маркетинговые материалы для email рассылок в SendPulse!

Источник: sendpulse.com