Figma Tips

⁠Улучшение Smart Selection

Теперь можно свободно дублировать или удалять объекты, сетка подстраивается. Все как обычно — удерживаем Shift, чтобы выделить сразу несколько блоков, а дублируем через Cmd + D. Адекватно срабатывает даже когда объекты разного размера.

Подробней об этой функции

⁠Нативная функция смены цветового профиля в приложении на macOS

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

Опция находится в левом углу возле яблока: Figma » Color Space.

Коротко о проблеме

Цвета в десктопном клиенте кажутся перенасыщенными из-за того, что они цепляют дефолтный цветовой профиль системы Display P3. Браузер, зеркало и вся экспортированная графика используют профиль sRGB. Разница в цветах возникает из-за того, что в пространстве Display P3 на ~25% больше оттенков, чем выдает sRGB.

Что теперь можно делать

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

Когда какой профиль использовать

Unmanaged (Display P3) стоит оставлять только в том случае, если вы работаете над приложением эксклюзивно под macOS или iOS. Во всех остальных случаях лучше использовать sRGB.

Если я ранее зафорсил sRGB через консоль?

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

⁠Автоматическое открытие ссылок через десктопный клиент

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

1. Open Links in Desktop App
2. Open In Desktop App

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

Вторая функция используется для разово открытия текущего файла в приложении.

Зажимаем комбинацию Cmd + / и ищем Desktop, чтобы быстро найти обе функции.

Происхождение названия Figma

От английского «figment», что переводится как «вымысел», «плод воображения».

Figment of your imagination. Get things out of your head and onto the screen.
© Dylan Field

Прикольно, знали об этом?

​​Бесплатная книга «Руководство по Figma»
Саши Окунева

Ссылка на книгу

Это самая первая публичная версия на 256 страниц. Со временем будут добавляться новые главы.

Какие темы рассматриваются

– Интерфейс
– Шейпы
– Перо
– Векторные сети
– Градиенты всех типов
– Кадрирование изображений
– Цветокоррекция
– Булевы группы
– Ограничители и адаптивность
– Стили
– Компоненты
– Оверрайды
– И много чего ещё

Будет особенно полезно тем, кто переключается со Скетча на Фигму

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

Нельзя вырезать фреймы с комментариями через Cmd + X

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

Отменить отвязку можно 2 способами

– Через Cmd + Z
– Через историю версий

Как правильно перемещать фреймы между страницами

– Нажимаем правой кнопкой на выделенных фреймах
– Выбираем пункт Move to Page

В этом случае комментарии всегда остаются на своих местах.

Библиотека компонентов для аннотаций и презентации деталей

Ссылка на файл

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

3 способа, как вы можете ее использовать

- Оставлять заметки для разработчиков
- Оформлять гайдлайны
- Презентовать свои работы

Библиотека полностью бесплатна и доступна на официальном хабе Фигмы. Я переодически ее дорабатываю и улучшаю.

Что в нее входит (будет дополняться)

- 12 компонентов в 2-х стилях для презентации отступов и размеров в стиле Sketch Measure
- 8 компонентов для презентации размеров через выносные линии в чертежом стиле
- 4 компонента для презентации отступов и границ в стиле Box из DevTools
- 8 компонентов в 2-х стилях для аннотаций
- 3 компонента с курсорами
- 10 вспомогательных компонентов для ускорения кастомизации

Детали организации

- Все компоненты с настроенными ограничителями и ресайзятся как угодно
- Библиотека хорошо организована и разбита по классам компонентов
- Все цвета и шрифты привязаны к стилям для быстрой кастомизации
- Все компоненты базируются на сетке 4dp

Ссылка на файл

Комбинация Stretch Grid и Constraints

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

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

Если же сетка работает в режиме Top, Left, или Center, то такого не происходит — эти сетки фиксированные и все свойства Constraints работают относительно своих родительских фреймов.

