Как сделать полукруг в фигме

Обновлено: 02.07.2024

Несмотря на то, что использование HTML 5 Canvas и SVG может оказаться более элегантным решением, в этом уроке мы узнаем, как создать полукруглую диаграмму на чистом CSS.

Чтобы понять, что мы собираемся создать, взгляните на готовое демо на CodePen:

HTML разметка

Начнем с простой разметки; чистый неупорядоченный список с элементом span в каждом из элементов списка:

Добавляем стили списку

С готовой разметкой приступаем к приданию парочки простых стилей нашему списку:

Затем, каждому из элементов списка мы дадим по ::after и ::before псевдо-элементу, а затем дадим им стили:

Обратите внимание на стили для псевдо-элемента ::before . Это даст нам наш полукруг.

Псевдо-элементы

Итак, вышеупомянутые правила дадут нам следующий результат:

Добавляем стили элементам списка

Давайте обсудим стили для элементов списка.

Позиционирование

Не забывая про позиционирование элементов списка, сделаем следующее:

Расположим их прямо под их родительским элементом и
дадим им соответствующие стили, чтобы создать обратный полукруг.

Далее следует упомянуть еще пару вещей:

Элементы списка имеют position:absolute, так мы можем выставить их z-index правильным образом.
Мы изменим изначальное значение transform-origin (например, transform-origin: 50% 50% ) элементов списка. В особенности, установим transform-origin: 50% 0 . В этом случае, когда мы начнем поворачивать предметы, их центральный верхний угол окажется точкой, вокруг которой будет происходить вращение.

Вот необходимые стили CSS:

Посмотрите, что мы сделали, на следующей визуализации:

элементы меню и span

Сейчас виден только зеленый элемент меню ( z-index которого равен 4). Остальные находятся под ним.

Анимации

Прежде чем приступить к анимациям, давайте укажем желаемые процентные значения для каждого элемента (например: сколько каждый элементов займет места на полукруге). Ознакомьтесь со следующей таблицей:

Язык	Проценты
CSS	12
HTML	32
PHP	34
Python	22

Затем, мы посчитаем, на сколько градусов нам нужно будет анимировать (повернуть) каждый из наших элементов. Чтобы узнать точное число для каждого элемента, умножим его процентное число на 180° (не 360° потому что у нас полукруг):

Язык	Проценты	Градус
CSS	12	12/100 * 180 = 21.6
HTML	32	32/100 * 180 = 57.6
PHP	34	34/100 * 180 = 61.2
Python	22	22/100 * 180 = 39.6

Затем задаем уникальные значения стиля анимации:

Заметьте, что мы добавляем задержку всем элементам, кроме первого. В этом случае создаем последовательные анимации. Например, когда кончается анимация первого элемента, начинается анимация второго, и т.д.

Вторым шагом зададим конкретно анимации:

Прежде, чем двигаться дальше, посмотрим, как работают анимации:

Первый элемент идет от transform: none к transform: rotate(21.6deg) .

Второй от transform: rotate(21.6deg) (начинается с последней позиции первого элемента) к transform: rotate(79.2deg) (57.6deg + 21.6deg).

Третий от transform: rotate(79.2deg) (начинается с последней точки второго элемента) к transform: rotate(140.4deg) (61.2deg + 79.2deg).

Четвертый от transform: rotate(140.4deg) (начинается с последней позиции третьего элемента) к transform: rotate(180deg) (140.4deg + 39.6deg).

Прячьте!

Последнее, но не менее важное, это спрятать вторую половину диаграммы снизу, для этого добавим следующее:

overflow: hidden показывает нам, что видна только первая половина круга (та, что с ::before псевдо-элементом) Не стесняйтесь удалить это свойство, если вам интересно посмотреть на начальные позиции элементов списка.

transform-style: preserve-3d и backface-visibility: hidden предотвращают нежелательные дерганья анимаций в различных браузерах. Если проблема не решилась, попробуйте эти решения.

Почти готово! Осталось только задать стили названиям секций, чем мы займемся в следующем разделе.

Вот CodePen демо, показывающее нашу текущую диаграмму:

Задаем стили названиям секций

В этом разделе мы зададим стили названиям секций нашей диаграммы.

Позиционирование

В зависимости от их положения, делаем следующее:

