Создание сайта в Figma не обязательно начинать с пустого фрейма, вручную рисовать десятки одинаковых кнопок и каждый раз заново подбирать отступы. Значительную часть рутинной работы можно автоматизировать или один раз превратить в повторно используемую систему.
Главный принцип работы прост: сначала создаются правила и базовые компоненты, а затем из них собираются страницы. Такой подход ускоряет работу над первым макетом и особенно заметно экономит время при подготовке мобильной версии, внутренних страниц и последующих обновлений сайта.
Разберём, какие функции Figma и дополнительные плагины помогают быстрее создавать макеты корпоративных сайтов, юридических фирм и других B2B-компаний.
1. Не начинайте работу с пустого холста
Частая ошибка — сразу открыть Figma и начать рисовать главную страницу. В результате дизайнер параллельно пытается придумать структуру сайта, тексты, визуальный стиль и расположение элементов.
Гораздо быстрее сначала собрать исходные материалы:
Для сайта юридической фирмы это могут быть главная страница, практика, отрасль, профиль юриста, публикация, новость, мероприятие и контакты. Для другой B2B-компании — главная, услуги, решения, кейсы, отрасли, команда и форма запроса.
После этого следует определить несколько повторяющихся блоков: заголовок страницы, карточка услуги, карточка сотрудника, публикация, форма, призыв к действию, шапка и подвал. Именно из них позже будет собран почти весь сайт.
2. Переносите существующие сайты в Figma через html.to.design
При редизайне необязательно вручную воссоздавать каждую страницу старого сайта. Плагин html.to.design позволяет импортировать веб-страницу по URL и преобразовать её в редактируемые слои Figma.
После импорта можно менять тексты, цвета, размеры, изображения и структуру блоков. Плагин также умеет переносить HTML/CSS-код и создавать из него редактируемый макет. В зависимости от исходной страницы импорт может включать Auto Layout, локальные стили и структурированную иерархию слоёв.
Это особенно удобно в нескольких ситуациях:
Редизайн собственного сайта. Можно перенести текущие страницы и сразу увидеть, какие блоки стоит оставить, удалить или перестроить.
Работа с HTML-прототипом. Если первый вариант был создан в конструкторе, AI-сервисе или непосредственно в коде, его можно перенести в Figma для доработки.
Исследование конкурентов. Отдельные страницы можно импортировать для анализа сетки, размеров, структуры и поведения элементов.
При этом импортированный сайт не следует считать готовой дизайн-системой. Обычно после переноса требуется очистить лишние слои, унифицировать отступы, заменить случайные цвета переменными и превратить повторяющиеся элементы в компоненты.
Также важно не собирать новый сайт как копию одного конкурента. Референсы лучше использовать для изучения отдельных решений: у одного сайта — навигацию, у второго — структуру страницы практики, у третьего — работу с публикациями.
3. Используйте Auto Layout с самого начала
Auto Layout — одна из главных функций Figma для ускорения работы. Он позволяет элементам автоматически перестраиваться при изменении текста, размера контейнера или количества объектов. Благодаря этому макеты становятся более адаптивными и не требуют постоянного ручного перемещения слоёв.
Главный принцип работы прост: сначала создаются правила и базовые компоненты, а затем из них собираются страницы. Такой подход ускоряет работу над первым макетом и особенно заметно экономит время при подготовке мобильной версии, внутренних страниц и последующих обновлений сайта.
Разберём, какие функции Figma и дополнительные плагины помогают быстрее создавать макеты корпоративных сайтов, юридических фирм и других B2B-компаний.
1. Не начинайте работу с пустого холста
Частая ошибка — сразу открыть Figma и начать рисовать главную страницу. В результате дизайнер параллельно пытается придумать структуру сайта, тексты, визуальный стиль и расположение элементов.
Гораздо быстрее сначала собрать исходные материалы:
- структуру будущего сайта;
- логотип и фирменные цвета;
- тексты или хотя бы тезисы;
- действующий сайт компании;
- презентации и коммерческие предложения;
- несколько подходящих референсов;
- список обязательных типов страниц.
Для сайта юридической фирмы это могут быть главная страница, практика, отрасль, профиль юриста, публикация, новость, мероприятие и контакты. Для другой B2B-компании — главная, услуги, решения, кейсы, отрасли, команда и форма запроса.
После этого следует определить несколько повторяющихся блоков: заголовок страницы, карточка услуги, карточка сотрудника, публикация, форма, призыв к действию, шапка и подвал. Именно из них позже будет собран почти весь сайт.
2. Переносите существующие сайты в Figma через html.to.design
При редизайне необязательно вручную воссоздавать каждую страницу старого сайта. Плагин html.to.design позволяет импортировать веб-страницу по URL и преобразовать её в редактируемые слои Figma.
После импорта можно менять тексты, цвета, размеры, изображения и структуру блоков. Плагин также умеет переносить HTML/CSS-код и создавать из него редактируемый макет. В зависимости от исходной страницы импорт может включать Auto Layout, локальные стили и структурированную иерархию слоёв.
Это особенно удобно в нескольких ситуациях:
Редизайн собственного сайта. Можно перенести текущие страницы и сразу увидеть, какие блоки стоит оставить, удалить или перестроить.
Работа с HTML-прототипом. Если первый вариант был создан в конструкторе, AI-сервисе или непосредственно в коде, его можно перенести в Figma для доработки.
Исследование конкурентов. Отдельные страницы можно импортировать для анализа сетки, размеров, структуры и поведения элементов.
При этом импортированный сайт не следует считать готовой дизайн-системой. Обычно после переноса требуется очистить лишние слои, унифицировать отступы, заменить случайные цвета переменными и превратить повторяющиеся элементы в компоненты.
Также важно не собирать новый сайт как копию одного конкурента. Референсы лучше использовать для изучения отдельных решений: у одного сайта — навигацию, у второго — структуру страницы практики, у третьего — работу с публикациями.
3. Используйте Auto Layout с самого начала
Auto Layout — одна из главных функций Figma для ускорения работы. Он позволяет элементам автоматически перестраиваться при изменении текста, размера контейнера или количества объектов. Благодаря этому макеты становятся более адаптивными и не требуют постоянного ручного перемещения слоёв.
Например, если кнопка создана через обычный прямоугольник, после изменения текста её придётся увеличивать вручную. Если кнопка собрана через Auto Layout, ширина изменится автоматически.
То же относится к:
Для каждого контейнера полезно сразу определить:
Hug contents — размер зависит от содержимого. Подходит для кнопок, тегов и небольших карточек.
Fill container — элемент занимает доступное пространство. Удобно для полей формы, колонок и адаптивных блоков.
Fixed width — фиксированный размер. Нужен для отдельных элементов, но злоупотреблять им не стоит.
Хорошая практика — собирать страницу как систему вложенных Auto Layout-контейнеров, например: Страница - Секция - Контейнер - Заголовок - Описание - Сетка карточек - Карточка - Карточка - Карточка
Такую структуру легче редактировать, адаптировать под мобильные устройства и передавать разработчику.
4. Превращайте повторяющиеся элементы в компоненты
Если один и тот же элемент используется больше одного раза, его стоит рассматривать как кандидат на компонент.
Вместо десяти отдельных кнопок создаётся один главный компонент, а на страницах используются его экземпляры. Если позднее нужно изменить радиус, высоту или размер текста, достаточно обновить главный компонент.
Не нужно создавать огромную библиотеку на старте. Для первого этапа достаточно 10–15 компонентов, которые действительно повторяются.
Главное правило: не отсоединять экземпляр от компонента без необходимости. После Detach instance элемент перестаёт получать обновления. Если кнопка или карточка требует небольшого изменения, лучше добавить соответствующее свойство или вариант в основной компонент.
То же относится к:
- меню;
- карточкам сотрудников;
- спискам услуг;
- тегам и фильтрам;
- формам;
- блокам с иконкой и текстом;
- колонкам в подвале;
- карточкам статей;
- секциям с несколькими элементами.
Для каждого контейнера полезно сразу определить:
Hug contents — размер зависит от содержимого. Подходит для кнопок, тегов и небольших карточек.
Fill container — элемент занимает доступное пространство. Удобно для полей формы, колонок и адаптивных блоков.
Fixed width — фиксированный размер. Нужен для отдельных элементов, но злоупотреблять им не стоит.
Хорошая практика — собирать страницу как систему вложенных Auto Layout-контейнеров, например: Страница - Секция - Контейнер - Заголовок - Описание - Сетка карточек - Карточка - Карточка - Карточка
Такую структуру легче редактировать, адаптировать под мобильные устройства и передавать разработчику.
4. Превращайте повторяющиеся элементы в компоненты
Если один и тот же элемент используется больше одного раза, его стоит рассматривать как кандидат на компонент.
Вместо десяти отдельных кнопок создаётся один главный компонент, а на страницах используются его экземпляры. Если позднее нужно изменить радиус, высоту или размер текста, достаточно обновить главный компонент.
Не нужно создавать огромную библиотеку на старте. Для первого этапа достаточно 10–15 компонентов, которые действительно повторяются.
Главное правило: не отсоединять экземпляр от компонента без необходимости. После Detach instance элемент перестаёт получать обновления. Если кнопка или карточка требует небольшого изменения, лучше добавить соответствующее свойство или вариант в основной компонент.
5. Объединяйте состояния через Variants
Не стоит создавать отдельные несвязанные компоненты для синей кнопки, белой кнопки, большой кнопки, маленькой кнопки и кнопки с иконкой. Их можно объединить в один набор вариантов.
Variants позволяют собрать похожие компоненты в единую систему и переключать свойства в правой панели. Figma рекомендует использовать этот подход для состояний, размеров, типов и визуальных режимов компонентов.
Например: Button - Type: (Primary), (Secondary).
Вместо десятков несвязанных кнопок получается один компонент с понятными настройками.
Variants можно использовать не только для кнопок:
Интерактивные компоненты могут автоматически переключаться между состояниями, например показывать hover или pressed без создания большого количества отдельных связей в прототипе.
6. Создайте переменные до того, как появятся двадцать страниц
Если цвет, отступ или радиус используются несколько раз, не стоит каждый раз вводить значение вручную.
Variables позволяют хранить повторно используемые значения и применять их к разным свойствам макета. При изменении переменной связанные элементы обновляются одновременно.
Для небольшого корпоративного сайта можно начать с компактного набора.
Цвета
color/brand/primary
color/brand/accent
Отступы
space/4
space/8
Радиусы
radius/small
radius/medium
radius/large
radius/round
Смысл не в количестве переменных, а в последовательности. Если на сайте используются отступы 17, 19, 21, 23 и 26 пикселей, макет быстро становится визуально неоднородным. Ограниченная шкала помогает сохранить ритм и ускоряет принятие решений.
Лучше давать переменным смысловые названия. Например, color/text/secondary понятнее, чем gray-500: если оттенок изменится, назначение переменной останется прежним.
7. Используйте Modes для тем и версий сайта
Modes позволяют хранить несколько значений одной переменной и переключать их в зависимости от контекста. Например, одна коллекция переменных может содержать светлый и тёмный режимы без необходимости копировать весь макет.
Для сайта режимы можно применять не только к тёмной теме.
Возможные варианты:
Theme: Light / Dark, Brand: Main company / Sub-brand; Device: Desktop / Mobile и др.
Для языковых версий Modes особенно удобны при тестировании коротких интерфейсных текстов. Но длинные статьи и описания лучше проверять на реальном контенте, поскольку разные языки сильно отличаются по длине.
Для небольшого сайта не стоит усложнять систему заранее. Modes нужны там, где действительно существуют повторяющиеся режимы, а не просто потому, что такая функция есть.
8. Соберите отдельную страницу с mini design system
Даже если проект состоит всего из пяти страниц, полезно создать в Figma отдельную страницу:
00 — Foundations
01 — Components
02 — Desktop
На странице Foundations можно разместить:
На странице Components — кнопки, формы, карточки, навигацию и другие повторяющиеся элементы.
Такой порядок упрощает работу не только дизайнеру, но и клиенту, разработчику и другим участникам проекта. Человеку не нужно искать основную кнопку среди десятков экранов.
Полноценная корпоративная дизайн-система может включать сотни компонентов и подробную документацию. Но для обычного сайта достаточно mini design system, которая фиксирует основные визуальные решения и помогает не собирать каждую страницу заново.
9. Создайте три ключевых шаблона, а не весь сайт сразу
Для юридической фирмы сначала достаточно проработать:
Эти шаблоны обычно содержат почти все основные элементы будущего сайта: навигацию, заголовки, текстовые блоки, карточки, публикации, формы и CTA.
Для другой B2B-компании ключевыми могут быть:
После утверждения этих страниц остальные разделы собираются из уже готовых блоков. Такой подход быстрее, чем одновременно проектировать десять страниц и затем исправлять одну и ту же проблему во всех макетах.
10. Проверяйте компоненты на реальном контенте
Карточка, идеально выглядящая с заголовком «Налоговое право», может сломаться на тексте «Сопровождение трансграничных корпоративных реструктуризаций».
Поэтому компоненты нужно тестировать на крайних сценариях:
Это помогает обнаружить проблемы до передачи макета в разработку.
Полезный приём — создать отдельный тестовый фрейм Component stress test и разместить в нём самые сложные варианты контента.
11. Используйте Figma AI для черновиков, а не для финального дизайна
First Draft в Figma AI может превращать описание идеи в редактируемый wireframe или первоначальный дизайн. Инструмент предназначен для быстрого исследования разных направлений и создания ранних вариантов без ручной сборки каждого элемента с нуля.
Его разумно использовать для:
Например, можно запросить:
Создай desktop-макет страницы практики международной юридической фирмы. Нужны заголовок, описание практики, ключевые услуги, ведущие юристы, последние публикации, опыт по проектам и форма обращения.
Полученный результат лучше рассматривать как набор идей, а не как готовый сайт. AI-макеты часто требуют переработки типографики, отступов, структуры, фирменного стиля и адаптивности.
Особенно осторожно стоит относиться к типичным шаблонным решениям: чрезмерно крупным заголовкам, одинаковым карточкам, случайным градиентам и абстрактным изображениям, которые не связаны с содержанием бизнеса.
12. Подключайте Tokens Studio только тогда, когда проект этого требует
Встроенных Variables обычно достаточно для сайта небольшой компании. Но если над продуктом одновременно работают дизайнеры и разработчики или одна система используется в нескольких проектах, можно подключить Tokens Studio.
Плагин позволяет управлять дизайн-токенами, связывать их со стилями и переменными Figma и синхронизировать решения с внешним репозиторием. В качестве токенов можно хранить цвета, типографику, размеры, отступы, радиусы и другие параметры интерфейса.
Такой подход особенно полезен, когда:
Для лендинга или небольшого корпоративного сайта Tokens Studio может оказаться избыточным. Не стоит строить сложную инфраструктуру, если проекту достаточно двадцати переменных и десяти компонентов.
13. Создайте собственный стартовый файл
Один из самых эффективных способов ускорить работу — подготовить собственный шаблон для новых сайтов.
В него можно заранее включить:
При запуске нового проекта файл дублируется, после чего заменяются шрифты, палитра, логотип и отдельные компоненты.
При этом шаблон не должен превращать все сайты в одинаковые. Он хранит техническую основу, но не задаёт компании одну и ту же визуальную концепцию.
14. Выносите готовую систему в Library
Если одни и те же компоненты используются в нескольких файлах, их можно опубликовать как библиотеку. Figma Libraries позволяют хранить компоненты, стили и переменные в одном файле и повторно использовать их в других проектах.
Например, агентство может иметь:
В общей библиотеке лучше хранить универсальную механику: поля, кнопки, модальные окна, базовые карточки. Фирменные визуальные решения конкретного клиента должны оставаться в его собственной системе.
Практический workflow для быстрого создания сайта
Оптимальный процесс может выглядеть так:
Шаг 1. Собрать тексты, структуру, брендовые материалы и референсы.
Шаг 2. Импортировать существующий сайт через html.to.design или создать первоначальную структуру вручную.
Шаг 3. Определить контейнер, сетку, типографику, цвета и шкалу отступов.
Шаг 4. Создать переменные и базовые стили.
Шаг 5. Собрать 10–15 основных компонентов через Auto Layout.
Шаг 6. Добавить варианты компонентов и их состояния.
Шаг 7. Спроектировать три ключевые страницы.
Шаг 8. Проверить компоненты на длинных текстах и сложных сценариях.
Шаг 9. Собрать мобильные версии из существующих компонентов.
Шаг 10. После утверждения масштабировать систему на остальные страницы.
Не стоит создавать отдельные несвязанные компоненты для синей кнопки, белой кнопки, большой кнопки, маленькой кнопки и кнопки с иконкой. Их можно объединить в один набор вариантов.
Variants позволяют собрать похожие компоненты в единую систему и переключать свойства в правой панели. Figma рекомендует использовать этот подход для состояний, размеров, типов и визуальных режимов компонентов.
Например: Button - Type: (Primary), (Secondary).
Вместо десятков несвязанных кнопок получается один компонент с понятными настройками.
Variants можно использовать не только для кнопок:
- открытый и закрытый пункт FAQ;
- обычная и выделенная карточка;
- активная и неактивная вкладка;
- desktop- и mobile-версия меню;
- карточка публикации с изображением и без него;
- профиль сотрудника с разными наборами данных.
Интерактивные компоненты могут автоматически переключаться между состояниями, например показывать hover или pressed без создания большого количества отдельных связей в прототипе.
6. Создайте переменные до того, как появятся двадцать страниц
Если цвет, отступ или радиус используются несколько раз, не стоит каждый раз вводить значение вручную.
Variables позволяют хранить повторно используемые значения и применять их к разным свойствам макета. При изменении переменной связанные элементы обновляются одновременно.
Для небольшого корпоративного сайта можно начать с компактного набора.
Цвета
color/brand/primary
color/brand/accent
Отступы
space/4
space/8
Радиусы
radius/small
radius/medium
radius/large
radius/round
Смысл не в количестве переменных, а в последовательности. Если на сайте используются отступы 17, 19, 21, 23 и 26 пикселей, макет быстро становится визуально неоднородным. Ограниченная шкала помогает сохранить ритм и ускоряет принятие решений.
Лучше давать переменным смысловые названия. Например, color/text/secondary понятнее, чем gray-500: если оттенок изменится, назначение переменной останется прежним.
7. Используйте Modes для тем и версий сайта
Modes позволяют хранить несколько значений одной переменной и переключать их в зависимости от контекста. Например, одна коллекция переменных может содержать светлый и тёмный режимы без необходимости копировать весь макет.
Для сайта режимы можно применять не только к тёмной теме.
Возможные варианты:
Theme: Light / Dark, Brand: Main company / Sub-brand; Device: Desktop / Mobile и др.
Для языковых версий Modes особенно удобны при тестировании коротких интерфейсных текстов. Но длинные статьи и описания лучше проверять на реальном контенте, поскольку разные языки сильно отличаются по длине.
Для небольшого сайта не стоит усложнять систему заранее. Modes нужны там, где действительно существуют повторяющиеся режимы, а не просто потому, что такая функция есть.
8. Соберите отдельную страницу с mini design system
Даже если проект состоит всего из пяти страниц, полезно создать в Figma отдельную страницу:
00 — Foundations
01 — Components
02 — Desktop
На странице Foundations можно разместить:
- логотип;
- палитру;
- типографику;
- сетку;
- шкалу отступов;
- радиусы;
- иконки;
- правила использования изображений.
На странице Components — кнопки, формы, карточки, навигацию и другие повторяющиеся элементы.
Такой порядок упрощает работу не только дизайнеру, но и клиенту, разработчику и другим участникам проекта. Человеку не нужно искать основную кнопку среди десятков экранов.
Полноценная корпоративная дизайн-система может включать сотни компонентов и подробную документацию. Но для обычного сайта достаточно mini design system, которая фиксирует основные визуальные решения и помогает не собирать каждую страницу заново.
9. Создайте три ключевых шаблона, а не весь сайт сразу
Для юридической фирмы сначала достаточно проработать:
- главную страницу;
- страницу практики;
- профиль юриста.
Эти шаблоны обычно содержат почти все основные элементы будущего сайта: навигацию, заголовки, текстовые блоки, карточки, публикации, формы и CTA.
Для другой B2B-компании ключевыми могут быть:
- главная;
- страница услуги;
- кейс или отраслевое решение.
После утверждения этих страниц остальные разделы собираются из уже готовых блоков. Такой подход быстрее, чем одновременно проектировать десять страниц и затем исправлять одну и ту же проблему во всех макетах.
10. Проверяйте компоненты на реальном контенте
Карточка, идеально выглядящая с заголовком «Налоговое право», может сломаться на тексте «Сопровождение трансграничных корпоративных реструктуризаций».
Поэтому компоненты нужно тестировать на крайних сценариях:
- очень длинный заголовок;
- короткий заголовок;
- отсутствие изображения;
- длинная должность сотрудника;
- несколько профессиональных статусов;
- большое количество тегов;
- текст на другом языке;
- длинный адрес;
- ошибка в форме;
- кнопка из двух или трёх слов.
Это помогает обнаружить проблемы до передачи макета в разработку.
Полезный приём — создать отдельный тестовый фрейм Component stress test и разместить в нём самые сложные варианты контента.
11. Используйте Figma AI для черновиков, а не для финального дизайна
First Draft в Figma AI может превращать описание идеи в редактируемый wireframe или первоначальный дизайн. Инструмент предназначен для быстрого исследования разных направлений и создания ранних вариантов без ручной сборки каждого элемента с нуля.
Его разумно использовать для:
- первоначальной структуры экрана;
- нескольких вариантов hero-блока;
- формы личного кабинета;
- прототипа внутреннего интерфейса;
- поиска альтернативной композиции;
- быстрой визуализации идеи для обсуждения.
Например, можно запросить:
Создай desktop-макет страницы практики международной юридической фирмы. Нужны заголовок, описание практики, ключевые услуги, ведущие юристы, последние публикации, опыт по проектам и форма обращения.
Полученный результат лучше рассматривать как набор идей, а не как готовый сайт. AI-макеты часто требуют переработки типографики, отступов, структуры, фирменного стиля и адаптивности.
Особенно осторожно стоит относиться к типичным шаблонным решениям: чрезмерно крупным заголовкам, одинаковым карточкам, случайным градиентам и абстрактным изображениям, которые не связаны с содержанием бизнеса.
12. Подключайте Tokens Studio только тогда, когда проект этого требует
Встроенных Variables обычно достаточно для сайта небольшой компании. Но если над продуктом одновременно работают дизайнеры и разработчики или одна система используется в нескольких проектах, можно подключить Tokens Studio.
Плагин позволяет управлять дизайн-токенами, связывать их со стилями и переменными Figma и синхронизировать решения с внешним репозиторием. В качестве токенов можно хранить цвета, типографику, размеры, отступы, радиусы и другие параметры интерфейса.
Такой подход особенно полезен, когда:
- у компании несколько сайтов или продуктов;
- существует светлая и тёмная тема;
- одна система поддерживает несколько брендов;
- дизайн должен синхронизироваться с кодом;
- над проектом работает большая команда;
- изменения регулярно распространяются на множество файлов.
Для лендинга или небольшого корпоративного сайта Tokens Studio может оказаться избыточным. Не стоит строить сложную инфраструктуру, если проекту достаточно двадцати переменных и десяти компонентов.
13. Создайте собственный стартовый файл
Один из самых эффективных способов ускорить работу — подготовить собственный шаблон для новых сайтов.
В него можно заранее включить:
- размеры desktop- и mobile-фреймов;
- контейнер и сетку;
- базовую типографику;
- шкалу отступов;
- переменные;
- кнопки;
- формы;
- шапку;
- подвал;
- карточки;
- структуру страниц Figma;
- экран для презентации макетов клиенту.
При запуске нового проекта файл дублируется, после чего заменяются шрифты, палитра, логотип и отдельные компоненты.
При этом шаблон не должен превращать все сайты в одинаковые. Он хранит техническую основу, но не задаёт компании одну и ту же визуальную концепцию.
14. Выносите готовую систему в Library
Если одни и те же компоненты используются в нескольких файлах, их можно опубликовать как библиотеку. Figma Libraries позволяют хранить компоненты, стили и переменные в одном файле и повторно использовать их в других проектах.
Например, агентство может иметь:
- общую техническую библиотеку;
- отдельную библиотеку конкретного клиента;
- библиотеку шаблонов для юридических фирм;
- библиотеку элементов для презентаций;
- библиотеку иконок и служебных компонентов.
В общей библиотеке лучше хранить универсальную механику: поля, кнопки, модальные окна, базовые карточки. Фирменные визуальные решения конкретного клиента должны оставаться в его собственной системе.
Практический workflow для быстрого создания сайта
Оптимальный процесс может выглядеть так:
Шаг 1. Собрать тексты, структуру, брендовые материалы и референсы.
Шаг 2. Импортировать существующий сайт через html.to.design или создать первоначальную структуру вручную.
Шаг 3. Определить контейнер, сетку, типографику, цвета и шкалу отступов.
Шаг 4. Создать переменные и базовые стили.
Шаг 5. Собрать 10–15 основных компонентов через Auto Layout.
Шаг 6. Добавить варианты компонентов и их состояния.
Шаг 7. Спроектировать три ключевые страницы.
Шаг 8. Проверить компоненты на длинных текстах и сложных сценариях.
Шаг 9. Собрать мобильные версии из существующих компонентов.
Шаг 10. После утверждения масштабировать систему на остальные страницы.