🆕 Иконка перетаскивания для свойств объекта: небольшое нововведение, делающее панель свойств более интуитивной! Если к слою применено более одного цвета заливки, обводки или несколько эффектов, при наведении на них будет показываться иконка, за которую можно потянуть для изменения порядка этих свойств. Раньше их порядок и так можно было менять, но не все это знали, так как не было иконки. Да, это всё. Это всё нововведение. 😅 #новое

Чтобы сделать этот пост максимально полезным, вот ответ на часто задаваемый вопрос: как скопировать только одно свойство объекта на другой? Например, один цвет заливки или один эффект, а не все свойства сразу.

👉 Ответ: надо кликнуть по нужному свойству в этой пустой области слева, чтобы выбрать его. Когда свойство выбрано, то есть подсвечивается синим цветом, просто жми Ctrl/Cmd + C чтобы скопировать. Можно даже выделить несколько свойств с зажатым Ctrl/Cmd или Shift, подобно выбору слоёв. #обучение

🆕 Иногда цвет хочется написать словом вместо выбора через меню, например, red, blue, yellow... И это теперь возможно! Любое стандартное значение цвета из CSS можно написать в поле ввода цвета. Даже такое как “MistyRose”! Они автоматически преобразуются в шестнадцатеричный код цвета. Все цвета можно найти в таблице: https://htmlcolorcodes.com/color-names/ #новое

К слову, а ты уже знаешь, что можно не писать весь HEX код цвета, если буквы и цифры в нём повторяются? Например, написав F ты получишь белый #FFFFFF, а 0 — чёрный #000000. Пара символов также будет повторяться: 5A станет #5A5A5A. А вот тройка символов скопирует каждый на отдельные составляющие цвета: “f9a” превратится в #FF99AA. #обучение

Начнём неделю с полезной информации про Варианты. Что это и когда их использовать? 👀 #обучение

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

Варианты отлично подходят для кнопок, чекбоксов, табов, полей ввода и других интерактивных элементов. Хорошо будут работать они и для слегка отличающихся карточек (например, в одной есть кнопка, в другой нет), баннеров с предупреждениями и информационными сообщениями, меню с разным видом и шириной для разных платформ. Не следует использовать варианты для группировки иконок — если объединить их в варианты, в поиске они будут отображаться как один компонент и нельзя будет их менять через панели Assets и Swap Instance.

Где найти все крутые и полезные плагины, которые публикуют практически каждый день? Тебе понадобится небольшая карта, которую мы сделали для тебя! 🗺

1. Сначала открой вкладку Community в меню слева.
2. Нажми на кнопку Explore — первую в куче других похожих кнопок.
3. Найди вкладку Plugins. Ты на месте! 📍

Чтобы найти свежие плагины (или просто очень непопулярные), включи сортировку по количеству установок. Поиск по плагинам доступен там же, во вкладке Community. #обучение

Только начинаешь осваивать Figma и знакомиться с дизайн инструментами в целом? Тогда этот плейлист из четырёх видео для тебя! 🤗 Узнай о процессе дизайна в Figma: начни с поиска и проработки идеи, затем воплоти её в своих макетах, создай интерактивный прототип и наконец передай результат разработчикам. #обучение

👉 https://www.youtube.com/playlist?list=PLXDU_eVOJTx7QHLShNqIXL1Cgbxj7HlN4

Немного полезной информации про интерактивные компоненты (бета) для тебя. 🧠

Как ты уже наверняка знаешь, interactive components — это новая функция в Figma, которая позволяет заменять один компонент на другой в прототипе. Это заметно облегчает создание прототипов с множеством независимых состояний отдельных элементов: кнопок, чекбоксов, меню и более сложных систем. Спагетти в прототипах станет намного меньше! 😎

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

Бета доступна всем, заявки принимаются через форму: https://forms.gle/tAxqMQNXuNU4NYmj9. 🎉 Если тебя ещё не приняли с конца прошлой недели — в начале этой обязательно жди письмо. Как и с любой незаконченной функцией, её не рекомендуется использовать в критически важных проектах: возможны баги, тормоза в больших прототипах, ограничения с авто-лейаутом в прототипах и т.п. Но не волнуйся: после получения доступа к бете ты можешь выбирать в каких файлах включать или выключать эту функцию.

Больше информации ты найдешь в статье: https://help.figma.com/hc/en-us/articles/360061175334-Create-interactive-components-with-variants #обучение

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

Ты уже в бета? Разобраться с интерактивными компонентами тебе поможет файл с интерактивным гайдом. Перевод на русский от Friends of Figma, Moscow! 🇷🇺 https://www.figma.com/community/file/947240372614756281 #обучение

Без доступа к бете ты не сможешь взаимодействовать с интерактивными компонентами в прототипе. Если ты ещё не отправлял(-а) заявку — вот форма: https://forms.gle/tAxqMQNXuNU4NYmj9

Запись вебинара про интерактивные компоненты с прошлой недели. 🎥 Если ты уже имеешь доступ к Interactive Components Beta, тебе будет полезна эта демонстрация возможностей и особенностей новой фичи. А если ещё нет, запишись тут: https://forms.gle/tAxqMQNXuNU4NYmj9 и посмотри вебинар, пока ожидаешь заветного письма с одобрением доступа в бету. #обучение

