Фигма это: Что такое Figma и как ей пользоваться / Skillbox Media

это что + подробный гайд как пользоваться

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

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

Для чего нужна Figma

Вот лишь три примера силы «Фигмы»:

1. Вы подготовили 100 макетов, но понадобилось внести изменение в название пункта меню. Воспользовавшись соответствующим компонентом редактора, вы решите эту проблему за 20-30 секунд.
2. Вам необходимо сверстать макеты для 5 разных экранов. Задавать разрешения для каждого из них вручную не придется: в редакторе есть готовые фреймы, а также предусмотрена необходимая высота/ширина для экранов разных типов устройств.
3. Вы хотите работать над прототипом сразу с несколькими участниками — верстальщиком, дизайнером, продакт-менеджером — и видеть вносимые ими изменения в реальном времени. Для Figma нет ничего проще.

Читайте также:

Что такое Trello и как в нем работать: полное руководство

Перечислим все плюсы Figma:

1. Работа по принципу « нарисовал = сверстал». Это не Photoshop, где можно создать такие элементы, которые будет невозможно перенести на верстку: например, какие-то многослойные растровые изображения или изображения с сохранением нескольких масок.
2. Есть бесплатная версия. Это все то же самое, что и в платных тарифных планах: неограниченное количество личных файлов, соавторов, плагинов и шаблонов, мобильное приложение. Ограничения: нельзя создать более трех Figma-проектов и трех FigJam-файлов.
3. Можно работать в команде. При необходимости вы можете дать доступ любому сотруднику компании, чтобы он не обращался к вам каждый раз, когда нужно уточнить какую-либо деталь по проекту. Больше не нужно пересылать большое количество скриншотов между несколькими участниками проекта и пытаться понять, как именно макет отзывается на то или иное действие. Просто отправьте URL на проект и участники смогут посмотреть все, что их интересует (кнопка «Поделиться прототипом» или «Share Prototype»).
4. Работа происходит в облаке, и вы не зависите от конкретного компьютера или любого другого устройства. Главное — помнить свой логин и пароль для авторизации в сервисе.
5. При необходимости вы можете скачать десктоп-клиент. Figma также предлагает оффлайн-версию для пользователей, которые имеют ограничения по использованию интернета. По сути, разницы между оффлайн и онлайн-версиями нет, но в оффлайн-версии Figma не будет вести учет ваших изменений и синхронизировать их.
6. Большое количество интеграций с продуктами других разработчиков. Например, с Principle, Flinto, Sketch для расширения функциональности редактора, добавления новых инструментов и оптимизации работы над теми компонентами, которым в Figma уделено недостаточное внимание.
7. Полная кроссплатформенность. Работайте на любых устройствах (есть приложение для Android и iOS), а также на самых популярных операционных системах, включая Windows и macOS.
8. Можно пользоваться сторонними плагинами. Они значительно расширяют функциональность редактора «из коробки». Например, плагин «Chroma» позволяет работать с цветовыми стилями в пару кликов.
9. Есть поддержка анимации. Можно создавать анимацию интерфейса без дополнений и плагинов: это переходы, наслоения и многое другое.
10. Продукт постоянно «допиливается» и улучшается. Разработчики вносят дополнения, улучшают функционал редактора, добавляют новые возможности.
11. Есть режим работы для разработчиков. Благодаря ему можно за несколько секунд получить все необходимые по проекту данные: например, технические параметры конкретного изображения, а также их свойства, текстовый контент или, например, узнать расстояние между конкретными объектами на странице.
12. Поддержка дочерних и родительских компонентов. Если вы один раз внесли изменение в родительский компонент, оно отобразится во всех дочерних элементах.

Работа с компонентами выручит вас при редактировании большого количества проектов или при работе над сложносоставными проектами.

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

1. Для полноценной работы нужен постоянный доступ в интернет.
2. Импорт работает некорректно. Импортируя сложные элементы, вы должны быть готовы к тому, что все составляющие объекта «едут» в произвольную сторону. Особенно текстовые блоки и все используемые в оригинале маски. Даже простейший SVG (Scalable Vector Graphics — масштабируемая векторная графика) не может быть импортирован полностью корректно.
3. Нет полноценной системы тегов. Если вам нужно, например, разбивать файлы внутри команды на большое количество папок, редактор вас не выручит. Разбивка на проекты — это максимум, что предлагает «Фигма» с точки зрения иерархии файлов.
4. Есть баги. Например, при изменении размера текста, когда он может смещаться и выходить за заданные границы.
5. Обучиться за пару часов не получится. Даже если вы уже работали с векторными редакторами и сейчас, к примеру, переезжаете со Sketch или Illustrator. И тем более придется потратить время на обучение, если вы не работали с такими инструментами.
6. Для командной работы возможностей бесплатного тарифа точно будет недостаточно. Приготовьтесь платить: самый доступный тариф — от 12 долларов в месяц.
7. Нет версии под Linux. Но есть неофициальные десктоп-приложения от разных разработчиков, например, Figma-linux.
8. Пропадают изображения шрифтов и других элементов, если долгое время работать сразу с несколькими макетами.
9. Справочные материалы только на английском языке, да и любительских сообществ по Figma гораздо меньше, чем по тому же Adobe Illustrator.

С теорией все. Теперь переходим к практике. Запасайтесь чаем и чем-нибудь хрустящим: мы начинаем!

Присоединяйтесь к нашему Telegram-каналу!

• Теперь Вы можете читать последние новости из мира интернет-маркетинга в мессенджере Telegram на своём мобильном телефоне.
• Для этого вам необходимо подписаться на наш канал.

Как работать с «Фигмой».

Основные операции

Чтобы начать пользоваться сервисом, откройте его сайт и нажмите кнопку «Sign up» в правом верхнем углу экрана:

Регистрируемся на сайте

Укажите свой e-mail, введите пароль и нажмите «Create account»:

Заполните форму авторизации или авторизуйтесь при помощи Google

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

Выберите имя и укажите, какой работой вы занимаетесь

Нажмите кнопку «Create account»: все, аккаунт зарегистрирован. Мы сразу попадаем в менеджер файлов:

Так выглядит главный экран менеджера файлов

В любом случае нам понадобится создать новый файл. Чтобы это сделать, кликните по кнопке «New design file» в левой части экрана:

