Использование компонентов для ускорения работы

Вы уже умеете создавать базовые макеты в Figma. Отлично! Теперь освоим мощный инструмент, который ускорит работу и сделает дизайн консистентным — компоненты.

Что такое компоненты и зачем они нужны?

Представьте: вы делаете сайт, где 10 кнопок «Отправить заявку». Если нужно изменить их цвет, размер или текст, без компонентов пришлось бы менять каждую кнопку вручную. Это долго и чревато ошибками.

Компоненты в Figma — это многократно используемые элементы дизайна. Вы создаёте «мастер-компонент» (главный элемент), а затем используете его «экземпляры» (копии) по всему проекту. Любые изменения в мастер-компоненте автоматически применяются ко всем его экземплярам.

Зачем это нужно веб-дизайнеру, который хочет быстро зарабатывать?

1. Экономия времени: Не рисуете одно и то же с нуля.
2. Единообразие дизайна: Все элементы выглядят одинаково. Сайт выглядит профессионально.
3. Лёгкость правок: Клиент попросил изменить шрифт на всех заголовках? Меняете один мастер-компонент — обновляются все заголовки. Это критически важно для быстрых проектов.
4. Масштабируемость: Проект растёт, а вы не тратите часы на рутину.

Важно: Компоненты — это не просто копирование. Это связь между мастер-элементом и его копиями.

Создаём первый компонент в Figma

Сделаем простую кнопку и превратим её в компонент.

1. Нарисуйте базовый элемент:

   • Прямоугольник (R), например, 200x50 пикселей.
   • Закруглите углы (например, 8px) в панели свойств справа.
   • Залейте синим цветом.
   • Добавьте текст (T) «Отправить», разместите по центру. Цвет текста — белый.
   • Сгруппируйте прямоугольник и текст (Ctrl/Cmd + G). Назовите группу «Кнопка».

2. Создайте компонент:

   • Выделите группу «Кнопка».
   • Нажмите иконку «Create Component» в верхней панели (четыре соединённых ромбика) или Ctrl/Cmd + Alt + K.
   • Ваша группа станет мастер-компонентом. Его иконка в панели слоёв изменится на фиолетовый ромбик.

Используем экземпляры компонентов

Мастер-компонент готов. Теперь создадим его экземпляры.

1. Копируем экземпляры:

   • Выберите мастер-компонент.
   • Зажмите Alt (или Option на Mac) и перетащите компонент в сторону. Вы создадите его экземпляр.
   • Повторите несколько раз.

2. Изменяем мастер-компонент:

   • Выберите мастер-компонент (тот, что с фиолетовой иконкой).
   • Измените его заливку на зелёный.
   • Все экземпляры автоматически станут зелёными! ✨

3. Изменяем экземпляры (переопределение свойств):

   • Выберите один из экземпляров.
   • Вы можете изменить его текст (например, на «Подробнее»), цвет текста или размер. Эти изменения применятся только к этому экземпляру и не затронут мастер-компонент или другие экземпляры. Это называется переопределением свойств.
   • Чтобы вернуть экземпляр к состоянию мастер-компонента, выделите его и в панели свойств справа нажмите иконку «Reset all overrides» (круглая стрелка).

Организация компонентов: страницы и библиотеки

Для удобства, особенно в больших проектах:

• Создавайте отдельную страницу для компонентов: В Figma можно добавлять новые страницы. Создайте страницу «Components» или «Библиотека элементов» и размещайте там все мастер-компоненты. Это поможет поддерживать порядок.
• Используйте библиотеку компонентов: В сложных проектах вы сможете публиковать компоненты как библиотеку. Это позволит использовать одни и те же компоненты в разных файлах Figma — идеально для командной работы или создания дизайн-систем.

Практическое задание

Задание: Создайте набор компонентов для типового лендинга.

1. Создайте новую страницу в Figma, назовите её «Мои компоненты».
2. На этой странице создайте следующие мастер-компоненты:
   • Кнопка: Две версии — основная (синяя) и дополнительная (белая с обводкой).
   • Поле ввода: Для текстового поля с placeholder-текстом «Ваше имя».
   • Карточка услуги/товара: Включите изображение, заголовок, краткое описание и кнопку «Подробнее».
   • Иконка: Возьмите любую простую иконку (например, из плагина Iconify) и превратите её в компонент.
3. На отдельной странице «Макет» создайте несколько экземпляров каждого компонента. Попробуйте изменить их свойства (текст, цвет) для отдельных экземпляров, а затем измените мастер-компонент, чтобы увидеть, как это влияет на все экземпляры.

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