Контракт между макетом и кодом: как превратить Figma в живую библиотеку компонентов, которая не разваливается при правках
Представим Илью — начинающего фронтендера, который недавно переехал в Сочи и совмещает работу над локальными заказами и учебой на курсах в CREATIVcode. По утрам он бежит вдоль набережной, а днём переводит вёрстку из Figma в рабочие страницы. Проекты приходят быстро: лендинги, интернет-магазины для кафе и небольших салонов. Дизайнеры — живые люди, клиенты меняют запросы по ходу работы, а макеты постоянно обновляются. Первый раз Илья увидел, как мелкая правка в цветовой палитре ломает десяток кнопок и карточек, — и понял: «копировать из Figma» — это рецепт хрупкого продукта.
Этот текст — не лекция о том, как правильно писать CSS, это руководство по другому уровню вопроса: как договориться об условиях взаимодействия между дизайном и кодом так, чтобы при изменении макета проект не разваливался. Я объясню, что такое контракт между дизайн-системой и компонентами, как его формализовать в маленьком проекте, какие инструменты помогают, и какие трюки пригодятся начинающим разработчикам и фрилансерам в условиях реального бизнеса в Сочи — где проектам часто нужны быстрые правки, а ресурсов немного.
Почему простое копирование из макета ломко и дорого
У большинства новичков есть один рабочий подход: открыть Figma, посмотреть отступы и цвета и прикопировать это в CSS. На короткой дистанции это срабатывает, но есть подводные камни:
— Сплошные магические значения. Цвета, отступы и размеры прописаны в коде как «#5a8», «margin: 18px» — при правках придется искать и исправлять по всему проекту.
— Дублирование. Один и тот же стиль встречается в нескольких местах, и ты его правишь вручную в нескольких компонентах.
— Непонятный API компонентов. Кнопка в дизайне выглядит как «большая зелёная», в коде — как Button { padding: 12px; background: green; } А когда нужна «большая синяя» — создаём новую кнопку, дублируя логику.
— Голос дизайнера не фиксирован. Дизайн меняется — и код не имеет механизма, чтобы принять изменения