Кликните по синей кнопке, чтобы создать новый дизайн или прототип

Вы сразу попадете в окно графического редактора:

Обновленный интерфейс графического редактора

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

Если же вы хотите импортировать файл из Figma, Sketch или файл изображения, на главном экране нажмите кнопку «Import file» в правом углу экрана и выберите необходимый файл на жестком диске компьютера:

Импортируем файл в графический редактор

Если вы не хотите пользоваться онлайн-версией редактора, скачайте десктоп-клиент. Для этого откройте раздел «Загрузки» на сайте редактора и выберите клиент для используемой операционной системы:

Скачиваем десктоп-клиент для Windows или macOS

Здесь же вы можете загрузить мобильное приложение для iOS или Android, а также инсталляторы для шрифтов для Windows или macOS.

Как работать в менеджере файлов

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

Менеджер файлов — это инструмент для управления проектами. Здесь можно:

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

Верхнее навигационное меню содержит несколько элементов:

Верхнее меню менеджера файлов редактора

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

Кнопка выбора пользователя

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

Поисковая строка (в верхнем навигационном меню). При помощи нее вы можете быстро найти необходимые файлы, людей или команды, которым они принадлежат:

Поисковая строка в менеджере файлов

Иконка колокольчика. Это раздел уведомлений, которые относятся к вашим проектам или работе в команде. Очень полезный инструмент, если вы работаете сразу в нескольких проектах и боитесь что-то упустить:

Уведомления о новых действиях в ваших проектах и ваших командах

Аватар профиля (в правом углу экрана). Отсюда происходит управление вашим внутренним профилем:

Аватар пользователя в правом углу экрана

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

Читайте также:

Полное руководство по обновленному «Яндекс.Вебмастеру»

Internal profile. Здесь вы можете:

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

Настройки профиля в разделе «Internal profile»

Plugins. Отсюда происходит управление уже установленными плагинами.

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

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

Settings. Здесь происходит управление настройками вашего аккаунта. Вы можете изменить:

• имя аккаунта;
• email;
• пароль;
• а также включить двухфакторную аутентификацию.

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

Настройки аккаунта пользователя

Get desktop app. Скачайте десктоп-клиент графического редактора в один клик.

Нажмите Get desktop app, чтобы скачать десктоп-клиент редактора

Add account. Добавление нового аккаунта.

Log-out. Выйти из текущего аккаунта.

С верхним меню — все. Теперь переходим к рассмотрению левого навигационного меню:

Навигационное меню в левой части экрана

Что здесь есть:

Recents. Быстрый доступ к недавним проектам. Все файлы, которые вы открывали недавно, будут отображаться здесь.

Раздел Recents в менеджере файлов

Drafts. Быстрый доступ к черновикам. На этом экране вы увидите все сохраненные проекты, которые вы перевели в черновики.

Раздел Drafts в менеджере файлов

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

Раздел Community содержит тысячи дополнений для графического редактора

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

Нажмите эту кнопку, чтобы обновить текущий тарифный план

• Starter: бесплатный навсегда, максимум три проекта.
• Professional: 12 долларов в месяц.
• Для организаций: 45 долларов в месяц.

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

Раздел Team project находится в левом навигационном меню

Также обратите внимание на две кнопки в правом углу экрана:

Кнопки «Добавить в избранное» и «Поделиться»

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

Пробуем поделиться проектом с другим пользователем

Create new team. Создание новой команды. После создания команды вы можете пригласить в нее других пользователей.

Как работать в Figma. Практика

Интерфейс графического редактора Figma необычный, он не похож на Adobe Illustrator, Sketch или Canva:

Рабочая область «Фигмы»

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

Полезная подсказка: используйте функцию «Quick actions», чтобы быстро найти необходимое меню, команду или плагин. Она находится в меню «Файл» или вызывается при помощи сочетания горячих клавиш Control + /.

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

Функция «Quick actions» — это быстрый доступ ко всем меню и командам, которые есть в «Фигма»

Как работать с фреймами

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

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

Доступны следующие варианты:

1. Телефон.
2. Планшет.
3. Десктоп.
4. Презентация.
5. Умные часы.
6. Бумажные листы (A4 и A6, например).
7. Социальные сети.
8. Community.
9. Архивные фреймы.

При необходимости вы можете быстро проверить созданный объект. Для этого откройте вкладку «Inspect» в правом углу экрана и выберите операционную систему или просто проверьте код в «стилях»:

Вкладка «Inspect» создана специально для разработчиков

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

Редакторы могут получить доступ к вкладкам «Дизайн» и «Прототип» на правой боковой панели. Зрители имеют доступ только к вкладкам «Проверка» и «Экспорт».

Вкладки «Дизайн» и «Прототип»

Как создать новый макет

Выделите необходимый слой правой кнопкой мыши и перетащите курсор, удерживая ее. Отпустите правую кнопку и посмотрите в правую часть редактора. Нам необходимо перейти на вкладку «Design»:

Открываем ее, чтобы получить доступ к макету сетки

Здесь нас интересует функция «Layout Grid», или макет сетки. Сперва выберите необходимый слой в левом меню (Layers). Затем, чтобы настроить параметры сетки, кликните по иконке макета:

Нажмите на эту иконку

Теперь переходим в параметры макета сетки.

Чтобы настроить сетку для слоя, кликните по иконке Layout grid settings

Вы можете выбрать тип (строки, столбцы или сетка), задать размер, цвет, и при необходимости — канал прозрачности.

Читайте также:

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

Как работать со шрифтами

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

Инструмент «Text» для работы с типографикой проекта

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

Работа с текстом. Параметры типографики выделены красным

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

Как просмотреть созданный дизайн на разных экранах и разных типах устройств

Прототипирование в «Фигме» сделано не настолько подробно, как в специализированных инструментах, но для решения базовых задач вполне сгодится. Откройте необходимый проект и перейдите на вкладку «Prototype»:

Перейдите на выделенную вкладку (Prototype), чтобы открыть инструмент прототипирования

Допустим, нам необходимо создать прототип для iPhone 11. Выбираем эту модель в списке «Device», затем настраиваем ориентацию экрана, тип модели и получаем предпросмотр (но это еще не все):

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

В строке «Background» вы можете изменить цвет фона.

После того, как все параметры устройства будут настроены необходимым образом, кликните по иконке треугольника в правом верхнем углу экрана:

