UXPUB 🇺🇦 Дизайн-спільнота: crypton

Dynamic Island в iPhone 14. Ділимося враженнями та паттернами використання новой фічі

crypton — Thu, 08 Sep 2022 13:36:52 +0000

Всім привіт.

Учора пройшла презентація apple де представили iPhone 14 Pro та iPhone 14 Pro Max. Найцікавіша зміна, яка зацікавила дизайнерів, це Dynamic Island.

Що таке Dynamic Island?

Тепер сповіщення розміщуються за Dynamic Island, який є новим корпусом датчика Face ID. Анімації та переходи використовують корпус датчика як основу для відображення вмісту, який адаптується до подій програми.

Ось так це виглядає:

Як вам ця фіча? Чи є ідеї як можно цікаво вікористати новий корпус датчика? Дуже цікавить думка дизайнерів, прошу до коментарів.

10 обновленных функций Figma в 2022 году

crypton — Wed, 20 Apr 2022 09:18:49 +0000

Figma – это инструмент для совместной работы UI и UX дизайнеров, который произвел революцию в индустрии дизайна. В отличии от Sketch — инструмента доступного исключительно на macOS, этот веб-инструмент работает не только на Mac, но и на Windows, Linux, а также на Chromebook.

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

Краткий обзор обновлений Figma:

Отображение последних результатов поиска
FIGJAM теперь позволит вам присоединяться к проекту и совместно работать
Теперь все ресурсы в одном месте
Больше удобства при изменении размера шрифта
Реакции колллег будут отображаться намного дольше
Изменение формы и цвета
Выбор границ теперь стал проще
Figma Enterprise позволяет масштабировать ваш бизнес с помощью адаптивной функции auto layout.
Более 1000 предустановленных шрифтов и умный выбор цвета
Теперь вы можете добавить гиперссылку на любой текст и поделиться

10 обновленных функций Figma

1. Отображение последних результатов поиска

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

Предварительный просмотр файлов: при поиске в Figma вы увидите превью соответствующих результатов поиска, чтобы быстрее найти нужный файл.
Фильтры по типам файлов: теперь вы можете фильтровать недавние страницы, страницы команды и результаты поиска по файлам Figma или FIGJAM.

2. Теперь FIGJAM позволяет вам присоединяться к проектам и совместно работать

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

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

Дизайнеры тратят много драгоценного времени, делясь своей работой с помощью стандартных автономных приложений, таких как Sketch и Photoshop, но теперь благодаря Figma обмен рабочими файлами стал очень удобным и простым.

3. Все ресурсы в одном месте

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

4. Больше удобства при изменении размера шрифта

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

5. Теперь реакции будут отображаться намного дольше

Когда креативный UI / UX дизайнер начинает группировать свои идеи вместе, он должен обращать внимание на реакции коллег, связанные с каждой идеей. Теперь штампы и пометки будут привязаны к объекту или тому месту, где они размещены на холсте.

6. Модификации по форме и цвету

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

7. Выбор границ стал проще

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

8. Figma Enterprise позволяет масштабировать ваш бизнес с помощью адаптивной функции auto layout

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

С обновлением Figma Enterprise вы можете быстро перейти к любому рабочему разделу вашего UI дизайна. Вы также можете создать собственное рабочее место.

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

Функция Auto layout стала более адаптивной. Figma усердно работала над тем, чтобы сделать ее лучше. Эту функцию, созданную на основе отзывов пользователей, теперь можно использовать для создания адаптивных элементов, которые растягиваются, чтобы заполнить пространство, а также кнопок, размер которых изменяется вместе с их текстом, и списков, которые можно легко изменить. Эта функция очень полезна при проектировании для различных типов устройств.

9. Более 1000 предустановленных шрифтов и умный выбор цвета

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

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

Благодаря обновленному умному выделению вы можете выбирать цвета со специальными модификациями. Чтобы добиться уникальности, вы должны изменить цвет заливки, кистей и текста. Но иногда вы хотите, чтобы они были одного цвета. Теперь с помощью функции «Selection Colors» вы можете быстро менять цвета заливок, кистей и текста в пакетном режиме.

10. Теперь вы можете сделать гиперссылку на любой текст и поделиться ей

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

Перевод статьи medium.com