Даем им position: absolute и используем top и left , чтобы задать желаемое положение.
Используем негативные значения, чтобы повернуть их. Конечно, значения не с потолка. На деле, они взяты из последнего куска родительского элемента. Например, последний момент второго элемента списка это transform: rotate(79.2deg) , а значит мы используем transform: rotate(-79.2deg).

Ниже представлен соответсвующий код CSS:

Анимации

Теперь, когда мы разместили наши названия, самое время задать им анимации. Стоит упомянуть две вещи:

По умолчанию, все названия спрятаны и появляются только когда начинается анимация их родительского элемента.
Потому мы также, как и в случае с их родительскими элементами, используем animation-delay , чтобы сделать последовательную анимацию. Также добавляем backface-visibility: hidden , чтобы убедиться в отсутствии дерганий в различных браузерах.

CSS код анимаций представлен ниже:

Вот наш конечный результат:

Поддержка браузеров и возможные проблемы

В целом, демо отлично работает во всех браузерах. Хочу лишь обсудить две небольшие проблемы, связанные с border-radius .

Во-первых, если бы мы задали разные цвета нашим элементам, диаграмма могла бы выглядеть так:

Обратите внимание на верхний и нижний угол третьего элемента. Там две красные линии, которые идут от border-color четвертого элемента. Мы видим эти лини потому что четвертый элемент имеет более темный цвет границы, чем третий элемент. Хоть это и мелкая проблема, хорошо о ней знать.

Во-вторых, в Safari диаграмма появляется следующим образом:

Заключение

В этом уроке мы создали полукруглую диаграмму на чистом CSS. Вновь, как упоминалось во вступлении, есть более мощные решения (HTML5 Canvas и SVG) для создания вещей подобного рода. Однако, если вам нужно что-то простое и легкое, при этом с вызовом, тогда CSS идеально подойдет!

Квадрокруг — особая форма значка, которая становится все более популярной в UI-дизайне. Часто используется в приложениях iOS.

В Figma создать такой элемент просто.

Перейдите к настройкам радиуса на правой панели и выберите параметр для отображения отдельных углов. Теперь щелкните значок меню, и вы увидите возможность создания радиуса прямоугольной формы. Также на панели можно выбрать фигуры, похожие на элементы интерфейса iOS.

Совет 2: Использовать имя цвета вместо HEX

По умолчанию цвета в Figma обозначаются в формате HEX. Однако эту настройку можно поменять. Для этого введите имя цвета во входных данных, где обычно отображается шестнадцатеричное значение. Вот пример результата:

Имя можно придумать любое, насколько хватает фантазии. Нельзя сказать чтобы эта функция имела практическую пользу, но она точно добавит удовольствия от использования программы.

Совет 3: Как быстро переименовать фрейм

Как правило, для изменения имени фреймов используют горячие клавиши CTRL + R (для Windows) и CMD + R (для iOS). На самом деле достаточно дважды щелкнуть на текущее имя фрейма на холсте, и оно будет доступно для редактирования.

Совет 4: Как отрегулировать размер текстового слоя в соответствии с содержимым

Чтобы размер текстового слоя имел ту же ширину, что и его содержимое, достаточно двойного щелчка по правому краю слоя. Все произойдет автоматически.

Совет 5: Как обойти ограничения при изменении размера фрейма

В Figma при изменении размера родительского фрейма все остальные внутренние элементы автоматически расширяются или сворачиваются. Однако это не всегда уместно.

Чтобы обойти эту автоматическую настройку, необходимо перетаскивать край фрейма, удерживая клавишу CTRL (для Windows) или CMD (для iOS). Благодаря этому ограничения будут игнорироваться. Изменение ширины или высоты фрейма никак не отразится на элементах внутри.

Совет 6: Предварительный просмотр элементов в режиме контуров

Режим контуров (outline) полезен, если нужно убедиться, что структура компонента или фрейма выполнена правильно.

Нажмите клавиши CTRL + Y (для Windows) или CMD + Y (для iOS), чтобы активировать режим контуров. Нажмите ярлык еще раз, чтобы выключить его.

Совет 7: Как копировать и вставлять эффекты

Чтобы скопировать эффект или стиль в Figma, щелкните край строки с параметром. После этого скопируйте с помощью клавиш CTRL + С (для Windows) или CMD + С (для iOS), затем выберите целевой слой и нажмите CTRL + V (для Windows) или CMD + V (для iOS).

Такая функция существенно экономит время.

Совет 8: Как группировать с помощью фрейма

