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

Как нарисовать круговые диаграммы в Figma?

• Нарисуйте кружок
• Выделите его
• Появится маркер, позволяющий отрезать нужное значение
• Снова выделите
• Появятся три маркера: радиус дырки и радиус закругления

Ответ написан более трёх лет назад

Нравится 6 1 комментарий

Круговые диаграммы в Figma

Для создания круговых диаграмм в Figma предусмотрен инструмент Arc. Применить его можно только к кругу, который вы можете создать с помощью инструмента Ellipse.

Эта функция доступна «из коробки» на всех тарифных планах и не требует установки плагина.

Чтобы сделать использовать Arc, создайте круг (с соотношение длины и ширины 1:1), и наведите на его курсор.

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

Потянув за эту точку, вы создадите разрыв, а также увидите вторую точку — финиш разрыва (Sweep). При этом точка старта будет регулировать расположение разрыва, а точка финиша — его угол. Если вы будете изменять положение точки старта, положение точки финиша будет изменяться автоматически.

Чтобы сделать отверстие в центре круга, потяните за точку в центре (Ratio).

Чтобы сделать замкнутое кольцо, соедините точки старта (Start) и финиша разрыва (Sweep).

Для заливки можно использовать либо заливку (Solid), либо градиент Angular.

Топ-20 лучших плагинов для Figma в 2023

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

Iconify

Более 100 наборов значков, например Material Design, FontAwesome, значки Jam, EmojiOne, Twitter Emoji. Просто откройте окно и выберите нужную иконку из наборов. Если не хотите долго искать — используйте поиск, он тоже работает:

Vectary 3D Elements

Добавит третье измерение в ваши 2D проекты. Интеграция работает в обе стороны: можно импортировать изображения из Figma в 3D сцены Vectary, так и наоборот — сделать какой-нибудь объемный объект в Vectary и закинуть его в Figma.

В плагине есть большая библиотека готовых 3D-элементов (например, смартфоны) или вы можете загрузить туда любую 3D-модель по ссылке — например, если у вас в компании есть 3D-моделлеры.

Anima — Export Figma to HTML, React, Vue code

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

�� — Экспорт Figma в код HTML, CSS, React или Vue.

— Создание прототипа на основе кода.

— Возможность поделиться URL-адресом с вашей командой и пользователями.

Unsplash

Красивые картинку сразу в Figma. Теперь не нужно лезть в фотосток в браузере, искать картинки, скачивать, а только потом добавлять в пространство.

Lorem Ipsum

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

Blobs

Создаёт уникальные фигуры. Вы можете выбрать количество точек и сложность элемента в генераторе.

Mockup

Возможность перенести дизайн на экран. Плагин также предлагает готовые варианты дизайна.

Arc

Возможность изогнуть текст вверх, вниз или в круг. Регулируйте, как вам нужно.

Better Font Picker

Помогает выбирать шрифты с помощью предварительного просмотра. Удобнее, чем стандартная выпадашка со шрифтами.

Charts

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

Noise

Создаёт новый слой в виде сгенерированного шума. Вы сами регулируете плотность, контраст и масштаб. А если нажать In__ve__rt, то будет сгенерирован светлый шум на темном фоне_. П__рофилактика_ теперь у вас в Figma.

Mapsicle

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

SkewDat

Исказит любой объект. Можно искажать несколько объектов одновременно и есть возможность вернуться к исходному значению.

Get Waves

Генератор волн создаёт вектор с заливкой. В генераторе есть настройка типа волны, размера и направления.

Illustrations

Бесплатные популярные библиотеки иллюстраций.

Avatars

Генерирует аватарки рандомными людьми в выбранную область. Есть возможность сгенерировать сразу несколько объектов.

Contrast

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

Humaaans for Figma

Готовые иллюстрации людей. Вы можете использовать их отдельно или составлять уникальные иллюстрации.

Autoflow

Рисует линию между выбранными объектами. Есть выбор цвета, толщины, наклон линий. Удобно для рисования блок-схем или для замены Miro.

