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

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

4297 @figmatips
Открыть

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

  • Figma Tips

    Чем круты последние изменения в организации компонентов

    Ранее я сухо описал новую иерархию в дропе оверрайдов, а сейчас опишу, что это дает. Будет полезно понимать тем, кто еще не адаптировал свои библиотеки компонентов и задается вопросом, что случилось и зачем вообще.

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

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


    Значительно упрощаются названия компонентов

    Чем сильнее мы разбиваем компоненты по фреймам, тем легче становятся их название. Теперь фрейм задает контекст. В некоторых случаях удается избавиться от абстрактной иерархии вообще и прийти к чисто физической: фрейм — чистый компонент без веток.

    Например, если все иконки у нас одного размера, то компонент «Icons / Arrow Right» превращается в «Arrow Right» во фрейме «Icons».


    Автоматическое переименование экземпляров теперь радует

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


    Легко переименовать первые две ветки в структуре компонентов

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


    Легче экспериментировать с компонентами

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


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

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


    Как адаптировать текущую структуру к новой?

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


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

  • Figma Tips

    🎉 Теперь можно просматривать вкладку компонентов в виде списка

    Иерархия такая же, как и в обновленном дропе перезаписи.

    Файл – Страница – Фрейм – Ветка

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

  • Figma Tips

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

    Все эти свойства можно изменять стандартным способом у любых вложенных слоев и экземпляров (где они есть), независимо от глубины их вложенности:

    – Имя объекта
    – Текстовый стиль
    – Выравнивание текста
    – Текст
    – Цветовой стиль заливки
    – Свойства обводки и ее цветовой стиль
    – Стиль сетки
    – Стиль эффектов
    – Видимость объекта
    – Замок на объекте
    – Прозрачность объекта и режимы смешивания
    – Скругление углов
    – Уровень сглаживания углов (Corner Smoothing)
    – Обрезание контента у фрейма (Clip Content)
    – Пресеты для экспорта
    – Переход в прототипе


    Любое перезаписанное свойство можно вернуть к исходному состоянию

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

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

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


    Любой вложенный экземпляр можно перезаписывать

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


    Любой перезаписанный экземпляр можно вернуть к исходному

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


    Что нельзя изменять у вложенных слоев и экземпляров
    Эти свойства жестко наследуются из компонента:

    – Свойства Constraints (поведение при ресайзе)
    – Относительный размер элементов
    – Относительная позиция элементов
    – Тип радиуса углов (общий / отдельный для каждого угла)

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

  • Реклама

  • Figma Tips

    Как сделать обложку к файлу

    1. Создаем пустую страницу в файле, назовем ее Cover
    2. Делаем ее самой первой
    3. Создаем на этой странице один фрейм размером 800 × 450 (16:9)
    4. Устанавливаем одинаковые цвета для фона и фрейма
    5. Стилизируем фрейм с обложкой под наши нужды

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

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

    #подсказки

  • Figma Tips

    7 кастомных шорткатов для частых рутинных действий

    До всех можно дотянуться одной рукой. Четыре месяца в активном использовании.

    Как устанавливать?

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

  • Figma Tips

    В дропе перезаписи экземпляров появилась иерархия

    Файл – Страница – Фрейм – Ветка

    Теперь она такая же, как и во вкладке компонентов, а весь выпадающий список делится на 3 части.

    Лучше совпадение
    – Список компонентов. Может быть пустым, если нет совпадений по размерам, или их больше 10

    Локальные компоненты
    – Список страниц с компонентами
    – – Список фреймов внутри / список компонентов вне фреймов
    – – – Ветки компонентов внутри

    Включенные библиотеки
    – Список библиотек
    – – Список страниц с компонентами
    – – – Список фреймов внутри / список компонентов вне фреймов
    – – – – Ветки компонентов внутри

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

  • Figma Tips

    Мокап нового Google Chrome

    Очень втащил новый дизайн, так что я тоже решил вальнуть. Все ресайзится, сетка 4dp, на компонентах и стилях. Хватайте с Твиттера

    —
    #ресурсы

  • Figma Tips

    ⛓Самый простой способ организовать вертикальное смещение строки в компоненте
    Когда нужно добиться смещения одного текстового блока при изменении количества строк в другом.

    1. Используем один текстовый блок вместо двух.
    2. Используем два разных стилях внутри текстового блока.

    Некоторые нюансы при использовании в компонентах
    - Лучше сразу привязывать обе части такого составного блока к стилям, иначе будут проблемы с их обновлением в экземплярах.
    - Контролировать отступ между блоками внутри можно с помощью свойства Paragraph Spacing.

    Минусы такого подхода
    - Разработчики не смогут вытащить оба стиля без нашего вмешательства. Через вкладку Code будет доступен только один из них.
    - Слабая связь текстового блока в компоненте с экземплярами. Если привязать часть текста к другому стилю, то он не обновиться в экземплярах — синхронизироваться умеет только сам стиль.

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

    #подсказки

  • Figma Tips

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

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

    Можно указывать способ взаимодействия, теперь есть не только клик
    Все 8 типов возможных взаимодействий:
    1. On Click
    2. While Hovering
    3. While Pressing
    4. Mouse Enter
    5. Mouse Leave
    6. Mouse Down
    7. Mouse Up
    8. After Delay

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

    Можно устанавливать переходы на предыдущий экран
    Через дроп Destination и пункт Back to previous screen во вкладке прототипов. Задать можно и на уровне всего компонента — все экземпляры унаследуют это поведение.

    Можно вставлять внешние ссылки
    Через дроп Destination и пункт Link to URL во вкладке прототипов. Принимаются и ссылки на прототипы из других страниц файла. Пока-что они открываются в браузере в отдельной вкладке. Напомню, что сейчас нет возможности связать экраны из двух разных страниц, одна страница — один прототип. Если начнут открывать ссылки на прототипы внутри десктопного клиента, то может сойти за временное решение связи отдельных страниц.

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

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

  • Figma Tips

    ✏️ Небольшое усложнение в процессах редактирования стилей

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

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

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

    #новости

  • Figma Tips

    👀 Вернули функцию скрытия заливки в панель свойств

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

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

    #новости

  • Figma Tips

    ✨ Улучшили UI выпадающих списков

    – Дроп со стилями теперь появляется внизу, а не слева
    – Курсивные типы шрифта теперь группируются отдельно

    #новости

  • Figma Tips

    🖥 Обновился десктопный клиент

    – Если не работали до этого в бете, то ощутите ускоренную загрузку файлов
    – При рестарте клиент запоминает открытые ранее файлы с точной позицией на странице и масштабом
    – Проблема с цветовыми профилями все еще существует. Клиент работает в пространстве похожем на Display P3, а веб-версия, экспорт и зеркало — в sRGB

    Это бета 63.3, которая вышла в официальный релиз. Ее предшественница 63.2 умела работать в пространстве sRGB, поэтому все цвета в ней совпадали с браузером, экспортом и зеркалом. От этого экспериментального поведения решили отказаться, от чего я не очень в восторге.

    Что делать тем, у кого проблемы с цветами
    Оставаться на устаревшей бете нет смысла. Работаем в официальном клиенте и держим в уме, что на большей части не-яблочных устройств цвета будут менее насыщенными. Цвета в sRGB все еще можно проверять через веб-версию в Chrome и Safari. Подробно описал в проблему с цветами в этом посте.

    #новости

  • Figma Tips

    ✂️ Самый быстрый способ обрезать изображение

    1. Выделяем нужное
    2. Нажимаем Opt + Double Click
    3. Режем и нажимаем Enter

    #подсказки

  • Figma Tips

    ✍️ Теперь можно документировать стили

    Со вчерашнего дня к любому виду стиля можно добавить описание. Оно будет доступно и для разработчика в режиме Code.

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

  • Реклама

  • Figma Tips

    ⚒ Как полностью разобрать компонент

    Никак. Компонент в Фигме можно удалить, а разобрать можно только экземпляры.

    Если нужно сохранить его в "разобранном" виде, но с экземплярами внутри:
    1. Делаем экземпляр и отвязываем его через Cmd + Opt + B.
    2. Удаляем компонент.

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

    Если нужно разобрать в том числе и все вложенные экземпляры:
    1. Делаем экземпляр компонента.
    2. Выделяем экземпляр и жмем Enter.
    3. Нажимаем Cmd + C и Cmd + V.
    4. Оборачиваем содержимое во фрейм через Cmd + Opt + G.
    5. Удаляем компонент.

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

    #подсказки

  • Figma Tips

    🍎 Почему размытие фона не работает

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

    1. Устанавливаем заливке прозрачность от 1 до 99%.
    2. Применяем и настраиваем Background Blur.

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

    #подсказки

  • Figma Tips

    ⚡️ Самый быстрый способ найти и выделить любой компонент

    Используем вкладку компонентов и зум к объекту.

    1. Нажимаем Opt + 2, чтобы переключиться на вкладку компонентов.
    2. Находим компонент с помощью поиска или вручную, кликаем по изображению компонента. Он автоматически выделится, даже если находится на другой странице.
    3. Нажимаем Shift + 2, чтобы сделать зум к нему

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

    #подсказки