Нажмите кнопку «Present», чтобы сымитировать созданный дизайн на экране необходимого устройства

Мы получили результат с учетом необходимой ориентации экрана и типа устройства:

Так наш дизайн будет выглядеть на экране iPhone 11

Как работать со слоями

Все созданные элементы отображаются на вкладке «Layers» (Слои), которая находится в крайней левой части экрана:

Работа с группировкой слоев интуитивно понятная. Можно копировать, заменять, вставлять

Со слоями вы можете делать все то же самое, что и в других графических редакторах. Например:

1. Копировать.
2. Вставлять.
3. Заменять.
4. Работать с группами слоев.
5. Скрывать / показывать.
6. Менять ориентацию.
7. Добавлять маски.
8. Добавлять автоматические слои.

На этой же вкладке отображаются все созданные вами группы объектов.

Редактирование фотографий или иных изображений

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

Чтобы добавить новое изображение в проект, откроете меню «File» и выберите пункт Place Image:

Выберите пункт Place image

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

Когда вы используете метод «Поместить изображение» (Place image) — получаете возможность добавлять несколько изображений одно за другим. Все они обрабатываются как заливки и вы можете использовать этот метод для добавления выбранных изображений к уже существующим фигурам.

Один из вариантов использования Place image — быстрое добавление изображений профиля к трем различным дизайнам (круг, квадрат и прямоугольник с закругленными углами), которые вы хотите протестировать.

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

Окно редактирования свойств изображения

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

Здесь даже есть редактирование наложения слоев, которое сделано по типу Adobe Photoshop:

Выберите метод наложения

Наконец меняем то, как слои будут накладываться друг на друга:

Изменяем режим наложения слоев

Вот другие важные функции редактирования изображения, которые могут вам понадобиться:

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

Также можно отразить изображение по горизонтали или вертикали (сочетание горячих клавиш Shift + V и Shift + H, соответственно).

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

Как изменять стиль сразу для нескольких элементов в проекте

Сформируйте любой необходимый в проекте объект. Например, полигон. Добавьте его на фрейм как обычно. Выделите объект правой кнопкой и найдите уже знакомую нам строку Fill (заливка):

Настройки заливки в навигационном меню справа

Кликните на иконку Style и выберите цвет из необходимой коллекции:

Кликните значку Style в строке Fill

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

Читайте также:

Инструкция по визуальному оформлению текста

Интерфейс Figma

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

File

Меню управления файлом. В нем вы можете создать новый файл «дизайна», новый Fig-Jam или файл из Sketch. Также доступны следующие функции:

• Place Image. Вставить картинку на конкретную точку рабочей области.
• Safe to version history. Сохранить файл в историю версий.
• Save local copy. Сохранить локальную копию файла.
• Show version history. Показать историю версий.
• Export. Экспортировать текущий проект.
• Export frames to PDF. Экспортировать фреймы в PDF-формат. Чтобы совершить экспорт, в проекте должны присутствовать фреймы верхнего уровня.

Меню File используется для глобального управления файлами в редакторе

Edit

Стандартное для всех графических редакторов меню редактирования. В нем доступны следующие функции:

• Undo. Отменить.
• Redo. Повторить.
• Copy as. Копировать как. Можно сохранить в CSS, SVG или PNG.
• Paste over selection. Вставить выделение.
• Paste to replace. Вставить для замены.
• Duplicate. Дублировать или скопировать.
• Delete. Удалить.

Меню Edit создано для редактирования объектов

Также доступна работа со значениями объекта:

• Set default properties. Установить значения по умолчанию.
• Copy / Paste properties. Функция копировать / вставить, для ускорения работы, также доступна.
• Pick color. Это функциональная пипетка для выбора цвета. Просто кликните по необходимому пикселю, и цвет автоматически добавится в инструмент.

Широко представлены инструменты выделения:

• Select all. Выбрать все выделения.
• Select none. Снять все выделения.
• Select inverse. Выбрать инверсию.
• Select all with the same properties. Выбрать все с идентичными параметрами.
• Select all with same: variant / fill / instance / stroke / font / effect / text. Удобный инструмент, если вам нужно выделить все с определенным эффектом или штрихом, например.

View

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

• Pixel Grid. Показать сетку.
• Layout grids. Вывести сетки слоев.
• Rulers. Линейки.
• Show slices. Показать фрагменты. Фрагменты позволяют указать определенную область экрана для экспорта, даже если они не объединены в одну группу. Просто перетащите фрагмент вокруг области, которую вы хотите экспортировать, и добавьте параметры экспорта в объект-фрагмент.
• Comments. Показывать комментарии в проекте.
• Show outlines. Показывать контуры.
• Pixel preview. Предварительный просмотр в пикселях.
• Mask outlines. Добавить маску на контур.
• Frame outlines. Показывать контуры фрейма.
• Resource use. Показать использование ресурсов.

Меню View

Также здесь находятся инструменты просмотра, касаемые интерфейса программы:

• Show / hide UI. Показать / спрятать пользовательский интерфейс.
• Multiplayer cursors. Активировать многопользовательские курсоры.
• Panels. Отсюда вы можете открыть все виды панелей: панель слоев, библиотеки, дизайна, прототипирования, панель инспекции кода.
• Все инструменты типа Zoom (in / out / fit / 100 % и так далее). Для увеличения и отдаления рабочей области.
• Previous / Next page. Для навигации между страницами.
• Find previous / next frame. Для навигации между фреймами.

Читайте также:

Страница 404: 18+ примеров как оформить страницу ошибки

Object

Меню управления объектами проекта. Доступны следующие функции:

• Group selection. Выбор группы.
• Create section. Создать новую секцию или раздел.
• Frame selection. Выбор фрейма.
• Ungroup selection. Отвязать от группы выделенное.
• Use as mask. Применить в качестве слоя-маски.
• Ad auto layout. Создать автоматический слой.
• Create component. Сформировать отдельный компонент.
• Restore default thumbnail. Восстановить миниатюру по умолчанию.
• Reset all overrides. Сбросить значения всех переопределений. Переопределения — это изменения, которые вы вносите в свойства каждого экземпляра (instance). Благодаря переопределениям вы можете настроить экземпляр в соответствии с его новым контекстом.
• Detach instance. Отсоединить экземпляр.
• Main component. Управление основным компонентом. В этом меню вы можете открыть основной компонент, присоединить переопределения к основному компоненту, восстановить основной компонент.

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

