Дизайн система

Система дизайна — это руководство по созданию единого пользовательского интерфейса/UX во всем приложении. Система дизайна включает в себя цвета, типографику, шрифты, иконки, активы приложения, панель навигации, панель приложений и заранее разработанные компоненты пользовательского интерфейса, такие как кнопки и текстовые виджеты.

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

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

Чтобы создать собственную систему дизайна:

1. Откройте Настройки темы (в навигационном меню) > Система дизайна.
2. Нажмите кнопку Создать библиотеку дизайна.
3. Введите имя проекта библиотеки дизайна.
4. Теперь вы можете настроить детали приложения, активы приложения, панель NavBar и AppBar, а также параметры темы.
5. Чтобы увидеть, как будет выглядеть приложение в новой системе дизайна, можно открыть его в режиме предварительного просмотра (нажмите на значок глаза в правом верхнем углу).

1. Чтобы использовать систему дизайна, откройте свой проект и перейдите в Настройки темы > Система дизайна.
2. Щелкните на No Design System Selected.
3. Откроется окно со списком систем дизайна, нажмите на только что созданную систему дизайна, чтобы добавить ее в проект. Обратите внимание, что система дизайна, созданная в разделе Моя организация, также будет доступна здесь.

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

Чтобы импортировать тему Figma:

1. Откройте Настройки темы (из навигационного меню) > Система дизайна.
2. Нажмите кнопку Импорт темы Figma. Откроется новое всплывающее окно.
3. Введите URL-адрес вашего файла Figma и личный токен доступа. Персональные маркеры доступа позволяют нам получить доступ ко всем вашим файлам и данным в Figma.
4. Нажмите кнопку Импортировать тему Figma.
   1. Теперь вы увидите список цветов из вашего файла Figma, и здесь вы можете решить, какой из них оставить. Если все выглядит хорошо, нажмите Импортировать и продолжить.
   2. Вы можете заменить текущие цвета темы на новые/импортированные. Нажмите на любой цвет, и в выпадающем списке появятся все импортированные цвета. Нажмите на новый цвет, чтобы заменить его. Когда все готово, нажмите кнопку Сохранить и продолжить.
   3. Если в вашем файле Figma есть пользовательские стили текста, они будут отображены здесь, и вы можете выбрать, какой из них импортировать. Нажмите Импортировать и продолжить.
   4. Замените все существующие стили на новые и нажмите Сохранить и закончить.
5. Наконец, нажмите кнопку Завершить и закрыть.

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

Чтобы настроить индикаторы загрузки, используемые в приложении, вы можете внести изменения в этом разделе. У вас есть возможность указать тип индикатора, цвет и радиус, а предварительный просмотр изменений будет отображаться ниже.