feat: добавить документацию по Figma Adaptive Standards
- добавлены исходные материалы канона по адаптивным макетам - добавлена конфигурация VitePress для новой документации - подключена сборка документации в npm-скриптах, CI и Docker - обновлена карточка документации на главной странице
This commit is contained in:
30
canons/figma/index.md
Normal file
30
canons/figma/index.md
Normal file
@@ -0,0 +1,30 @@
|
||||
|
||||
title: Figma Adaptive Standards
|
||||
description: Карта стандартов подготовки адаптивных макетов в Figma для передачи в разработку
|
||||
|
||||
|
||||
# Figma Adaptive Standards
|
||||
|
||||
Figma Adaptive Standards — набор требований к подготовке адаптивных макетов в Figma. Документация фиксирует, как описывать брейкпоинты, проверять ресайз в диапазоне, настраивать Auto Layout и Constraints, оформлять компоненты, сетки, типографику, состояния интерфейса, A11y и передачу в разработку.
|
||||
|
||||
Стандарты нужны, чтобы макет был не только визуальной картинкой на нескольких ширинах, а рабочей моделью поведения интерфейса. По документам должно быть понятно, как экран живёт между брейкпоинтами, какие элементы тянутся, какие перестраиваются, что происходит с длинным контентом и где дизайнерское решение требует отдельного пояснения.
|
||||
|
||||
## Для кого
|
||||
|
||||
- **Дизайнерам** — как чеклист качества адаптивного макета перед передачей в разработку.
|
||||
- **Разработчикам** — как источник правил для проверки реализуемости макета и уточнения спорных мест.
|
||||
- **Team Lead / DesignOps** — как единый стандарт приёмки дизайн-файлов и согласования процесса.
|
||||
|
||||
## Разделы
|
||||
|
||||
- [Сжатая версия](/adaptive-layout-requirements/short) — короткий набор требований для быстрого применения в проекте.
|
||||
- [Полная версия](/adaptive-layout-requirements/full) — развёрнутое описание правил, терминов, проверок и типовых решений.
|
||||
- [Чеклист приёмки](/adaptive-layout-requirements/checklist) — практический список проверок перед передачей макета в разработку.
|
||||
|
||||
## Как читать
|
||||
|
||||
Начните со сжатой версии, чтобы понять общий стандарт. Затем используйте полную версию как справочник по спорным вопросам: брейкпоинтам, ресайзу, Auto Layout, компонентам, сетке, типографике и состояниям UI. Перед передачей макета в разработку пройдите чеклист приёмки.
|
||||
|
||||
## Главный принцип
|
||||
|
||||
Адаптивный макет считается готовым не тогда, когда нарисованы несколько статичных фреймов, а когда понятна логика поведения интерфейса во всём диапазоне ширин: от минимального значения до максимального, с длинным контентом, разными состояниями и предсказуемой передачей в разработку.
|
||||
Reference in New Issue
Block a user