Одно из самых больших меню в редакторе — Object

Также доступны следующие инструменты:

• Bring to front / forward. Быстрый перенос на передний или задний план.
• Send to back / forward. Отправка назад или вперед.
• Flip horizontal / vertical. Быстрое отражение по горизонтали или вертикали.
• Flip vertical. Отразить по вертикали.
• Rotate 180° / 90°. Поворот объекта согласно требуемому углу. Доступен поворот вправо и влево.
• Flatten selection. Сгладить выделение.
• Outline Stroke. Работа с обводкой.
• Boolean groups. Перенести в булевые группы. Булевые функции действительно полезны, когда дело доходит до проектирования сложных структур. Использование булевых групп (можно назвать их логическими группами) сэкономит много времени, которое раньше тратилось на ручное редактирование фигур. Доступны четыре типа булевых групп: объединение, вычитание, пересечение и исключение.
• Rasterize selection. Растеризовать выделение. «Растеризация» позволяет преобразовать векторную форму (например, прямоугольник, круг или текст) и сгладить ее в пиксельное представление.

Здесь же вы найдете инструменты для показа / скрытия выделений (show и hide selection), блокировки (lock / unlock), скрытия остальных слоев (hide other layers), а также их сворачивания (collapse).

Можно быстро удалить заливку или обводку (remove fill и stroke, соответственно) либо удалить их вместе (Removal fill and stroke).

Vector

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

Меню Vector

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

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

Text

Управление типографикой проекта. Для редактируемого текста доступно 11 функций:

• Bold. Добавить начертание жирным.
• Italic. Добавить начертание курсивом.
• Underline. Сделать текст подчеркнутым.
• Strikethrough. Сделать текст зачеркнутым.
• Create link. Создать ссылку.
• Bulleted list. Создать список с буллитами.
• Numbered list. Создать список с цифрами.
• Alignment. Выравнивание текста слева, по центру, справа. Также доступно выравнивание текста сверху, посередине и по низу.
• Adjust. Регулировка параметров шрифта. Здесь вы можете настроить отступы, размер шрифта, его насыщенность, увеличить или уменьшить высоту строки, настроить межбуквенное расстояние.
• Text Direction. Настройка направления текста: слева направо или справа налево.

Меню Text

Arrange

Управление компоновкой объектов внутри проекта. Вы можете использовать следующие функции:

• Round to pixel. Округлить до пикселя, чтобы удалить десятичные дроби таких атрибутов, как X, U, ширина, высота, граница и так далее.
• Align left. Выровнять по левому краю.
• Align horizontal centers. Выровнять горизонтальные центры.
• Align right. Выровнять справа.
• Align top. Выровнять сверху.
• Align vertical centers. Выровнять вертикальные центры.
• Align bottom. Выровнять по нижнему краю.
• Tidy up или «Прибраться». Функция позволяет выравнивать любое количество объектов относительно друг друга. Она изменит отступы, расставит и поменяет их автоматически.

Наглядная демонстрация функции Tidy up

• Pack horizontal. Скомпоновать элементы вплотную друг к другу горизонтально.

• Pack vertical. Скомпоновать элементы вплотную друг к другу вертикально.

• Distribute horizontal spacing. Распределить горизонтальное расстояние.

• Distribute vertical spacing. Распределить интервал по вертикали.

• Distribute left. Распределить слева.

• Distribute horizontal centers. Распределить горизонтальные центры.

• Distribute right. Распределить справа.

• Distribute top. Распределить сверху.

• Distribute vertical centers. Распределить вертикальные центры.

• Distribute bottom. Распределить дно (по нижней границе).

Меню Arrange

Plugins

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

Меню управления плагинами

Integrations

Меню управления интеграциями. Здесь можно подключить уже привычные для вас инструменты — чтобы создать максимально «бесшовный» процесс проектирования. Например, существуют интеграции с Principle, Zeplin, Dribble, Slack.

Preferences

Меню управления пользовательскими предпочтениями. В частности, вы можете настроить привязку к геометрии / объектам / сетке (Snap to geometry / objects / pixel grid).

Меню Preferences

Также можно оставить инструмент выбранным после использования (инструмент Keep tool selected after use) или задействовать альтернативную обработку масштабирования (опция называется Use alternate zoom handling).

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

• Нужно заменить стандартные кавычки на умные. Используйте функцию Substitute smart quotes. Примечание: умные кавычки используют автозамену. В начале слова такая автозамена предполагает, что вам нужна левая (открывающая) кавычка; в середине слова или в конце вы получите апостроф или правильную (закрывающую) кавычку.
• Зуммировать клавиатуру к выделению. Используйте функцию Keyboard zooms into selection.
• Выделять слои при наведении. Используйте функцию Highlight layers on hover.

Также вы можете переименовать дублированные слои (используйте опцию Rename duplicated layers) и отразить объекты во время изменения размера (Flip objects while resizing).

• Use number keys for opacity. Используйте цифровые клавиши для задания непрозрачности.
• Open links in desktop app. Разрешить открывать ссылки в десктоп-клиенте.
• Nudge amount. Величина смещения. Это количество пикселей, на которое смещается редактируемый объект при перемещении.

Libraries

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

Меню Libraries

Get desktop app

Быстрая ссылка на скачивание десктоп-клиента. Больше ничего здесь нет.

Help and account

Справочные материалы и настройки аккаунта. Вы можете:

1. Открыть страницу помощи на сайте редактора.
2. Увидеть полезные горячие клавиши.
3. Открыть форум.
4. Посмотреть видеоуроки.
5. Получить информацию об изменениях в последних релизах.

Меню Get desktop app и Help and account

Основные инструменты Figma

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

• Move и Scale.

• Frame и Slice.

• Rectangle (позволяет создать не только квадрат, и другие геометрические формы).

• Pen и Pencil.

• Text.

• Hand tool.

• Comments.

Верхнее меню позволяет получить доступ к главным инструментам графического редактора

Move tools. Горячая клавиша V

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

Использование инструмента Move на нескольких объектах

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

Использование инструмента Scale

Выделите созданный объект левой кнопкой мыши:

Появится новое меню вверху экрана