Blush

Ещё одни готовые иллюстрации. Просто выберите коллекцию, композицию и поместите ее к себе.

Прочие материалы

• 8 полезных плагинов VS Code для вёрстки
• 34 инструмента для веб-разработчика на каждый день
• Фигма или Фотошоп. Что выбрать новичку

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Dev Mode в Figma. Быстрый обзор бета-версии

Если вы читаете эту статью, Dev Mode в Figma наконец-то вышел в открытую бету. Быстренько рассказываем, что это такое, и как его включить и настроить.

Раньше верстальщикам была доступна только вкладка Inspect с базовой информацией о стилях конкретного элемента.

Некоторые разработчики не рекомендовали копировать стили оттуда, потому что всегда это работало с нюансами. Пока сложно сказать, насколько стили стали точнее, но работать стало определённо удобнее. Сами Adobe называют Figma новым пространством для разработчиков, с возможностями, которые помогают быстрее переводить дизайн в код. Давайте проверим.

• 10 августа 2023

Горячие клавиши Figma для быстрой работы

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

Скрыть или показать интерфейс Фигмы (Ctrl + \ или ⌘ + \ для Mac)

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

Быстрый поиск по меню (Ctrl + / или ⌘ + / для Mac)

Эта комбинация клавиш открывает поиск по меню. Это очень удобно, когда вы знаете, что вам нужно, но не помните, где это находится. Просто начните вводить то, что вы ищете, и Figma покажет вам нужный пункт меню. Если пользуетесь Spotlight или PowerToys, вам будет очень удобно.

А если не пользуетесь — попробуйте.

• 7 августа 2023

Старт в Figma для верстальщика

Figma — это онлайн-редактор графики для дизайнеров интерфейсов и веб-разработчиков. Это удобная, бесплатная альтернатива Photoshop.

Большое преимущество платформы — возможность работать прямо в браузере. При этом есть и десктопная версия. Расскажем, что надо знать верстальщику при работе с макетом в Figma.

• 2 августа 2023

Инструменты для работы со шрифтами

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

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

• 29 июня 2023

10 горячих клавиш VS Code, которые ускорят вашу работу

Горячие клавиши — добро, польза и экономия времени. Давайте разберёмся, как с их помощью упростить себе жизнь в Visual Studio Code.

• 13 июня 2023

10 лучших тем для VS Code

VS Code — популярный редактор кода со множеством полезных инструментов. Сегодня мы поделимся с вами 10 темами, чтобы работать стало ещё приятнее. Выбирайте на свой вкус и цвет.

• 11 июня 2023

10 полезных плагинов VS Code для вёрстки

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

Чтобы установить расширения, перейдите во вкладку «Extensions» и в поиске найдите подходящие плагины.

• 9 июня 2023

17 полезных плагинов JavaScript в VS Code

Редактор кода Visual Studio Code помогает быстрее писать код, например, он подчёркивает ошибки красным цветом и показывает подсказки. Но работу можно сделать ещё приятнее, если установить нужное расширение.

Плагинов VS Code много. Здесь мы расскажем об одних из самых популярных — они пригодятся при работе с JavaScript.

• 6 июня 2023

Подборка микроанимаций для фронтенда с CodePen в 2023

⭐ Микроанимация — короткое взаимодействие, которое помогает пользователю лучше сориентироваться в интерфейсе и почувствовать совершенное действие.

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

• 12 апреля 2023

Как собрать проект на Webpack

Webpack — это сборщик модулей для JavaScript-приложений. Он позволяет разделять код на модули, которые затем могут быть импортированы и использованы в других частях приложения. Это полезно для структурирования кода, оптимизации производительности и поддержки сторонних библиотек.

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

• 7 апреля 2023

Горячие клавиши в Фигма (Figma) для быстрой работы дизайнера

