Обложка канала

Figma Tips. Страница 2

4297 @figmatips
Открыть

Все о Фигме. Новости, подсказки, обзоры функционала, горячие клавиши, ресурсы. Без воды и левых ссылок.

  • Figma Tips

    Как открыть любую ссылку Фигмы через десктопный клиент

    1. Заменяем "https://figma.com/" на "figma://"
    2. Вставляем ссылку в любой браузер и нажимаем Enter
    3. Подтверждаем открытие ссылки через десктопный клиент в появившемся попапе

    Такой же трюк может сработать и с некоторыми другими приложениями как под Windows, так и под macOS.

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

  • Figma Tips

    Поиск по всем пунктам меню

    Шорткат Cmd + / открывает поисковое поле, через которое можно найти любой пункт из выпадающих меню. Переключать сетки и пиксели, выравнивать и комбинировать слои, округлять до целых пикселей и растеризировать — это все можно найти и выполнить через поиск.

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

    Полезные функции без горячих клавиш
    – Frame Outlines
    – Round to Pixel
    – Resource Use
    – Rasterize Selection
    – Copy as PNG
    – Select All with ...
    – Release Notes

  • Figma Tips

    Новый канал о Фигме

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

    Было дико приятно узнать, что он принял решение о переезде со Скетча на Фигму и пару дней назад сделал ребрендинг своего канала и сайта.

    От этого в конечном итоге выиграете и вы, так как теперь сможете узнать о нюансах работы в Фигме с разных сторон.

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

    Он ответственно подходит к вниманию своей аудитории, не спамит на канале, пишет в инфо-стиле и по делу.

    Присоединяйтесь: @slashdesigner

  • Реклама

  • Figma Tips

    Сколько постов в неделю вы готовы получать?
    anonymous poll

    Не больше пяти – 340
    👍👍👍👍👍👍👍 72%

    Не больше трех – 130
    👍👍👍 28%

    👥 470 people voted so far. Poll closed.

  • Figma Tips

    Быстрый способ вставить сразу группу изображений в нужные места

    Фигма воспринимает все шейпы как формы, в которые можно заливать изображения.

    1. Нажимаем Cmd + Shift + K
    2. Выбираем пачку картинок
    3. Дропаем их на нужные формы

    Работает с любыми векторными шейпами, текстовыми слоями и компонентами. Картинки вставляются в виде заливок в режиме Fill поверх всех текущих.

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

    За наводку спасибо @alexunderhess

  • Figma Tips

    Как организовать удобный поиск по иконкам

    Есть две особенности, которые позволяют значительно упростить этот процесс:

    1. Любому компоненту можно добавить комментарий
    2. Поиск во вкладке компонентов учитывает комментарии

    Конечно, иконки должны быть компонентами. Выписываем в поле комментариев все подходящие теги и получаем удобный поиск в стиле IconJar.

    Искать можно будет через вкладку компонентов по любому из прописанных тегов.

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

  • Figma Tips

    Новые удобные шорткаты для выравнивания

    Opt + A – выровнять по левой границе
    Opt + W – выровнять по верхней границе
    Opt + D – выровнять по правой границе
    Opt + S – выровнять по нижней границе
    Opt + H – отцентрировать по горизонтали
    Opt + V – отцентрировать по вертикали
    Opt + Ctrl + H – распределить по горизонтали
    Opt + Ctrl + V – распределить по вертикали

    Старые шорткаты из этого поста все еще работают, но новые значительно удобней.

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

  • Figma Tips

    Чем функция Tidy Up отличается от похожих функций Distribute

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

    Функциям Distribute нет никакого дела до текущих отступов, их цель — равномерно распределить объекты, при этом не выходя за рамки.

  • Figma Tips

    Tidy Up — напарник умного выделения

    Для того, чтобы появились контролы из Smart Selection, у объектов должен быть одинаковый отступ.

    Новая функция "уборки", равномерно распределит все выделенные объекты, тем самым подготовив их к работе "умного выделения". Запустить уборку можно одним из 3-х способов:

    - С помощью горячей клавиши Ctrl + Opt + T
    - С помощью иконки, которая появляется в нижнем правом углу выделения
    - С помощью иконки в панельке выравнивания слоев

  • Figma Tips

    Smart Selection — нюансы работы новой функции для распределения и перемещения объектов

    Контролы новой функции “умного выделения” появляются, когда выбраны 2 или больше объектов с одинаковыми отступами. Причем, если выделить группу или фрейм, то контролы тоже появятся — удобно, потому что не надо делать лишние клики.

    Что можно делать с помощью этого умного выделения?
    - Синхронно изменять отступы сразу у пачки объектов
    - Менять местами один или сразу несколько объектов с помощью привычного перетаскивания
    - Изменять размеры одного или сразу нескольких объектов, при этом синхронно сдвигая соседние объекты

    Как изменять отступы?
    С помощью маленьких черточек между выделенными объектами, или используя поле в панели свойств.

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

    Как выделить сразу несколько объектов?
    Зажать Shift и нажать на розовые кружки в центре нужных объектов.

    Что можно делать после выделения?
    Перетаскивать выделеные объекты на нужное место и изменять их размеры, при этом соседние объекты будут смещаться автоматически.

    Как менять размеры в обе стороны?
    Выделить один или несколько объектов, затем удерживать Opt и тянуть в одну из сторон.

  • Figma Tips

    🔗 Как работает новая секция связанных компонентов в панели перезаписи

    Секция Best Match в дропе оверрайдов была переименована в Related Components. Ранее туда попадали компоненты одного размера, что не всегда было уместно.


    Теперь же в ней отображаются только компоненты из одной ветки или фрейма (если веток нет), а размер больше неважен. Напоминаю, что при перезаписи вложенных экземпляров с разными размерами, происходит ресайз по всем правилам Constraints.


    Максимальное количество компонентов в секции Related Components увеличили из 10 до 20. Если в ветке или во фрейме их будет больше, то секция не появится.


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

    - Large Button - Enabled
    - Large Button - Hover
    - ...
    - Small Button - Enabled
    - Small Button - Hover
    - ...


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


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

    –
    #новый_функционал #дизайн_системы #подсказки

  • Figma Tips

    📂 Теперь стили тоже можно группировать

    Используем слеш / в названии для формирования групп. Работает со всеми 4 видами стилей.

    –
    #новый_функционал #дизайн_системы #подсказки

  • Figma Tips

    🎨 Изменяем цвет через поле с HEX-кодом

    Используя клавиатурные стрелки вверх/вниз на нужных участках кода. Можно зажимать Shift для большего шага.

    –
    #подсказки

  • Figma Tips

    🎨 Изменяем оттенок с помощью скролла в области выбора цвета

    C зажатым Opt будет изменяться прозрачность. Работает и на градиентах, и на сплошных цветах.

    –
    #новый_функционал #подсказки

  • Figma Tips

    💭 Как перемещать комментарии между страницами

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

    1. Создаем пустой фрейм комфортного размера
    2. Перетаскиваем на него все нужные комменты
    3. Выделяем этот фрейм и переносим на нужную страницу через правую кнопку и Move to Page
    4. Перетаскиваем комменты на нужные места

    –
    #подсказки

  • Реклама

  • Figma Tips

    ⭐️ Как быстро избавляться от ненужной вложенности в иерархии компонентов

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

    Допустим, у нас есть вот такая структура:
    – Страница с компонентами: Controls
    –     – Фрейм с компонентами: Buttons
    –     – – Компонент: Buttons / Large Primary / Enabled

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


    Когда все компоненты уже сгруппированы по фреймам

    1. Выделяем фрейм с пачкой компонентов
    2. Нажимаем Enter, чтобы выделить все вложенные во фрейм компоненты
    3. Жмем Cmd + R, чтобы вызвать окно групповых переименований
    4. В поле Match вводим названия веток, которые нужно отрезать. В ролике к посту это "Buttons / "
    5.     Поле Rename to оставляем пустым и нажимаем Enter


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

    О плюсах новой иерархии

    –
    #дизайн_системы #подсказки

  • Figma Tips

    🔥 Фигма стала первым инструментом для дизайна, в котором есть групповое переименование слоев без плагинов

    Просто Cmd + R.

    –
    #новый_функционал

  • Figma Tips

    ⚡ Удобный способ использования иконочного шрифта Material Icons

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

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

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

    Ссылка на Material Icons

    –
    #техники_работы