Figma: дизайн, прототип и совместная работа на предприятии

Figma

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

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

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

Figma

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

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

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

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

Отзывчивое прототипирование

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

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

Начать работу с Figma

У Figma есть большой выбор руководств, которые они поддерживают на своих Канал YouTube, вот видео о начале работы:

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

Попробуйте Figma бесплатно

Как вы думаете?

Этот сайт использует Akismet для уменьшения количества спама. Узнайте, как обрабатываются ваши данные комментариев.