При помощи этого меню вы можете:

1. Edit object. Отредактировать объект. Удобно формировать и редактировать фигуры благодаря «Перу» или использовать инструмент «Форма» — чтобы перетаскивать изображение на холст. Сразу после создания необходимой фигуры используйте кнопку «Редактировать объект» (находится в самой панели инструментов), чтобы быстро войти в режим векторного редактирования. Для решения этой задачи вы также можете дважды кликнуть по объекту или использовать клавишу Enter.
2. Create component. Создать на его основе компонент.
3. Use as mask. Использовать в качестве маски. Используйте маски, чтобы показать определенные области объектов и скрыть остальные. Это может сделать любой, у кого есть доступ к редактированию файла.

Frame. Горячая клавиша F

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

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

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

Фреймы — основополагающий элемент дизайна. Этот элемент используется в качестве контейнера верхнего уровня (например, окно просмотра устройства) и/или представляет области или компоненты в создаваемом дизайне.

Также в этом разделе находится «Срез», или «Slice». С его помощью просто выделить любую рандомную область проекта и затем отправить ее на экспорт, например, в SVG или JPG.

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

Срез может находится прямо внутри группы элементов

Rectangle. Горячая клавиша R

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

Инструменты внутри группы shape tools

Pen. Горячая клавиша P

Инструмент нужен, чтобы соединять контуры с замкнутыми фигурами и создавать трехмерные формы так же, как если бы вы рисовали на бумаге. Самый наглядный сценарий: создаете куб только «Пером», после чего не нужно будет объединять или группировать 2D-фигуры вместе.

Куб, который мы создали пером

Также здесь находится инструмент «Pencil», или «Карандаш» (горячая клавиша для вызова Shift + P). Используйте его, чтобы делать наброски на холсте или других объектах.

Text. Горячая клавиша T

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

Примечательно, что в инструменте «Текст» есть собственная библиотека шрифтов. Работу с текстом мы уже разбирали в разделе «Интерфейс».

Работа с объектом типа «текст»

Hand Tool. Горячая клавиша H

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

«Рука» особенно выручает, если вы используете редактор на устройстве с сенсорным экраном

Благодаря Hand tool вы можете перемещаться по файлу пальцами.

Add comment. Горячая клавиша С

Инструмент создан для работы с комментариями. Смысл комментариев такой же, как, например, в Google Docs. Комментарии можно использовать, чтобы отвечать на отзывы, корректировать свои проекты и ускорять итерации — и все это из исходного файла проекта. Вы и ваша команда можете писать комментарии к холсту или к определенным кадрам и слоям в файлах и прототипах. Редактор отображает комментарии прямо там, где вы их добавили на холсте.

Примеры комментариев для отдельных файлов

Читайте также:

Как работать в Google Docs в 2022 году: функции, возможности, нюансы

Резюме

Мы убедились, что Figma — по-настоящему крутой инструмент как для одиночных дизайнеров, так и для больших команд. Используя этот редактор, ведущий специалист может проверить:

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

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

1. Придумайте один элемент интерфейса.
2. Создайте для него три состояния.
3. Разработайте дизайн элемента. Элемент должен корректно выводится в разных состояниях на одном экране.

Присоединяйтесь к нашему Telegram-каналу!

• Теперь Вы можете читать последние новости из мира интернет-маркетинга в мессенджере Telegram на своём мобильном телефоне.
• Для этого вам необходимо подписаться на наш канал.

Что такое 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 есть особенности, которые обязательно стоит иметь в виду:

1. Фрейм может содержать другой фрейм. Это бывает порой очень удобно.
2. Если нужно растянуть фрейм, обязательно удерживайте нажатой клавишу С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 удобно создавать качественные интерактивные прототипы. Предусмотрена даже интерфейсная анимация, которая постоянно совершенствуется. Это позволяет разрабатывать прототипы, максимально похожие на реальный продукт.

Чтобы создать прототип, вам необходимо:

1. Подготовить карту экранов в нужной вам последовательности.
2. В верхней части правого блока переключиться на вкладку Prototype.
3. Выбрать элемент интерфейса, для которого хотите настроить интерактивность.
4. Справа добавить и настроить действие.

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

Usability-тестирование

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

Передача макетов разработчикам

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

Презентация

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

Кому нужна Figma

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

Figma Templates

Как мы видим, возможности Figma очень широки. Но мы осветили в этой статье далеко не всё. Есть очень полезный раздел, Figma Templates, где собраны шаблоны на разные случаи жизни — от карты пути пользователя до диаграммы Ганта. Для каждого предусмотрено описание и инструкция по применению.

С чего начать?

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

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

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

Выводы

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

что это за программа, для чего нужна, как в ней работать

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

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

Что делают в Figma

Инструменты

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

Тарифы

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

Главное о 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 приостановила продажи в России. Доступен только базовый бесплатный тариф.

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

Зайдите на страницу https://www.figma.com/

Нажмите Sign up

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

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

Главное о Figma

• В Figma создают прототипы, интерфейсы сайтов и приложений, иконки, презентации, логотипы, проводят юзабилити-тестирование.
• В Figma удобно демонстрировать прототип заказчику, работать одновременно с командой, передавать проект разработчикам.
• Figma может заменить Photoshop и Illustrator: в ней тоже обрабатывают векторную и растровую графику.
• Есть бесплатный тариф для Windows и MacOS. Если в проекте участвует большая команда, нужна платная версия.

Free Design Tool for Websites, Graphic Design and More

Figma

An all-in-one design platform

DesignPrototypingDesign systemsDownloads

FigJam

An online whiteboard for teams

Online whiteboardingDesign processesTeam meetings

OverviewCustomersContact Sales

Pricing

Files and шаблоны

Бесплатные профессионально созданные файлы, которые вы можете дублировать, микшировать и использовать

Плагины и виджеты

Расширьте возможности и автоматизируйте работу

События и прямые трансляцииПередовой опытОбразовательная программаГруппы пользователей

FrançaisDeutsch日本語

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

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

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

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

Дизайн для Интернета стал проще

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

• Современное перо: Рисование в любом направлении с помощью векторных сетей. Больше не нужно объединяться или подключаться к исходной точке пути.
• Мгновенные дуговые конструкции: Легко проектируйте часы, экраны часов или круговые диаграммы с помощью инструмента Дуга .
• Будьте выразительными с OpenType: Воспользуйтесь расширенными функциями шрифта, чтобы полностью выразить свой бренд.

