Обзор интерфейса редактирования файла в программе Figma (Фигма)

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

Интерфейс редактирования файла состоит из четырех панелей:

Первая часть это контекстная панель:

  • в левой части которой располагается уже привычная нам иконка меню, с одной особенностью, содержимое этого меню отличается от того, что мы рассматривали ранее. Подробно меню файла мы рассмотрим далее.
  • за ней следуют иконки инструментов, с помощью котрых мы будем создавать графические элементы интерфейса для веб-сайтов и приложений, а также иконка комментирования макетов. Все эти инструменты мы рассмотрим в соответствующей теме.
  • в центре контекстной панели располагается заголовок файла, который мы можем перименовать кликнув на нем. Я введу название «First file», что означает «Первый файл» и нажму Enter, чтобы изменения применились. Также можно нажать на иконку стрелочки, чтобы появился выпадающий список, в котором можно увидеть такие функции как:
    • show versi on history, что означает «Посмотреть историю версий»
    • следующая функция Duplicate, что означает «Дублировать». Эта функция позволяет создать копию текущего файла. Если мы кликнем по ней, то файл скопируется и появится в той же категории, в которой хранится текущий файл, с таким же названием, но в конце к нему добавиться слово Copy, что означает «Копия»;
    • дальше мы видим уже привычные нам функции «Rename» и «Delete», позволяющие переименовать или удалить файл;
    • за ними следует функция Back to files, что значит «Вернуться к файлам». Эта функция играет ту же самую роль, что и иконка часов на панели закладок. Если мы кликнем по ней, то мы увидим экран со всеми файлами выбранной категории, например черновиков или конкретного проекта;
    • и последняя функция Move to Project, что означает «Перенести в проект», позволяет перенести файл в другую категорию, например новый проект или черновики.
  • теперь перейдем к правой части контексной панели. Начнем перечисление функций справа налево:
    • первая иконка справа с изображением квадрата и стрелки позволяет сохранить отдельно выбранные изображения, которые мы создадим с вами далее или добавить их в библиотеку компонентов.
    • дальше мы видим функцию масштабирования, сейчас она показывает 100%, это значит что все элементы, которые мы создадим будут отображаться как есть, т.е. один к одному. Если кликнуть на иконку стрелочки стояющую рядом с цифрами, то мы увидим дополнительные масштабирования, которые мы рассмотрим в другом уроке.
    • за функцией масштабирования следует иконка глаза, которая позволяет произвести настройки различных фукнций отображения вспомогательных элементов, мы их тоже рассмотрим в отдельной теме.
    • левее находится кнопка «Share», что означет «Поделиться», кликнув на нее мы можем настроить доступ к файлу для конкретных пользователей используя их e-mail или сделать файл доступным для всех людей, которые перейдут по ссылке.
    • дальше отображаются пользователи, которые в данный момент просмотраивают файл, как видите в моем примере отображается 3 пользователя. Первый это я. Второй это тоже я, но зашедший из браузера под другим аккаунтом. А третий это снова я, но отображаюсь как Анонимный пользователь потому, что я открыл в браузере файл по доступной для всех ссылке, но при этом не вошел в систему как пользователь, поэтому Figma не может меня определить.

Отлично, мы рассмотрели функции контекстной панели, осталось еще три панели.

Панель слоёв это вторая панель интерфейса редактирования файла

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

Третья панель это монтажная область

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

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

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

Это все, что необходимо знать о экране редактирования файла.