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

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

Ценность её видна на дистанции. Пока экранов пять, за оформлением можно следить глазами. Когда их пятьдесят и делает их команда, расхождения появляются неизбежно: где-то другой оттенок синего, где-то другой кегль заголовка. Дизайн-система убирает саму возможность такого расхождения — стиль задан в одном месте и применяется везде.

Подключение дизайн-системы

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

Порядок такой: соберите дизайн-систему в отдельном проекте FlutterFlow и опубликуйте его как библиотеку. Затем подключите библиотеку к нужному проекту, откройте Theme Settings > Design System, нажмите No Design System Selected и выберите её в списке.

Импорт темы из Figma

Цвета и типографику можно перенести прямо из файла Figma — это снимает ручную сверку макета с проектом.

Откройте Theme Settings > Design System и нажмите Connect To Figma. Авторизуйтесь и дайте доступ, после чего вставьте ссылку на файл Figma.

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

Видеоверсия:

---

Индикаторы загрузки

Здесь настраивается вид индикаторов загрузки: Indicator Type, Color и Radius. Результат сразу виден в предпросмотре.

Видеоверсия:

---

Полоса прокрутки

Здесь задаётся вид полосы прокрутки в ListView, GridView, StaggeredView, Row и Column.

Настроить можно цвет, толщину, скругление и остальное; изменения сразу видны в разделе Preview.

Что доступно:

1. Thumb Color — цвет ползунка, той самой перетаскиваемой части.

   

2. Thickness — ширина у вертикальной полосы, высота у горизонтальной.

   

3. Border Radius — скругление углов: больше значение — круглее ползунок.

   

4. Min Thumb Length — минимальная длина ползунка. Нужна, чтобы на очень длинном списке ползунок не превратился в точку, за которую невозможно ухватиться.

   

5. Main Axis Margin — отступ вдоль полосы: сверху и снизу у вертикальной, слева и справа у горизонтальной.

   

6. Cross Axis Margin — отступ поперёк полосы: слева и справа у вертикальной, сверху и снизу у горизонтальной.

   

7. Thumb Always Visible — держать ползунок видимым постоянно, а не прятать после прокрутки. Здесь же включается дорожка со своим цветом и рамкой.

8. Interactive — разные цвета ползунка для разных состояний: обычное, под курсором, при перетаскивании.

---

Обновление жестом

Здесь настраивается вид крутящегося кружка, который появляется при потягивании списка вниз: цвет, фон и толщина линии. Изменения видны в разделе Preview.

Цвета

Раздел задаёт палитру приложения — отдельно для светлой и тёмной темы. Отсюда же цвета импортируются из Coolors и извлекаются из картинки.

Добавить или заменить цвет

По умолчанию в каждой теме 16 цветов. Их можно менять и дополнять под свой бренд.

Новый цвет:

1. Нажмите Add Color.
2. Цвет появится в разделе Custom Color — щёлкните по нему и введите значение в hex.
3. Задайте цвету имя.
4. Нажмите Use Color.

Чтобы поменять существующий цвет светлой или тёмной темы, щёлкните по нему и введите новое значение.

Обзор цветов проекта

Инструмент показывает, какие цвета реально используются в приложении, и предлагает готовые схемы.

1. Нажмите Explore Project Colors.
2. Выберите страницу для предпросмотра в Select page.
3. Прокрутите вниз и нажмите Find Common Colors — появится список используемых цветов. Значками «готово» и «отмена» цвета принимаются или отклоняются.
4. Вкладка Explore показывает готовые схемы: отметьте любую, чтобы увидеть предпросмотр.
5. Кнопка обновления возвращает исходную тему.
6. Нажмите Save Changes.

Импорт из Coolors

Coolors — большая библиотека готовых палитр, откуда схему можно перенести в несколько кликов.

1. Откройте coolors.co, выберите палитру, нажмите на меню из трёх точек и затем Export palette.
2. Выберите Code и скопируйте содержимое из секции /* Object */.
3. В проекте откройте Theme Settings > Colors.
4. Нажмите Import from Coolors.
5. Вставьте скопированное и нажмите Import — цвета появятся в разделе Custom Colors.

Цвета из картинки

Палитру можно собрать по фотографии — так тема получается согласованной с ключевым изображением приложения.

1. Откройте Theme Settings > Colors.
2. Нажмите Extract from Image и выберите картинку.
3. В окне с найденными цветами нажмите Extract & Continue.
4. Щёлкните по любому цвету, чтобы посмотреть и выбрать оттенок.
5. Нажмите Done.

Палитра по описанию

AI Gen Theme собирает палитру по текстовому описанию — «тигр в джунглях», «детская книжка на ночь» и тому подобное.

Видеоразбор

Типографика и значки

Раздел отвечает за текстовые стили — в том числе адаптивные и на своих шрифтах — и за собственные наборы значков.

Текстовые стили

Чтобы задать шрифт на уровне проекта, откройте Theme Settings > Typography & Icons и нажмите кнопку под Primary Font Family или Secondary Font Family.

У каждого стиля настраиваются:

• Font Size — кегль.
• Letter Spacing — расстояние между буквами.
• Italic — курсив.
• Font Weight — насыщенность: Thin, Extra Light, Light, Normal, Medium, Semi Bold, Bold, Extra Bold, Black.
• Color — цвет: из палитры или по hex-значению.
• Font Family — шрифт конкретного стиля: из Google Fonts или из загруженных своих. Здесь же выбирается, основной это шрифт или дополнительный.

Кроме стандартных стилей — Display, Headline, Title и прочих — можно завести свои: кнопка + Add Custom Text Style добавляет стиль в конец списка, дальше ему задаются имя и свойства.

Адаптивные текстовые стили

На экранах с высоким разрешением — планшетах, десктопах — текст выглядит мельче, чем на телефоне, и читать его тяжелее. Решение — адаптивные стили: кегль меняется вместе с классом устройства.

С адаптивным текстом:

Без адаптивного текста:

Как включить:

1. Откройте Theme Settings > Typography & Icons.
2. Нажмите Make Responsive.
3. Стили разъедутся по трём вкладкам — Mobile, Tablet, Desktop. Настройте каждую платформу, которую поддерживаете.
4. Запустите приложение и проверьте на разных размерах.

Свои шрифты

Свой шрифт отличает приложение от всех остальных, собранных на Google Fonts. Загружаются файлы .ttf, .otf и .woff; дальше шрифт доступен и в свойствах виджета, и в текстовых стилях темы.

1. Откройте Theme Settings > Typography & Icons.
2. Прокрутите до раздела Custom Fonts.
3. Нажмите + Add Font.
4. Введите Font Family Name и нажмите Upload File(s).
5. Выберите и загрузите файлы шрифта.
6. Нажмите Add Font.
7. Чтобы применить шрифт к отдельному виджету, щёлкните в панели свойств по текущему шрифту, перейдите на вкладку Custom Fonts и выберите свой.
8. Чтобы применить его к общему текстовому стилю, сделайте то же самое в разделе Text Styles.

Видеоверсия:

Свои значки

Собственные значки поддерживают узнаваемость приложения. Перед загрузкой во FlutterFlow их нужно собрать в шрифт — генератором вроде FlutterIcon или IcoMoon.

У FlutterFlow есть и свой генератор значков из SVG — с ним проще.

Как собрать и подключить набор

1. Откройте IcoMoon.
2. Загрузите свои .svg или выберите из бесплатного набора.
3. Перейдите на вкладку Generate Font.
4. Нажмите на значок шестерёнки рядом с кнопкой скачивания справа внизу.
5. Включите Generate Dart class for Flutter.
6. Нажмите Download и распакуйте архив.

7. В проекте FlutterFlow откройте Theme Settings > Typography & Icons.
8. Прокрутите до раздела Custom Icons.
9. Нажмите + Add Icons.
10. Нажмите Upload Icon File.
11. Загрузите файл .ttf из папки fonts распакованного архива.
12. Нажмите Upload Icon Info.
13. Загрузите файл filename.dart — он лежит рядом с папкой fonts.
14. Нажмите Add Icons.

Как применить

Добавьте виджет Icon, в панели свойств прокрутите до раздела Icon, щёлкните по текущему значку, перейдите на вкладку Custom Icons и выберите свой.

Видеоверсия:

Виджеты темы

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

Типичный набор — кнопки: primary_button, secondary_button, tertiary_button, у каждой своя ширина, цвет, значок, скругление и отступы. Дальше такой виджет либо кладут на страницу целиком, либо применяют его стиль к уже существующему виджету.

Как создать и применить

1. Откройте Theme Settings > Theme Widgets.
2. Нажмите Create Widget.
3. Введите Theme Widget Name и выберите виджет.
4. Настройте его свойства справа и нажмите Save.

5. Любой готовый виджет можно превратить в виджет темы: щёлкните по нему правой кнопкой и выберите Save as Theme Style Widget.

6. Теперь он доступен в дереве виджетов и в палитре.

7. Чтобы применить стиль к уже стоящему виджету, выделите его и в Properties Panel > Widget Styling нажмите Theme Style Unset, затем выберите нужный виджет темы.

Видеоразбор

Частые вопросы

Чем виджет темы отличается от шаблона и компонента?

Виджет темы задаёт оформление одного виджета. Шаблон — это готовая раскладка из нескольких виджетов под конкретную задачу. Компонент — полноценный собственный виджет: несколько виджетов плюс действия, выполняющие законченную работу.