01С чего начать

Создай основную кнопку и добавь варианты: обычная, наведение и недоступная. Подпиши их.

02Что делать дальше

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

03Пример

Замени «Купить» на «Записаться на консультацию». Если текст выходит за край, настрой ширину и отступы компонента.

04Повторяющаяся кнопка должна выдерживать разный текст

Представь, что одна кнопка подписана «Купить», а другая — «Записаться на консультацию». Если ты собрал общий элемент только по короткому слову, длинная подпись может не поместиться. Проверяй крайние варианты до копирования на все экраны.

Компонент в Figma — это общий образец для повторяющихся элементов. Он помогает менять их согласованно, но не требует большой сложной системы. Начни с нужных вариантов: обычная кнопка, недоступная и вариант во время ожидания. Их смысл должен быть понятен и посетителю, и человеку, который будет собирать сайт.

05Как проверить общий образец перед копированием

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

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

Если копия неожиданно выглядит иначе, проверь её настройки и изменения, которые делал отдельно. Не удаляй связь автоматически при каждой трудности: сначала пойми, что хотел изменить только здесь, а что должно измениться у всех кнопок. Так компонент будет помощником, а не загадкой внутри файла.