Фигмач

Небольшая гифка про Variants из блога, для наглядности. Очень круто! В прототипах можно будет делать взаимодействие не просто между компонентами, но и между вариантами внутри одного компонента.

Прошла Figma Config Europe 2020, в рамках которой рассказали о всех новинках, которые появятся в Фигме в ближайшее время. Из основного:Новый вид компонентов — VariantsНужен для того, чтобы несколько компонентов превратить в один, который внутри содержит все возможные варианты этого компонента. Грубо говоря, включенный и выключенный чекбокс теперь можно превратить в один компонент. Или вместо трех компонентов для трех вариантов кнопки (обычная, ховер, нажатая) сделать один компонент, который уже содержит в себе все состояния. Это кайф, в библиотеке теперь будет меньше компонентов для простейших элементов. Похожее было в Principle, когда вы в отдельной области делали переключение, например, тоггла. Развитие прототиповВместе с Variants в январе добавят возможность делать переходы не только между объектами, но и между состояниями одного объекта (как раз для этого и нужны Variants). Пишут, что сейчас нужно прикладывать очень много усилий, чтобы создать иллюзию интерактивности — и Variants в прототипах поможет упростить эту задачу.Новый интерфейс Auto LayoutПод эгидой «Design like you code» в ноябре появится измененный интерфейс Auto Layout, он станет более наглядным и понятным, к тому же добавятся новые возможности вроде независимых паддингов.Новое меню Instance Менять компоненты теперь еще проще — новое меню смены компонентов получило поиск и более наглядный вид (на самом деле просто перенесли в правую часть панель Assets, но с поиском стало сильно проще жить), работает уже сейчас!Новый раздел InspectНу и для разработчиков обновили раздел Inspect — там теперь можно в один клик копировать параметры выбранного объекта.

Из интересного в Community:iOS и iPad OS UI Kit. Про качество сказать пока что ничего не могу, но выглядит так, будто там только самое нужное, плюс удобно отсортировано! macOS Big Sur UI Kit. Юай-кит для проектирования приложений или сценариев для macOS. Опять же, только самые нужные базовые штуки.Apple Widgets UI Kit. Шаблоны с виджетами для будущей iOS 14.VKUI Web Library Beta. Библиотека с адаптивными компонентами для VK, про которую рассказывали на прошедшем митапе.Vector Character Illustrations. Простые векторные иллюстрации с людьми, для лендингов или для прототипов могут быть вполне себе полезны.Form Builder Components. Небольшой юай-кит с компонентами для создания форм — инпуты, селекты, чекбоксы, радиокнопки. Все сделано с auto layout.

Так, наконец-то Community добрался и до меня! Ищите новый раздел вместо Plugins в левой панели, плагины, соответственно, теперь являются частью Community. И в списке плагинов Фигма сама нам показывает и напоминает, почему так важно помнить о контрастности текста по отношению к фону 🤷‍♂️

Публичный релиз Figma CommunityХорошие новости! С сегодняшнего дня Figma Community выходит из беты и в течение 14 дней станет доступна для всех пользователей.Community — это пространство, где пользователи Фигмы смогут делиться друг с другом проектами с иконками, шаблонами, юай-китами и вообще всем, что душе угодно. У каждого будет публичный профиль, в который он сможет отправлять выбранные проекты. Есть известный sketchappsources.com, так вот Community — то же самое, только сразу внутри Фигмы и с копированием к себе файлов в один клик. Ждём!

Дизайн по описаниюКакое-то время назад в сети появилось видео с плагином для Фигмы, который автоматически генерирует дизайн из описания, написанного обычными словами. Да, просто пишете "Photo app with tab bar and like buttons" и получаете что-то похожее на Инстаграм. А буквально вчера на TJ вышла статья про нейросеть GPT-3, с помощью которой такое и стало возможно. Почитайте, там еще несколько классных примеров использования!

На просторах интернета обнаружена вакансия, где в Фигме и в XD нужно работать дольше, чем эти инструменты доступны публично (Фигма с 2016, XD с 2019) 🌚

Кастомные изинги и вариативность в прототипахВ новом обновлении Фигмы добавили возможность вручную настраивать кривую изингов! Раньше были только Linear (не используйте почти никогда), Ease In, Ease Out и Ease In And Out, а теперь появится Custom, где можно управлять кривой, кайф! Помимо демонстрационного видео про изинги ещё показали как для одного объекта можно настроить 3 разных перехода в зависимости от совершаемого с ним действия, например, при наведении будет показан тултип, а при клике — переход на новый экран, и это даже больший кайф!

Из Фигмы в кодТак, стоило вернуться к работе — как тут же взрывная новость, для Фигмы появился плагин Anima!Если вкратце — эта штука позволяет увидеть ваш прототип в браузере, т.е. он экспортирует проект в виде кода и отрисовывает внутри браузера, где открываются новые возможности по интерактивности. Например, можно указать несколько фреймов как брейкпоинты и потом изменять размер окна браузера — дизайн будет корректно изменяться. Или можно сделать настоящие инпуты, после чего в браузере можно писать в них текст. Еще есть расширенные анимации объектов и ховеры. Но главное, конечно же — ваш дизайн превращается в код с помощью одной кнопки. Качество кода оценить не могу, попробуйте сами: зарегистрируйтесь на сайте AnimaApp и установите плагин для Фигмы.