ТОП-7 лайфхаков для новичка в Figma

Содержание:

• Стили
• Плагины
• Компоненты и все-все-все
• Горячие клавиши
• Работа с сетками и направляющими
• Совместная работа
• Шаблоны
• Полезные ресурсы от редакции Skillbox.kz

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

Стили

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

Чтобы создать стиль, выделите элемент, перейдите в панель свойств и нажмите на значок «+» рядом с текстовым стилем или заливкой. После этого стиль можно будет применять ко всем элементам, что ускоряет процесс дизайна.

Плагины

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

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

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

Компоненты и все-все-все

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

Например, кнопка может быть создана как компонент, а затем изменена в одном месте, что автоматически обновит все её экземпляры. Это экономит время и снижает вероятность ошибок при редактировании.

Чтобы создать компонент, необходимо выделить нужный элемент и использовать комбинацию клавиш Cmd или Ctrl + Alt + K. После этого элемент станет компонентом, и его можно будет легко дублировать и редактировать.

Горячие клавиши

Ctrl+Z (Windows и Linux) или Cmd+Z (Mac) — отмена последнего действия.

Ctrl+Y (Windows и Linux) или Cmd+Y (Mac) — повтор последнего действия.

Ctrl+S (Windows и Linux) или Cmd+S (Mac) — сохранение файла.

Ctrl+Shift+V (Windows и Linux) или Cmd+Shift+V (Mac) — вставка выделенного объекта.

Ctrl+C (Windows и Linux) или Cmd+C (Mac) — копирование выделенного объекта.

Ctrl+X (Windows и Linux) или Cmd+X (Mac) — вырезание выделенного объекта.

Ctrl+F (Windows и Linux) или Cmd+F (Mac) — поиск по файлу.

Ctrl+/ (Windows и Linux) или Cmd+/ (Mac) — переключение между режимами просмотра.

Ctrl+N (Windows и Linux) или Cmd+N (Mac) — создание нового файла.

Ctrl+O (Windows и Linux) или Cmd+O (Mac) — открытие существующего файла.

Работа с сетками и направляющими

Сетки и направляющие помогают организовать пространство в дизайне. Использование сеток дает возможность выравнивать элементы и поддерживать гармоничные пропорции.

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

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

Совместная работа

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

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

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

Шаблоны

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

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

Чтобы загрузить шаблоны, перейдите в меню «Импорт» → «Файл». Можете выбрать шаблон, который соответствует потребностям, и настроить его под свой проект: изменить цвета, шрифты, изучить структуру и после использовать в работе. 

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

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

Полезные ресурсы от редакции Skillbox.kz

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

Сообщество Figma на Habr — здесь можно найти статьи, обсуждения и вопросы от других пользователей Figma.

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

«Дизайн-кабак» на платформе Medium — сборник статей, кейсов, советов для людей, интересующихся дизайном. 

Font Brie — ресурс, на котором можно подобрать шрифт по определенным параметрам. 

Ezgif — онлайн-инструмент для создания Gif-изображений. 

FakeClients — сайт, на котором можно сгенерировать фейковое ТЗ от клиента и с помощью него отработать свои профессиональные навыки.