Всем привет! Я — графический дизайнер Дмитрия Сугак. Если вы хотите значительно ускорить свою работу в бесплатном редакторе Figma, то вам просто необходимо использовать «горячие клавиши» и комбинации клавиш. Эта статья посвящена хоткеям и самым часто используемым комбинациям клавиш в Фигма. Из-за того, что весь интерфейс программы Figma на английском языке, я буду дублировать английский текст русским переводом, чтобы вам было проще разобраться в назначении тех или иных клавиш и сочетаний.

Keyboard Shortcuts в Фигме

ВАЖНО! В редакторе Figma в отличие от Adobe Photoshop невозможно менять сочетания клавиш так, как вам удобно (подстроить всё индивидуально под себя). Вам придётся использовать те горячие клавиши и те сочетания клавиш, которые предлагают создатели Фигма.

Для начала вам необходимо открыть проект в Фигма или создать новый проект «New design file». Все существующие горячие клавиши в Фигме можно найти в разделе «Keyboard Shortcuts». Этот раздел можно открыть двумя способами:

1. Нажав сочетание клавиш «Ctrl + Shift + ?»
2. Нажав на значок вопроса в правом нижнем углу экрана

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

Чтобы убрать черное окно со всеми комбинациями клавиш просто нажмите на крестик в правом верхнем углу этого окна.

Самые важные комбинации клавиш в Фигма

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

1. Сtrl + C — копировать элемент
2. Сtrl + V — вставить элемент
3. Сtrl + X — вырезать элемент
4. Сtrl + A — выделить все элементы сразу
5. I — инструмент пипетка, выбирайте цвет
6. K — менять размер
7. V — стандартный инструмент выделения и перемещения
8. [ — переместить слой назад, за всеми слоями
9. ] — переместить слой вперед, перед всеми слоями
10. Ctrl + Shift + 4 — показать/спрятать сетки
11. Зажатый Alt — дублировать элементы / фреймы
12. Зажатый Ctrl + колесико мыши — приближаться к объектам и отдаляться от них
13. Зажатый пробел + зажатая левая кнопка мыши — перемещение по рабочей области
14. Shift + A — создать auto layout
15. Ctrl + \ — убрать или показать интерфейс редактора Фигма

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

Все горячие клавиши в Фигма с переводом на русский и описанием

Сочетание клавиш «Ctrl + Shift + ?» откроет внизу экрана окно чёрного цвета. Это вкладка Essential (в переводе с английского — «существенное», «важное»).

Во вкладке Essential можно:
1. (Show/Hide UI) Ctrl + \ — скрыть или вывести на экран интерфейс Фигмы;
2. (Pick Color) I — выбрать «пипеткой» цвет или оттенок из любого объекта и применить его в своей работе;
3. (Quick Actions) Ctrl + / — быстро найти плагины, слои или команды в Фигме.

Вкладка Tools (или инструменты):

• (Move tool) V — выделение и перемещение объектов в рамках проекта;
• (Frame tool) F — создание нового фрейма (рабочего пространства дизайнера в Фигме);
• (Pen tool) P — рисование пером;
• (Pencil tool) Shift + P — рисование карандашом;
• (Text tool) T — добавление нового текста;
• (Rectangle tool) R — готовый прямоугольник, параметры которого вы можете задать на правой панели;
• (Ellipse tool) O — эллипс или круг (с изменчивыми параметрами);
• (Line tool) L — линия;
• (Arrow tool) Shift + L — стрелка;
• (Add comment) C — написание комментария или заметки к выделенному объекту;
• (Pick color) I — распознавание и выбор цвета при помощи пипетки;
• (Slice tool) S — обрезка элемента «ножом».

Вкладка View (или вид) предназначена для того, чтобы показывать или скрывать элементы. А какие именно элементы показать / скрыть — решает сочетание клавиш:

