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

Сложность в том, что я делаю это, используя простые макеты с собственной платформы прототипирования. Хотя это надежная платформа для визуализации и дизайна, ее непросто преобразовать в HTML5 и CSS3. Добавьте сюда все остальные итерации, и мои дни станут довольно разочаровывающими, потому что прогресс идет крайне медленно.

Одна из загадок заключается в том, что дизайнерское агентство просто передало прототипы, не предоставив какой-либо основной таблицы стилей… поэтому мы работаем над этим, экспортируя прототипы в Zeplin, а затем переводя CSS в таблицу стилей нашей дочерней темы. WordPress. Количество необходимых шагов и различия между платформами усложняют задачу. Не говоря уже о попытках упростить скорость и масштабируемость.

Фигма

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

Figma централизует большую часть этой работы с помощью платформы, которая обеспечивает дизайн, обратную связь и сотрудничество для каждого члена вашей команды, включая:

• Дизайнеры: Совместная работа в контексте и в режиме реального времени. Никогда не беспокойтесь о том, что ваши файлы устарели или перезапишут работу друг друга.
• Заинтересованные стороны: отправьте ссылку, чтобы собрать отзывы, получить запросы на изменения и позволить заинтересованным сторонам вносить обновления в ваш дизайн.
• Разработчики: инженеры всегда имеют доступ к текущему источнику достоверной информации и могут проверять элементы, экспортировать ресурсы и копировать код.

Figma имеет несколько уникальных особенностей:

• Булевы операции: Используя четыре формулы: соединить, вычесть, перекрестить и исключить, вы можете точно объединить любой набор слоев фигур.
• Ингредиенты: Создавайте быстрее и более последовательно с помощью многократно используемых и масштабируемых элементов в ваших файлах. Доступ к слоям в индивидуальном порядке для интуитивного редактирования и переопределения текста и изображений.
• Ограничения: Масштабируйте свой дизайн так, чтобы он соответствовал любому размеру экрана, привязывая объекты к родительскому фрейму, привязывая объект к сетке или даже создавая масштабируемые компоненты.
• Рамки устройства: представьте свои проекты в подходящей среде. Вы даже можете выбирать между портретным и ландшафтным режимом.
• Взаимодействие: воплотите свои прототипы в жизнь, определив взаимодействие для кликов, наведений, касаний и многого другого.
• Наложения: относительное и ручное позиционирование дает вам полный контроль над тем, где и как отображаются наложения.
• Пиксельное совершенство: Интерактивное редактирование со скоростью 60 кадров в секунду обеспечивает сверхчеткое изображение при предварительном просмотре и экспорте с точностью до пикселя.
• Прототипирование: быстро создавайте потоки, соединяя экраны и добавляя такие элементы, как взаимодействия, переходы, наложения и многое другое. Вместо синхронизации с другими инструментами просто поделитесь URL-адресом, чтобы получить отзыв.
• Адаптивный дизайн: Растяните макеты и посмотрите, как они отреагируют на изменения размера экрана.

• Прокрутка: включить прокрутку по горизонтали, вертикали или в любом направлении для отдельных фигур или всего родительского стека.
• Стили: синхронизировать цвета, текст, сетки и эффекты между проектами. Сохраняйте меньше текстовых стилей и сохраняйте единообразие своих проектов на разных устройствах с помощью уникальных стилей сетки Figma.
• Библиотеки команд: Делитесь компонентами и стилями в Figma — нет необходимости в общих дисках или дополнительных инструментах. Вы и ваша команда контролируете, как и когда изменения будут реализованы, с помощью простых рабочих процессов публикации.
• Векторные сети: Figma сделала инструмент «Перо» более интуитивно понятным, позволяя выполнять прямые манипуляции, сохраняя при этом обратную совместимость с путями.

Для компания клиентов, Figma может обеспечить согласованность, эффективность и безопасность в любом масштабе. Платформа позволяет корпоративным клиентам легко управлять системами проектирования с помощью библиотек команд и возможностью загружать и обмениваться пользовательскими шрифтами в вашей организации. Включены единый вход (SSO), контроль доступа и журналы активности.

Начните работу с Фигмой

Figma предлагает широкий спектр учебных пособий, которые они размещают на своем веб-сайте. YouTube каналвот видео для начала:

Figma также предоставляет разработчикам возможность проверять, копировать, экспортировать ресурсы и копировать CSS непосредственно из файла дизайна. Вы также можете активировать существующие рабочие процессы с помощью интеграции, включая Zeplin, Jira, Dropbox, ProtoPie и Принцип для Mac. У них также есть сильный API.

Попробуйте Фигму бесплатно