Адаптивный дизайн с Auto Layout

Тратьте больше времени на итерации и меньше времени на перемещение элементов.

• Меньше ручного изменения размера: Кнопки могут изменять размер вместе с их текстом, а списки могут перестраиваться при перемещении элементов.
• Растянуть до заполнения: Компоненты Auto Layout теперь могут растягиваться влево и вправо (или вверх и вниз) для облегчения адаптивного дизайна.
• Дизайн говорит о разработке: Настройки отступов, направления и интервалов Auto Layout преобразуются непосредственно в код, упрощая передачу разработчикам.

Автоматизируйте и дополните свою работу с помощью плагинов и виджетов

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

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

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

Эллен Белднер, руководитель отдела дизайна продуктов в StitchFix

Будьте эффективны, последовательны и неизменно эффективны

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

• Гибкие стили: Создавайте согласованные стили — цвет, текст, сетку или эффект. Применяйте их к любому тексту или объекту во всех ваших проектах.
• Систематическое проектирование: Ускорьте проектирование с помощью компонентов. Редактируйте и переопределяйте на лету.
• Доступные библиотеки: Быстрый поиск найдет нужные ресурсы. Просто перетащите их в свой файл.

Превратите передачу разработчика в рукопожатие

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

• Неограниченное количество зрителей: Пригласите столько товарищей по команде, сколько хотите, для просмотра и комментирования (psst, это бесплатно).
• Проверка файлов дизайна: Любой зритель может получить фрагменты сгенерированного кода для CSS, iOS и Android.
• Простой экспорт: Экспортируйте именно те ресурсы, которые вам нужны, в нужных вам форматах.

Создан со всеми преимуществами любого хорошего облачного программного обеспечения

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

Никогда больше не сохранять файлы с помощью автосохранения

Беспомянутое редактирование и сотрудничество с историей версий

См. Как Figma может помочь вам спроектировать от начала до конца

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

Узнайте больше

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

Узнайте больше

Дизайн

.

• Twitter
• YouTube
• Instagram
• Facebook

Варианты использования

• Дизайн пользовательского интерфейса
• UX дизайн
• Графический дизайн
• Wireframing
• Diagramming
• Brainstorming
• Templates
• Remote design
• Agencies
• Figma for education

Explore

• Design features
• Prototyping features
• Design systems features
• Collaboration features
• Design process
• FigJam
• Цены
• Enterprise
• Организация
• Professional
• Customers
• Security
• Integrations
• Contact

Resources

• Blog
• Best practices
• Support
• Developers
• Learn design
• Downloads
• What’s new
• Releases
• Careers
• About us
• Агентство-партнер
• Конфиденциальность
• Статус

Сравнить

• Sketch
• Adobe XD
• Invision Studio
• Framer
• Дизайн для Windows
• Miro

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

Для тех, кто скептически относится к таким утверждениям, мы объясним, как 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 могут использовать Slack-каналы для цепочек комментариев в файле.

Совместное использование Figma — это просто и гибко

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

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

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

Встроенные файлы Figma обеспечивают обновление в режиме реального времени

Figma также предоставляет живые фрагменты кода для вставки для вставки iFrame в сторонние инструменты. Например, если Confluence используется для отображения встроенных файлов макетов, эти файлы не «обновляются» путем сохранения файла Figma — эти встроенные файлы ЯВЛЯЮТСЯ файлом Figma.

Если кто-либо в Figma вносит изменения в макет, это изменение можно увидеть в режиме реального времени во встроенном макете Confluence. (Подробнее об интеграции Figma и Confluence можно прочитать здесь.)

Влияние этой функции на процесс UX показано на следующей диаграмме:

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

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

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

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

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

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

Передача разработчику упрощается с помощью Figma

Figma отображает фрагменты кода для любого выбранного кадра или объекта в форматах CSS, iOS или Android, которые разработчики могут использовать при просмотре файла дизайна. Компоненты дизайна могут быть проверены любым разработчиком в любом файле, который они могут просмотреть. Нет необходимости использовать сторонний инструмент для получения информации. Несмотря на это, Figma имеет полную интеграцию с Zeplin, если командам нужно больше, чем простое измерение и отображение CSS.

Разработчики могут получить доступ к коду из файла дизайна или запустив прототип Figma.

Файлы проекта 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 можно распространять так же, как файлы дизайна Figma; любой, у кого есть разрешение на ссылку, может просматривать и комментировать прототип, и опять же, эта обратная связь фиксируется на панели комментариев инструмента и записывается в Slack. Разработчики могут видеть рабочий процесс проектирования, оставлять прямые @сообщения для дизайнеров и получать измерения и атрибуты CSS из прототипа.

Дизайн-системы стали необходимостью для многих компаний, и есть потребность в компонентах (символы в Sketch и Illustrator), которые можно повторно использовать, масштабировать и «токенизировать» для использования в библиотеках шаблонов, доступных для дизайнеров UX и разработчиков интерфейса.

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

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

Организация компонентов проста и гибка с использованием файлов и фреймов.

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

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

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

Эксперты по дизайну, которые используют Figma после перехода со Sketch (файлы Sketch можно импортировать в Figma с четностью), не разочарованы:

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

Figma объединила все самое лучшее в мире инструментов для дизайна пользовательского интерфейса за последние несколько лет — почему ваша команда дизайнеров должна подумать о переходе на Figma

В течение последнего года я использовал Figma для своего процесса проектирования UI/UX, и это сэкономило мне часы работы. Это действительно изменило мой рабочий процесс проектирования — Как оптимизировать рабочий процесс UI/UX с помощью Figma

Время, проведенное в Figma, обычно является самой приятной и продуктивной частью моего дня — Figma меняет весь мой рабочий процесс, и это потрясающе!

• • •

Дополнительная литература:

• Овладейте мастерством с помощью этих лучших инструментов UX
• Оптимизация совместного проектирования с помощью Figma
• Используйте Craft by InVision для оптимизации командной работы
• Смерть Каркасу. Прямо к высокой точности!
• Станьте дизайнером мирового класса, сделав весь мир своим офисом

Figma растет внутри Microsoft, тестирует давнюю сделку с Adobe