Когда нужно использовать сетки в режиме Stretch

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

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

Stretch сетки работают даже когда спрятаны

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

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

Почему свойства Constraints странно работают без резиновой сетки

Когда нужно растягивать или сжимать одновременно 2+ объекта внутри фрейма, может показаться, что ограничители Left & Right или Top & Bottom начинают работать как-то неадекватно. На самом деле функция отрабатывает как надо.

Цель ограничителей Left & Right или Top & Bottom — сохранять отступы относительно родительского фрейма или ближайшей резиновой колонки. Им все равно какие там отступы от соседних объектов — вы их видите, а они нет.

Виновато абсолютное позиционирование

Тем, кто знаком с версткой это кажется странным — объекты ведь лежат внутри одного контейнера, почему они не учитывают пространство и отступы от соседей? Судя по всему, вкладка Code действительно не врет — все объекты используют что-то вроде position: absolute, а отступы в контейнерах соблюдаются благодаря свойствам left, right, top, bottom.

Почему нельзя обойтись свойствами Constraints в режими Scale

Объекты с ограничителями в режиме Scale сохраняют свое процентное соотношение размера и отступов относительно их родительского фрейма. Если блок занимает 50% всей ширины фрейма, а отступы слева и справа по 25%, то именно такими они останутся после ресайза блока. Это приводит к дробным числам размера и отступов, даже когда отступов между соседними объектами фрейма вовсе не было.

Функционал открыт и протестирован совместно с @starkovskyblg ✌️

Знали об этой фиче?
😳 – не знал(а)
🤓 – уже знал(а)

Есть интересные кейсы использования или вопросы по этому функционалу? Можете написать в комментариях.

Копируем ссылки на любой фрейм, страницу или прототип из десктопного приложения

⚡️ Быстро: правая кнопка на вкладке с нужным файлом и Copy Web URL.

🐢 Долго: нажимать кнопку Share, затем проверять чтобы было выбрано Link to selected frame, затем еще раз кликать по кнопке Copy link.

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

Открываем любую ссылку Фигмы через приложение

Опция появилась в недавном обновлении.
1. Копируем ссылку на любой фрейм, страницу или прототип
2. В десктопном клиенте нажимаем Cmd + Shift + O

Ранее приходилось копировать URI и просить Chrome открывать такую ссылку через десктоп.

Вырезание компонентов больше не ломает связи с экземплярами

С недавней обновы можно безопасно переносить компоненты между страницами через Cmd + X и Cmd + V.

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

1. Cmd + D на компоненте, чтобы оставить экземпляр на его месте
2. Cmd + X на компоненте, чтобы вырезать его
3. Cmd + V на нужной странице и фрейме, чтобы вставить

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

Экспорт многостраничных PDF-документов

В поиск Cmd + / вводим Export Frames to PDF...

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

​​Добавлен PDF-экспорт

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

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

Что удалось выяснить на данный момент
– Экспорт очень четкий, даже на сложной графике с кучей градиентов и теней.
– Полученный PDF, судя по всему, можно открыть любым инструментом, который умеет в PDF. Пробовал через Chrome, Preview и Adobe Reader.
– Можно создавать PDF-документы на несколько страниц.
– Все растровые изображения экспортируются в оригинальном размере, что может сильно влиять на размер файла. Думаем об этом заранее или пережимаем потом.
– Текст конвертируется в кривые, скопировать его из PDF будет нельзя.
– Обратной поддержки нет. Не выйдет закинуть экспортированный PDF назад в Фигму, но можно открыть через Иллюстратор.

Официальная статья по PDF-экспорту
Подробная документация

​​Официальная коллекция ресурсов
figma.com/resources

Очень крутой подгон, есть много самых разных материалов, в том числе и моих 🙈

– Статьи
– Курсы
– Ассеты
– Плагины
– Интеграции

Оверлеи в прототипах

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

Видео на YouTube
Статья на Medium
Подробная документация

