Как создать новый файл в Figma

Обновлено: 21.11.2024

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

  • Совместимость с любой операционной системой, не только с MacOS (например, со Sketch).
  • Упрощенная командная работа: все члены команды могут одновременно работать над одним и тем же файлом.
  • Автосохранение включено. История обновлений хранится в облаке.
  • Передача проекта команде разработчиков не требует дополнительных программ; все могут работать в одном файле.
  • Многие функции автоматизируют процесс проектирования, повышая производительность команды.
  • Каждый, у кого есть ссылка, может прокомментировать дизайн — редакция, руководство, маркетинг.

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

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

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

Как импортировать из Sketch в Figma и сохранить дизайн

Ниже приведено пошаговое руководство по подготовке к переносу вашего файла из Sketch в Figma без искажений и потерь. Он проведет вас через две основные задачи: создание библиотеки и перенос проекта.

1. Создайте библиотеку с компонентами и стилями в Figma.

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

1.2 Перерисовать все часто повторяющиеся компоненты в этот файл (Кнопки, Аккордеоны, Карточки и т. д.).

1.3 Сделайте их гибкими (настройте ограничения). Это помогает создать адаптивный дизайн и множество подобных компонентов в проекте (например, диалоговое окно с разной шириной для разных целей).
Посмотрите, как это сделать, на YouTube.

1.4 Добавьте четкие имена для объектов (например, Button, Checkbox и т. д.). Это могут быть те же имена, что и у объектов Sketch. Это позволяет легко найти компонент в проекте, когда мы связываем библиотеку с рабочим файлом.

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

1.6 Добавьте различные состояния компонентов и объедините их в варианты. Это поможет вам быстро переключаться между состояниями компонента (например, изменить метку Primary на метку Error, не задавая цвет и размер).
Посмотрите, как это сделать, на YouTube.

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

2. Перенос проекта

Настроив компоненты библиотеки, мы можем приступить к импорту проекта из Sketch в Figma.

2.1 Создайте рабочий файл в Figma

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

<р>2.3 Перерисуйте макеты, используя компоненты из библиотеки.
На основе созданной библиотеки проще собирать новые страницы. У нас уже есть кубики Лего (Компоненты), из которых нам нужно собрать фигурки (Макеты).

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

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

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

Упрощение переноса из Sketch в Figma

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

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

Создавайте структуру с самого начала. Если у вас нет файловой структуры в Sketch, лучше сразу начать создавать ее в Figma. Таким образом, вам и другим членам команды будет легче работать.

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

Кроме того, стили можно применять не только к цвету и шрифтам, но и к эффектам.

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

Если вы не видите параметры шрифта в Sketch, скорее всего, шрифт, использованный в дизайне, не установлен на вашем компьютере. Загрузите шрифт (например, из библиотеки Google Fonts), установите его на свой компьютер и перезапустите Sketch, чтобы увидеть параметры шрифта.

Обзор

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

Биография: Илона Елецкая — UX-дизайнер в Windmill. С тех пор как она присоединилась к команде дизайнеров Windmill, она работала над дизайном веб-сайта Windmill и в настоящее время работает над финтех-продуктом.

Сталкиваетесь с проблемой цифрового продукта?

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

Еще статьи

Как провести семинар Design Sprint для банков
Как создать финансовое приложение

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

1 – Создать файл черновика

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

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

2 — Создать файл проекта

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

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

Затем нажмите значок + рядом со ссылкой на вкладку "Название проекта" или нажмите кнопку "Новый файл проекта" в верхнем левом углу раздела "Проект".

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

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

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

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

Дизайнеры знают, что хорошая дизайн-система может оказать огромное влияние на качество продуктов, которые мы поставляем, и скорость их разработки. Поскольку доводы в пользу создания комплексной системы дизайна неоднократно подтверждались, когда такие компании, как Google, GitHub, IBM и другие, использовали их для более быстрого создания более качественных продуктов, вопрос сместился с «Почему у нас должен быть дизайн система?" на «Как мы можем создать отличную дизайн-систему?»

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

