Как же часто так бывает..

👉 @PortalToDesign

Воспроизведение видео прямо на странице станет доступно уже на следующей неделе

👉 @PortalToDesign

Когда прошёл все этапы дизайн-процесса и наконец сидишь над имплементацией

👉 @PortalToDesign

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

👉 @PortalToDesign

Совет по UI-дизайну: называй цвета по их роли, а не по внешнему виду.

Если токены называются как цвета (blue-500, grey-100), непонятно, где их применять. Лучше давать имена по назначению.

Простая структура:
[element.tone.emphasis.state]

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

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

👉 @PortalToDesign

Figma: дизайн → код, код → дизайн — разбор

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

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

Читать полностью: https://blog.bytebytego.com/p/figma-design-to-code-code-to-design

👉 @PortalToDesign

Я смотрю на свой дизайн, разрушенный правками клиента

👉 @PortalToDesign

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

👉 @PortalToDesign

Imagen3D — ещё один сайт, который создаст 3д модель по вашему фото.

👉 @PortalToDesign

😣 Claude теперь полноценный дизайнер: Anthropic запустили Claude Design для создания стильных сайтов, приложений и презентаций.

Бот умеет работать с готовыми дизайн-системами — достаточно просто загрузить нужные ассеты. Всё можно экспортировать в PDF, PPTX, HTML или напрямую в Canva для доработки. Думаю, скоро добавят и Figma.

Подписчики уже могут протестировать по ссылке: https://claude.ai/design

👉 @PortalToDesign

Актуально как никогда 😆

👉 @PortalToDesign

Mocku — здесь вы найдёте большую галерею стильных мокапов для презентации ваших дизайнов.

👉 @PortalToDesign

Каждой кнопке нужны эти 5 состояний взаимодействия

Default (по умолчанию)
Внешний вид элемента без взаимодействия, показывает, что он интерактивный.

Hover (наведение)
Срабатывает при наведении курсора, даёт визуальный фидбек об интерактивности.

Press (нажатие)
Срабатывает при нажатии, показывает факт взаимодействия.

Focus (фокус)
Срабатывает при навигации с клавиатуры, указывает, что элемент готов к взаимодействию.

Disabled (отключено)
Состояние, когда элемент не интерактивен.

👉 @PortalToDesign