Как закруглить буквы в figma

Закругленный текст в фигме?

Здравствуйте, не могу понять как сделать текст по кругу, буду благодарен если объясните в подробностях.

• Вопрос задан более трёх лет назад
• 39106 просмотров

1 комментарий

Средний 1 комментарий

antongrishin @antongrishin

Полный список курсов по работе с Figma вы можете найти тут: https://katalog-kursov.ru/courses/kursy_po_figma/

Решения вопроса 1

Михаил Проскурин @mixail_fet
Дизайнер веб-интерфейсов

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

Сейчас лучший способ это сделать — через фотошоп, а потом экспортировать это все в SVG, и импортировать в Figma.

Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
Ответы на вопрос 1

Анастасия Свеженцева @NewWingsAsya
Веб-дизайн, интерфейсы и бренд-айдентика.

1. Рисуете круг или окружность
2. Выделяете текст и окружность, в плагине высветится надпись: «curve and text selected», нажимаете в плагине кнопку Link, для того, чтобы связать текст и окружность
3. Плагин создаст копию надписи и расположит буквы по окружности, дальше настраиваете параметры в плагине, такие как выравнивание по центру или по краю, направление текста по окружности/reverse
4. Выделите первоначальный текст который вы линковали и настройте на панели свойств по вкладке Text расстояние между буквами/Letter Spacing. Если текст короткий, то можно увеличить расстояние между буквами, чтобы текст занял всю длину окружности. Так же можно настроить размер текста и его толщину.

Важная особенность: если окно плагина открыто, вы можете переписывать или редактировать любые параметры исходного текст и текст по кругу тоже будет моментально меняться.

Сквирклморфизм (Squirclemorphism) в дизайне интерфейсов

Вы заметили рост популярности этого тренда? Последние годы богаты на новые стили UI дизайна. Начиная с простого плоского дизайна, Material дизайна и заканчивая неоморфизмом, и глассморфизмом. Хотя я не настолько хороший охотник за трендами, как Michal Malewicz, я уверен, что нашел кое-что . Давайте погрузимся в мир сквирклов (суперэллипсов)!

Сквиркл? Что это?

Это не прямоугольник с закругленными углами и не круг. Эта фигура уникальна, но имеет огромное значение. Впервые она была замечена в цифровом дизайне с появлением iOS 7. К иконкам приложений была применена маска в форме сквиркла. С тех пор дизайнеры полюбили эту фигуру. Если вы хотите узнать формулу, лежащую в ее основе, ознакомьтесь с описанием из Википедии или исследованиями, проведенными Figma Engineere.

Рассвет сквирклморфизма

Первоначально сквиркл использовался для воссоздания иконок iOS-приложений. Как я уже упоминал, разница между стандартным прямоугольником с закругленными углами и суперэллипсом была небольшой, но заметной. Мы всегда стремимся к тому, чтобы наши дизайны выглядели современно, поэтому мы хотели, чтобы к иконкам приложений была применена маска в виде этой новой фигуры. Потом дизайнеры поняли, что его можно использовать для других элементов. Некоторые из нас начали использовать его в углах карточек, другие сделали элегантные иконки. Это было только начало. Теперь вы можете повсюду встретить сквирклы в различных формах в UI дизайне. Маска в форме суперэллипса применяется к целым страницам мобильных приложений! Шот от Fireart Studio Повсеместное распространение сквирклов побудило меня назвать этот тренд – Сквирклморфизм (Squirclemorphism)! Что интересно, сам стиль заключается только в использовании формы суперэллипса. Он может быть связан с нейоморфными или глассморфными элементами.

Вы можете увидеть их в Instagram

Изначально я заметил, что суперэллипсы становятся все более популярными в Instagram, потому что в ленте полно новых творений. На Dribbble я обычно ищу определенные элементы или категории, и было труднее заметить новый восходящий тренд. Aweka Design Дизайн от Amjad

Вы можете увидеть их на Dribbble

Я люблю просматривать дизайны на Dribbble, чтобы найти вдохновение или интересные стили и композиции. Введите «squircle» в поиске Dribbble, и вы увидите сотни результатов. Шот от Cuberto Шот от Halo Lab Как вы наверняка заметили, большинство дизайнов создаются только для демонстрации навыков своих создателей. Они не используются в реальных приложениях.

Сквирклы в Figma

По умолчанию закругленные углы указывают на правильный радиус. Но это касается только закругленных прямоугольников, а не суперэллипсов. Чтобы добиться особой формы, вам нужно добавить «Corner Smoothing» (Сглаживание углов) к радиусу скругления угла. Чтобы активировать сглаживание, вы должны нажать иконку радиуса скругления угла, чтобы отобразить подробные настройки радиус для каждого угла. Затем под иконкой меню с тремя точками вы найдете параметр «Corner Smoothing». Кликните по нему, и вы увидите всплывающее окно с ползунком. Создание сквирклов в Figma Если вы хотите добиться эффекта, подобного iOS, установите значение примерно на 60%, для максимального эффекта используйте 100%. Все просто!

Сквирклы в Sketch