GitHub даже поделился своей библиотекой компонентов Figma — отличным примером системы проектирования на основе Figma. Более обширные инструменты, такие как Storybook и Component-Driven Development, также являются чрезвычайно полезными ресурсами для реализации и документирования дизайн-системы.

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

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

Система Carbon Design от IBM.

Мощь библиотеки компонентов

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

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

Библиотека компонентов Salesforce является частью их системы Salesforce Lightning Design.

Дизайн-система — это, прежде всего, набор инструментов

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

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

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

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

Почему Figma отлично подходит для создания библиотеки компонентов

Figma – это мощный инструмент проектирования со множеством замечательных функций, но есть набор элементов, которые особенно полезны при разработке сложных продуктов: стили, компоненты и < em>Файлы библиотеки. Эти функции помогают обновлять дизайн-системы, поддерживать согласованность между проектами и обеспечивают быстрый доступ к обновлению нескольких проектов из централизованного местоположения.

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

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

Создание файла библиотеки

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

У этого есть несколько ключевых преимуществ:

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

Организация

При построении дизайн-системы в Figma полезно проводить параллели между инструментами и теорией. Например, Styles в Figma можно считать самым базовым уровнем, даже более базовым, чем Atoms в модели Atomic Design Брэда Фроста. Такие вещи, как цвет и шрифт, помогают создать эстетический вид продукта.

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

Система дизайна в Figma похожа на Atomic Design.

  • Цвета
  • Шрифты
  • Активы бренда, логотип и т. д.
  • Навигация
  • Кнопки
  • Уведомления
  • Модали
  • Элементы формы и проверка

Создание дизайн-системы в Figma — начало работы

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

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

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

Создать файл библиотеки Figma

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

Публикация файла как библиотеки. Нажмите Ресурсы, Библиотека, а затем Опубликовать, чтобы преобразовать файл в файл библиотеки.

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

Как создать стиль Figma

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

  • Выберите объект, из которого хотите создать стиль. Стили могут быть цветами, свойствами текста, эффектами и сетками макета.
  • Нажмите кнопку "Стили" (четыре точки в квадрате) рядом со свойством, которое будет использоваться в новом стиле, затем нажмите кнопку "плюс" во всплывающем окне, чтобы создать новый стиль.
  • Появится модальное окно для названия стиля. Часто бывает полезно использовать семантическое имя, а не презентационное, например, «Основной цвет» вместо «Зеленый», чтобы было понятнее, для чего предназначен стиль.
  • Опубликуйте стиль в своей рабочей библиотеке, используя всплывающее окно в правом нижнем углу экрана, или повторите шаги, предпринятые для публикации библиотеки в первый раз.

Как создать компонент Figma

Создать компонент также очень просто. Просто выберите объект, из которого вы хотите создать компонент, затем щелкните правой кнопкой мыши и выберите «Создать компонент».

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

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

Использование библиотеки Figma

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

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

Теперь библиотека компонентов готова к использованию. Компоненты можно разместить, перетащив их в файл проекта с вкладки «Активы» в левой части экрана. Стили библиотеки можно использовать так же, как и локальные стили, при изменении стилей текста, цветов заливки, штрихов, эффектов и сеток макета.

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

Помимо создания библиотеки компонентов в Figma

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

Руководство по стилю контента Mailchimp — отличный пример, в котором подробно описывается тон голоса и брендинг через контент. На GitHub есть отличная документация о том, как их библиотека компонентов работает в коде, а в системе дизайна материалов Google также есть несколько отличных примеров документирования логики, лежащей в основе системы дизайна.

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

Дополнительная информация в блоге Toptal Design:

Понимание основ

Бесплатно ли использовать Figma?

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

Что такое дизайн Figma?

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

Для чего используется Figma?

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

Какова цель дизайн-системы?

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

Что такое система дизайна пользовательского интерфейса?

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

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

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

Описание
Команда — это просто пространство, где живут все и все, как общая папка.

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

Ограничения плана
Бесплатный план Figma позволяет вам иметь до 2 редакторов и неограниченное количество зрителей в одной команде.