Используйте комбинацию клавиш CTRL + ALT + G (для Windows) или CMD + OPTION + G (для iOS) чтобы объединить элементы внутри фрейма, а не только стандартную группу.

Группировка фреймом предпочтительнее стандартной группы, так как впоследствии элементы можно быстро превратить в компоненты, использовать автоматический макет и так далее.

Совет 9: Как заменять компоненты функцией стрелок

Заменять компоненты и перемещаться по ним можно с помощью функции стрелок. Это удобнее, чем щелкать мышкой по каждой позиции меню.

Совет 10: Как настроить переключение между вариантами

Дополнительный совет: как перемещать компоненты между документами

До августа 2021 года в Figma не было простого способа перенести компоненты в другую библиотеку. Для этого необходимо было воссоздавать их.

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

Что такое Figma

Раньше команде дизайнеров было сложно одновременно работать над одним проектом, показывать готовые варианты клиентам и отдавать макеты разработчикам. Чтобы открыть макет, нужно было скачивать, устанавливать и настраивать отдельные программы типа Adobe Photoshop.

Возможности Figma

Создание прототипов

Отрисовка элементов интерфейса

Работа с векторными объектами

Создание блок-схем

Плюсы и минусы Figma

Перед началом использования сервиса, важно узнать о его сильных и слабых сторонах.

Не работает без интернета

Ограниченные возможности работы с текстом

В программе нельзя сделать отступ между абзацами, поставить межбуквенный интервал и настроить интерлиньяж

Чтобы начать самостоятельную работу нужна только регистрация в сервисе, все инструменты программы доступны сразу, также в бесплатной версии можно давать доступ на просмотр документа. Для совместной работы необходимо выбрать платный тариф

Нельзя добавить плагины

Нельзя настроить горячие клавиши

Основные инструменты Figma

Фреймы

Модульная сетка

Сетка — это линии и клетки, которые позволяют выравнивать и упорядочивать все объекты дизайна во фрейме. Сетки создаются через панель Grid Layout. В сервисе можно поменять цвет сетки, растянуть её или настроить нужный размер, в одном макете можно использовать неограниченное количество сеток.

Компоненты

Компоненты — это объекты пользовательского интерфейса, которым можно задавать общие стили и при необходимости быстро их изменять. Допустим, вы создали макет из 30 страниц, а заказчик попросил поменять шрифт в заголовках, чтобы не менять всё вручную, можно использовать компоненты и заменить шрифт лишь в одном заголовке, остальные изменятся автоматически.

Векторные формы

В онлайн-сервисе есть основные векторные объекты: прямоугольник, линия, треугольник, стрелка, круг и звезда. Они позволяют отрисовывать кнопки, плашки и другие элементы интерфейса. Создать векторные объекты можно инструментом Shape Tool.

Изображения

В макет можно добавить любое изображение и начать работу с ним. Для этого нужно открыть панель File и использовать инструмент Place Image или просто перетащить нужные картинки с рабочего стола.

История версий

Все изменения, внесённые в документ, автоматически сохраняются в облаке. При совместном доступе можно отслеживать историю действий каждого сотрудника, просматривать и восстанавливать предыдущие версии документа. Также всем версиям можно присвоить названия.

Кому пригодится Figma

Изначально программа создавалась для дизайнеров, но сейчас ей пользуются люди самых разных профессий. Рассказываем кому и как сервис помогает решать рабочие задачи.

Дизайнерам

Дизайнеры могут создавать интерактивные прототипы будущих веб-сайтов, сервисов и приложений, а также работать с векторной графикой.

Разработчикам

Блогерам

Smm-специалистам

Smm-специалисты могут использовать многочисленные шаблоны для постов в соцсетях, чтобы создавать баннеры для ютуба, рекламу в инстаграме и др. А также создавать рекламные объявления на основе готовых шаблонов для фейсбука.

Менеджерам

Редакторам

Редакторы могут схематично отрисовывать иллюстрации к статьям и передавать их в работу дизайнерам, а также создавать диаграммы и блок-схемы для управления редакцией.

Начало работы в Figma

Для начала работы нажмите кнопку Sign up в правом верхнем углу, чтобы зарегистрироваться в сервисе

Для регистрации нужно ввести адрес электронной почты и сгенерировать пароль.