Дилан Филд, соучредитель и генеральный директор Figma, выступает на конференции стартапа Config в Сан-Франциско 10 мая 2022 года. дружеские отношения на протяжении десятилетий. Доминирующая операционная система Microsoft для ПК стала воротами, через которые Adobe смогла привлечь миллионы бизнес-пользователей своим программным обеспечением для проектирования.

Руководители компаний даже учились в одной и той же средней школе в Индии, и оба переехали в США в 1980-х, чтобы получить аспирантуру по компьютерным наукам. Их объединяет успешный переход от программного обеспечения для настольных компьютеров к облаку.

Но внутри Microsoft возникает новый вызов Adobe, который вызывает вопросы о будущем одного из самых близких отношений в технологической индустрии.

Figma, стартап из Сан-Франциско, отметивший в августе свое 10-летие, используется десятками тысяч сотрудников Microsoft и для многих является основой их повседневной работы. В последние годы количество пользователей неуклонно растет, хотя ни одна из компаний не сообщает, сколько из них являются редакторами с платными аккаунтами.

Облачное программное обеспечение для проектирования появилось в 2016 году, когда Microsoft приобрела платформу разработки мобильных приложений Xamarin и набрала команду из 350 человек, которые через несколько месяцев после закрытия сделки стали опытными пользователями Figma. С тех пор продукт стал настолько важным в том, как дизайнеры Microsoft выполняют свою работу, что Джон Фридман, корпоративный вице-президент по дизайну и исследованиям, сказал, что Figma «для нас как воздух и вода». Он также используется инженерами, маркетологами и специалистами по данным в Microsoft.

«Я бы сказал, что Figma стала своего рода общим инструментом № 1, который мы используем для совместной работы всего сообщества дизайнеров в сообществе и за его пределами», — сказал Фридман, проработавший в Microsoft более 18 лет. «Это действительно здорово помогает нам сотрудничать в масштабе и в глобальном масштабе. Я могу сотрудничать с командами, которые у нас есть в Индии, Китае, Европе, Израиле и Африке».

Венчурные инвесторы пошли на рост.

В июне 2021 года, в период расцвета мегафинансирования, Figma была оценена в 10 миллиардов долларов в ходе раунда финансирования, в котором участвовал Counterpoint Global Morgan Stanley. Это было до того, как падение рынка в 2022 году привело к падению многих облачных акций более чем наполовину и в значительной степени остановило раунды подготовки к IPO.

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

Компания, поддерживаемая такими компаниями, как Index Ventures, Greylock Partners и Kleiner Perkins, теперь имеет размер и траекторию роста, чтобы прочно закрепиться на радаре государственных инвесторов. Годовой регулярный доход более чем удвоился за последние годы и в 2022 году должен превысить 400 миллионов долларов, по словам людей, знакомых с финансами компании, которые просили не называть их имен, поскольку цифры являются конфиденциальными. Персонал Figma увеличился до 800 человек.

В то время как Microsoft служила драйвером роста для Figma, тратя миллионы в год на ее развертывание, программное обеспечение компании также взлетело в Google, Oracle и Salesforce, где оно начиналось с малого и органично росло, когда фанаты рекламировали его своим коллегам. Другие клиенты включают Airbnb, Dropbox, Herman Miller, Stripe и Twitter.

После того, как в начале этого месяца основатель и генеральный директор Figma Дилан Филд написал в Твиттере о том, что компании исполняется 10 лет, он получил лестные отзывы от содиректора Salesforce Брета Тейлора и соруководителя Atlassian Майка Кэннон-Брукса. Тейлор начал свой ответ со слов: «Я [смайлик в виде сердца] Figma».

Для Figma, чтобы получить поддержку в крупных компаниях, особенно в Microsoft, потребовалось идти лицом к лицу с конкурирующей программой Adobe XD и выигрывать свою долю сделок. Это не означает, что рынок полностью перевернулся или что Adobe полностью вытеснена.

«Мы по-прежнему активно работаем с Adobe Illustrator, Photoshop и XD, — сказал Фридман.

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

Проникновение в этот союз не всегда было для Figma гладким. В 2016 году Microsoft приобрела Sunrise, стартап с популярным приложением-календарем. Команда Sunrise полагалась на Figma и продолжала использовать ее после закрытия сделки.

Соучредитель Sunrise Джереми Ле Ван сказал, что его сотрудники были в числе счастливчиков в Microsoft. Он сказал, что некоторые сотрудники Microsoft не могут использовать Figma из-за деловых отношений с Adobe и вынуждены использовать такие продукты, как Photoshop и XD. Несмотря на сопротивление руководства в некоторых отделах, некоторые дизайнеры все равно улизнули из экосистемы Adobe, чтобы использовать Figma, сказал Ле Ван, который до 2018 года оставался директором по дизайну в Microsoft.0003

Фридман сказал, что ему неизвестно о случаях закрытия Figma. «У нас отличные отношения с Adobe, и мы любим их продукты для многих вариантов использования в Microsoft», — сказал он.

В том же году, когда была заключена сделка Sunrise, Adobe заявила, что сделает Microsoft Azure своим предпочтительным облаком для Creative Cloud, а также для Marketing Cloud и Document Cloud. Чтобы отметить это событие, генеральный директор Microsoft Сатья Наделла и генеральный директор Adobe Шантану Нарайен, которые оба учились в средней школе в государственной школе Хайдарабада в Индии, выступили на конференции Microsoft Ignite для ИТ-специалистов под баннером, заявив, что Adobe любит Azure.

«Мы оба этого хотели»

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

«Любой дизайнер, менеджер по продукту или инженер может заглянуть и увидеть, как дизайн-система действует в любом конкретном продукте», — сказал Фридман.

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

«Мы оба хотели этого», — сказал Филд, который основал Figma после того, как получил стипендию Тиля, которая была получена вместе с грантом в размере 100 000 долларов от венчурного инвестора Питера Тиля при условии, что он бросит колледж (Университет Брауна) и займется новым проектом. .

Интеграция Teams — это инструмент, который приносит пользу любому пользователю продуктов Microsoft, а не только сотрудникам. Adobe, которая предлагает приложения Teams для Acrobat и Creative Cloud , , знает все о силе связи с экосистемой Microsoft. Это была большая часть успеха компании за 40 лет ее годового дохода почти до 17 миллиардов долларов.

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

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

