Обзор 5 крутых плагинов для Figma, которые можно использовать в создании дизайна.

👉 @PortalToDesign

В Figma добавили умный перенос текста из CSS — text-wrap: balance и text-wrap: pretty.

`text-wrap: balance`
Подбирает переносы так, чтобы строки в блоке получались примерно одинаковой длины. Особенно хорошо работает для заголовков и коротких текстовых блоков.

`text-wrap: pretty`
Решает проблему «висячей строки» и переносит текст так, чтобы в последней строке оставалось как минимум два-три слова.

👉 @PortalToDesign

Laudable Apps — галерея экранов мобильных приложений для вашего вдохновения.

👉 @PortalToDesign

В Claude Code добавили новый навык /design.

Он запускает редактор Claude Design и публикует визуальный дизайн с несколькими артбордами в виде Artifact.

Артборды в формате .dc.html размещаются на одном полотне, которое можно свободно перемещать и масштабировать. По сути, это отдельная среда внутри Claude Code для быстрых черновиков интерфейсов и визуальных концептов.

👉 @PortalToDesign

Hand Drawn Arrows — набор из 55 рисованных вручную стрелочек для ваших дизайнов в Figma.

👉 @PortalToDesign

Сделали навык для переходов в интерфейсе.

Он анализирует проект, находит существующие переходы и предлагает, как их улучшить или заменить на более плавные и быстрые варианты из библиотеки Transitions.dev.

Установка:

npx skills add Jakubantalik/transitions.dev

👉 @PortalToDesign

Uber представила новую систему иконок.

Обновлённый набор стал более цельным и последовательным. Единая визуальная логика помогает сохранять узнаваемость интерфейса в разных продуктах и сценариях.

https://uber.design/when-to-evolve-a-design-system

👉 @PortalToDesign

Как я вообще не нашёл это раньше

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

Есть куча настроек, а прокрутку можно синхронизировать между всеми устройствами одновременно.

Очень удобно для разработчиков интерфейсов, дизайнеров, вайбкодеров и вообще всех, кто делает веб-продукты с помощью ИИ.

https://chromewebstore.google.com/detail/mobile-view-%E2%80%94-mobile-simu/hocbjiaeeijekejepphjihbpogikmofh

👉 @PortalToDesign

Очень сексуальное взаимодействие с таблицей тарифов 👍

👉 @PortalToDesign

Пару советов для создания чистых градиентов на ваших макетах.

👉 @PortalToDesign

Wiki Spy — сайт где собрано 40 тысяч PNG объектов вырезанных из википедии. Можно искать объекту по теме, цвету или названию.

👉 @PortalToDesign

Теперь 3D-модели можно проектировать прямо в браузере.

Это открытый 3D-редактор с упором на локальную работу. В нём можно создавать формы, вырезать отверстия, импортировать STL-файлы и экспортировать готовые модели.

И у него даже есть локальный MCP-сервер, через который ИИ-клиенты могут взаимодействовать с открытым 3D-редактором в реальном времени.

100% опенсорс 😆

👉 @PortalToDesign

Менеджер: ты с этим справишься?

Я жду, пока он уйдёт, чтобы проконсультироваться с ИИ.

👉 @PortalToDesign

В Figma обновили работу с векторами. Появился полноценный ластик и улучшили Paint Bucket.

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

Ластик работает в режимах Vector Edit и Draw.

Горячая клавиша — Shift + E.

👉 @PortalToDesign

recordly.dev — бесплатная прога для создания стилевых скрин рекодингов

👉 @PortalToDesign

Бесплатные ресурсы для интерфейсов, которые реально выглядят круто ↓

http://gooey.jakubantalik.com — жидкие эффекты для React
http://beam.jakubantalik.com — анимированная светящаяся рамка
http://metal.jakubantalik.com — эффект жидкого металла по краям
http://orbs.jakubantalik.com — анимированная сфера для состояния «ИИ думает»

Сохраняю всё это для следующей сборки MVP.

👉 @PortalToDesign

Эта штука реально выглядит как произведение искусства. Кто вообще это сделал? Настолько красиво и необычно.

https://tree.icqr.com

QR-код спрятан прямо в основании дерева, причём само дерево меняется в зависимости от ссылки. Есть три разных оформления для весны, лета и осени.

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

И вот что забавно. Вроде бы вещь почти бесполезная, но почему-то приносит столько удовольствия.

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

👉 @PortalToDesign

Codex внезапно выдал мне «Используй это».

Я спросил «А что это вообще такое?», и он ответил, что сделал это через Remotion.

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

Да, он реально просто внезапно взял и выдал это 😂

Само видео потом сделали, загрузив результат в Seedance 2.5.

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

Промпт:

Используя Remotion, создай простую доску движения, которую можно передать ИИ для генерации видео в качестве референса движения.

Человека представь в виде I-образной фигуры, состоящей только из сферы головы и одной линии тела. Объекты представь простыми геометрическими телами.

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

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

Важно показать не финальный внешний вид сцены, а именно движение.

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

Реализуй всё покадрово в Remotion и выведи результат в виде контрольного MP4.

👉 @PortalToDesign

Нашёл библиотеку иконок для React с открытым исходным кодом, в которой уже больше 13 452 SVG-иконок.

Каждая иконка доступна в трёх вариантах: контурном, залитом и мини. Пакет поддерживает tree shaking, поэтому в итоговый бандл попадает только то, что вы реально импортируете. Размер и цвет задаются обычными пропсами.

Полезный вариант для дашбордов и интерфейсов SaaS, если нужен единый набор иконок без подключения тяжёлой библиотеки.

http://mxicons.vercel.app

👉 @PortalToDesign

10 навыков для Figma Agent, которые стоит сохранить

1. better-interface - http://figma.com/community/skill/61238/better-interface

2. superfuture-design-review - https://www.figma.com/community/skill/65434/superfuture-design-review

3. component-handoff - https://www.figma.com/community/skill/67998/component-handoff

4. desktop-to-mobile - https://www.figma.com/community/skill/72495/desktop-to-mobile

5. create-anatomy - https://www.figma.com/community/skill/71321/create-anatomy

6. find-animation-opportunities - https://www.figma.com/community/skill/68151/find-animation-opportunities

7. spacing-audit - https://www.figma.com/community/skill/70410/spacing-audit

8. balise-ux-writing https://www.figma.com/community/skill/64048/balise-ux-writing

9. analyze-components - https://www.figma.com/community/skill/61009/analyze-components

10. design-system-gen - https://www.figma.com/community/skill/65614/design-system-gen

👉 @PortalToDesign

myinstants – огромная бесплатная библиотека мемных звуков

👉 @PortalToDesign