Как радиальный градиент figma перевести в css?
В figma есть квадрат (я не дизайнер и не фронтендер, так что точно объяснтить не могу как он создан), на него наложен радиальный градиент. Перетаскиваю градиент следующим образом — центр ставлю на середину правой грани, вторую точку прямой направляющей градиента ставлю на середину нижней грани, точку которая лежит на перпендикулярной прямой и отвечает за приплюснутость градиента ставлю на середину верхней грани. Если перейти в режим разработчика то фигма превращает это в следующий css:
background: radial-gradient(70.71% 70.71% at 100% 50%, #EFF4F5 0%, #C1C4C6 100%); Если укорачивать перпендикулярную линию, то первое число в CSS уменьшается:
background: radial-gradient(47.17% 70.71% at 100% 50%, #EFF4F5 0%, #C1C4C6 100%); Структуру данного фрейма мы получаем по api, и градиент в ответе описывается следующим образом:
< "blendMode": "NORMAL", "type": "GRADIENT_RADIAL", "gradientHandlePositions": [ < "x": 1.0000001490116865, "y": 0.5000002682209939 >, < "x": 0.5000001490116759, "y": 1.0000002086163384 >, < "x": 0.4999999701976776, // это не грани, для укороченной линии приходит 0.6879759173955349 "y": 2.9802318834981634e-8 // это на грани, для укороченной линии приходит 0.18797598797746545 >], "gradientStops": [ // . ] > По всей видимости элементы в gradientHandlePositions описаны в относительных величинах от высоты и ширины квадрата. Первый элемент описывает центр градиента (и из него наглядно получается часть at 100% 50% из css), второй описывает конец направляющей градиента, а третий описывает точку на перпендикулярной прямой которая регулирует приплюснутость градиент. Но как мне из этих координат получить (47.17% 70.71% at — я зависимости не вижу.
Как в Figma скопировать цветовые и текстовые стили из одного проекта в другой?
Как в Figma скопировать цветовые и текстовые стили из одного проекта в другой?
Не сделать привязку через библиотеку, а именно скопировать все стили (цвет + текст), чтобы их можно было править в новом проекте?
- Вопрос задан более трёх лет назад
- 19673 просмотра
Комментировать
Решения вопроса 0
Ответы на вопрос 3
Степан Воеводин @melpnz Куратор тега Figma
UX/UI дизайнер
очень стал интересен твой вопрос, долго искал и капался, но вроде нашёл.
Если сделать просто Dublicate файла, то он скопирует и файл и стили, при это без привязки к Team Library
Ответ написан более трёх лет назад
Нравится 1 1 комментарий
градиент нужно скопировать в другой объект
Имеется объект (1), залитый градиентом. Требуется получить другой объект (2), залитый этим градиентом, так, чтобы эти градиенты совпадали 1 в 1. Любые манипуляции с новым объектом дают в результате неудовлетворительный вариант (3). В примере объект 2 — это то, что нужно. Но создан он копированием объекта 1 и запихиванием его в маску. Такой вариант не подходит. Нужно или новый объект залить градиентом, или объект с градиентом уменьшить/увеличить, не трансформируя при этом градиент.
В Кореле, например, можно скопировать объект 1, выделить два верхних «ушка» и потянуть вниз. При этом размер объекта изменится, а градиент останется неизменным.
Как быстро сделать градиент в Figma — пошаговая инструкция
Как бесплатный графический редактор, Figma имеет большую популярность. Программа предоставляет массу инструментов для реализации различных задумок. Один из таких инструментов — градиент. Он уже долгие годы находится в трендах дизайна и используется в проектах разной направленности. В этой статье вы найдёте информацию о том, как сделать красивый градиент в Фигме, что нужно для эффекта прозрачности, как использовать заливку для фото и сделать плавный переход. Мы расскажем о простых способах создания градиента и более сложных — для интересного и красочного результата.
Стандартный вариант — встроенные инструменты для создания градиента в Figma
Первый способ — наиболее понятный и простой. Для него мы будем использовать встроенные инструменты Фигмы. Чтобы создать градиент, необходимо выделить область, на которой он будет применяться — это может быть фигура любой из форм, например, квадрат или прямоугольник, а также текст. После выделения в правом боковом меню возникнет строка Fill — она нужна для управления цветом и прозрачностью. Вы увидите значение Solid, вместо него нужно выбрать один из предложенных вариантов:
- Linear — вы получите линейный градиент,
- Radial — для создания радиального градиента,
- Angular — подходит для углового градиента,
- Diamand — вы сможете сделать градиент в виде кристалла.
Если вы хотите изменить цвет фона, заранее нажмите на иконку цвета. Заливку можно сделать плавной или же наоборот — с резким переходом. Здесь можно добавить красивый оттенок к уже существующему, чтобы посмотреть сочетания цветов и определиться с цветовой гаммой. После выбора одного из градиентов попробуйте передвигать ползунки и следите за тем, как меняется картинка. У каждого из видов есть свои особенности.
Освоить навыки графического дизайна и сразу начать работать в Figma можно на онлайн-курсах от Pentaschool, Нетологии, Contented, МИПО и Логомашины. Ещё больше курсов по направлению дизайна на нашем портале.
Линейный градиент создаётся при помощи двух точек, размещённых на фоне. Их можно перемещать по плоскости, чтобы получать более плавный переход от одного оттенка к другому. Здесь можно выбирать неограниченное количество цветов и совмещать их друг с другом — чтобы добавить новый, достаточно щелкнуть на градиентную линию. Принцип такой — чем больше точек между двумя или более оттенками вы поставите, тем плавнее будет переход.
Радиальный или круговой градиент представляет собой инструмент, в основе которого лежит окружность с возможностью увеличивать и уменьшать радиус перехода. Вы можете менять точки, добавлять и удалять их — эффект получается очень красивый засчёт постепенного распыления цвета.
Угловой градиент подходит для создания неоднородной заливки и резкой смены оттенков. Пользователь управляет инструментом при помощи круга — так удобнее менять угол наклона и добавлять цвета.
В кристальном градиенте в центр фигуры помещается кристалл — есть возможность менять его размеры и контролировать ширину распыления.
Сложный градиент в Figma
Создать сложный красивый градиент можно за пару минут — его так называют из-за большого количества оттенков и глубины цвета. Рассмотрим два варианта — сделать такой градиент можно без плагина и с ним.
Для работы без плагина понадобится чистый фон, на котором нужно в хаотичном порядке разместить фигуры. Следующий шаг — раскрасить их в разные цвета. После этого необходимо в боковой панели справа найти пункт Effects и выбрать Layer blur — вы можете менять значения в виде цифр. Результат будет мягче или же сдержаннее в зависимости от выбранных параметров. Если хотите получить эффект тумана, добавьте настройку Noize.
Плагин Mesh Gradient поможет сделать красочный градиент довольно быстро. Для начала нужно установить его и запустить. После запуска вы увидите широкое меню настроек — точки регулирования в плагине называются «Mesh points». При их помощи можно добавлять цвета, регулировать насыщенность и направление градиента. На одном фоне возможно разместить до 16 точек — это позволяет сделать градиент сложным и уникальным. Кнопки в пункте «Control Visibility» облегчает работу с основными точками, их добавлением и контролем. Значение «None» предназначено для предпросмотра — вы можете оценить градиент перед сохранением. Готовый эффект можно использовать отдельно или разместить на фото. Как это сделать — читайте чуть ниже.
Как сделать градиент на фото в Фигме?
Градиенты отлично смотрятся не только в качестве отдельного элемента дизайна — они интересно сочетаются с изображениями и фото. Чтобы добавить градиент на фото, нужно разместить его на рабочей области. Сделать это можно несколькими способами:
- В основном меню в верхнем углу слева выбрать пункт File, затем нажать Place Image. Так вы сможете быстро загрузить картинку с компьютера.
- Нажать Ctrl+Shift+K и выбрать нужное фото.
- Перенести фото из нужной папки в рабочую область.
После добавления фотографии в рабочую область ей нужно задать соответствующий размер, чтобы градиент был по всем границам изображения. Для этого потяните за уголки фото и сделайте так, чтобы оно точно подходило под основной фон. Следующий шаг — добавление новой фигуры при помощи клавиши «Rectangle», которая находится в верхней строке посередине, обозначается в виде квадрата.
Эту фигуру необходимо наложить на фото и уже после приступать к настройкам. Вы можете выбрать любой из градиентов, описанных выше — например, угловой или кристалл. Чаще всего дизайнеры в работе выбирают линейный градиент. Во-первых, он считается универсальным, во-вторых, с ним проще работать в плане сочетания оттенков, подбора прозрачности.
Погружение в Figma
Изучайте Figma прямо из дома с помощью онлайн-курсов. Лучшие варианты обучения ищите в подборке, курсы в которой мы сравнили по разным показателям для вашего удобства.