Как применять шрифтовые символы в Figma?
Как мне найти перевернутую стрелку в этом шрифте? Мне нужно, чтобы она вверх смотрела. Хочу научиться использовать символы из шрифтов в Фигме.
И заодно вопросы:
Как тире длинное ставить на винде ?
И как менять кавычки? «» и елочки
- Вопрос задан более двух лет назад
- 3677 просмотров
1 комментарий
Простой 1 комментарий
Как тире длинное ставить на винде ?
Ok, google символ длинного тире.
Получившееся ctrl+c ctrl+v в ваш проект. Если он в utf-8, конечно.
И как менять кавычки? «» и елочки
Ok, google .
ну вы поняли
Как мне найти перевернутую стрелку в этом шрифте?
Вообще это обычный шрифт, а не иконочный.
Т.е. это обычные >
И всегда можно взять такую стрелку, которая нашлась и повернуть.
Решения вопроса 0
Ответы на вопрос 1
Pyrocatechol @Pyrocatechol
Мне не кажется, что стрелка с референса из какого-либо шрифта. Чтобы такую создать, нужно создать квадрат, повернуть его на 45 градусов и удалить точку справа.
Длинное тире можно ввести с нампада. Зажать Alt и ввести 0151.
Хотя некоторые рекомендуют использовать короткое тире, 0150. Испокон веков на Руси тире по длинам не делились, оттуда столько путаницы. По крайней мере в коротких строках (менее 65 символов) рекомендуется использовать именно короткое, чтобы визуально в тексте не появлялось зияющих дыр.
0151 — Длинное тире
0150 – Короткое тире
0171 « Открывающая кавычка-ёлочка
0187 » Закрывающая кавычка-ёлочка
Ответ написан более года назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- Веб-разработка
- +1 ещё
Какие есть аналоги Figma (для визуальной разработки дизайна)?
- 2 подписчика
- 26 апр.
- 222 просмотра
5 полезных плагинов в Figma: работа с текстом и изображениями
Как быстро сделать красивые векторные фигуры, перекрасить картинку и оттипографить текст.
Иллюстрация: Оля Ежак для Skillbox Media
Вячеслав Лазарев
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.
В Figma очень удобно устроена работа с текстом и изображениями, но некоторые вещи приходится делать вручную — а это обычно долго. Например, чтобы просто перекрасить PNG-картинку, вам придётся делать отдельную слой-маску. Избавиться от этой рутины вам помогут плагины, которые расширяют функционал графического редактора.
Рассказываем, какие плагины для Figma помогут вам быстрее приводить текст в порядок и работать с картинками.
Typograff
Этот плагин поможет быстро оттипографить текст в документе — он автоматически расставит неразрывные пробелы после предлогов и союзов, поменяет кавычки на правильные «ёлочки» и «лапки».
Как пользоваться
- Скачайте плагин по ссылке.
- Зайдите в Figma, нажмите правой кнопкой мыши на текстовый модуль, в выпадающем меню перейдите в пункт Plugins и выберите Typograff.
- Укажите, какие кавычки вы хотите использовать, и нажмите на кнопку «Оттипографить». Вместе с новыми кавычками в тексте расставятся неразрывные пробелы.
Color Overlay
С помощью этого плагина можно быстро перекрасить PNG-картинку в однотонный цвет без использования слой-масок. Также через Color Overlay можно убрать из изображения любой цвет.
Как пользоваться
- Скачайте плагин по ссылке.
- Зайдите в Figma, нажмите правой кнопкой мыши по PNG-картинке, в выпадающем меню перейдите в пункт Plugins и выберите Color Overlay.
- Откроется окно плагина. В верхнем поле укажите, каким цветом нужно залить картинку, а в нижнем — какой цвет нужно убрать.
- Нажмите Colorize, и изображение изменится.
Spectrum
Меняет палитру любого изображения. Например, поможет поменять цвета красной картинки на синий или превратить голубую фотографию моря в фиолетовую.
Как пользоваться
- Скачайте плагин по ссылке.
- Зайдите в Figma, нажмите правой кнопкой мыши по картинке, в выпадающем меню перейдите в пункт Plugins и выберите Spectrum.
- В появившемся окне выберите количество цветов в новой палитре и их яркость. Также вы можете изменить режим наложения цветов: shades (оттенки) hue (насыщенность) или сделать собственный.
- Нажмите Apply Palette, и изображение изменится.
Этот плагин — условно бесплатный. В Figma вы можете изменить только три картинки с бесплатного аккаунта. Полная версия стоит 29 долларов.
Веб-версия сервиса доступна бесплатно без покупки.
Spirous
Математически генерирует абстрактные фигуры, которые будут хорошо работать как декоративные элементы сайта. А если воспользоваться дополнительными плагинами, то из фигур Spirous можно собрать интересный паттерн.
Как пользоваться
- Скачайте плагин по ссылке.
- Зайдите в Figma, нажмите правой кнопкой мыши по макету, в выпадающем меню перейдите в пункт Plugins и выберите Spirous.
- В появившемся окне выберите понравившуюся фигуру.
- Чтобы изменить фигуру, наведите курсор на её изображение и кликните на карандаш в правом нижнем углу.
- Чтобы добавить фигуру на макет, кликните по ней в окне плагина.
Image tracer
Превращает растровые картинки в векторные. Хорошо работает только с однотонными изображениями, где чётко можно разглядеть границы для вектора.
Как пользоваться
- Скачайте плагин по ссылке.
- Зайдите в Figma, нажмите правой кнопкой мыши по нужной картинке, в выпадающем меню перейдите в пункт Plugins и выберите Image tracer.
- В появившемся окне нажмите Place traced vector.
- При необходимости в меню Show options можно настроить параметры вывода векторного изображения.
Больше интересного про дизайн в нашем телеграм-канале. Подписывайтесь!
Больше о Figma
- Как упростить работу в Figma
- Как работать с изображениями в Figma
- 5 полезных плагинов в Figma для веб-дизайнера
- 5 лайфхаков в Figma: работа с текстом, картинками и заливкой
- Готовые решения в Figma: 10 полезных файлов для дизайнеров
Инструменты и плагины для работы с текстом в Фигме
Что? Для работы с текстом в Фигме есть множество инструментов, но далеко не все маркетологи умеют ими пользоваться. И хотя этот конструктор стал отличной заменой тем, которые покинули российский рынок из-за санкций, до сих пор находятся и те, кто им недоволен.
Как? Но, как говорил классик, «вы просто не умеете его готовить». Пул разнообразных плагинов существенно расширяет и упрощает функционал конструктора. Рассказываем, как воплотить все фантазии по работе с текстом в Фигме.
В статье рассказывается:
- Как добавить текст в Фигме
- Редактирование текста в Фигме пошагово
- 9 инструментов для изменения текста в Фигме
- Как сделать изогнутый текст в Фигме
- 16 удобных плагинов для работы с текстом в Фигме
Пройди тест и узнай, какая сфера тебе подходит:
айти, дизайн или маркетинг.
Бесплатно от Geekbrains
Как добавить текст в Фигме
Выберите инструмент Текст
Он находится в верхней части экрана и обозначается буквой Т. Использовать данный инструмент надо всегда, когда вы хотите поработать над текстом. Открыть его можно и с клавиатуры, нажав на букву Т. В Figma работа с любыми объектами, в том числе и с текстом, происходит через слои. В левой части находится панель со слоями, где вы сможете видеть все текстовые слои. Перед ними будет стоять буква Т.
Укажите метод создания нового слоя с текстом
Добавляя текст в программу, вы создаёте новый слой, в котором он будет находиться. Текстовый слой можно создать двумя разными методами:
- Первый – указать место, где вы хотите разместить текст. В этом случае формируется новый слой, в котором ширина текста увеличивается автоматически в зависимости от количества написанного.
- Второй метод, как можно добавить текст в Фигме, заключается в том, чтобы кликнуть мышью на экране и нарисовать поле для текста необходимого размера. Так получается ещё до написания текста не просто определить размер поля, но и установить размер текста на указанную ширину, благодаря чему можно напечатать больше текста. Помимо этого, текст автоматически переносится на новую строку.
Узнай, какие ИТ — профессии
входят в ТОП-30 с доходом
от 210 000 ₽/мес
Павел Симонов
Исполнительный директор Geekbrains
Команда GeekBrains совместно с международными специалистами по развитию карьеры подготовили материалы, которые помогут вам начать путь к профессии мечты.
Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!
Скачивайте и используйте уже сегодня:
Павел Симонов
Исполнительный директор Geekbrains
Топ-30 самых востребованных и высокооплачиваемых профессий 2023
Поможет разобраться в актуальной ситуации на рынке труда
Подборка 50+ бесплатных нейросетей для упрощения работы и увеличения заработка
Только проверенные нейросети с доступом из России и свободным использованием
ТОП-100 площадок для поиска работы от GeekBrains
Список проверенных ресурсов реальных вакансий с доходом от 210 000 ₽
Получить подборку бесплатно
Уже скачали 27934
Введите текст
Какой бы вы метод ни выбрали, у вас появится курсор, и вы сможете напечатать нужный текст. Изначально вы увидите только базовые настройки шрифта (мелкий чёрный шрифт), однако, вы можете поменять его. Для этого надо выбрать текст и через текстовую панель, которая находится справа, его изменить, либо создать и использовать стиль текста.
Редактирование текста в Фигме пошагово
Впервые столкнувшись с программой, пользователь может испытывать трудности даже с не сложными действиями. Например, как поменять текст в Фигме, исправить ошибки, отредактировать размер.
- Установите курсор мыши на тексте, который необходимо изменить
Если его можно менять, то вокруг него образуется текстовое поле – синяя прерывистая линия. Также при наведении стрелки мыши на текст, она поменяет свой вид на вертикальный курсор.
- Выделите фрагмент текста, над которым собираетесь работать
Для этого зажмите левую кнопку мыши и проведите по тексту. Он подсветится синим цветом. Свойства выделенного фрагмента отобразятся в правой части экрана в панели свойств. Если вам не надо менять внешний вид написанного, а необходимо что-то дописать или удалить, то установите курсор в нужной части текста. Так вы сможете менять то, что требуется.
Выделить текст можно и с помощью самого слоя, нажав на него с панели слоёв, которая находится слева. Чтобы изменить сразу несколько текстовых слоёв, зажмите клавишу Shift и щёлкните на те слои, которые вам нужны.
- Выясните, есть ли у текста какой-то стиль
Если при выделении текста в правой части экрана появилась панель «Текст», то на нём нет наложенного стиля. Однако, вместо той панели может высветится «Ag». Значит текст уже имеет стиль, из-за которого вы не сможете его поменять.
- Отредактируйте внешний облик текста
Выделенный текст в Фигме можно как выровнять, так и изменить размер, начертание и прочие характеристики, используя текстовую панель. Информацию о типе можно узнать, нажав на три точки справа в нижнем углу текстового окна. Там вы сможете изменить показатели выравнивания, оформления и интервалов. Примените панель обводки для добавления к тексту внутренней линии, контура и изменения размера, цвета. С помощью панели эффектов можно сделать тень тексту, размытие.
Если текст в Фигме выделился серым цветом, а рядом с названием шрифта стоит значок с надписью «А?», значит на вашем устройстве отсутствует данный шрифт. В таком случает возможность изменять текст будет недоступна до тех пор, пока вы не установите нужный шрифт или замените его на тот, что у вас есть. Для замены шрифта кликните на значок «А?». В открывшемся окне «Отсутствующие шрифты» вы сможете выбрать установленный шрифт.
- Поменяйте цветовое решение надписи
Цвет текста меняется не в текстовой панели, а в окне заливки, которая располагается справа. Для использования желаемого цвета нажмите на него на панели заливки, после этого текст приобретёт выбранный оттенок.
- Поменяйте расположение текста
Если вы решили поменять местоположение текста в Фигме, то при этом весь текст на слое переместится. Как изменить расположение надписи:
- Кликните и переместите надпись в желаемое место.
- Кликните мышью в окне «Слои» на текстовом слое, который надо расположить в другом месте.
- Необходимо выбрать инструмент «Перемещение». Для этого нажмите не клавиатуре клавишу с буквой М.
6 полезных плагинов Figma, о которых нужно знать каждому дизайнеру
Количество плагинов для Figma постоянно растет. Давайте рассмотрим те из них, которые будут полезны большинству дизайнеров:
Unsplash — это просто потрясающая платформа стоковых фотографий, насчитывающих более 265 000 фотографов-участников. В ней генерируется более 16 миллиардов показов фотографий в месяц! С помощью данного плагина вы сможете найти любое стоковое изображение прямо в Фигме!
Не отходя далеко от темы фотографий переходим к следующим двум плагинам — Mapsicle и Map Maker. Они позволяет найти на карте мира любую точку, даже по координатам. Есть возможность настроить отображение объектов, как с названием улиц, так и без них.
15 сентября компания Adobe сообщила о покупке сервиса для дизайнеров Figma за $20 млрд.
Сделка считается крупнейшим в истории поглощением частного разработчика ПО. Благодаря этой покупке Adobe планирует расширить собственный инструментарий для профессионалов.
Если вы часто работаете с текстом, то этот плагин облегчит редактирование текста,
- Исправит «простые кавычки» на «ёлочки» и „лапки“, а знак минуса на дефис, длинное или среднее тире.
- Заменит букву «е» на «ё» в словах, где она должна употребляться.
- Автоматически расставит неразрывные пробелы и уберёт висячие предлоги и союзы.
Blobs — очень простой плагин который может ввыручить, если вам неожиданно понадобятся органические blobs-формы. Вы можете контролировать, насколько уникальна форма, а также количество точек, которые она имеет.
Формы создаются с использованием SVG, так что вы получаете эти восхитительные кривые Безье.
Продолжаем тему работы над текстом. Плагин проверяет грамматику с помощью сервиса Яндекс.Спеллер. Теперь нет необходимости переключаться на сервис и копировать текст по несколько раз — всё можно делать сразу в Figma.
Генерирует аватарки рандомными людьми в выбранную область. Есть возможность сгенерировать сразу несколько объектов.