10 плагинов Figma, которые стоит попробовать

crypton — Fri, 01 Apr 2022 10:46:04 +0000

Ускорьте свой рабочий процесс с помощью этого набора плагинов

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

Берите кружку любимого кофе и вперед!

Icon Scaling

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

Вы также можете экспортировать выбранные иконки с помощью плагина. Он генерирует PDF и SVG файлы

Скачать палагин Icon Scaling

A11y — Color Contrast Checker

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

Скачать A11y — Color Contrast Checker

UI Faces

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

Скачать UI Faces

SPELLL

Я люблю использовать Grammarly для проверки правописания. Этот плагин дает похожие возможности непосредственно в Figma и Figjam. Вы больше не допустите опечаток в своих проектах!

Скачать Spelll

Tailwind Color Generator

Проблемы с поиском правильных цветов? Создавайте монохроматические палитры за считанные секунды. Благодаря этому плагину вы можете моментально создать палитру для своей дизайн-системы.

Скачать плагин Tailwind Color Generator

Color Name

Итак, вы уже сгенерировали несколько тонов в дизайн-системе, но не знаете, как их назвать? Попробуйте этот плагин.

Выберите объект со сплошной заливкой и проверьте название цвета или список предлагаемых похожих названий цветов.

Плагин выполняет поиск по названиям HTML-цветов и «Name that Color», чтобы помочь вам найти наиболее близкие к выбранному названия тонов.

Скачать плагин Color Name

Better Font Picker

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

Этот плагин показывает только список шрифтов, установленных в вашей системе.

Скачать плагин Better Font Picker

Typeout

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

Скачать плагин Typeout

3D Transformer

Хотели бы добавить 3D-эффекты к вашим мокапам? Вы должны поэкспериментировать с этим плагином. Просто выберите фрейм или изображение в Figma, запустите плагин и настройте 3D-эффект с помощью ползунков. Вуаля!

Скачать плагин 3D Transformer

Easometric

Все любят изометрические фигуры. Создавайте их быстрее с помощью плагина Easometric с использованием SSR3⁰⁰ — самого популярного и гибкого метода создания изометрических иллюстраций.

Никогда не создавайте изометрические фигуры вручную!

Скачать плагин Easometric

Посмотрите работу плагинов Figma вживую

Смотрите все представленные плагины в видео-презентации ниже:

Вывод

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

Спасибо за прочтение!

Все о нейминге в Figma

crypton — Tue, 29 Mar 2022 09:00:59 +0000

Перевел первую статью в своей жизни, не кидайтесь сильно помидорами)

И снова здравствуйте! 👋 Сегодня много моментов в работе с инструментами дизайна могут показаться ошеломляющими, так у меня всегда вызывал сложности нейминг элементов дизайна. Недавно я пошутил, что работа над дизайн-системами лишь немного сводится к созданию компонентов и в большей степени к их именованию. Иногда кажется, что это правда! Неуверенность в нейминге может помешать продвижению вперед и вызвать общее чувство беспокойства при мысли о согласованности библиотеки компонентов Figma.

В этом статье я хочу поделиться своим подходом к неймингу и надеюсь, что эти советы помогут вам, если вы не знаете, с чего начать!

Нейминг

Команды, проекты и имена файлов

В Figma есть два основных способа организовать все созданные файлы: проекты (Projects) и команды (Teams). Один из подходов, который мне помог, состоит в том, чтобы представить проекты как папки, в которых хранятся файлы, а команды — как способ собрать и хранить все эти папки в более крупных группах. Хорошо, что в Figma на основе поискового запроса в результатах поиска отображаются все файлы, проекты и файлы сообщества. Однако, поскольку не существует концепции файловых тегов (пока 🤞), поисковый запрос должен быть довольно точным, чтобы найти правильный файл. Если файл называется «Onboarding», а я ищу «signupflow», шансы найти этот файл невелики.

Чтобы решить эту проблему, я начал называть свои файлы таким образом, чтобы указать как можно больше информации, например, номера версий и теги. Таким образом, я значительно повышаю шансы найти нужный файл. Вот шаблон, который я обычно использую: Имя файла (номер версии) [теги или ключевые слова]

Нейминг страниц

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