• Shift + R — показать или скрыть линейки;
• Ctrl + Shift + 3 на Windows и ⌘ + Y на Mac — показать или скрыть обводку всех элементов;
• Ctrl + Alt + Y на Windows и ⌘ + P на Mac — показать или скрыть пиксельный просмотр;
• Ctrl + Shift + 4 на Windows и Ctrl + G на Mac — показать или скрыть сетку;
• Ctrl + ‘ на Windows и ⌘ + ‘ на Mac — показать или скрыть пиксельную сетку;
• Ctrl + \ на Windows и ⌘ + \ на Mac — показать или скрыть боковые панели;
• Ctrl + Alt + \ на Windows и Alt + ⌘ + \ на Mac — показать или скрыть курсоры других пользователей;
• Alt + 1 — показать или скрыть только слои;
• Alt + 2 — показать или скрыть только компоненты;
• Alt + 8 — показать или скрыть панель дизайна;
• Alt + 9 — показать или скрыть панель прототипа.

Вкладка Zoom (или масштабирование) отвечает за расположение и перемещение объектов на рабочем пространстве в Фигма:

• Space + drag — перемещение Zoom по рабочему пространству;
• + (плюс) — увеличение масштаба (приближение);
• — (минус) — уменьшение масштаба (отдаление);
• Shift + 0 — отображение один к одному (экран 1:1);
• Shift + 1 — масштабирование всего рабочего пространства;
• Shift + 2 — масштабирование выбранного вами элемента;
• Shift + N — масштабирование предыдущего фрейма;
• N — масштабирование следующего фрейма;
• Page Up — поиск предыдущей страницы;
• Page Down — поиск следующей страницы;
• Home — поиск предыдущего фрейма;
• End — поиск следующего фрейма.

Вкладка Text (или работа с текстом):

• Ctrl + B на Windows и ⌘ + B на Mac — выделение текста жирным;
• Ctrl + i и ⌘ + i на Mac — выделение текста курсивом;
• Ctrl + U и ⌘ + U на Mac — подчеркивание текста;
• Ctrl + Shift + V — вставление и сопоставление элементов;
• Ctrl + Alt + L на Windows и ⌘ + Alt + L на Mac — выравнивание текста по левому краю фрейма;
• Ctrl + Alt + T на Windows и ⌘ + Alt + T на Mac — выравнивание текста по центру фрейма;
• Ctrl + Alt + R на Windows и ⌘ + Alt + R на Mac — выравнивание текста по правому краю фрейма;
• Ctrl + Alt + J на Windows и ⌘ + Alt + J на Mac — выравнивание текста по ширине;
• Ctrl + Shift + < и >на Windows и ⌘ + Shift + < и >на Mac — изменение размера текста;
• Alt + < и >— изменение расстояния между символами (буквами);
• Alt + Shift + < и >— изменение расстояния между строками.

Вкладка Shape (работа с фигурами и векторными изображениями в Фигма):

• P — перо;
• Shift + P — карандаш;
• B — заливка цветом;
• Alt + / — удаление заливки;
• / — удаление обводки;
• Shift + X — одновременное изменение цвета обводки и заливки (они поменяются местами);
• Ctrl + Shift + O на Windows и ⌘ + Shift + O на Mac — преобразование в кривые;
• Ctrl + E на Windows и ⌘ + E на Mac — работа с точками векторных изображений.

Вкладка Selection (или выделение):

• Ctrl + A на Windows и ⌘ + A на Mac — выделение всего;
• Ctrl + Shift + A на Windows и ⌘ + Shift + A на Mac — выделение всего, кроме выбранного вами элемента;
• Esc — отмена выделения;
• Ctrl + click Windows и ⌘ + click на Mac — выделение слоёв, находящихся под другими слоями;
• Ctrl + right click Windows и ⌘ + right click на Mac — выделение слоя на боковой панели;
• Enter — выделение дочернего элемента;
• Shift + Enter — выделение родительского элемента;
• Tab — выделение следующего по порядку элемента;
• Shift + Tab — выделение предыдущего по порядку элемента;
• Ctrl + G на Windows и ⌘ + G на Mac — группировка элементов;
• Ctrl + Shift + G на Windows и ⌘ + Shift + G на Mac — разгруппировка элементов;
• Ctrl + Alt + G на Windows и ⌘ + Alt + G на Mac — преобразование во фрейм;
• Ctrl + Shift + H на Windows и ⌘ + Shift + H на Mac — показ или скрытие элемента;
• Ctrl + Shift + L на Windows и ⌘ + Shift + L на Mac — блокировка и разблокировка элемента.

