Курс по Figma для начинающих: собрали уроки, которые помогут как освоить интерфейс этой популярной программы, так и попрактиковаться в проектировании, создании компонентов и применении плагинов.
https://youtu.be/1Z4ZzGDglZI
Мир новых инструментов дизайна невероятно увлекателен. Новые многообещающие программы запускаются в быстрой последовательности, но есть одна, которая постепенно стала лучшим выбором для больших и в основном распределенных команд разработчиков. Figma имеет потенциал для поддержки всего процесса проектирования от начала до конца. Первые наброски, сбор отзывов, совместная работа, готовые к тестированию прототипы и передача разработчикам полностью…
Что не так Инструменты для дизайнеров интерфейсов устроены так, будто в них рисуют бессмысленные прямоугольники и текст. Но в них рисуют экраны которые содержат: заголовки и подзаголовки текстовые блоки кнопки поля ввода, чекбоксы, селектбоксы списки карточки таблицы графики изображения модальные окна Как должно быть Должна быть панель добавления компонентов Компонент будет иметь минимально позволенные отступы, которые подчиняются теории близости…
Когда мы начали создавать многопользовательские возможности в Figma четыре года назад, мы не были уверены, что дизайнеры примут этот новый способ проектирования. Но мы были мотивированы убеждением, что дизайн должен быть более открытым, облачным и в Интернете. К счастью, сообщество присоединилось, и с тех пор мы наблюдаем большие сдвиги в том, как дизайнеры подходят к…
Свершилось! Figma стала взрослой и обзавелась тем, чего не хватало после перехода со Скетча. Встречаем плагины. Я подготовил для тебя топ-10 расширений, которых мне так не хватало в работе. Шагаем в будущее вместе, ускоряем дизайн-процессы и избавляемся от занудных действий. 1. Unsplash Ссылка на страницу плагина – https://www.figma.com/c/plugin/738454987945972471/Unsplash Интеграция с любимейшим стоковым сервисом. Плагин быстро оживит…
Дизайн движения помогает ориентировать пользователей, предоставляя контекст и предоставляя подсказки о том, как лучше ориентироваться. Но это не имеет Всегда было легко интегрировать это новое поле в установившиеся рабочие процессы проектирования UX.
Еще в 2016 году все еще ощущался мрачный век дизайна движений UX. Было много новых шаблонов, но это было еще до того, как Лотти позволила нам на самом деле визуализировать анимацию на устройстве. Подготовка визуального дизайна для After Effects означала перестройку искусства в Illustrator, принятие сложных процессов импорта и преобразования, а также добавление сроков для повторения всего тупого процесса из-за неизбежных изменений дизайна.
Чтобы помочь устранить эти бесполезные шаги, в середине 2016 года я начал создавать в Google внутренний инструмент под названием Sketch2AE. Это был первый инструмент в своем роде для передачи данных слоя между приложениями хоста. Но это было больше, чем импортер файлов. Это был способ вернуть время людям. В 2017 году он был выпущен публично и помог как дизайнерам движения, работающим в UX, так и визуальным дизайнерам, начиная с After Effects.
С тех пор сфера UX motion design стала более зрелой. Многие команды разработчиков теперь думают, что UX включает в себя размышления о том, как информация воспринимается во времени. Дизайнеры движений, работающие с визуальными дизайнерами на протяжении многих итераций, могут существенно помочь в поиске успешных решений. Со времени первого выпуска Sketch2AE инструменты выросли, а требования к интеграции для дизайнеров движений возросли. Я очень рад поделиться с вами AEUX, более надежной системой для работы с UX-дизайном движений в After Effects.
Одна из целей новой системы заключается в поддержке большего количества хост-приложений и повысить гибкость при работе между командами. Обмен данными в экосистеме Adobe теперь хорошо поддерживается в XD и Illustrator, но с AEUX вы можете импортировать слои из Sketch и Figma и поддерживать новые функции Sketch. Плюс…
Узнайте больше и загрузите AEUX
Хотя Sketch широко используется, многие визуальные дизайнеры также начали использовать Figma. AEUX был разработан для обеспечения бесперебойной работы при переключении между командами.
Основной особенностью Figma является онлайн-совместная работа, поэтому экспорт данных слоя выполняется через веб-приложение, которое подключается к Figma API. На данный момент плагины Figma не могут работать внутри среды проектирования, что означает, что экспорт слоев выполняется как более традиционный экспорт / импорт. В приложении для проектирования, работающем в режиме онлайн, безопасность является наиболее важным фактором.
После аутентификации приложения экспорта AEUX вас попросят ввести URL-адрес файла Figma. Приложение будет собирать все данные для каждого из кадров (монтажных областей) в файле. Каждый кадр может быть загружен отдельно, а любые необходимые изображения будут также обработаны и упакованы. Перетащите новый файл AEUX.json на панель AEUX в After Effects и создайте слои.
Примечание: приложение AEUX не отслеживает пользовательские данные и не просматривает или храните ваши проекты любым способом. Это слепой робот, который выполняет преобразование ваших проектов в формат AEUX JSON прямо в браузере на вашем компьютере. Доступ к данным файла управляется владельцем файла из меню «Поделиться».
Создание инструментов, основанных на том, как работает другой дизайнер, может быть непростым делом. Иногда ваши лучшие намерения не очень полезны, или люди находят новые пути, которые вы не планировали. Я многому научился, создавая Sketch2AE, а затем еще больше узнал, как создавать Overlord (бесстыдный плагин для коммерческого инструмента).
Самые большие уроки, которые я извлек из этих проектов, — это ограничение количества переключений умственного режима. Если кто-то пытается спроектировать, пусть он спроектирует, вместо того чтобы заставлять его читать руководство.
Данные слоя теперь передаются за кулисы, чтобы ограничить путаницу Это не совсем мгновенно, но к моменту перехода от Sketch к Ae панель должна обновиться, чтобы показать новые слои, готовые для построения. Это упрощает процесс передачи и позволяет вам больше сосредоточиться на дизайне.
Для меня одна из самых неотразимых частей процесса проектирования — это пробовать вещи и находить, что работает, и что нет Это довольно противоречит импорту файлов, где вы должны перезапустить все заново, если вы не подготовили один слой правильно. Основная идея Overlord — позволить вам передавать то, что вам нужно, когда вам это нужно. Я хотел, чтобы эта концепция была центральной в AEUX, что требовало ухода от погружения в меню и создания плавающей панели плагинов для Sketch, чтобы более точно соответствовать ожидаемому опыту работы с инструментами в Ae.
В предыдущей версии уведомления отображались только после успешного экспорта и были легко пропущены в нижней части окна «Эскиз». Так что вам пришлось подождать и угадать, сработало ли это. (Это был действительно плохо спроектированный опыт. Я сожалею об этом.)
Новая плавающая панель эскизов также предоставляет специальное место для уведомлений (как успешных, так и неудачных). Идея показа процесса распространяется и на Ae. От обновлений панели до индикаторов выполнения на тяжелых компах до уведомлений о сбоях для элементов, которые Ae не может нарисовать в настоящее время.
Дизайн UX motion растет, и мы все еще изучаем, что работает, а что нет, и как лучше всего выполнить и протестировать эти конструкции. Как мы делаем, мы пытаемся поделиться тем, что мы узнаем. Я надеюсь, что AEUX поможет вам работать быстрее и получать больше удовольствия от процесса.
Начало работы с AEUX
Хотите работать с нами? Узнайте больше о Google UX и отправьте нам свой портфолио или демо-ролик.
🔮 Изи-бризи Привет! Я — Андрей Горанов, продуктовый дизайнер в DocDoc (входит в группу Сбербанк). Сегодня рубрика 🔮 Изи-бризи, в которой я расскажу, как можно быстро сделать презентацию, когда под рукой есть только Figma. Поехали! При чем тут Figma? Чуть более года назад мы всей дизайн-командой перешли со Sketch на Figma. Это было легко, и все быстро привыкли.…
Концепт улучшенного инструмента “Image”. (В статье много gif анимации!) Всем привет, хочу показать, что можно добавить в инструмент “Image” в Figma чтоб он стал более гибким и функциональным.Эта статья не руководство или урок для дизайнеров, это концепт улучшенного инструмента “image”. Который я надеюсь рано или поздно появится в Figma. Статья состоит в основном из гиф анимации.…
Опубликовано: Четверг, 16 августа 2018 года обновлено: Пятница, 17 августа 2018 года . После того, как Adobe объявила, что Adobe является названием для всего вашего программного обеспечения, Sketch установил новый стандарт для инструментов проектирования пользовательского интерфейса. Он показал, что дизайнеры пользовательского интерфейса имеют разные потребности, чем другие творческие люди. После этого произошел небольшой взрыв…
Сохраняйте живые активы в синхронизации с вашей системой проектирования. Консистенция консистенции проекта не должна разрушаться из-за сложных процессов сборки, нехватка времени или навыки разработки. Реле позволяет вам транслировать активы на сайт или приложение, создавая соотношение между дизайном и развертыванием 1: 1. Заменяйте значки, изображения, и графику в jiffy. Больше не нарезать, не экспортировать, не архивировать…