Figma — это векторный инструмент проектирования, который используется дизайнерами веб-сайтов и приложений для создания высокоточных прототипов. Одной из уникальных особенностей Figma является система авторазметки, которая позволяет дизайнерам легко создавать отзывчивый дизайн.
В этой статье мы рассмотрим, что такое авторазметка, как она работает и как ее можно использовать для создания отзывчивых дизайнов в Figma.
Авторазметка — это система, которая автоматически упорядочивает элементы на странице в соответствии с определенными правилами. В Figma эти правила называются ограничениями. Ограничения могут быть основаны на размере, положении или расстоянии между элементами.
Ограничения по размеру используются для поддержания определенного размера элементов относительно других элементов на странице. Например, вы можете установить ширину элемента на 50% от ширины его контейнера.
Ограничения положения используются для позиционирования элементов относительно других элементов на странице. Например, можно задать центрирование элемента в его контейнере.
Ограничения интервала используются для управления расстоянием между элементами на странице. Например, вы можете задать двум элементам равное пространство между ними.
Система авторазметки Figma очень мощная и может быть использована для создания сложных отзывчивых дизайнов с легкостью. В следующем разделе мы рассмотрим, как можно использовать авторазметку для создания простого отзывчивого макета.
Создание отзывчивого макета с помощью авторазметки
Чтобы продемонстрировать работу авторазметки, мы создадим простой отзывчивый макет с тремя колонками. Мы будем использовать ограничения размера, чтобы колонки автоматически изменяли размер при изменении размера страницы. Мы также будем использовать ограничения по расстоянию между колонками, чтобы они располагались на равном расстоянии друг от друга.
1. Создайте новый файл Figma и добавьте три прямоугольника на холст. Эти прямоугольники будут представлять наши колонки.
2. Выберите все три прямоугольника и нажмите на иконку «авто-макет» на панели инструментов (она выглядит как две стрелки, направленные друг на друга). Откроется панель авторазметки.
3. В панели авторазметки выберите «размер» из выпадающего меню, а затем нажмите на кнопку «добавить ограничение» (она выглядит как знак плюс). Это добавит ограничение размера ко всем выбранным элементам.
4. В настройках ограничения размера установите параметр «ширина» на «50%». Это сделает ширину каждого столбца равной 50% ширины его контейнера (холста).
5. Затем выберите «интервал» из выпадающего меню и нажмите на кнопку «добавить ограничение» (она выглядит как знак плюс). Это добавит ограничение расстояния между всеми выбранными элементами.
6. В настройках ограничения интервала установите параметр «пространство» на «16px». Это добавит 16px пространства между каждой колонкой.
7. Теперь, когда мы установили ограничения, нам нужно указать Figma, как мы хотим изменить размер колонок при изменении размера страницы. Для этого нажмите на иконку «отзывчивый размер» на панели инструментов (она выглядит как две стрелки, направленные друг на друга).
8. В настройках отзывчивого изменения размера выберите в выпадающем меню «текучая ширина», а затем нажмите на кнопку «изменить размер» (она выглядит как знак плюс). Это сделает все наши колонки