Содержание статьи
Рамки в Figma – это не просто декоративный элемент, а функциональный инструмент для структурирования макетов, выделения контента и улучшения визуальной иерархии. В отличие от простых линий или обводок, рамки поддерживают вложенные слои, авторазмеры, ограничения (constraints) и интеграцию с компонентами. Среднее время создания базовой рамки – 15–30 секунд, но правильная настройка параметров экономит часы при масштабировании проекта.
Для работы с рамками используйте панель Layers (горячая клавиша Ctrl/Cmd + 1) и инструмент Frame (F). Выделите область на холсте или выберите существующий слой – Figma автоматически предложит создать рамку вокруг него. По умолчанию рамка наследует размеры содержимого, но вы можете задать фиксированные значения в панели Design (Shift + D) или растянуть её вручную за угловые маркеры.
Ключевые параметры рамки, которые стоит настроить сразу:
- Background – заливка (цвет, градиент или изображение).
- Stroke – обводка (толщина, цвет, положение: Inside/Outside/Center).
- Corner Radius – скругление углов (единое значение или индивидуальное для каждого угла).
- Padding – внутренние отступы (автоматически учитываются при выравнивании контента).
- Constraints – поведение при изменении размеров родительского контейнера.
Для сложных рамок с тенью или несколькими обводками используйте Effects (Drop Shadow, Inner Shadow, Layer Blur). Например, эффект Drop Shadow с параметрами X: 0, Y: 4, Blur: 8, Spread: 0, цвет #000000 с непрозрачностью 15% создаёт реалистичную тень под рамкой. Избегайте чрезмерного использования эффектов – это увеличивает вес файла и замедляет рендеринг.
Рамки можно превращать в компоненты (Ctrl/Cmd + Alt + K) для повторного использования. При этом настройте variants (например, для состояний Default/Hover/Active) и auto layout (если рамка должна динамически подстраиваться под контент). Для экспорта рамки как отдельного элемента выделите её и нажмите Ctrl/Cmd + Shift + E – Figma предложит форматы PNG, SVG, JPG или PDF с настраиваемым разрешением.
Создание рамки в Figma: пошаговое руководство
Для создания рамки с обводкой добавьте слой Rectangle (R) внутри фрейма. В панели Design установите параметры обводки: толщину (например, 2px), цвет (#000000 или любой другой в HEX/RGB) и тип линии (сплошная, пунктирная, точечная). Для пунктирной рамки укажите значения Dash и Gap – например, 4 и 2 соответственно.
Чтобы рамка не перекрывала содержимое, используйте свойство Stroke Position. Варианты:
| Позиция | Эффект |
|---|---|
| Inside | Обводка рисуется внутри границ фигуры, не увеличивая её размер |
| Center | Обводка делится поровну между внутренней и внешней сторонами |
| Outside | Обводка выходит за границы фигуры, увеличивая её габариты |
Для сложных рамок с закруглёнными углами или градиентной обводкой используйте комбинацию слоёв. Создайте два прямоугольника: один с фоном, другой – с обводкой. Примените к верхнему слою скругление углов (Corner Radius) через панель свойств или вручную перетаскивая маркеры на углах. Градиентную обводку настройте в разделе Stroke, выбрав тип Gradient и задав цветовые точки.
Автоматизируйте создание рамок с помощью компонентов. Выделите готовую рамку, нажмите Ctrl+Alt+K (Windows) или Cmd+Option+K (Mac), чтобы превратить её в компонент. Теперь при изменении основного компонента все его экземпляры обновятся автоматически. Это особенно полезно для системного дизайна, где рамки используются многократно (например, карточки товаров, модальные окна).
Для экспорта рамки в код или другие инструменты используйте плагин Anima или встроенный экспорт Figma. Выделите рамку, перейдите в панель Export и выберите формат (SVG, PNG, PDF). SVG сохранит векторные свойства обводки, а PNG – пиксельную точность. При экспорте в SVG проверьте параметр Outline Stroke, чтобы обводка не превращалась в отдельный путь.
Выбор инструмента для рисования рамки в панели инструментов
В Figma для создания рамок доступны два основных инструмента: Rectangle (R) и Frame (F). Первый подходит для простых геометрических фигур с возможностью настройки обводки, заливки и радиуса углов. Второй – для контейнеров с расширенным функционалом: авторазмером, вложенными слоями и поддержкой ограничений (constraints). Выбор зависит от задачи: Rectangle – для декоративных элементов, Frame – для структурных блоков.
Инструмент Rectangle позволяет задать толщину обводки в пикселях (от 0 до 100+), выбрать тип линии (сплошная, пунктирная, штриховая) и настроить положение обводки относительно границ фигуры (внутри, снаружи, по центру). Для точной настройки используйте панель Design справа: параметр Stroke регулирует толщину, а Stroke Align – выравнивание. Радиус углов настраивается ползунком или вводом числового значения.
Если требуется рамка с динамическим содержимым, выбирайте Frame. Он поддерживает вложенные слои, что упрощает работу с текстом, изображениями или другими элементами внутри рамки. В отличие от Rectangle, Frame автоматически подстраивает размер под содержимое при включенной опции Auto Layout. Обводка настраивается аналогично, но с дополнительными возможностями: например, можно задать отступы (Padding) и выравнивание содержимого.
Для рамок с нестандартной формой используйте инструмент Pen (P) или Vector (V). С их помощью можно рисовать произвольные контуры, а затем применять к ним обводку через панель Stroke. Этот метод подходит для дизайна с уникальными геометрическими решениями, но требует больше времени на настройку точек кривой и сегментов. Готовый векторный контур можно преобразовать в компонент для повторного использования.
При работе с рамками учитывайте масштабирование: обводка в Figma не масштабируется пропорционально при изменении размера объекта. Чтобы сохранить толщину обводки неизменной, фиксируйте её значение в пикселях или используйте Scale Tool (K) с отключенной опцией Scale Strokes & Effects. Для адаптивных макетов предпочтительнее Frame с ограничениями, чтобы рамка корректно отображалась на разных экранах.
Настройка параметров рамки: толщина, цвет и стиль границы
Выделите рамку в Figma, чтобы открыть панель Design справа. В разделе Stroke настройте толщину границы – значения задаются в пикселях. Для стандартных макетов оптимальна толщина 1–2px, для акцентных элементов – 3–4px. Избегайте значений выше 8px, если это не часть дизайн-системы с заранее определёнными правилами.
Цвет границы выбирайте через палитру или ввод HEX-кода. Для корпоративных интерфейсов используйте фирменные оттенки, например, #2A5C8A для профессионального стиля. В минималистичных макетах примените полупрозрачные границы (RGBA 0,0,0,0.1) для деликатного разделения блоков. Не сочетайте более двух цветов границ в одном компоненте – это усложняет восприятие.
Стиль границы настраивается в выпадающем списке Stroke. Доступны варианты: Solid (сплошная), Dashed (пунктирная) и Dotted (точечная). Сплошная линия универсальна, пунктирная (Dash: 4, Gap: 2) подходит для временных состояний, точечная – для декоративных элементов. Избегайте пунктирных границ толще 2px, так как они теряют чёткость.
Для создания двойной границы добавьте второй слой Stroke через кнопку + в панели. Внутренний слой сделайте тоньше (1px) и светлее, внешний – толще (3px) и темнее. Такой приём работает для карточек товаров или модальных окон. Убедитесь, что суммарная толщина не превышает 5px, иначе элемент будет выглядеть перегруженным.
Настройте положение границы относительно рамки: Inside (внутри), Center (по центру) или Outside (снаружи). Для кнопок и интерактивных элементов используйте Inside, чтобы граница не влияла на размеры при наведении. Для контейнеров с фоном выберите Center – это сохранит пропорции при изменении толщины.
Скругление углов рамки задаётся в разделе Corner Radius. Для границ с радиусом 8px и более увеличьте толщину до 2px, чтобы избежать визуального разрыва на углах. Если радиус превышает 20px, откажитесь от пунктирных и точечных стилей – они плохо отображаются на кривых линиях.
Сохраните настройки как Style, чтобы применять их к другим элементам. Нажмите на иконку ✨ рядом с разделом Stroke и выберите Create Style. Дайте стилю понятное имя, например, Border/Primary/2px/Solid. Это ускорит работу в больших проектах и обеспечит единообразие.
Экспортируйте рамку с границами в SVG или PNG, если требуется использовать её в коде. В SVG границы сохраняются как отдельные атрибуты stroke-width, stroke и stroke-dasharray, что позволяет гибко настраивать их через CSS. Для PNG выберите разрешение 2x или 3x, чтобы границы оставались чёткими на ретиновых экранах.
Создание рамки с закруглёнными углами и регулировка радиуса
Выделите фрейм или фигуру в Figma. В правой панели найдите раздел «Corner radius» – здесь задаётся радиус скругления. По умолчанию углы прямые (значение 0), но достаточно ввести число, чтобы получить закругления. Для равномерного скругления всех углов используйте одно значение, например, 8 для мягких углов или 24 для выраженного эффекта «пилюли».
Чтобы настроить углы по отдельности, кликните на иконку независимого скругления (квадрат с точками в углах) рядом с полем ввода. Появятся четыре поля: Top Left, Top Right, Bottom Right, Bottom Left. Вводите значения для каждого угла – например, 16 для верхних и 4 для нижних, чтобы создать асимметричный дизайн. Figma поддерживает дробные значения (до двух знаков после запятой), что полезно для точной настройки.
- Для быстрого копирования радиуса между объектами используйте горячие клавиши:
Ctrl+C(скопировать стиль), затемCtrl+Alt+V(вставить только радиус). - Если радиус превышает половину высоты или ширины фигуры, углы превратятся в полукруг. Например, для квадрата 100×100 px максимальный радиус –
50. - В режиме «Scale» (масштабирование) радиус изменяется пропорционально размеру объекта. Чтобы сохранить исходный радиус при масштабировании, переключитесь на режим «Fixed».
Для создания рамки с закруглёнными углами на основе текста или векторных элементов используйте инструмент «Frame» (F). Нарисуйте фрейм нужного размера, затем в разделе «Stroke» добавьте обводку (например, 2 px чёрного цвета). В «Corner radius» задайте радиус – обводка автоматически подстроится под скругления. Если обводка не отображается корректно, проверьте параметр «Stroke alignment»: для рамки выбирайте «Inside» или «Center».
Для динамического изменения радиуса в прототипах используйте переменные. Создайте числовую переменную (например, borderRadius) со значением 8, затем привяжите её к параметру «Corner radius» через иконку ромба рядом с полем ввода. Теперь при изменении переменной радиус будет обновляться во всех связанных элементах. Это удобно для тестирования разных вариантов скруглений без ручной правки каждого объекта.
Добавление тени или обводки для объёмного эффекта рамки
Тень и обводка – ключевые инструменты для создания иллюзии глубины. В Figma настройте их через панель Effects или Stroke в правой боковой панели. Для начала выделите рамку и перейдите во вкладку Design.
Для тени используйте параметр Drop Shadow. Стандартные настройки: X: 0, Y: 4, Blur: 8, Spread: 0 с цветом #000000 и непрозрачностью 20%. Эти значения подходят для лёгкого объёма, но для выраженного эффекта увеличьте Blur до 12-16 и Y до 6-8.
- Внутренняя тень (Inner Shadow) создаёт эффект вдавленности. Задайте
X: 0, Y: 2, Blur: 4с цветом фона или контрастным оттенком. - Множественные тени комбинируйте для сложных эффектов. Например, сочетайте Drop Shadow (внешняя) и Inner Shadow (внутренняя) с разными параметрами.
Обводка добавляется через Stroke. Для объёма используйте градиентную заливку или несколько слоёв обводки. Первый слой – тёмный (#333333), второй – светлый (#FFFFFF), смещённый на 1px вниз и вправо. Это имитирует подсветку.
Толщина обводки зависит от размера рамки. Для элементов 200×200px оптимально 1-2px, для крупных – 3-4px. Избегайте значений выше 5px: они визуально «утяжеляют» дизайн.
- Выделите рамку и нажмите + в разделе Stroke.
- Выберите тип обводки: Center (по центру), Inside (внутрь) или Outside (снаружи). Для объёма предпочтителен Inside.
- Настройте цвет и прозрачность. Для реалистичного эффекта используйте градиент с переходом от
#000000 10%кtransparent.
Для динамичных рамок применяйте анимацию теней. В Figma это реализуется через Smart Animate в прототипах. Создайте два состояния рамки: с тенью Y: 2, Blur: 4 (обычное) и Y: 6, Blur: 12 (наведение). Переход между ними усилит ощущение интерактивности.
Тестируйте эффекты на разных фонах. Тёмные тени теряются на чёрном, светлые – на белом. Для универсальности используйте полупрозрачные оттенки (#000000 15-30%) или адаптивные цвета через переменные Figma. Пример: тень --shadow-color с динамическим значением в зависимости от темы.
Загрузка...
