Scott
Для дизайнера пользовательского интерфейса/UX время и согласованность - это два ценных аспекта, которыми следует управлять любой ценой. Дизайнеры должны эффективно использовать свое время, чтобы завершить дизайн-проекты в срок и обеспечить согласованность всех дизайнов на протяжении всего проекта. Если они не будут соответствовать этим двум условиям, то это может привести к разочарованию дизайнера. Что еще более неприятно, так это то, что регулярное внедрение этих дизайнов в проект требует большого объема работы, а время уходит медленно.
С учетом вышесказанного, что, если бы существовал способ эффективно управлять этим временем и продолжать внедрять согласованный дизайн интерфейса? Для этого крайне важна система проектирования. И в этом блоге мы расскажем о едином дизайне. Мы обсудим важность Ant Design для Figma и то, как вы можете успешно использовать его потрясающие возможности в своих дизайнерских проектах.
Часть 1. Что такое Ant Design для Figma?
Ant Design — дизайн-система с паттернами и компонентами. UI-кит для Figma может быть отдельным ресурсом другого автора. Проверяйте автора, версию, лицензию и соответствие той версии компонентов Ant Design, которую использует команда. Скриншоты ниже сохраняют пример прежнего UI-кита.
Подводя итог, можно сказать, что в нем представлено:
- Набор компонентов: проверьте наличие кнопок, полей, таблиц и нужных состояний. Число элементов зависит от выбранного UI-кита и версии.
- Возможность настройки — позволяет вам легко импортировать любой компонент или шаблон и настроить его в соответствии с требованиями вашего дизайн-проекта.
- Автолейаут в UI-ките: проверьте, настроена ли автоматическая компоновка у компонентов выбранного файла Figma. Это свойство конкретного UI-кита и его версии, а не подтверждение одинакового поведения любых ресурсов Ant Design.
Часть 2. Важность использования Ant Design
Зачем все же использовать Ant Design? Поскольку это дает следующие преимущества:
Это экономит время
Готовые компоненты позволяют повторно использовать базовые решения. Для каждого компонента проверьте состояния, подписи и соответствие требованиям продукта.
Это обеспечивает согласованность.
Согласованные компоненты и стили помогают повторно использовать решения. Проверьте покрытие нужных состояний в конкретном UI-ките; количество элементов и полнота набора зависят от его версии.
Это вдохновляет
Если вам не хватает идей, доступ к системе Ant Design system поможет вам найти вдохновение для создания самых разнообразных цветовых палитр, типографики и многих элементов пользовательского интерфейса. В результате, это поможет вам черпать вдохновение и использовать компоненты в качестве основы шаблонов для создания ваших дизайнов.
Это просто делает жизнь заинтересованных сторон более удобной
Общая библиотека помогает участникам обсуждать одинаковые элементы и правила. Качество интерфейса зависит от применения компонентов и проверки сценария; наличие дизайн-системы само по себе его не гарантирует.
Часть 3. Как использовать Ant Design в Figma?
Теперь, когда вы поняли, что такое Ant Design и его важность, давайте подробнее рассмотрим, как его использовать в Figma.
Шаг 1 - Установите Ant Design для Figma.
Откройте страницу выбранного UI-кита, проверьте автора и условия доступа. Скопируйте файл в Figma или импортируйте предоставленный .fig по инструкции автора. Для использования библиотеки командой отдельно проверьте публикацию и права доступа.
Источник: Матеуш Вежбицкий
Шаг 2 - Используйте компоненты Ant Design в вашем файле Figma.
После того, как вы успешно включили Ant Design System в свой Figma, вы можете создать новый файл. На панели ресурсов в левой части экрана вы можете найти все доступные компоненты и стили Ant Design. Чтобы использовать их, просто перетащите компоненты на свой Figma canvas.
Источник: Mateusz Wierzbicki
Шаг 3 - Наконец-то предварительный просмотр вашей работы!
После настройки компонентов свяжите экраны и откройте прототип. Проверьте длинный текст, ошибку формы и переходы на целевом устройстве. Иллюстрация старого интерфейса не заменяет проверку доступных команд в вашей версии.
Источник: Матеуш Вежбицкий
Часть 4. Используйте Pixso и систему проектирования Ant
Проверьте один компонент Ant Design: размеры, состояния и текстовые стили. Сохраните исходную библиотеку и сверяйте импортированный экземпляр с оригиналом. Бесплатный тариф включает личные черновики и просмотр без ограничения числа зрителей, а также до 3 дизайн-файлов и 3 онлайн-досок для совместной работы. Для дополнительных файлов и функций сравните тарифы Pixso.
Вы можете просто найти Ant Design в сообществе Pixso и с легкостью включить их в свои дизайнерские проекты. Экономьте свое время, создавайте согласованные проекты высокого качества и позволяйте всем членам вашей команды эффективно работать вместе, используя инструмент совместного проектирования Pixso.
Вывод: Используйте Ant Design в своих интересах.…
В нынешние времена дизайнерам пользовательского интерфейса / UX важно эффективно управлять своим временем и другими ограничениями, чтобы продемонстрировать свою ценность для команды разработчиков, а также продолжать создавать высококачественные проекты для максимального удобства пользователей.
Применяйте библиотеку как основу, фиксируйте свои изменения и согласуйте порядок обновления. Перед передачей сравните компоненты макета с библиотекой, используемой разработчиками.
