В Figma делают прототипы, интерфейсы, векторную графику, презентации.
Анастасия Хамидулина
Автор статьи
16 апреля 2022 в 15:05
Графический редактор Figma появился в 2016 году. Тогда уже было несколько программ, чтобы разрабатывать интерфейсы. Гиганты — Sketch и Adobe XD. Но уже через три года Figma обогнала последний по популярности.
Сейчас ее используют не только дизайнеры. Функция совместного доступа позволяет работать над проектом разным специалистам одновременно. Копирайтерам — создавать и править тексты. Программистам — смотреть информацию для кода. Менеджерам — следить за этапами разработки.
Что делают в Figma
✔️ Прототип
Это своеобразный план действий. То, из чего будет состоять веб-страница или приложение. В них дизайн отходит на второй план, самое важное — удобство пользователя, чтобы он быстро находил и заказывал нужный продукт. В Figma отрисовывают каждый экран приложения или сайта и настраивают связь между ними. То есть моделируют поведение пользователя.
Как пройти регистрацию в Figma и получить все платные функции бесплатно
Итог — черновая версия продукта, которую легко презентовать, редактировать и согласовывать с заказчиком в режиме онлайн. И далее — передавать разработчикам.
В прототипах Figma можно переходить с экрана на экран и следить, удобно ли пользоваться продуктом
✔️ Интерфейс
Прототип — это скелет сайта или приложения, а интерфейс — его лицо. Иконки, формы обратной связи, кнопки, эффекты, раскрывающиеся списки — всё это создают с помощью встроенных инструментов.
Чтобы приложением или сайтом было удобно пользоваться, его элементы нужно вписывать в дизайн-систему продукта. То есть каждая часть должна повторять выбранный стиль и не выбиваться из общей концепции.
В Figma просто перемещать, масштабировать и изменять свойства элементов на всех экранах проекта одновременно. Со временем можно собрать собственную библиотеку. Это поможет быстрее и эффективнее работать над проектами и не тратить время на одну и ту же работу.
✔️ Векторная графика
Вектор всегда используют, когда разрабатывают интерфейсы. Представьте, что у вас есть иконка, которую вы будете много раз использовать в разных размерах. Казалось бы, можно взять картинку с иконкой большого размера и уменьшить ее. Но это работает не так.
Когда измените размер картинки, исказится ее качество. Кроме того, картинки весят намного больше, чем векторная графика. А еще качество отображения растровой графики сильно зависит от экрана. Предусмотреть все эти вводные невозможно.
Поэтому все иконки отрисовывают в векторе. И в Figma для этого есть привычные инструменты:
С его помощью создают фигуры произвольной формы. Их легко редактировать: кликните дважды и поправьте нужный узел.
Можно ли давать полный доступ в Фигме? Сравнение тарифов Фигмы. Действительно ли Figma бесплатная?
Механика не отличается от других векторных программ: перемещайте узлы, удаляйте, вытягивайте по обеим сторонам или по одной
- Карандаш
От пера этот инструмент отличается тем, что с ним можно зажать кнопку мыши и провести любую линию, нарисовать любую фигуру.
Фигура сразу превратится в векторный объект
- Простые фигуры
Квадрат, линия, круг, стрелки, треугольник, звезда — создавайте эти фигуры и задавайте нужные параметры через панель управления.
Выберите размер, цвет фигуры и обводки
✔️ Юзабилити-тест
Это проверка прототипа. Ее важно проводить до начала разработки, чтобы избежать критичных ошибок. Изменить прототип намного быстрее и дешевле, чем исправлять код.
Еще одна важная задача таких тестов — узнать, понимает ли потенциальный клиент продукт, легко ли им пользоваться. Для этого собирают все экраны для сценариев, которые нужно протестировать. После чего интерактивный прототип отдают группе пользователей и фиксируют результаты.
✔️ Презентации
В Figma легко собрать презентацию на любую тематику, а итог продемонстрировать со своего экрана или сохранить готовую работу в отдельный файл.
Презентацию можно экспортировать в PDF
✔️ Логотипы
Если нет возможности использовать платный Adobe, Figma станет хорошей альтернативой. Здесь хватает инструментов, чтобы создавать векторную графику.
Логотип экспортируют в векторный формат, например в SVG
Графический дизайнер: новая работа
через 10 месяцев
Первые проекты уже через 4 месяца
Инструменты
⭐️ Сетки и макеты
Сетка — важная часть дизайн-системы. Она нужна, чтобы выстроить порядок и логику в любом макете. В 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
После регистрации вы сможете сразу создать проект в браузерной версии. Либо скачать ПК-версию или мобильную программу.
Если вам интересен графический дизайн, приходите на курс Skypro. Мы учим разрабатывать фирменный стиль для брендов, делать эффектные иллюстрации, баннеры, сайты, работать с Figma, Photoshop, Illustrator, Tilda, Readymag. Погружаем в профессию с нуля за 10 месяцев. После курса у вас будет 15 работ в портфолио на Behance, а наш центр карьеры подготовит вас к собеседованиям.
Источник: sky.pro
Что такое Figma и для чего она нужна?
В последнее время вы, наверняка, много слышали о такой программе как Figma. И это неудивительно. Она стала очень популярной в дизайнерской среде. Давайте познакомимся с программой, которая задвинула Photoshop и стала фаворитом многих дизайнеров.
Figma — один из самых популярных и удобных кроссплатформенных графических редакторов для совместной работы.
В ней можно создавать:
- макеты сайтов, приложений и кликабельные прототипы с анимацией
- отдельные элементы интерфейса: иконки, кнопки, формы и многое другое
- векторные изображения, иллюстрации, прочее
Где скачать Figma?
Скачать и установить программу Фигма вы можете с официального сайта: https://www.figma.com/
Для этого просто кликните по кнопке Try Figma for free и после регистрации вы сразу получите доступ к браузерной версии программы.
Если вы хотите установить и десктопную версию, кликните по иконке с аватаркой в правом верхнем углу и выберите пункт Get desktop app, либо можете скачать десктопную версию отсюда: https://www.figma.com/downloads/
Основное отличие десктопной версии Figma от браузерной в том, что в ней можно работать оффлайн с доступом к горячим клавишам.
Бесплатная vs платная версия Figma
Важно отметить, что существует две версии Figma: платная и бесплатная. И в 99% случаев вам вполне хватит возможностей бесплатной версии программы.
Платная версия вам понадобится если вы планируете одновременно работать с большим количеством проектов и привлекать к работе над макетами более чем одного человека. Подробнее о тарифах можно узнать здесь: https://www.figma.com/pricing/
Основные плюсы Figma
Преимуществ у программы Фигма довольно-таки много. Постараемся перечислить основные из них:
- есть бесплатный тариф, которого хватает за глаза
- удобно демонстрировать как будет выглядеть и работать сайт/приложение заказчику
- возможность командной работы над проектом
- кроссплатформенность ― можно работать с любого устройства и с любой операционной системы
- можно дать онлайн-доступ клиенту или руководителю для наблюдения за работой
- можно экспортировать отдельные элементы
- единая система шрифтов Google Fonts
- возможность импортировать файлы в формате Sketch
- быстродействие ― облачный сервис не задействует мощность компьютера, поэтому работа с несколькими холстами не затормаживает компьютер
- автоматическое сохранение версий ― шанс потерять несохранённую работу сводится к нулю
- огромная коллекция плагинов, которые расширяют возможности и инструментарий Figma
- большое дружелюбное комьюнити
Минусы Figma
Из всего вышесказанного, можно сделать вывод, что Figma — это идеальная программа. Но это не совсем так. Свои недостатки у неё тоже есть. Давайте пробежимся по ним.
- нужен интернет
- нельзя изменять горячие клавиши
- интерфейс только на английском языке
- ограниченность времени хранения и числа макетов в базовой версии
Что в итоге?
Figma — это относительно новая программа. Она активно набирает популярность, постоянно развивается и совершенствуется.
Поэтому мы уже сейчас рекомендуем вам обратить внимание на неё, потому что уже сейчас она является основной для всех тех, кто занимается UI/UX-дизайном, дизайном сайтов и приложений.
Источник: videosmile.ru
Что такое Figma и почему она так популярна среди дизайнеров?
Всем привет! На связи графический дизайнер Дмитрия Сугак. Сегодня я расскажу вам о популярной программе для графического, веб и UX/UI-дизайна. Речь идет о бесплатном онлайн-редакторе Figma. Мы рассмотрим, что из себя представляет этот сервис и поговорим о его функциях, особенностях, вариантах работы в 2023 году.
что такое фигма?
Figma — это онлайн-редактор, который предназначен для графической работы. С его помощью можно создавать векторную графику, презентации и даже прототипы сайтов и приложений. Программа пользуется спросом среди маркетологов, разработчиков и, конечно, дизайнеров.
Одно из преимуществ сервиса — возможность оставлять комментарии к макету в режиме онлайн. Делать это можно не только в браузере, но и через установленную версию на ПК. Работать с Figma достаточно просто. Специальная подготовка для этого не требуется.
почему фигма так популярна среди дизайнеров?
Причин пользоваться сервисом достаточно много. Я расскажу об основных преимуществах дизайна в Фигме:
1. Многопользовательский режим. Это один из самых главных аргументов в пользу программы. Сегодня нет ни одного графического редактора, который может похвастаться тем же. Суть многопользовательского режима состоит в том, что над проектом может одновременно работать целая команда дизайнеров.
Это избавляет от необходимости создавать дополнительные чаты в мессенджерах. Настроить приватность тоже просто: можно предоставить доступ не ко всему проекту, а к отдельному объекту. Кроме того, вы имеете возможность ознакомить заказчика с итоговой работой, даже если у него нет аккаунта в Figma.
2. Файлы в облаке. Хранить информацию на диске уже давно неактуально. Figma идеально подходит для верстки, поскольку результаты работы сохраняются в облаке автоматически. Чтобы скачать файлы, нужно выбрать в меню раздел «Файл» и нажать «сохранить как fig».
3. Кросс-платформенность. Вы можете получить доступ к проекту с любого устройства. Главное — иметь выход в интернет. Это избавляет от рутины в виде экспорта компонентов в Фигме. Чтобы открыть ссылку с доступом, не обязательно даже наличие аккаунта.
Однако учтите, что вносить изменения в проект можно только с ПК.
4. История версий — еще одна причина использовать именно этот сервис. Когда над проектом работает несколько специалистов, найти виновника недочетов бывает непросто. В Фигма это делается с помощью истории изменений. Версии можно сохранять вручную.
Также можно указывать внесенные изменения. Это позволит эффективно отслеживать процесс. Фигма в бесплатной версии позволяет запоминать корректировки за 30 ближайших дней.
5. Стоимость. Бесплатная версия программы вполне подойдет для личного пользования. Многим фрилансерам её хватает. Бесплатный аккаунт позволяет: работать с тремя проектами одновременно и предоставить редакторские права двум пользователям.
Professional — это платный тариф Фигма. Он не имеет ограничений, о которых я говорила выше, плюс — можно делиться библиотеками с пользователями. Обойдется он в 15 $ в месяц. Organization — третий тариф, который подойдет крупным командам. Он стоит 45 $ в месяц, оплата требуется сразу за год.
Источник: ddesign.moscow