Ограничения бесплатных команд

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

Иерархия в организации файлов
- Teams (подобие папки с папками)
-- Projects (подобие папки с файлами)
--- Files (файлы в папках или в разделе Drafts)

Я могу вообще не создавать команду?
Конечно. В разделе Drafts можно создавать и хранить любое количество файлов, шарить их на любое количество зрителей и редакторов. Но здесь вы не сможете их как-то группировать и создавать командные библиотеки.

Сколько проектов можно создавать?
Максимум 3 проекта.

Можно создать несколько бесплатных команд?
Да, в каждой можно держать до 3 проектов.

На какое количество человек можно расшарить проект?
Зрители неограниченны, но давать права редакторов нельзя — приглашенные не могут создавать свои файлы в этой папке.

Сколько файлов может быть внутри проекта?
Сколько угодно.

Сколько времени хранится история версий?
30 дней. Откатиться к более ранней версии файла нельзя.

На какое количество человек можно расшарить файл в проекте?
Зрители неограниченны, а вот редакторов может быть только 2 — вы и еще один человек. Работает на уровне всей команды — если где-то в файлах появится второй редактор, то только ему и можно будет дать такие же права на другой файл.

Есть ли какой-то способ обойти ограничение в 2 редактора?
Да, есть. Для этого нужно создать файл в разделе Drafts, или перенести туда уже существующий. Файлы в этой секции можно шарить на какое угодно кол-во зрителей и редакторов, но публиковать стили и компоненты в командную библиотеку нельзя.

Если я решу сделать апгрейд до платной команды, у меня по-прежнему останутся 2 бесплатных редактора?
Нет! Если у вас уже где-то есть второй редактор, то за него тоже придется платить.

Могут ли разработчики получать код в режиме зрителя?
Да. Они смогут посмотреть все отступы и размеры, достать CSS/XML/Swift код, самостоятельно экспортировать нужную графику и еще много чего.

Работают ли командные библиотеки в бесплатной версии?
Частично. Расшарить получится только стили. Если нужны компоненты, то это есть в платной.

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

Могу ли я подключать командные библиотеки к файлам в Drafts?
Да, можете. Внешние библиотеки из какой-либо команды сюда подключаются и работают как обычно.

Ссылка на прайсинг

Что может делать участник с правами зрителя в файле

Когда вы даете доступ к файлу другому человеку, у вас есть три варианта: разрешить только смотреть (Can View), дать права редактора (Can Edit), отдать ему полные права на файл (Owner).

Что можно делать c правами Can View
– Смотреть все отступы, размеры объектов и их свойства, копировать CSS/XML/Swift код нужных слоев.
– Самостоятельно экспортировать нужные слои. Пресеты могут быть как заранее созданы дизайнером, так и временно создаваться зрителем.
– Просматривать и оставлять комментарии.
– Запускать прототип любой страницы. В том числе на мобилке iOS/Android через Figma Mirror.
– Включать/выключать отображение сеток, направляющих, пикселей и контуров.
– Видеть все стили, которые есть в файле.
– Видеть все комментарии к компонентам и стилям, которые оставлены дизайнером.
– Видеть всю структуру страниц и слоев в файле.
– Приглашать в файл других людей или просто шарить ссылку на него.
– Дублировать весь файл себе в Drafts. Запретить это делать никак не получится.

Оглавление канала 2.0

Собрано в Telegraph и всегда доступно в описании канала. Открывается внутри самого Telegram через Instant View на любых мобильных девайсах.

Сейчас есть два способа навигации по каналу
1. Использовать поиск, чтобы найти ответ на какой-то конкретный вопрос.
2. Использовать оглавление, чтобы пробежать по заголовкам и выбрать то, что интересно почитать.

Другие полезные источники
– Наш уютный чат
– Коллекция ресурсов
– Канал на YouTube
– Чат на Spectrum
– Страница релизов
– Документация