👉 https://youtu.be/hOoEeNa6aEk

Первое апреля прошло, и ты уже хочешь убрать эти разноцветные иконки в списках и заменить их на обычные точки? 🌸 Это сделать проще простого: открой меню поиска (Cmd/Ctrl + /) и отключи настройку “Show fun list emojis”. Также можно этот пункт найти в меню View. ✅ #обучение

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

• Включить списки для выбранного текста можно нажатием Ctrl/Cmd + Shift + 7/8 (7 для нумерованного, 8 для маркированного). Выключить список можно теми же самыми шорткатами. #shortcut

• Можно ввести с начала строки следующие символы и нажать пробел, чтобы начать список: «1.», «1)», «-», «•», «*». Если тебе не нужен список, вернуть символ и убрать автоматический список — Cmd/Ctrl + Z.

• Чтобы сдвинуть пункт списка на следующий уровень (создать подпункты), используй Tab, а обратно — Shift + Tab. Также отступы теперь работают и без списков! Чтобы их добавить или убрать, нажимай Ctrl/Cmd + ] или [.

• Текущие известные ограничения: к спискам не применяется расстояние между параграфами; нельзя использовать свои маркеры; маркеры не меняются в зависимости от уровня в маркированных списках.

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

1. Вырежи этот компонент из исходного файла (Ctrl/Cmd + X) и вставь в нужный файл (Ctrl/Cmd + V).
2. Опубликуй компонент в библиотеку. В окне публикации убедись, что у компонента выбран пункт “Move to this file”.
3. В каждом файле, где используется этот компонент, нужно принять изменения из библиотеки. Вот и всё!

⚠️ Важно! Во-первых, перенос нельзя отменить. Чтобы переместить компонент обратно, нужно повторить действия в том же порядке. Во-вторых, обращай внимание на вложенные компоненты — они должны быть опубликованы в библиотеку или тоже перенесены. В-третьих, сейчас многие жалуются на сброс оверрайдов, так что осторожней с использованием этой функции в важных файлах. Возможно пока надёжнее пользоваться проверенными плагинами типа Master и DSO.

Подробная статья | Видео | #новое #обучение

В чём сила? А вот в чём — в горячих клавишах! 😉 Вставляй и заменяй компоненты не отрывая рук от клавиатуры. Нажми Shift + i, чтобы открыть новое меню компонентов. Сразу можно начать писать название нужного компонента в поиске. Дальше всё просто как в игре:

- Стрелочками на клавиатуре выбери нужный компонент. 🎮
- Нажми Enter (или кликни), чтобы вставить инстанс компонента в центр экрана или выделенного фрейма.
- Нажми Alt + Enter (или Alt + клик), чтобы заменить выделенные на рабочем пространстве инстансы на выбранный в меню компонент.

#новое #обучение https://help.figma.com/hc/en-us/articles/360039150173-Create-and-insert-component-instances#quick-insert

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

Чтобы заменить библиотеку в файле, открой меню Libraries (Alt + 3), выбери библиотеку, которую хочешь заменить и нажми кнопку Swap Library. В выпадающем списке найди библиотеку, на которую хочешь заменить. Figma найдёт соответствия по именам компонентов и стилей для замены, тебе лишь остаётся выбрать какие из них заменить.

Полная статья со всеми подробностями: https://help.figma.com/hc/en-us/articles/4404856784663 #новое #обучение

Ура! Интерактивные компоненты вышли из беты и доступны для всех! 🎉 Interactive components — это возможность создавать переходы между компонентами (вариантами), что открывает совершенно новые горизонты для создания и упрощения интерактивных прототипов. 💙 Меняй состояния кнопок, создавай анимации наведения на карточки, удаления элементов списка и прорабатывай другие сложные взаимодействия с отдельными элементами внутри экрана! #новое

Чтобы настроить самый простой интерактивный компонент, создай два компонента и объедини их в варианты (Combine as variants). Затем зайди во вкладку Prototype (используя новый шоткат Shift + E) и протяни связь от одного варианта к другому. Готово! Теперь инстансы этого вариативного компонента интерактивны — добавь их на экран и запускай режим просмотра прототипа для теста. #обучение

Изучи интерактивные компоненты в деталях с этим файлом: https://www.figma.com/community/file/1033456279024883078

Как добавить эффекты к прозрачным объектам в Figma? Создаём белую заливку (можно написать просто «f» в поле цвета), ставим метод наложения Multiply или Darken (именно в настройках цвета заливки). Готово — можно добавлять Background blur и тени к прозрачному объекту! 🔥 #обучение

Как это работает: режим наложения Multiply перемножает каждый компонент R, G и B фонового изображения (A) с соответствующим компонентом цвета накладываемого слоя (B). Если B = 1 (белый), то A × B = A × 1 = A, следовательно цвет фона остаётся без изменений, заливка не видна.

Больше не нужно заливок с непрозрачностью 1% или 0.01%. Бежим добавлять такой стиль в дизайн системы и UI киты! Только не забудь написать понятное описание стиля для других дизайнеров и разработчиков. Нашёл этот метод в файле Material You & Android 12 от Eduardo Pratti: https://www.figma.com/@pratti, не мог не поделиться.