Эффект Liquid Glassв Figma — как в новом обновлении от Apple 🪄
В комментариях — инструкция, как собрать эффект вручную
А для тех, кто на платформе Ready? Set. Create!, доступен шаблон этого эффекта в разделе Шаблоны Figma
— его можно дублировать в свой проект и сразу применить 🫰🏼
#figma@mariinavodesign
Такого в канале еще не было 🥳
Шаблоны для Instagram, с учётом нового формата постов — 3:4
#figma@mariinavodesign
Доступны в светлой и тёмной теме — можно редактировать контент под себя и создавать уникальные комбинации
Забрать шаблоны в Figma можно по ссылке + там же инструкции по настройке сетки
➡️А на платформе Ready? Set. Create! еще больше шаблонов Figma: сайты, презентации, посты для соцсетей и другое
Полезное для тех, кто работает в Figma: плагин Progressive Blur, который сделает стильный эффект блюра 🤍
— позволяет менять интенсивность размытия, цвет и прозрачность
↑ Выше прикрепила примеры того, что может получиться с этим плагином
#figma@mariinavodesign
Стильный эффект, который создается буквально за пару минут в Figma — эффект слипшихся букв 👾
🩵
1. Набираем слово жирным шрифтом. Кстати, для этого приема хорошо подойдут шрифты из этого поста
2. Правая кнопка мыши → outline stroke
3. В меню справа → union selection
4. Выставляем скругление на 20-30 и соединяем буквы так, чтобы получился нужный эффект
⬆️Выше прикрепила то, что получилось у меня + другие примеры, которые отыскала в пинтерест
А в комментариях более подробная инструкция со скринами
#figma@mariinavodesign
Эффект в Figma, который привлекает внимание и создается в пару кликов — 3D буквы 🤌🏼
#figma@mariinavodesign
Получается стильно и объемно. Инструкция — в комментариях, и пара важных уточнений:
1. Не каждый шрифт подойдет для такого эффекта — нужны пухлые или похожие на воду шрифты (завтра будет пост с подборкой)
2. Потребуется 10-15 минут вашего времени чтобы создать такой эффект, ну или 2 минуты, чтобы скачать более 900 3D-элементов на платформе Ready? Set. Create!
🧠
Config 2023:Figma Product Launch Keynote
Это как WWDC, но только от Figma и для дизайнеров
Ребята, там такое показывают, жесть.
Не хочу долбить вас сообщениями, соберу всё в одном посте
🎩
Конфа была построена вокруг большой фичи — DevMode (что-то вроде инспектора браузера, где можно напрямую переписывать значения, влиять на code block и другое)
Список фич:
✓ Собственно режим DevMode
✓ Variables (функционал дизайн-токенов)
✓ WRAP в Autolayout (блоки перестраиваются сами при изменении размеров фрейма)
✓ Prototype (прокачали переменными, стейтами, базами данных)
✓ Нативная метка для макета «Готово к разработке»
✓ Поддержка Swift UI для code block
✓ Component playground (изолированный просмотр компонента и создания новых вариантов)
✓ Связка компонента с Github
✓ Интеграция с Jira (смотри таски и создавай новые)
✓ Интеграция с VS Code
✓ Генерация сниппетов (чисто разрабска тема)
✓ Прокачали dropdown с выбором шрифта и добавили ПРЕВЬЮ
✓ AI теперь в Figma (по текстовому запросу генерирует элементы дизайн-системы)
DevMode🚧 в 2023, а в 2024 доступно раздельное оформление за $25
(для editor учёток будет работать без доплат)
🎞Трансляция
🏁 Смотреть закончил, пост больше не обновляю,можно шерить
#figma
👨🎨 + 🍏 = 🤝
Много лет мы жали этого, а пока ждали — импортировали кривые киты эппла из .sketch в Figma. С этим покончено, Apple Design Resources заехали в Figma Community.
Теперь кривые местами компоненты, сразу в фигме
#figma
Полезное для веб-дизайнеров: эффект рельефного стекла в Figma / Tilda⚡️
❤️🔥Хорошо смотрится и в презентациях и на сайтах, а создается буквально в 3 шага
#figma@mariinavodesign
Плагины Figma, которые вы точно искали
🙃
3D Wave — превращает любой объект в искажённую трёхмерную плоскость.
To Path — поможет расположить любой элемент по нужной вам траектории, которую можно создать с помощью пера.
Blend — «размножает» объект вдоль заданной траектории.
Warp It — деформирует, изгибает и искажает векторные фигуры. Текст тоже можно перевести в вектор (функция Flatten) и применить эффект искажения к нему.
SkewDay — создает изометрическую проекцию фрейма.
#figma@mariinavodesign
Плагин Fractal Glass Effect в Figma, который делает эффект стекла за два клика 🫰🏼
1. Загружаем изображение
2. Открываем плагин Fractal Glass Effect
3. Настраиваем интенсивность
4. Нажимаем Create
#figma@mariinavodesign
Тут инсайдерская инфа всплыла что #figma работает над advanced sizes Ими можно будет выставлять максимальную/минимальную высоту и ширину для автолайаута.
👨🎨
Я решил не писать про минорные обновы, а брать планку повыше: инсайды, большие релизы с мини-обзором
Дальше без лишних слов. Вот вам слив скорого обновления Figma: auto layout будет уметь переносить текст+блоки, добавят расстояние между рядами, добавят вертикальную обрезку текста, улучат история версий+компонентов.
#figma