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

Мы подробнее знакомим с Figma на нашем двухдневном бесплатном марафоне по веб-разработке без кода. Приходите!

Находим элементы с похожими свойствами

В проектах часто приходится играть с цветами и шрифтами. Но по незнанию можно начать менять их в каждом элементе по отдельности. В таких случаях может помочь поиск элементов с похожими свойствами. Например, вам нужно сменить цвет обводки всех элементов. Заходите в Edit > Select All with the Same… и в нашем примере выбираем Stroke. В этом же меню можно разом выбрать объекты и с другими свойствами.

Открываем больше одного окна в приложении

С Figma можно работать не только через браузер. У нее есть свое приложение, в котором комфортней работать с макетами. Но не всем известно, что можно открывать несколько файлов одновременно. Делается это командой Ctrl+Shift+N. Так удобней работать с несколькими документами. Например, это могут быть прототипы приложения для iOS, Android и общая библиотека элементов. Так получится сразу же менять некоторые составляющие по ходу работы, а не делать это по отдельности с каждым прототипом.

Храним макеты в разных файлах

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

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

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

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

Подбираем цвет с помощью пипетки

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

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

Создаем мастер-компонент

Мастер-компонент — это объект, изменения в котором отображаются в его копиях в рамках одного файла. Например, мы сделали кнопку регистрации, скопировали ее и поставили на макет другого экрана в этом же файле. И когда нужно будет изменить цвет всех таких кнопок, нам нужно будет внести изменения всего лишь один раз. Сделать из элемента мастер компонент просто — выберите нужный объект и нажмите на кнопку с четырьмя ромбиками «Create component», которая находится посередине в верхнем меню.

Figma используется многими зерокодерами в своих проектах для создания дизайна приложений и не только. Если у вас есть конкретные вопросы или вы хотите узнать о Figma и других no-code инструментах больше, то подписывайтесь на крупнейшее сообщество зерокодеров в СНГ. В нем вы найдете единомышленников, сможете получить консультацию, найти партнеров или клиентов.