После регистрации вы можете начать работу над своим первым проектом. Чтобы открыть рабочую область нажмите на крестик рядом с вкладкой Drafts. Все файлы, которые вы открывали ранее, можно увидеть во вкладке Recent, она находится выше.

Так создаётся новый файл

После того как откроется рабочая область, создайте фрейм и задайте размер вашему будущему макету. Можно ввести данные самостоятельно в поле Design либо выбрать размер из готовых шаблонов.

Начать работу совсем несложно. Это простая и интуитивно понятная программа, но чтобы освоить все её тонкости и дополнительные возможности, придётся потратить время: посмотреть ролики на ютубе и почитать обучающие статьи. В сети можно найти много роликов по работе с онлайн-сервисом. Также разработчики создали большую базу знаний, найти ответ на интересующий вопрос или инструкцию по применению того или иного инструмента можно на сайте Figma.center. Если нет много времени на освоение сервиса, можно выбрать более короткий путь.

Как быстро освоить онлайн-сервис Figma

Срок обучения: 1 месяц

Стоимость обучения: бесплатно

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

Срок обучения: 3 дня

Стоимость обучения: бесплатно

Срок обучения: 4 месяца

Стоимость обучения: 22 400 руб.

Коротко о главном

Figma – это бесплатный графический онлайн-редактор, популярный среди дизайнеров и создателей контента. В нем есть встроенные инструменты для создания базовых вариантов градиента, а для более сложных вариантов оформления есть бесплатные плагины.

Для примера создадим новый фрейм: жмем кнопку с решеткой или букву F и растягиваем фрейм до нужной величины (как альтернатива – выбираем необходимый размер фрейма в боковом меню).

Для управления цветовым фоном любого объекта необходимо кликнуть на него, тогда в боковом меню появится строка Fill. Она содержит информацию о текущем цвете фона и его прозрачности. Чтобы изменить фон, необходимо щелкнуть на иконку цвета.

Solid – сплошная заливка;
Linear – линейный градиент;
Radial – радиальный градиент;
Angular – угловой градиент;
Diamond – градиент в виде кристалла;
Image – вставка картинки.

По сплошной заливке и вставке картинки и так всё понятно. Рассмотрим каждый вариант по созданию градиента.

Линейный градиент

Выбираем в списке Linear – линейный градиент. На объекте появляются две точки, которые можно перемещать для создания более плавного или резкого перехода. Можно выбрать любое нужное количество цветов для градиента. Для добавления еще одного цвета просто щелкаем на градиентной линии. Чем больше точек, тем более плавным будет переход.

Здесь же можно управлять прозрачностью цвета, двигая ползунок в разные стороны.

Радиальный (круговой) градиент

Не меняя оттенки, посмотрим, как будет выглядеть градиент Radial из списка.

Ползунки на объекте можно двигать и получать разнообразный эффект — цвет распыляется, как вам угодно.

Угловой градиент

Градиент Angular создает острый угол, вокруг которого образуется градиент. С помощью круга в центре можно управлять расположением угла и цветов вокруг него.

Градиент в виде кристалла

Diamond создает в центре распыление одного из выбранных цветов в виде кристалла. С помощью направляющих внутри него можно изменять его размеры.

Как добавить градиент на фото

Градиент можно добавить на фото, чтобы оно смотрелось интереснее. Такой эффект используют, например, при создании баннеров. Для этого сначала создаем фрейм, как описано выше, затем добавляем нужное изображение в рабочую область. Это можно сделать по крайней мере тремя способами:

Выбрав Rectangle, мы добавляем его на наш фрейм. Можно сделать эту фигуру любых размеров, растянув его затем до размеров фрейма.

У созданной фигуры меняем описанным уже способом заливку с Solid на любой из понравившихся градиентов. Стандартное решение у дизайнеров и создателей контента – вариант Linear. Он подходит практически для любых макетов. Выбираем у него цвета, их прозрачность и направления градиента, как нам покажется нужным.

Ниже слева располагаются основные цвета градиента — по одному на каждый угол.

При перетаскивании Mesh points создаются более сложные направления цветов в градиенте (по сравнению с возможностями встроенных инструментов).

Webgradients для подбора идеальных сочетаний цветов градиента

У этого сервиса есть также специальный плагин для Фигмы. После установки кликните на понравившийся вам градиент в появившемся окошке, и он тут же применится к активному объекту. Подправим прозрачность, и наша картинка обладает новым цветовым решением.

Читайте также: