Дневники дизайн-системы. Выпуск 1. Вступление

Зачем я это затеял?

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

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

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

Что есть и чего не хватает

Есть уверенное владение фигмой и адобовскими графическими редакторами, крепкие навыки вёрстки (html, twig, css, scss), базовые яваскрипта и самые основы гита.

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

Где следить

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

Фигма. Структура

Я делю рабочее пространство фигмы на три части:

зона компонентов;
зона макетов;
зона вспомогательных элементов.

В случае если перед отрисовкой макетов требуется проработать схематично их структуру, может добавляться зона прототипов.

На страницах зоны компонентов храню блоки и визуальное представление стилей. Так, например на странице _ colors and typography нет рабочих элементов, только визуализация палитры и типографического ядра (им, кстати, будет посвящена следующая запись).

Зона макетов содержит готовые дизайн-макеты разделов сайта или приложения. Количество страниц в зоне соответствует числу брейкпойнтов. По-умолчанию их три:

мобильная версия;
версия для планшетов и маленьких пк;
десктопная версия.

Макеты мобильной версии у меня обычно имеют ширину в 360 пикселей. 360 ... 414 пикселей — самый распространённый диапазон ширины экранов мобильных устройств.

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

Самый распространённый диапазон ширин экранов компьютеров — 1280 ... 1920 пикселей. Поэтому декстопные макеты у меня обычно имеют ширину в 1280 пикселей, а на вёрстке после 1440 пикселей ширина контента перестаёт расти, оставляя по бокам поля.

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

Фигма. Принципы

Всё что используется в макетах больше одного раза должно стать компонентом.
Меньше — лучше. Каждый новый стиль, каждый новый компонент это дополнительное время и ресурсы на реализацию. Усложнение, которое в итоге может сделать проект громоздким и трудно управляемым. Добавляя что-то десять раз подумай, правда ли это так нужно?
Для организации компонентов используются фигмовские «варианты», потому что практически не бывает блоков не имеющих состояний. Как минимум на десктопном и мобильном экранах они будут отличаться и это уже достаточный повод использовать варианты.
Избегай использования плагинов, расширяющих инструментарий фигмы. На сегодняшний день программа достаточно функциональна чтобы не прибегать к помощи сторонних расширений, использование которых может осложнить совместную работу.
Текст и цвет без стилей — зло! Если типографического ядра или палитры не хватает, это повод задуматься над их расширением. Правда, чаще это повод лучше подумать над реализацией элемента: скорее всего для решения задачи достаточно имеющихся стилей (см. принцип № 2).

Вёрстка. Структура

raw-alfa
├── css
│     ├── style.min.scss
│     └── style.scss
├── js
│     ├── lib
│     │   └── vue.js
│     ├── main.js
│     └── main.min.js
├── media
│   └── image.jpg
├── scss
│   │
│   ├── components
│   ├── variables
│   │   └── _var.scss
│   └── style.scss
└── index.html

Вёрстки ещё как таковой ещё нет, поэтому и структура самая общая.

Сперва папка со стилями, в ней я никогда ничего не трогаю руками: стили туда компилируются автоматически, потом также автоматом минифицируются, после чего сжатые файлы подключаются на страницы.

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

Папка media для графики и видео.

scss — рабочая папка для написания стилей. В корне лежит единственный файл, в который импортируются компоненты и переменные, разложенные по подпапкам. Правило: один компонент — один файл.

Я ещё не определился со структурой шаблонов, поэтому этот важный раздел в проекте отсутствует. Раньше использовал twig: в корне лежали пхп-файлы, в папке templates лэйауты, в подпаках components и pages, компоненты и страницы, соответственно. Сейчас хочу освоить vue, в процессе решу использовать подобную структуру или организовать пространство иначе.

Рассказал зачем я это затеял, кратко описал принципы и структуру. В следующем выпуске планирую рассказать о цветах и типографике.

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

Полный список записей серии смотрите по тегу #raw-alfa