Проект

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

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

Ограничения по тарифному плану
Бесплатный тарифный план Figma позволяет одновременно запускать только 3 проекта.

Файлы

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

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

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

Ограничения плана
Бесплатный план Figma сохраняет историю версий только за последние 30 дней.

Страницы

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

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

Ограничения плана
Та же для бесплатных и платных планов

Коллективная библиотека

Последнее, с чем вам нужно ознакомиться, — это командные библиотеки. Figma позволяет хранить стили и компоненты в командной библиотеке, что упрощает повторное использование этих стилей и компонентов в ваших проектах; они эквивалентны символам Sketch или панели ресурсов Adobe XD.

В Figma ваша командная библиотека разделена на две категории:

Стили: включает цвет, текст, эффекты теней и т. д.
Компоненты: включает любые создаваемые вами элементы дизайна (например, панели навигации, значки, кнопки и т. д.)

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

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

1. Откройте файл Figma и создайте новый фрейм

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

А сегодня давайте нажмем F и создадим новый кадр iPhone 8. Мы не собираемся делать следующие экраны приложения до завтра, но сегодня мы будем использовать этот пустой кадр для создания нашего логотипа и значков.

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

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

3. Скруглите углы прямоугольника

Затем скруглите углы прямоугольника так же, как мы делали это в первый день, когда делали кнопку. На этот раз установите радиус угла равным 8 пикселям.

4. Нарисуйте круг для объектива камеры

Затем нажмите O, чтобы выбрать инструмент эллипса (круг/овал). Нажмите и перетащите, чтобы создать круг размером 32 на 32 пикселя. Вы можете удерживать нажатой клавишу Shift ⇧, делая это, чтобы «ограничить» фигуру — это означает, что высота и ширина останутся прежними. Установите для него белый цвет заливки, чтобы мы могли видеть его поверх прямоугольника.

5. Выровняйте две фигуры по горизонтали и вертикали

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

6. Создайте еще один круг для экспонометра

Наконец, создайте еще один круг, на этот раз размером 8 на 8 пикселей, и задайте для него также белую заливку. Расположите его так, чтобы он находился в правом верхнем углу прямоугольника (4 пикселя сверху и 4 пикселя справа). Совет для профессионалов: вы можете проверить положение любой фигуры относительно другой фигуры, выбрав ее, удерживая нажатой клавишу Option (Mac) или Alt (ПК) и наведя указатель мыши на вторую фигуру.

7. Используйте «логические операции», чтобы превратить камеру в единую фигуру

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

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

Наконец, используйте команду Flatten, чтобы преобразовать камеру в один векторный объект. Выбрав логотип, нажмите ⌘ E (Mac) или Ctrl E (ПК). Это означает, что размер фигуры изменится правильно.

8. Создайте 3D-блок с помощью инструмента «Перо»

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

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

Одна из причин этого заключается в том, что в этих других пакетах инструмент "Перо" полностью линейный: точки на фигуре могут быть соединены только от A к B, от C к D и так далее. Пути можно было «закрыть», соединив их с исходной точкой, но на этом все.

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

В качестве примера, вот как мы рисовали 3D-блок с помощью векторных сетей. Мы рекомендуем включить пиксельную сетку — ⌘ ' на Mac или Ctrl ' на ПК — и добавить квадратную сетку макета во фрейм, чтобы у вас было визуальное руководство по размещению и выравниванию точек.

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

9.Создайте набор иконок

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

Примечание: поскольку точки не должны быть соединены друг с другом в инструменте «Перо» Figma, легко случайно создать несколько фигур в одном векторном элементе. Поэтому, когда вы закончите создание одного значка, не забудьте выйти из этой формы, нажав «Готово» на панели «Параметры» в верхней части интерфейса. Затем вы можете снова выбрать инструмент «Перо» и начать со следующего значка.

Вот наши попытки сделать эти три значка:

10. Попрактикуйтесь в редактировании, перемещении или выравнивании точек внутри фигур

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

День 3 завершен! Сохраните сегодняшнюю работу в истории версий.

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

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