Вкладка Cursor (или курсор):

• Alt — выделение элемента при клике;
• Alt — копирование элемента в движении;
• Ctrl + click на Windows и ⌘ + click на Mac — выделение слоёв, находящихся под другими слоями;
• Ctrl + right click на Windows и ⌘ + right click на Mac — показ иерархии выбранного элемента;
• Alt — изменение размера относительно центра элемента;
• Shift — пропорциональное изменение размера;
• Ctrl на Windows и ⌘ на Mac — перемещение элемента во время изменения его размера.

Вкладка Edit (или редактирование):

• Ctrl + C на Windows и ⌘ + C на Mac — создание копии элемента;
• Ctrl + X на Windows и ⌘ + X на Mac — вырезание (или удаление) элемента;
• Ctrl + V на Windows и ⌘ + V на Mac — вставка (или добавление) элемента;
• Ctrl + Shift + V на Windows и ⌘ + Shift + V на Mac — вставка поверх выбранного элемента;
• Ctrl + D на Windows и ⌘ + D на Mac — создание копии;
• Ctrl + R на Windows и ⌘ + R на Mac — переименование элемента;
• Ctrl + Shift + E на Windows и ⌘ + Shift + E на Mac — экспорт элемента;
• Ctrl + Alt + C на Windows и ⌘ + Alt + C на Mac — создание копии свойств выделенного элемента;
• Ctrl + Alt + V на Windows и ⌘ + Alt + V на Mac — вставка скопированных свойств в выбранный вами элемент.

Вкладка Transform (или трансформация):

• Shift + H — отражение по горизонтали;
• Shift + V — отражение по вертикали;
• Ctrl + Alt + M на Windows и ⌘ + Alt + M на Mac — создание маски;
• Enter — включение редактирования векторных объектов или изображений;
• Ctrl + Shift + K на Windows и ⌘ + Shift + K на Mac — вставка изображения;
• Alt + dbl-click — обрезка изображения;
• 1 — задание прозрачности элемента 10%;
• 5 — задание прозрачности элемента 50%;
• 0 — задание прозрачности элемента 100%.

Вкладка Arrange (или выравнивание):

• Ctrl + ] на Windows и ⌘ + ] на Mac — перемещение элемента ближе к переднему плану;
• Ctrl + [ на Windows и ⌘ + [ на Mac — перемещение элемента дальше от переднего плана;
• Ctrl + Shift + ] на Windows и ⌘ + Shift + ] на Mac — перемещение элемента на передний план;
• Ctrl + Shift + [ на Windows и ⌘ + Shift + [ на Mac — перемещение элемента на задний план;
• Alt + A — выравнивание по левой стороне;
• Alt + D — выравнивание по правой стороне;
• Alt + W — выравнивание по верхней стороне;
• Alt + S — выравнивание по нижней стороне;
• Alt + H — выравнивание по горизонтальной линии элементов;
• Alt + V — выравнивание по вертикальной линии элементов;
• Ctrl + Shift + Alt + H на Windows и ⌘ + Shift + Alt + H на Mac — выравнивание с распределением горизонтального пространства;
• Ctrl + Shift + Alt + V на Windows и ⌘ + Shift + Alt + V на Mac — выравнивание с распределением вертикального пространства.

Вкладка Components (или компоненты):

• Alt + —показ всех элементов;
• Ctrl + Alt + K на Windows и ⌘ + Alt + K на Mac — создание компонента;
• Ctrl + Alt + B на Windows и ⌘ + Alt + B на Mac — преобразование компонента во фрейм;
• Ctrl + Alt + O на Windows и ⌘+ Alt + O на Mac — переход к многопользовательской библиотеки.