«Послушайте, мы все беспокоимся, что вы умрете как компания, — вспоминает Филд, как сказал ему Фридман. «Мы не можем распространять это внутри Microsoft как компании, хотя нам это нравится, потому что вы не взимаете плату».

Дело было не только в сохранении Figma. Как клиент с большими расходами, Microsoft могла начать требовать дополнительных функций.

Рабочее место в здании 21 в кампусе Microsoft в Редмонде, штат Вашингтон, 3 марта 2022 года. Корпорация Microsoft в последние недели начала вызывать сотрудников обратно в свою штаб-квартиру, но ее стратегия возвращения в офис зависит от гибридной работы.

Чона Касингер | Блумберг | Getty Images

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

В конечном счете, запросы Microsoft помогли Figma разработать корпоративный план высшего уровня, сказал Филд, добавив к бесплатной версии и платным ежемесячным премиальным пакетам стоимость от 12 до 45 долларов за редактора в месяц. Корпоративный пакет стоит 75 долларов за редактора и включает в себя выделенных менеджеров учетных записей и расширенное управление паролями.

Вацлав Ванчура вспоминает времена, когда все было совсем иначе.

Ванчура был старшим дизайнером в компании Xamarin, программное обеспечение которой помогало компаниям создавать приложения для Android и iOS с помощью языка программирования Microsoft C#.

Когда Figma объявила о своем запуске в конце 2015 года, Ванчура был впечатлен идеей компании относительно общих библиотек компонентов дизайна. Он подписался на предварительную версию и получил доступ летом 2016 года. Он призвал своих коллег присоединиться к нам, начиная с Дэвида Сигела, руководителя отдела дизайна Xamarin.

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

В отличие от Sketch, который был доступен только на MacOS, Figma был в браузере. Это означало меньше проблем с обменом. Вы предоставляете другим доступ, копируя ссылку или вводя их адреса электронной почты, как в Документах Google. Но производительность была проблемой.

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

В 2017 году Ванчура вылетел из Чехии, где он живет, в Сиэтл, а затем совершил короткую поездку в штаб-квартиру Microsoft в Редмонде. Он воспользовался возможностью, чтобы показать Figma своей команде, многие из которых привыкли работать в Photoshop и Illustrator.

«Это было потрясающе. Это было похоже на просмотр Формулы-1», — сказал Ванчура. «На экране было так много указателей мыши, и каждый что-то проектировал, даже если это означало, что они вставляли GIF-файлы или рисовали прямоугольники. экономит время.»

Набирает обороты

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

«Мы используем ПК, Mac, Figma, Sketch, GitHub, JavaScript, ZEIT и другие современные инструменты для проектирования, создания прототипов и построения будущего разработки программного обеспечения», — написал Сигел на веб-сайте Xamarin. Там была ссылка на файл Figma, который могли открыть сотрудники Microsoft.

Веб-сайт попал на первую страницу Hacker News, форума для разработчиков программного обеспечения.

«Это какое-то невероятное самосознание», — написал один из комментаторов.

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

Скотт Белски, директор по продуктам и исполнительный вице-президент Creative Cloud в Adobe, а затем венчурный партнер Benchmark, выступает на конференции TechCrunch Disrupt в Сан-Франциско, 13 сентября 2016 г.

Стив Дженнингс | ТехКранч | Getty Images

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

Figma не стесняется идти против тяжеловеса индустрии. На своем веб-сайте Figma говорит: «Не синхронизируйтесь с облаком с Adobe XD. Работайте в облаке с Figma». В нем утверждается, что дизайнеры отказываются от пакета Adobe Creative Cloud, продукта, на долю которого приходится 59% дохода Adobe.

В 2020 году Adobe добавила Figma в список конкурентов, который она публикует в своем годовом отчете.

В этом году аналитики как минимум трижды задавали вопросы о Figma руководителям Adobe. Алекс Зукин из Wolfe Research спросил во время январской беседы у камина с руководителями Adobe Скоттом Белски и Дэвидом Вадхвани, захватывает ли Figma долю рынка.

Бельский, руководитель отдела продуктов Adobe и исполнительный вице-президент Creative Cloud, не ответил на вопрос напрямую. Но он признал, что венчурные капиталисты направляют деньги в космос.

«Это здорово, что венчурные капиталисты видят то же, что и мы», — сказал Бельский. «Пять с лишним лет назад вы не видели никаких материальных долларов, вложенных в инструменты для творчества. Я думаю, что теперь все это видят».

Бельский сказал, что Adobe может воспользоваться возможностью представить Creative Cloud в Интернете, что она сделала для Illustrator и Photoshop, но не для XD, продукта, предварительная версия которого была запущена в 2016 году.

Представитель Adobe отказался говорить о планах для веб-версии XD, и сказал, что компания расскажет о планах Creative Cloud на своей конференции Max в октябре.

«Мы не видим влияния на бизнес Photoshop со стороны игроков в категории продуктового дизайна», — сказал представитель. «Мы разработали и усовершенствовали Adobe XD для удовлетворения потребностей наших основных клиентов, занимающихся дизайном, которые разрабатывают маркетинговый опыт для экранов, а не отдельную категорию дизайна и разработки продукта».

Много проблем

Тем не менее, давление на Adobe усиливается.

В течение последних трех месяцев приложение Figma для устройств iOS постоянно занимало более высокие позиции, чем Adobe XD в разделе графики и дизайна в магазине Apple App Store, согласно данным Data.ai, ранее известного как App Annie.

Аналитик Wells Fargo Майкл Террин сказал, что у Figma есть потенциал для расширения.

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

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

Сотрудники Microsoft используют Penpot и внесли в него свой вклад, сказал Пабло Руиз-Музкис, один из основателей проекта. По его словам, из людей, которые тестируют Penpot, почти 20% приходят из Figma.

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

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

И Figma была занята расширением своих руководящих должностей. В июне компания назначила Правира Мелвани, руководителя отдела коммерческих операций и финансов, на должность главного финансового директора. В следующем месяце бывший исполнительный директор Deutsche Bank и Goldman Sachs Кейт ДеЛео присоединилась к Figma в качестве вице-президента по связям с инвесторами и бизнес-операциям.

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

«Он отлично подходит для презентаций, — сказал Фридман.

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