Эффективная работа в Фигме

Привет! На связи Настя, продуктовых дизайнер внутренних сервисов Т-Банка🌻

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

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

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

Начну с напоминания, что в Фигме есть шорткат для шорткатов — ⇧\?. Он открывает нижнюю панель, в которой показаны все возможные комбинации клавиш программы. Если они горят синим, то вы их уже использовали, а если серым, то еще нет — классный прием геймификации 🎮

Можно учиться и запоминать шорткаты на работе с объектами. Например, у меня есть окружность с бордером, и я хочу убрать у неё заливку. Тогда зажимаю клавиши ⌥/ и осуществляю задуманное. Если я воспользовалась шорткатом правильно, то Фигма подсветит его анимацией.

Советую залипнуть здесь на некоторое время. Уверена, вы найдете много интересного!

Далее расскажу о шорткатах, которые особенно сильно прижились в моей повседневной работе.

Видимость боковых панелей

⌘\ — полностью их скроет, а ⇧\ — частично спрячет, но при клике на объект покажутся его свойства.

Навигация в слоях

\ или ⇧⏎ — позволит двигаться по слоям наверх, ⇧ — вниз, Tab — внутри родительского слоя между дочерними компонентами, а ⌥L — свернет или развернет раскрытые слои

Распределение объектов

⌘⌥T — равномерно распределит объекты между собой, а ⇧A — удобно обернет их в автолейаут.

Также есть лайфхак, который легко запомнится геймерам: зажмите ⌥ и какую-то одну из клавиш WASD — тогда ваши объекты выравнятся по соответствующей стороне: верхней, левой, нижней и правой.

Клавиатура

Клавиатура Mac обладает множеством скрытых возможностей! Например, вы можете вводить специальные символы, доступные в английской раскладке, без необходимости переключаться на неё.

Как это сделать:

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

А теперь следите за руками: вы можете вводить специальные символы, используя клавиши с цифрами 1–9 в сочетании с Option. Это позволяет набирать символы из английской раскладки, не переключая язык. Благодаря этому приёму мне удаётся значительно сократить время, которое раньше уходило на постоянное переключение между раскладками! 👀

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

Плагины

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

Конкретно мне они полезны в совершенствовании UI-текстов — подсвечивают стоп-слова и расставляют неразрывные пробелы. Вот некоторые из них

Расческа

Он, буквально за доли секунды, расставит неразрывные пробелы, заменит "кавычки" на «елочки» и добавит буквы Ё. Неплохие аналоги с похожим функционалом: Sbol typograph и Text Prettier

Главред

Этот плагин анализирует текст на наличие стоп-слов, описанных Максимом Ильяховым, и предлагает их исправить

Figma AI

Фигма с искусственным интеллектом стала ещё удобнее: теперь она генерирует картинки и тексты, удаляет фон и подбирает референсы 🤩. В UI3 появились настоящие инструменты-спасатели,которые по своей сути заменили многие плагины. Теперь не нужно ломать голову и тратить много времени на их поиски, ведь почти все необходимые функции Фигма предоставляет из коробки!

Сквозной поиск

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

Если пролистать список вниз, то вы как раз увидите те самые фичи Figma AI

Генерация картинок

Чтобы запустить эту команду, откройте сквозной поиск и введите "Make an image". Затем в появившемся окне выберите готовый промпт от Фигмы или напишите свой. После этого нажмите кнопку генерации и дождитесь результата – процесс занимает всего 10–15 секунд. Важно учитывать, что промпт должен быть на английском, иначе качество изображения будет низким.

Также эта функция работает для генерации заливки в инстансах.

Но имейте в виду: такой способ не работает для сложных векторных фигур.

Вырезание фона

Этот инструмент пригодится при создании презентаций или коллажей. Просто выберите изображение и используйте команду "Remove background" для удаления фона.

Апскейл изображения

Команда "Boost resolution" улучшает качество изображения, не замыливая его.

Генерация текстов

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

Замена контента

Эта функция позволяет заменить весь текстовый контент без выделения его вручную. Достаточно объединить несколько фреймов в автолейаут и применить команду "Replace content". Затем система обновит содержимое всех следующих фреймов, по аналогии с первым. Особенно удобно при работе с карточками.

К сожалению, модель не всегда хорошо считывает контекст.

Поиск похожих макетов

Если вам нужно найти референсы, не обращаясь к коллегам, то функция "Find more like that" позволит быстро найти похожие дизайны как внутри вашего рабочего пространства, так и в Community

Быстрое прототипирование

"Add interaction" позволяет создавать простые прототипы за доли секунд

Выводы

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