Трендлист

Инструкция по работе со всеми инструментами и функциями приложения для совместной работы над проектами UI/UX-дизайнеров.

Что такое Фигма?

Это веб‑приложение, которое позволяет создавать интерфейсы сайтов или приложений на компьютере (или даже планшете). В отличие от традиционных инструментов вроде Adobe XD и Sketch это не десктопная программа — она работает прямо из браузера. Поэтому вам больше не нужно устанавливать кучу разных программ на все устройства команды разработчиков, дизайнеров и других участников проекта. Достаточно просто создать аккаунт и войти в систему через него.

Веб‑формат имеет ещё одно преимущество: работайте вы можете где угодно. А если к проекту подключён другой человек, то он сможет видеть ваши изменения мгновенно — без необходимости ждать загрузки файлов или синхронизации. Всё это делает работу более быстрой, а процесс коммуникации между участниками значительно упрощает. К тому же можно открывать проект одновременно нескольким людям. Но учтите, что бесплатный тариф поддерживает только одного пользователя за раз. Если у вас большая команда, придётся приобрести платную лицензию. Стоимость начинается от $12 в месяц на одного.

Вот как выглядит основной экран программы при запуске нового документа. Слева находится панель меню. Выберите один из трёх вариантов создания макета: “Документ”, “Проект” или “Фрейм”. Они похожи друг на друга, но имеют некоторые отличия. Так документ используется для общих целей, например планирования проектов или создания презентаций. Фреймы используются чаще всего именно для разработки интерфейсов сайта или мобильного приложения. Проекты служат для хранения нескольких документов вместе. Подробнее о том, чем отличаются эти три опции, мы расскажем чуть позже. Для начала давайте изучим инструменты панели слева.

Здесь расположены самые нужные элементы управления файлом и настройками. Нажмите на кнопку «Создать дизайн», чтобы перейти к основному экрану.

• Пункт меню № 1 содержит ссылки на настройки профиля вашего аккаунта и различные функции перехода между рабочими пространствами внутри файла (например, просмотр всех страниц сразу вместо текущей страницы). Пункт № 3 ведёт к разделу помощи. Там есть инструкции использования основных функций программы, ответы на часто задаваемые вопросы и контактные данные службы поддержки. Ну а пункт №4 отвечает за выход из системы. И да, всё перечисленное выше относится только ко всем тем пользователям, которые работают бесплатно. Платным подписчикам доступна дополнительная информация и возможность добавления дополнительных пользователей.

Эти кнопки позволяют выбрать инструмент, которым будет управляться курсор мыши. Их четыре: лассо, фигура, текст и карандаш. Каждой кнопке соответствует горячая клавиша, которую можно запомнить и использовать впоследствии. Например, выделение области называется V, рисование фигур D, создание текста T, нанесение штриховки B. Все остальные варианты смотрите ниже. Кроме того, после выбора какого-либо элемента переключаются сочетания клавиш, относящиеся к выбранной команде. Переключение происходит автоматически, поэтому ориентироваться удобно. Чтобы вернуться обратно к начальному состоянию, нажмите клавишу Esc.

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

• Всё остальное зависит от конкретного случая и может различаться. Самое главное научиться находить необходимые значения самостоятельно или воспользоваться поиском. Обычно этот способ занимает меньше времени, чем поиск в справочной информации. Обязательно сохраняйтесь! Без сохранения ничего не произойдёт, однако лучше сделать резервную копию своих работ каждые несколько минут. Когда будете готовы поделиться результатами своего труда, откройте вкладку Share в правом верхнем углу экрана и пригласите коллег присоединится к вашему документу.

Разбираемся с созданием фреймов и работой с ними.

Существует два варианта расположения объектов относительно родительского блока: absolute и relative positioning. Абсолютное позиционирование означает отсутствие связи между дочерним элементом и родителем; таким образом объект располагается абсолютно свободно на странице, независимо от размера контей