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

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

4297 @figmatips
Открыть

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

  • Figma Tips

    ⭐️ Можно копировать десктопные ссылки на фреймы и прототипы

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

    #подсказки

  • Figma Tips

    Стек-группы уже в разработке В догонку к предыдущему посту Оказывается, что команда Фигмы втихаря уже работает над “стеками” — новым видом групп с фиксированными отступами между объектами. Функция для создания таких групп уже существует и работает даже в…

  • Figma Tips

    ⭐️ Сбросить границы текстового блока можно двойным кликом по ним.

    Подсказал @lyubimkoltakov

    #подсказки

  • Реклама

  • Figma Tips

    Баг с изображениями Файл перестает синхронизироваться, когда пытаешься вставить изображение через Fill. Пока-что непонятно, с чем это связанно. Если вставить картинку обычным способом через Place Image, то все работает. Если вы уже сделали много изменений…

  • Figma Tips

    Баг с изображениями

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

    Если вставить картинку обычным способом через Place Image, то все работает.

    Если вы уже сделали много изменений и откатиться назад не вариант
    Способ посоветовал @RayanTvin

    1. Экспортируйте файл .fig
    2. Закидывайте его обратно
    3. Вставляйте блоки в рабочий файл

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

    #осторожно_баг

  • Figma Tips

    Стек-группы уже в разработке
    В догонку к предыдущему посту

    Оказывается, что команда Фигмы втихаря уже работает над “стеками” — новым видом групп с фиксированными отступами между объектами. Функция для создания таких групп уже существует и работает даже в компонентах, но пока что ее нет в UI.

    Первым о ней сказал некий Джеки Чуй в одной из тем на Спектруме. Спасибо @nsylk за то, что поделился этой находкой.

    Вот так сейчас вызывается эта функция:
    App.triggerAction("stack-selection")

    Как попробовать:
    – Откройте файл Фигмы в Хроме
    – Запустите консоль. Нажмите Cmd + Opt + J на Mac или Ctrl + Shift + I на Win
    – Выделите объекты из которых нужно сделать стек
    – Вставьте в консоль функцию и нажмите Enter

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

    Не рекомендую использовать эту функцию в рабочих проектах, пока не было официального релиза!

    #новости #обзор_функционала

  • Figma Tips

    Минус: нельзя получить плавающие объекты внутри компонентов Еще одна крутая фишка символов Скетча, которая пока не реализована в Фигме Иногда нужно, чтобы объект автоматически смещался, когда меняется ширина текстового блока слева или справа от него. Как…

  • Figma Tips

    Минус: нельзя получить плавающие объекты внутри компонентов
    Еще одна крутая фишка символов Скетча, которая пока не реализована в Фигме

    Иногда нужно, чтобы объект автоматически смещался, когда меняется ширина текстового блока слева или справа от него.

    Как получить в Скетче такой же плавающий тег, как в ролике к посту
    Нужно установить ширину текста на Auto, тег и текст должны быть привязаны к левому углу через свойства Constraints. Тег будет автоматически пересматривать свою позицию, когда меняется ширина текста. При этом отступ между текстом и тегом останется неизменным.

    Таких плавающих объектов внутри символа может быть сколько угодно. Например, тегов может быть 3 и все они будут пересматривать свои позиции, когда меняется ширина текста. Плавающим может стать и другой блок текста.

    В Фигме пока-что нельзя реализовать такое поведение, что вынуждает использовать плавающие объекты отдельно от основного компонента. Когда нужно менять отступы, приходится искать все такие “точки стыковки” и делать это вручную.

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

    #недостатки_фигмы – рубрика о слабых сторонах

  • Figma Tips

    Используем веб-версию Mirror во время дизайна иконок
    Когда работаем над крупными сетами

    Есть 2 версии зеркала:
    - Приложение под iOS и Android
    - Веб-версия: figma.com/mirror

    Функционал идентичен — в зеркале отображается один выбранный фрейм в масштабе 1:1. Цвет фона задается во вкладке Prototype. Прототипы пока-что не кликабельны.

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

    Какие преимущества дает
    - Не отвлекаетесь для переключения масштаба
    - Не отвлекаетесь для включения/выключения сетки

    Однако проверку на битые пиксели в @1x никто не отменяет — картинка в веб-версии зеркала векторная, а не растровая.

    На macOS лучше работать с разделением окна на 2 части
    - Откройте Фигму в полноэкранном режиме
    - Откройте Хром с зеркалом в полноэкранном режиме. Нажмите Cmd + Shift + F, чтобы избавиться от лишних панелей
    - Нажмите Control + Arrow Up и перетащите браузер на один рабочий рабочий стол с Фигмой. Лучше на правую сторону
    - Сожмите Хром до минимума. Слева должна быть Фигма, а справа Хром с зеркалом

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

  • Figma Tips

    Как переносить компоненты между страницами
    Чтобы все связи между мастером и экземплярами сохранялись

    ⭐️ Правильно. Отправлять их на нужную страницу через правую кнопку и Send to Page. В этом случае все связи между мастером и экземплярами остаются.

    💥 Неправильно. Вырезать через Cmd + X и вставлять через Cmd + V. В этом случае все связи потеряются — компонент будет считаться новым. У экземпляров появится опция Restore Master Component.

    #подсказки

  • Figma Tips

    Цвет в приложении Фигмы не совпадает с цветом в браузере. Что делать Если вы столкнулись с этой проблемой, скорее всего, у вас монитор с расширенным цветовым охватом: Display P3. В нем на ~25% больше оттенков, чем может выдать стандартный охват sRGB. Возможно…

  • Figma Tips

    Как достать векторные иконки из любого сайта
    Где они вообще есть

    Любую векторную иконку из веба можно “одолжить”, что бывает полезно на первых стадиях создания интерфейсов. Фигма понимает любой SVG, нужно только его достать.

    Векторная графика в вебе обычно используется двумя способами:
    – Встраивается прямо в HTML
    – Устанавливается через CSS

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

    Если SVG встроен в HTML
    – Нажимаем правой кнопкой на нужной иконке и жмем Inspect Element
    – Ищем тег <svg> в HTML и делаем Ctrl + C по нему
    – Возвращаемся в Фигму и делаем Ctrl + V

    Если SVG установлен через CSS
    – Нажимаем правой кнопкой на нужной иконке и жмем Open Image in New Tab
    – На этой странице код встроен в HTML и достать его можно аналогично первому способу

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

  • Figma Tips

    Как скопировать изображение из Unsplash в любом размере и качестве

    1️⃣ Выбираем нужную картинку из unsplash.com

    2️⃣ Жмём правой кнопкой мыши и выбираем Open in New Tab

    3️⃣ Вписываем нужные цифры в конце адресной строки:

    👉 ...w=1280&q=80
    Где width — ширина, а quality — качество после сжатия. Нажимаем Enter и ждем, пока прилетит картинка

    4️⃣ Копируем ее через правую кнопку и Copy Image

    5️⃣ Вставляем в Фигме через Ctrl + V

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

    Если нужно вставить в конкретный контейнер
    После вставки можно Ctrl + C заливку с картинкой и Ctrl + V в нужный контейнер.

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

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

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

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

  • Figma Tips

    Как установить свои иконки на любое приложение под macOS
    В помощь тем людям, которые поставили бету: t.me/figmatips/121

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

    1. Откройте Finder
    2. Нажмите Cmd + Shift + A, чтобы перейти в папку со всеми приложениями
    3. Выберите нужное приложение и нажмите Cmd + I, чтобы открыть окно с информацией о приложении
    4. Перетащите иконку в формате .icns на место старой иконки в этом окне
    5. Перетащите приложение с обновленной иконкой в Dock

    Иконка обновится в папке приложений и в доке. В Spotlight все еще будет старая иконка, пока вы не перезагрузите машину.

    Как восстановить родную иконку?
    1. Откройте Finder
    2. Нажмите Cmd + Shift + A, чтобы перейти в папку со всеми приложениями
    3. Выберите нужное приложение, кликните правой кнопкой мыши и нажмите на Show Package Content
    4. Перейдите в папку Contents, а затем в Resources. Тут и найдете иконку. Заменяется точно так же.

    Какое разрешение должно быть у кастомной иконки?
    1024 × 1024.

    Как конвертировать иконку из .png в .icns?
    👉 cloudconvert.com/png-to-icns

    Где взять такие иконки для Фигмы?
    В архиве ниже. Они уже в нужном разрешении и формате. Просто установите их по инструкции.

    #подсказки

  • Figma Tips

    Цвет в приложении Фигмы не совпадает с цветом в браузере. Что делать

    Если вы столкнулись с этой проблемой, скорее всего, у вас монитор с расширенным цветовым охватом: Display P3. В нем на ~25% больше оттенков, чем может выдать стандартный охват sRGB. Возможно, у вас iMac с 2015 или MacBook с 2017. Во всех более старых яблочных девайсах используется стандартное цветовое пространство sRGB.

    Проблема с передачей цветов появляется из-за использования разных цветовых пространств
    – Официальный клиент Фигмы использует P3
    – Веб-версия Фигмы использует sRGB
    – Экспортированная графика использует sRGB
    – Зеркало использует sRGB

    Графика в настольном приложении Фигмы выглядит сочнее, потому что отображается в цветовом пространстве Display P3. В вебе, зеркале и после экспорта используется sRGB, которому часто не хватает насыщенности, чтобы показать картинку из P3.

    Установка sRGB-профиля на уровне всей системы не дает точных цветов
    iMac творит какую-то непонятную дичь с преобразованием. Этот способ не сработает и не даст вам тех цветов, которые будут на мониторах с пространством sRGB. Цвета после такой искусственной конвертации становятся перенасыщенными, а должны бы стать более блеклыми. Причем, под раздачу попадает и клиент Фигмы, который уже работает в Display P3.

    Как получить охват sRGB в настольном приложении
    Скачайте бета-версию клиента Фигмы, которая работает в пространстве sRGB. Менять цветовой профиль на самом дисплее не нужно. Все цвета будут совпадать с вебом и экспортом. Никаких косяков в работе я не обнаружил.

    Как лучше установить
    Рекомендую поставить бету прямо возле официального клиента. Просто перетащите приложение в папку Applications и дайте ему другое имя. Тогда у вас будет возможность пересматривать исходники и в sRGB, и в P3. Без лишних телодвижений и конвертаций.

    Почитать про цветовые пространства Display P3 и sRGB
    👉 habr.com/post/305842/

    Бета-версии клиентов для Фигмы
    👉 https://desktop.figma.com/mac/Figma-3.8.2.zip
    👉 https://desktop.figma.com/win/Figma-3.8.2.exe

  • Реклама

  • Figma Tips

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

    Все горячие клавиши разделены на 9 категорий:
    – Интерфейс
    – Просмотр
    – Выделение
    – Копирование и ресайз
    – Трасформации
    – Группировка и вектор
    – Иерархия и выравнивание
    – Текст
    – Инструменты

    Так в Фигме же есть окно с шорткатами, ты че!
    Да, есть. Но самые опытные бойцы уже знают, что там показаны далеко не все клавиши, даже если нажать на кнопку «See All». Кроме того, их нельзя распечатать и нужно отрываться от работы, чтобы попасть в это окно.

    Зачем их вообще учить?
    Чтобы экономить время, упрощать рутину, меньше уставать и не чувствовать себя нубасом в инструменте.

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

    Есть хоткеи, которых нет в доке?
    Напишите мне об этом.

    Есть неточности или ошибки?
    Оставьте коммент в доке.

    Сделали версию под Windows?
    Отлично. Напишите мне об этом и мы ее опубликуем.

    #ресурсы #горячие_клавиши