Создавать сквирклы в Sketch еще проще. Когда у вас есть слой в форме прямоугольника с закругленными углами, все, что вам нужно сделать, это перейти на панель Inspector (та, что справа) и выбрать раскрывающийся список «Radius (Round Corners»). Измените параметр на «Smooth Corners». Все, ваш сквиркл готов!! Создание сквирклов в Sketch

Вывод

В последние месяцы появилось много трендов. Сквирклморфизм начался с небольшого элемента – иконок приложений iOS7. Сейчас он применяется практически ко всем элементам, имеющим закругленные углы. Очевидно, что не все сквирклы хороши в реальных приложениях, но эта тенденция, безусловно, вдохновляет. Что вы думаете о сквирклморфизме? Вы используете фигуры со сглаженными углами? Перевод статьи blog.prototypr.io

Текст по кругу в Figma

Как красиво разместить текст по форме круга — узнайте из данной статьи на d-e-n.info.

Для того чтобы сделать текст по кругу в Figma, нам понадобится:

Первое – скачать плагин «to Path». С помощью него мы будем реализовывать данную возможность.

Второе – на рабочем поле создаем два объекта:

• Фигура «Круг»
• Текст, который будет вдоль этого круга располагаться (рекомендую сразу применить шрифты и декоративное оформление, чтобы прикинуть сколько места нам понадобится)

Третий пункт – открываем плагин, выделяем круг и текст и нажимаем кнопку Link.

Наш текст отобразился по кругу. Если нужно довести текст до полного круга – нужно поработать с межсимвольным расстоянием, а также размером шрифта. Просто меняем эти параметры и добиваемся красивого эффекта.

Хотите изучить все инструменты в Figma, а также освоить процесс разработки дизайн-макетов? Приходите на вводный курс по UX/UI дизайну. Вы изучите начальный дизайн-процесс: работа в Figma, анализ информации, визуальная концепция, прототипирование и т.д. Ссылка на сайт курса.

Инструменты и плагины для работы с текстом в Фигме

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

Как? Но, как говорил классик, «вы просто не умеете его готовить». Пул разнообразных плагинов существенно расширяет и упрощает функционал конструктора. Рассказываем, как воплотить все фантазии по работе с текстом в Фигме.

В статье рассказывается:

1. Как добавить текст в Фигме
2. Редактирование текста в Фигме пошагово
3. 9 инструментов для изменения текста в Фигме
4. Как сделать изогнутый текст в Фигме
5. 16 удобных плагинов для работы с текстом в Фигме

Пройди тест и узнай, какая сфера тебе подходит:
айти, дизайн или маркетинг.
Бесплатно от Geekbrains

Как добавить текст в Фигме

Выберите инструмент Текст

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

Укажите метод создания нового слоя с текстом

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

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

Узнай, какие ИТ — профессии
входят в ТОП-30 с доходом
от 210 000 ₽/мес
Павел Симонов
Исполнительный директор Geekbrains

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

Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!

Скачивайте и используйте уже сегодня:

Павел Симонов
Исполнительный директор Geekbrains

Топ-30 самых востребованных и высокооплачиваемых профессий 2023

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

Подборка 50+ бесплатных нейросетей для упрощения работы и увеличения заработка

Только проверенные нейросети с доступом из России и свободным использованием

ТОП-100 площадок для поиска работы от GeekBrains

Список проверенных ресурсов реальных вакансий с доходом от 210 000 ₽

Получить подборку бесплатно
Уже скачали 25504

Введите текст

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

Редактирование текста в Фигме пошагово

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

• Установите курсор мыши на тексте, который необходимо изменить

Если его можно менять, то вокруг него образуется текстовое поле – синяя прерывистая линия. Также при наведении стрелки мыши на текст, она поменяет свой вид на вертикальный курсор.

• Выделите фрагмент текста, над которым собираетесь работать

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

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

• Выясните, есть ли у текста какой-то стиль

Если при выделении текста в правой части экрана появилась панель «Текст», то на нём нет наложенного стиля. Однако, вместо той панели может высветится «Ag». Значит текст уже имеет стиль, из-за которого вы не сможете его поменять.

• Отредактируйте внешний облик текста

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

Если текст в Фигме выделился серым цветом, а рядом с названием шрифта стоит значок с надписью «А?», значит на вашем устройстве отсутствует данный шрифт. В таком случает возможность изменять текст будет недоступна до тех пор, пока вы не установите нужный шрифт или замените его на тот, что у вас есть. Для замены шрифта кликните на значок «А?». В открывшемся окне «Отсутствующие шрифты» вы сможете выбрать установленный шрифт.

• Поменяйте цветовое решение надписи

Цвет текста меняется не в текстовой панели, а в окне заливки, которая располагается справа. Для использования желаемого цвета нажмите на него на панели заливки, после этого текст приобретёт выбранный оттенок.

• Поменяйте расположение текста

Если вы решили поменять местоположение текста в Фигме, то при этом весь текст на слое переместится. Как изменить расположение надписи:

• Кликните и переместите надпись в желаемое место.
• Кликните мышью в окне «Слои» на текстовом слое, который надо расположить в другом месте.
• Необходимо выбрать инструмент «Перемещение». Для этого нажмите не клавиатуре клавишу с буквой М.