что это за программа, для чего нужна, как в ней работать
Графический редактор 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 одновременно могут работать несколько участников — и на 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 приостановила продажи в России. Доступен только базовый бесплатный тариф.
Как зарегистрироваться и установить
Зайдите на страницу https://www.figma.com/
Нажмите Sign up
После регистрации вы сможете сразу создать проект в браузерной версии. Либо скачать ПК-версию или мобильную программу.
Если вам интересен графический дизайн, приходите на курс Skypro. Мы учим разрабатывать фирменный стиль для брендов, делать эффектные иллюстрации, баннеры, сайты, работать с Figma, Photoshop, Illustrator, Tilda, Readymag.
Погружаем в профессию с нуля за 10 месяцев. После курса у вас будет 15 работ в портфолио на Behance, а наш центр карьеры подготовит вас к собеседованиям.
Вебинары
Главное о Figma
- В Figma создают прототипы, интерфейсы сайтов и приложений, иконки, презентации, логотипы, проводят юзабилити-тестирование.
- В Figma удобно демонстрировать прототип заказчику, работать одновременно с командой, передавать проект разработчикам.
- Figma может заменить Photoshop и Illustrator: в ней тоже обрабатывают векторную и растровую графику.
- Есть бесплатный тариф для Windows и MacOS. Если в проекте участвует большая команда, нужна платная версия.
Что такое Figma и для чего она нужна | GeekBrains
https://gbcdn.mrgcdn.ru/uploads/post/2419/og_image/24ddafa5a7faab4385b30fde564dcd9e.png
Графических редакторов для проектирования интерфейсов стало очень много, о них уже написаны статьи и туториалы, отснято огромное количество обучающих видео.
Важное место среди этих инструментов занимает графический редактор Figma. Чтобы вы не искали информацию о ней в разрозненных источниках, я подготовил эту статью. Она поможет разобраться, что такое Figma, что она умеет, кому она нужна и с чего начать новичку.
Что такое эта ваша Figma?
Figma — кросс-платформенный графический онлайн-редактор для совместной работы. Программа позволяет создавать wireframe, UI, прототипы, презентации и с лёгкостью передавать материалы в разработку. В онлайн-режиме можно наблюдать рабочий процесс, оставлять комментарии и обсуждать макет.
Начать работать с Figma очень просто, так как программа не требует от пользователя специальной подготовки.
Что можно делать в Figma: базовые фичи
Многопользовательский режим
Пожалуй, самый весомый аргумент в пользу Figma — многопользовательский режим. Пока ни один из популярных графических редакторов не может этим похвастаться. На момент написания статьи — точно. Если вы и несколько ваших коллег-дизайнеров работаете над одним крупным проектом, Figma может предоставить вам единое пространство.
Вы всегда будете в курсе прогресса задач каждого из вас.
Теперь менеджер проекта вместо того, чтобы отвлекать дизайнера вопросами из разряда «как там макет», может посмотреть на процесс в прямом эфире. Конечно, если вы дадите ему ссылку на файл 😉 Разработчики также могут подсмотреть за работой дизайнера, понять, что их ждёт в скором будущем, и прикинуть предстоящий объём работ.
Все участники проекта могут оставить комментарии, вопросы и пожелания прямо на макете. Это сильно упрощает процесс согласования и избавляет от лишней переписки в почте или мессенджерах. История комментариев всегда доступна в файле проекта.
Настройки приватности достаточно гибкие: вы можете дать доступ как ко всему проекту, так и к отдельному файлу. Это позволяет управлять видимостью для каждого участника команды. Вы даже можете показать проект человеку, у которого нет аккаунта в Figma, и который, вероятно, никогда о ней не слышал. Например, вашему заказчику.
Файлы в облаке
Хранить файлы на диске сейчас неактуально — балом правят облачные сервисы.
Figma — онлайн-редактор, поэтому результат вашей работы будет автоматически сохранён в её собственном облаке. Но возможность скачать файлы тоже есть. Для этого нужно в главном меню программы выбрать «Файл» и пункт «Сохранить как .fig».
Кросс-платформенность
Доступ к макетам есть с любого устройства — даже с iPad. Достаточно запустить браузер и выйти в интернет. А это, в свою очередь, значит, что больше не нужно постоянно экспортировать макеты с результатом работы из редактора в PNG и JPG. Достаточно отправить ссылку на файл с настроенным доступом, а получателю не обязательно иметь аккаунт в Figma.
Десктопное приложение тоже есть. Оно предусмотрено для MacOS и Windows.
Компоненты
Как и во всех графических редакторах, заточенных под проектирование интерфейсов, Figma умеет работать с компонентами. Для бесплатных аккаунтов библиотека компонентов доступна в рамках одного файла. А чтобы дать доступ целой команде и подключить её ко всем файлам проекта, нужно немного раскошелиться.
История версий
Ещё одна полезная функция — история версий. Если над проектом работает ещё кто-то помимо вас и вы внезапно замечаете недочёты в файле, виновника будет достаточно просто найти в истории изменений.
Figma автоматически сохранит версию, если вы не изменяли макет в течение 30 минут. Можно сохранять версии вручную, задавать им названия и описания. Для удобства вы можете указывать, какие изменения были внесены. Так будет проще контролировать процесс.
Бесплатная версия запоминает изменения за последние 30 дней. Полная история доступна на всех платных тарифах.
Фреймы
В Figma есть стандартный набор фреймов с размерами популярных мобильных (включая Apple Watch) и десктопных устройств, распространённых бумажных форматов и фото для соцсетей. В общем, заготовки на все случаи жизни — вопрос «что можно делать в Figma» отпадает сам собой.
У фреймов Figma есть особенности, которые обязательно стоит иметь в виду:
- Фрейм может содержать другой фрейм. Это бывает порой очень удобно.
- Если нужно растянуть фрейм, обязательно удерживайте нажатой клавишу Сmd (MacOS) или Ctrl (Windows), тогда все детали макета останутся на своих местах. В противном случае изображение станет непропорциональным.
Это бывает порой очень удобно.Сетки
Как мы знаем, сетка в проектировании — главный помощник. На мой взгляд, работа с сеткой в Figma реализована максимально удобно:
- добавить её для фрейма легко;
- настроить можно очень быстро и просто;
- количество сеток для фрейма не ограничено.
Плагины
Figma — удобный инструмент для работы над дизайном интерфейсов. Но можно сделать работу в редакторе ещё быстрее, автоматизировав часть рутинных задач. На помощь придут плагины.
Они все доступны на сайте Figma, где вы можете подобрать нужный, как в магазине приложений. Также плагин можно выбрать на главном экране Figma. Если у вас открыт рабочий файл, в панели вкладок нажмите на иконку Figma, слева в меню выберите раздел Community (Сообщество), нажмите Explore и далее Plugins.
Десктопное приложение и Figma Mirror для смартфонов
У Figma есть десктопное приложение для Mac OS и Windows, а вот любителям Linux придётся довольствоваться браузерной версией. Ещё есть приложение для мобильных устройств — Figma Mirror. С его помощью можно проверять результат работы на самом устройстве, что очень удобно. Главное, чтобы компьютер и мобильный находились в одной Wi-Fi-сети. Скачать нужные приложения можно в разделе Downloads на сайте Figma.
Импорт Sketch-файлов
На Figma очень легко перейти со Sketch, и причина не только в схожести инструментов. У Figma есть возможность импорта Sketch-файлов. Реализована эта функциональность очень качественно. Сохраняются слои, группы, даже локальные компоненты. Проблемы возникают, только если к импортируемому файлу были подключены внешние библиотеки компонентов. Связи рвутся, и в Figma элементы будут отображаться некорректно.
Стоимость
Для личного пользования вполне хватит бесплатных возможностей Figma.
Можно спокойно делать проекты на фрилансе. Бесплатный аккаунт Figma называется Starter, и возможности у него такие:
- история изменений хранится 30 дней;
- можно завести и поддерживать не более трёх проектов;
- только два пользователя могут иметь права на редактирование.
Платный тариф называется Professional, в нём нет описанных выше ограничений. Вдобавок вы сможете делиться с пользователями библиотеками компонентов ваших проектов. При единовременной оплате годовой подписки каждый месяц вам обойдётся в 12 $. Если этот вариант вам неудобен, можете оплачивать сервис помесячно — по 15 $ за каждый месяц.
Третий тариф — Organization — предназначен для больших команд. Стоит он 45 $ в месяц, оплатить нужно сразу год.
Минусы Figma
В главном преимуществе Figma (совместная работа) кроется и минус, который может оказаться для кого-то существенным. Например, если вы не переносите, когда кто-то наблюдает за вашей работой, Figma может вас расстроить.
Представим ситуацию: вы работаете над макетом, к которому настроен общий доступ для коллег, в том числе для вашего начальника. Менеджер проекта поделился с ним ссылкой для промежуточного отчёта. Босс открыл файл, а вы в этот момент дорабатываете макет. Курсор с именем руководителя возле фрейма, над которым вы в этот момент трудитесь, может выбить из колеи.
Был у меня забавный случай, связанный с совместным доступом. Мы в команде только получили подтверждение от руководства, что можем использовать Figma как основной рабочий инструмент дизайнера. Пока шла закупка лицензий, мы работали в бесплатном тарифе.
Когда я видел курсор непосредственного руководителя возле макета, я любил рядом оставить ему сообщение. И вот как-то раз он отправился на встречу с высшим руководством, где нужно было презентовать дизайн. Показывал он прямо в Figma. Я про эту встречу забыл, и в момент презентации работ увидел его курсор. Недолго думая, я решил написать ему несколько сообщений… Кажется, та встреча прошла успешно, по крайней мере, выговор за это я не получил.
В общем, будьте аккуратны с такими шутками.
Ещё один, уже существенный минус, — это необходимость стабильного интернет-соединения. Если сеть пропадает, нет ни работы, ни результата. Конечно, можно периодически сохранять файлы локально, чтобы открыть их и продолжить без интернета, но в таком случае преимущества облачного продукта пропадают.
Что можно делать в Figma?
В первую очередь, Figma — инструмент для проектирования пользовательских интерфейсов. В ней вы можете рисовать сайты, мобильные приложения, проектировать дизайн-системы и создавать много других digital-проектов. Инструмент активно развивается и область применения со временем становится шире.
Прототипирование
Прототип — это схема экранов приложения, которая имитирует работу будущего продукта. В Figma удобно создавать качественные интерактивные прототипы. Предусмотрена даже интерфейсная анимация, которая постоянно совершенствуется. Это позволяет разрабатывать прототипы, максимально похожие на реальный продукт.
Чтобы создать прототип, вам необходимо:
- Подготовить карту экранов в нужной вам последовательности.
- В верхней части правого блока переключиться на вкладку Prototype.
- Выбрать элемент интерфейса, для которого хотите настроить интерактивность.
- Справа добавить и настроить действие.
В настройках прототипа можно выбрать мобильное устройство, для которого проектируется интерфейс. Так вы в режиме просмотра прототипа увидите, как будет выглядеть интерфейс на устройстве.
Usability-тестирование
Когда прототип готов, вы можете протестировать решение на пользователях. Для этого нужно встретиться или связаться с респондентом и поделиться с ним ссылкой на интерактивный прототип.
Передача макетов разработчикам
Чтобы передать макеты разработчику, вам необходимо открыть ему доступ к файлу с правами на просмотр. В таком режиме программисту будут доступны CSS-стили элементов интерфейса. Если он делает мобильное приложение, то сможет посмотреть код для iOS или Android.
Для определения размеров элементов и расстояний между ними есть направляющие.
Презентация
Режим Prototype можно использовать не только для создания прототипов, но и для показа презентаций. Это очень удобно на вебинаре, когда нужно и презентацию показать, и поработать с примером в режиме реального времени. Для этого не обязательно держать запущенными несколько программ, достаточно двух активных вкладок в Figma.
Кому нужна Figma
Figma — отличный инструмент для веб-дизайнера, проектировщика и дизайнера интерфейсов. Ею также могут пользоваться UX-исследователи и разработчики. Руководители продуктов могут контролировать процесс, понимать, на какой стадии находится дизайн, и быстро собирать презентацию для коллег. Аналитики для описания сценариев могут экспортировать макеты, не отвлекая дизайнера от работы.
Figma Templates
Как мы видим, возможности Figma очень широки. Но мы осветили в этой статье далеко не всё. Есть очень полезный раздел, Figma Templates, где собраны шаблоны на разные случаи жизни — от карты пути пользователя до диаграммы Ганта.
Для каждого предусмотрено описание и инструкция по применению.
С чего начать?
Если вам приглянулась Figma и вы решили перейти на неё, обязательно скачайте десктопное и мобильное приложения — они есть в разделе Downloads на сайте.
После регистрации вам будут доступны сам графический редактор и менеджер файлов. Интерфейс Figma очень простой и интуитивно понятный, поэтому разобраться в нём будет легко.
Тем не менее, в процессе работы могут возникать вопросы и сложности. Большинство ответов поможет найти официальный канал Figma на YouTube. Там собраны пошаговые уроки и другие полезные материалы по инструменту. Обязательно обращайтесь к нему во время работы.
Выводы
На мой взгляд, Figma — очень крутой инструмент со своими плюсами и минусами. Она одна заменяет несколько программ и помогает команде выполнить широкий спектр задач. Но каждый решает сам, каким инструментом ему удобнее пользоваться. И я надеюсь, что эта статья поможет сделать правильный выбор.
Что такое Figma и для чего она используется?
Если вы долгое время занимались дизайном, вы почти наверняка слышали о Figma. В нем есть множество инструментов, которые помогут вам достичь ваших творческих целей, независимо от того, работаете ли вы самостоятельно или с другими.
Однако понимание программного обеспечения Figma может быть сложным, если вы к нему не привыкли. Прежде чем погрузиться в изучение, полезно узнать, что это за инструмент и для чего его можно использовать.
Имея это в виду, что делает Figma? Когда вы можете захотеть его использовать? Давай выясним.
Что такое фигма?
Figma — это инструмент, в первую очередь предназначенный для людей, которые хотят разрабатывать интерфейсы. Программное обеспечение было первоначально запущено в сентябре 2016 года. На момент написания статьи в январе 2023 года Figma использовали более четырех миллионов человек.
Сегодня Figma является частью экосистемы Adobe; Adobe завершила покупку компании в сентябре 2022 года за 20 миллиардов долларов.
У Figma есть бесплатный план, который включает неограниченное количество соавторов и по три файла для Figma и FigJam. Вы можете выбрать платную подписку, если вам нужен доступ к большему.
Для чего используется Figma?
Теперь, когда вы знаете больше об инструменте Figma, давайте посмотрим, что вы можете сделать с помощью сервиса. Ниже приведены примеры того, как вы можете извлечь выгоду из использования Figma.
1. Мозговой штурм
Если вы находитесь на стадии концептуализации большого проекта, вам нужно собрать свои мысли в одном месте. И хотя вы можете нарисовать их на бумаге, вам, вероятно, будет проще записать свои идеи в Интернете.
Figma — удобный инструмент для мозгового штурма. Вы можете использовать текстовые поля, чтобы написать все, что вам может понадобиться позже, а также использовать различные фигуры и добавлять комментарии, а также многое другое.
2. Дизайн страниц веб-сайта
Хорошо спроектированный веб-сайт имеет решающее значение для компаний, которые хотят максимизировать свой доход и привлечь больше людей.
Но прежде чем сайт заработает, необходимо провести много предварительного планирования за кулисами. Если вы хотите увидеть, как будут выглядеть разные веб-страницы, прежде чем воплощать их в жизнь, стоит использовать Figma.
В Figma вы можете выбирать из множества размеров, чтобы точно изобразить, как будет выглядеть ваша страница. Например, вы можете выбирать из разных размеров iPhone, если вы делаете что-то, что будет отображаться на смартфоне.
Вы также можете выбрать другие полезные функции, чтобы увидеть, как страница будет работать в реальной жизни, например, прокрутку.
3. Создание прототипов приложений
В связи с вышеизложенным, Figma является обязательным инструментом для дизайнеров пользовательского интерфейса (UI) и взаимодействия с пользователем (UX). Этот инструмент невероятно полезен, если вы хотите создать прототипы приложений и посмотреть, как они будут работать на нескольких устройствах.
В предыдущем разделе мы упоминали, что вы можете выбрать размеры для разных iPhone, но это еще не все.
При использовании Figma вы можете увидеть, как будет выглядеть интерфейс вашего приложения на устройствах iPad и Android.
При создании прототипа приложения с помощью Figma вы можете добавить текст и изменить его шрифты и размеры. Вы также можете интегрировать несколько плагинов и многое другое.
4. Управление проектами
Когда вы думаете о программном обеспечении для управления проектами, вы можете подумать о таких решениях, как monday.com или Asana. Но если вы уже используете Figma для своих проектов, возможно, вы захотите использовать ее и для управления ими.
В Figma есть несколько инструментов, которые вы можете использовать для управления проектами. Например, вы можете сотрудничать с множеством людей и узнавать их мнение. Кроме того, вы можете использовать фигуры и текст в Figma для создания графиков проекта.
При использовании Figma вы можете, как и при создании прототипов, интегрировать множество плагинов, которые помогут вам управлять своими проектами.
5. Интеллект-карты
Если вы хотите создавать интеллект-карты вместо мозгового штурма, Figma — удобный инструмент для этого. Вы найдете несколько шаблонов карт ума, которые вы можете использовать, чтобы дать себе преимущество, но у вас также есть множество инструментов для создания карт ума с нуля.
Figma позволяет творчески создавать интеллект-карты несколькими способами. Например, помимо ввода текста, вы можете использовать различные маркеры, чтобы рисовать то, что вы пытаетесь сказать. Кроме того, вы можете добавить разъемы и различные виды наклеек.
Если вы хотите, чтобы другие внесли свой вклад в вашу карту ума, вы можете использовать инструменты совместной работы Figma. Вы можете позволить им редактировать документ напрямую, если хотите, чтобы они внесли свой вклад.
Figma: полезный инструмент концептуализации для творческих людей
Figma — один из лучших инструментов для разработки интерфейсов на рынке, и он может найти множество применений для дизайнеров.
Но даже если вы находитесь в другой творческой области, вы можете использовать Figma несколькими другими способами. Это удобно на ранних этапах планирования, и вы можете использовать его вместе с многочисленными приложениями, чтобы упростить совместную работу с другими.
Вы можете использовать Figma для разработки страниц веб-сайтов и приложений, а также целевых страниц и многого другого. А если вы не хотите начинать с нуля, вы найдете множество бесплатных шаблонов.
Сила Figma как инструмента дизайна
Что такое Figma? Figma — это облачный инструмент проектирования, похожий на Sketch по функциональности и функциям, но с большими отличиями, которые делают Figma более удобным для совместной работы. Для тех, кто скептически относится к таким утверждениям, мы объясним, как Figma упрощает процесс проектирования и более эффективно, чем другие программы, помогает дизайнерам и командам эффективно работать вместе.
Давайте посмотрим поближе.
Figma работает на любой платформе
Figma работает на любой операционной системе с веб-браузером.
Mac, ПК с Windows, машины с Linux и даже Chromebook можно использовать с Figma. Это единственный в своем роде инструмент для проектирования, который делает это, и в магазинах, использующих оборудование, работающее под управлением разных операционных систем, все все еще могут делиться, открывать и редактировать файлы Figma.
Во многих организациях дизайнеры используют компьютеры Mac, а разработчики — ПК с Windows. Что делает Figma, чтобы помочь объединить эти группы? Универсальный характер Figma предотвращает раздражение PNG-pong (где обновленные изображения прыгают туда-сюда между дисциплинами команды дизайнеров). В Figma нет необходимости в посредническом механизме, чтобы сделать дизайн доступным для всех.
Совместная работа в Figma проста и привычна
Поскольку Figma основана на браузере, команды могут сотрудничать так же, как в Документах Google. Люди, просматривающие и редактирующие файл, отображаются в верхней части приложения в виде круглых аватаров.
У каждого человека также есть именованный курсор, поэтому отслеживать, кто что делает, легко. Щелчок по чужому аватару приближает его к тому, что он просматривает в данный момент.
Совместная работа с файлами в режиме реального времени помогает смягчить «дрейф проекта», определяемый как неверная интерпретация или отклонение от согласованного проекта. Дрейф дизайна обычно происходит, когда идея придумывается и быстро реализуется во время работы над проектом. К сожалению, это часто приводит к отклонению от установленного дизайна, вызывая трения и переделки.
Для чего используется Figma? Используя Figma, ведущий дизайнер может проверить, что проектирует команда, в режиме реального времени, просто открыв общий файл. Если дизайнер каким-то образом неверно интерпретирует бриф или пользовательскую историю, эта функция позволяет руководителю проекта вмешаться, скорректировать курс и сэкономить бесчисленное количество часов, которые в противном случае были бы потрачены впустую. (Для сравнения, команды, использующие Sketch, не имеют возможности сразу определить, сбиваются ли дизайнеры с пути.
)
Примечание: некоторые дизайнеры не любят, когда за ними «шпионят», так что все зависит от дизайна. привести к объяснению преимуществ. В целом, большинство дизайнеров быстро видят ценность такой функции и легко адаптируются к работе в общей среде.
Figma использует Slack для общения в команде
Figma использует Slack в качестве канала связи. Когда канал Figma создается в Slack, любые комментарии или изменения дизайна, сделанные в Figma, «передаются» команде. Эта функциональность имеет решающее значение при проектировании в реальном времени, потому что изменения в файле Figma будут обновлять каждый второй экземпляр, в который встроен файл (потенциальная головная боль для разработчиков). Изменения в макете, оправданные или нет, немедленно проверяются, и канал обратной связи активен.
Совместное использование Figma — это просто и гибко
Figma также позволяет совместно использовать любые файлы, страницы или фреймы на основе разрешений (называемые монтажной областью в других инструментах дизайна).
Когда создается ссылка для общего доступа к фрейму на странице, человек, щелкающий по этой ссылке, открывает браузерную версию Figma, и загружается увеличенный вид фрейма.
Эта форма выборочного обмена, от файла до кадра, позволяет дизайнерам, владельцам продуктов и разработчикам делиться именно тем, что необходимо для инструментов отслеживания ошибок и программного обеспечения сообщества, такого как Confluence или SharePoint.
Встроенные файлы Figma обеспечивают обновление в режиме реального времени
Figma также предоставляет живые фрагменты кода для вставки для вставки iFrame в сторонние инструменты. Например, если Confluence используется для отображения встроенных файлов макетов, эти файлы не «обновляются» путем сохранения файла Figma — эти встроенные файлы ЯВЛЯЮТСЯ файлом Figma.
Если кто-либо в Figma вносит изменения в макет, это изменение можно увидеть в режиме реального времени во встроенном макете Confluence. (Подробнее об интеграции Figma и Confluence можно прочитать здесь.
)
Влияние этой функции на процесс UX показано на следующей диаграмме:
До появления Figma для облегчения обмена макетами дизайна и обновлениями использовалось несколько других инструментов. Цикл итераций представлял собой серию обновлений файлов туда и обратно, поэтому команды могли просматривать и реализовывать текущий дизайн.
После Figma сторонние инструменты больше не нужны (но при желании можно использовать). Поскольку Figma обрабатывает функциональность сторонних инструментов, описанных ранее, в этом процессе есть только один шаг — перейти от эскизов к Figma, и все группы получат последние макеты. Никакой «передачи» в прямом смысле этого слова не существует.
Как Figma поддерживает команду? Когда в приложении есть комментарии как для режима дизайна, так и для прототипирования, цепочка комментариев отслеживается в Slack и/или по электронной почте. Нет необходимости публиковать файлы PNG или выполнять постоянные обновления, чтобы получать отзывы от команды с помощью стороннего инструмента, такого как InVision или Marvel.
Во время проверки проекта дизайнеры команды могут обсуждать свою работу на большом экране, записывать комментарии и устранять проблемы — и все это в Figma. Эта форма обратной связи в реальном времени невозможна в Sketch, который требует загрузки в облачный сервис, чтобы получить информацию от команды.
Передача разработчику упрощается с помощью Figma
Figma отображает фрагменты кода для любого выбранного кадра или объекта в форматах CSS, iOS или Android, которые разработчики могут использовать при просмотре файла дизайна. Компоненты дизайна могут быть проверены любым разработчиком в любом файле, который они могут просматривать. Нет необходимости использовать сторонний инструмент для получения информации. Несмотря на это, Figma имеет полную интеграцию с Zeplin, если командам нужно больше, чем простое измерение и отображение CSS.
Файлы проектов Figma находятся в одном месте — в сети
Поскольку Figma — это онлайн-приложение, оно управляет организацией файлов, отображая проекты и их файлы в специальном представлении.
Figma также поддерживает несколько страниц в файле, например Sketch, поэтому Agile-команды могут логически организовывать свои проекты:
- Создать проект для темы функции
- Создайте файл для эпического или крупного объекта.
- Создать страницы в этом файле для каждого пользователя история .
Это всего лишь один из методов организации файлов, которые можно сделать более или менее детализированными в зависимости от требований процесса.
API-интерфейсы Figma обеспечивают интеграцию сторонних инструментов
Теперь у Figma есть API-интерфейсы разработчиков, обеспечивающие настоящую интеграцию с любым браузерным приложением. Компании используют это для интеграции отображения файлов дизайна в реальном времени в свои приложения. Например, у Uber есть большие экраны, на которых файлы дизайна отображаются «в прямом эфире» вокруг их компании. Проекты являются общими, и отзывы приветствуются от всех в компании.
Программное обеспечение Atlassian JIRA включает надстройку Figma, поэтому владельцы продуктов, разработчики и инженеры по качеству всегда просматривают последнюю версию любого макета от дизайнеров.
Кроме того, API Figma обещает выполнять запросы клиентов на сторонние плагины и улучшения функций, которые уже предоставляет Sketch.
Управление версиями файлов происходит автоматически или по запросу
Любая неопределенность, связанная с обновлением файлов в реальном времени, дополнительно смягчается встроенной системой управления версиями Figma. В любой момент дизайнер может создать именованную версию и описание файла Figma; это можно сделать сразу после внесения в проект согласованных изменений.
Живой файл в общей среде не будет затронут до тех пор, пока изменения не будут преднамеренно зафиксированы в исходной версии. Также можно восстановить любые автоматически сохраненные версии, чтобы создать дубликат или перезаписать оригинал.
Прототипирование в Figma простое и интуитивно понятное
В то время как Sketch недавно добавил монтажную область к прототипированию монтажной области, Figma пошла дальше, предоставив переходы между кадрами.
Простая функция создания прототипов в Figma устраняет необходимость в другом инструменте для создания прототипов в стиле слайд-шоу, таком как InVision или Marvel. Когда все, что нужно, — это простая презентация с переходами, нет необходимости экспортировать в инструменты просмотра.
Прототипы Figma можно распространять так же, как файлы дизайна Figma; любой, у кого есть разрешение на ссылку, может просматривать и комментировать прототип, и опять же, эта обратная связь фиксируется на панели комментариев инструмента и записывается в Slack. Разработчики могут видеть рабочий процесс проектирования, оставлять прямые @сообщения для дизайнеров и получать измерения и атрибуты CSS из прототипа.
Дизайн-системы стали необходимостью для многих компаний, и существует потребность в компонентах (символы в Sketch и Illustrator), которые можно многократно использовать, масштабировать и «токенизировать» для использования в библиотеках шаблонов, доступных для дизайнеров UX и передовых дизайнеров.
-конечные разработчики.
Часто используемая фраза «единственный источник правды» действительно подходит здесь — после создания командной библиотеки Figma любой, у кого есть доступ к проекту, может использовать экземпляры компонентов в своих проектах и быть уверенным, что они работают с последними версиями.
Подход Figma к библиотекам компонентов прост и удобен в управлении. Дизайнеры могут создавать файлы, полные компонентов, или использовать компоненты на странице для организации библиотеки шаблонов. Каждый кадр на странице Figma становится организационным разделом в библиотеке команды (нет необходимости создавать иерархии\подобные\эти).
Одним из способов организации библиотек является создание проекта, посвященного исключительно компонентам. Файлы в этом проекте могут быть организованы по мере необходимости, и страницы в этих файлах могут быть организованы соответствующим образом.
Использование программного обеспечения Figma в течение любого периода времени продемонстрирует преимущества этого инструмента для совместной работы в реальном времени.
Это заставляет команды работать над задачей и поощряет полное раскрытие информации, что необходимо при создании системы проектирования для различных дисциплин. Инструмент проектирования Figma прост в использовании на любой платформе и позволяет командам быстро делиться своей работой и библиотеками.
Эксперты по дизайну, которые используют Figma после перехода со Sketch (файлы Sketch можно импортировать с четностью в Figma), не разочарованы:
… он полностью меняет то, как вы можете работать с коллегами и клиентами — оптимизируйте совместный дизайн с Figma
Figma объединила все самое лучшее в мире инструментов для дизайна пользовательского интерфейса за последние несколько лет — почему ваша команда дизайнеров должна подумать о переходе на Figma
В течение последнего года я использовал Figma для своего процесса проектирования UI/UX, и это сэкономило мне часы работы. Это действительно изменило мой рабочий процесс проектирования — Как оптимизировать рабочий процесс UI/UX с помощью Figma
Время, проведенное в Figma, обычно является самой приятной и продуктивной частью моего дня — Figma меняет весь мой рабочий процесс, и это потрясающе!
Понимание основ
Что означают инструменты для совместной работы?
В области дизайна инструменты для совместной работы помогают дизайнерам из разных областей (вместе с разработчиками) работать вместе над созданием цифровых продуктов.