Страницы также могут быть полезным инструментом для тех дизайнеров, которые работают над дизайн-системами и библиотеками компонентов в Figma. Когда дизайнер активирует библиотеку компонентов в файле, на панели «Assets» отображаются все опубликованные компоненты, доступные для использования. Тем не менее, этот список может показаться сложным для тех, кто не знаком с именами этих компонентов. Figma добавит раскрывающийся список верхнего уровня для каждой страницы, чтобы упростить дальнейшую категоризацию областей компонентов, а создание страниц, специфичных для разных категорий компонентов, может упростить использование всей панели и библиотеки.

Совет: Названия страниц также поддерживают эмодзи! ✨💭 ⌨️

Нейминг фреймов

В предыдущей статье я писал о том, насколько полезными могут быть фреймы для всех, кто работает в Figma, особенно для дизайнеров, которые часто создают и организуют компоненты. Фреймы, созданные вокруг групп компонентов на холсте, не только обеспечивают небольшое визуальное разделение, но и позволяют еще больше организовать панель «Assets».

Например, в своем iOSUIKit для Figma, я создал четыре компонента, связанных с дизайном интерфейса ApplePay. Я поместил фрейм с названием «ApplePay» вокруг каждого из этих четырех компонентов, и теперь панель «Assets» показывает каждый из этих четырех компонентов в новом раскрывающемся списке с именем, соответствующим названию фрейма.

Чтобы сделать список раскрывающихся элементов более удобным для просмотра, я обычно делаю первую букву каждого слова заглавной и разделяю слова пробелом, даже если в имени компонента используется PascalCase. Компонент может называться «DatePicker» как в коде, так и в Figma, но, по крайней мере, для меня попытка поиска «DatePicker» в упакованном списке элементов стала немного проще и доступнее.

Нейминг компонентов

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

При создании компонентов я следовал методологии атомарного дизайна Брэда Фроста. Я часто создаю компоненты на уровне молекул, чтобы помочь составить и сформировать более крупные и полезные компоненты организма или шаблона (хотя они отличаются от базовых компонентов!). Поскольку эти молекулы редко функционируют сами по себе, я добавляю символ подчеркивания (например, «StatusBar») в начало имени компонента, чтобы предотвратить его публикацию и совместное использование в Командной библиотеке. Несмотря на то, что теперь это частный компонент, Figma по-прежнему позволяет ему быть вложенным экземпляром в любом другом опубликованном компоненте. Это круто!

Что касается названий этих вспомогательных компонентов, я рекомендую добавлять название компонента, где эта молекула в конечном итоге будет жить (если возможно), за которым следует дефис и имя фактической молекулы, написанное с использованием camelCase. Я делаю это потому, что при использовании компонента легко увидеть, какие вложенные экземпляры были созданы для конкретного компонента, а какие могут иметь более широкие варианты использования.

В приведенном выше примере есть компонент с именем «Calendar», а внутри — несколько компонентов на уровне атомов и молекул. Каждое имя начинается с подчеркивания, за которым следует имя «Calendar» и, наконец, дефис с добавленным именем «dayRow», обозначающим конкретное имя этой молекулы. Поначалу этот метод может показаться сложным, но по моему опыту наличие такой структуры хорошо масштабируется с библиотекой и создает очень предсказуемые имена. Также я обнаружил, что согласование имен компонентов и вариантов в Figma с тем, что отражено в коде, может оказать общее положительное влияние. Любая возможность сблизить дизайнеров и разработчиков всегда ощущается как большая победа!

Перевод статьи joeyabanks.substack.com

В чем делают такие анимации?

crypton — Mon, 21 Feb 2022 10:12:35 +0000

Привет юикспабовцы!

Клиент заказал сайт, который я удачно нарисовал, а он удачно утвердил. За отдельную плату он попросил сделать анимацию, показать как сайт будет работать - для презентации своему руководству. У меня не много опыта в анимации, в основном собираю в figma или principle.

Как пример, мне кинули вот этот видос:

Webflow

@webflow

OK Micah! 🤩

With their #MadeInWebflow site, @okmicahhh proves that the norm is overrated with disco balls, animated buttons, and gorgeous colors.

Enjoy:
okmicah.com

20:32 PM - 17 Feb 2022

Подскажите в какой программе вы делаете такую анимацию?