Компоненты в Figma
В проекте с множеством страниц часто повторяются одни и те же объекты. Вместо многократного копирования, используйте компоненты. Компонент — это блок, копии которого обновляются автоматически при изменении оригинала.
Чтобы создать компонент, выберите объект на боковой панели и нажмите кнопку создания компонента (первая кнопка сверху). Объект изменит цвет и выделение, став компонентом. Удалите лишние дубликаты.
Найдите созданный компонент в папке Assets. Перетащите его на нужную страницу. Изменение основного компонента автоматически обновляет все копии.
Варианты компонентов
Для разных версий одного компонента создайте варианты. Нажмите «+», чтобы добавить вариант и дайте ему имя (например, «Вариант 2»). Измените его дизайн (например, цвет). Теперь можно использовать разные варианты на разных страницах.
Отсоединение компонента
Для внесения кардинальных изменений в компонент на отдельной странице, не затрагивая остальные, выберите его, нажмите три точки и «Detach instance». Объект отсоединится от компонента, и его изменения не повлияют на другие копии.
История версий проекта
Для возврата к предыдущей версии проекта используйте «Show Version History». Здесь отображается история всех версий с возможностью просмотра, переименования и восстановления. Восстановление старой версии не удаляет новые.
Маски в Figma
Создайте маску: создайте фрейм, поместите в него изображение и под ним — фигуру (например, треугольник). Выберите изображение и нажмите кнопку «Mask». Изображение будет обрезано по форме фигуры. Редактирование фигуры обновляет маску. Для удобства поместите маску с изображением в группу.
Прототипирование в Figma
Прототипирование позволяет создавать интерактивные прототипы.
Перейдите на вкладку «Prototype». Выберите устройство (например, iPhone 11 Pro Max) и ориентацию экрана. Можно изменить фон.
Создайте переход: выберите объект (например, блок «Курсы Java») и перетащите стрелку из инспектора на целевой экран («Курс Page»). Выберите тип перехода («OnClick»), анимацию и другие параметры. Теперь при нажатии на блок произойдет переход на другую страницу.
В этом уроке мы изучили компоненты, маски и прототипирование в Figma. Эти инструменты значительно упрощают работу.