Как сделать серебряный цвет в фигме

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

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

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

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

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

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

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

Как сделать эффект металла в Figma

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

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

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

Для вас подарок! В свободном доступе до 23.07 —>
Скачайте ТОП-10
бесплатных нейросетей
для дизайнера
Помогут находить референсы и изображения в 2 раза быстрее
Чтобы получить подарок, заполните информацию в открывшемся окне

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

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

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

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

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

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

Эффект золота и серебра в Figma

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Александр Сагун
Исполнительный директор Geekbrains

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

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

Подборка 50+ ресурсов об IT-сфере

Только лучшие телеграм-каналы, каналы Youtube, подкасты, форумы и многое другое для того, чтобы узнавать новое про IT

ТОП 50+ сервисов и приложений от Geekbrains

Безопасные и надежные программы для работы в наши дни

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

• Как уменьшить или увеличить текст в Фигме? Поможет инструмент «Масштабирование»

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

• На клавиатуре нажмите на клавишу «К». Она откроет нужный инструмент.
• Выберите текстовый слой в окне «Слои», расположенном слева.
• Измените размер, перетаскивая любой из угловых ограничивающих прямоугольников текста внутрь или наружу.

9 инструментов для изменения текста в Фигме

• Как сделать текст жирным в Фигме

Если вам необходимо сделать текст жирным, кликните на текстовом слое, с которым вы работаете, и в правом окне установите bold, normal, light либо что-то другое.

• Как увеличитьили уменьшитьтекст в Фигме(изменить кегль)

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

• Как изменить размеры ширины текстового блока в Фигме

Чтобы ширина текстового поля автоматически увеличивалась в зависимости от текста, надо включить иконку «Auto width».

Если включить иконку «Auto height», то автоматически будет меняться высота по мере написания текста, а ширину вы сможете выставить самостоятельно.

Сделать фиксированную высоту и ширину текстового поля можно, включив иконку «Fixed size». При добавлении текста, написанное начнёт выходить за пределы фрейма.

• Как подчеркнутьили зачеркнутьтекст в Фигме

Сделать подчёркнутый текст в Фигме несложно: кликните на 3 точки на панели справа, где находится редактор текста. Щёлкните на иконку, которая включает подчёркивание.

Для того чтобы сделать зачёркнутый текст, также нажмите на три точки в правой панели и кликните на иконку, выполняющую зачёркивание (strikethrough).

• Как написать текст в Фигмес красной строки

Чтобы выставить красную строку в программе, кликните на три точки в текстовом редакторе, далее напротив надписи «Paragraph indent» установите значение отступа для красной строки в пикселях (к примеру, 25).

• Как сделать заглавные буквы в тексте

Для написания текста заглавными буквами также щёлкните на три точки справа и под надписью «Letter case» установите «AG». Выбранный ранее текстовый фрагмент станет весь с заглавными буквами.

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

Перед тем, как сделать обводку в Фигме, необходимо выбрать нужный текст. Далее в окне справа напротив надписи «Stroke» кликнуть на иконку «+». Толщина обводки будет изменена. Более явной она будет только если текст жирный и крупного размера.

• Красивый текст с тенью в Фигме

Для создания эффекта тени у текста, выделите надпись, кликните на «+» возле надписи «Effects». К тому же можно выбрать или внешнюю тень («Drop shadow»), или внутреннюю («Inner shadow»).

• Как в Фигме перенести текст

Для экспорта текстового фрагмента на ваше устройство выделите его, а потом кликните на плюс рядом с надписью «Export». Укажите подходящий формат (PNG, SVG, JPG, PDF). Далее нажмите на кнопку экспорта и выберите папку, в которую его надо поместить.

Как сделать изогнутый текст в Фигме

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

В качестве примера возьмём плагин «To Path».

• Для начала введите нужную надпись и нарисуйте фигуру, в форме которой её надо сделать.
• Скачайте и запустите плагин. Далее выберите два слоя: один с текстом, а второй с фигурой и кликните на кнопку «Link».
• В конце отредактируйте внешний вид текста в плагине и отключите слои, на которых расположены фигуры.

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

1. Функция Vertical Align даёт возможность расположить текст выше или ниже используемой фигуры.
2. Инструмент Offcet в Фигме позволяет перемещать закруглённый текст вдоль фигуры. Вы можете выровнять его справа, слева, посередине относительно неё.
3. С помощью Revers direction of text можно отразить надпись по горизонтали (изменить направление).

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

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

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

• Font Preview — окно с возможностью предпросмотра шрифтов в реальном времени, в котором можно найти шрифт и добавить в избранное.
• Typescale. Моментально создаёт сбалансированные модульные системы типографики с учётом заданного соотношения.
• SBOL Typograph. Отвечает за типографику кириллических текстов: меняет пробелы, кавычки, тире, форму написания номера телефона и валют. Помимо этого, в плагине есть ёфикатор.
• Retextifier. Одновременное изменение нескольких слоёв с текстом.
• Главред. С его помощью можно сделать короткий и доступный текст для сайтов, блогов, профессиональной литературы, СМИ.
• Contento. В нём содержится бесполезный в плане смысловой нагрузки контент для макетов, который был собран из бесплатных источников. Он пригодится для заполнения пустых мест в проекте.
• Accidently Great Font Pairings. Создаёт шрифтовые пары от Google Fonts.

Источник: gb.ru

Плагин для Figma Color Compass: работа с цветовыми палитрами (+ 3 аналога)

В предыдущей заметке 30 онлайн-сервисов для работы с цветом: палитры, оттенки, градиенты я собрала список разных сайтов. В отличие от них, плагин Color Compass помогает подбирать цвета для проектов, не выходя из Фигмы и производя минимальное количество действий. Сервисы в любом случае имеют массу своих плюсов, но данный плагин хорош именно своей доступностью в процессе работы в самой Фигме, что существенно экономит время на подбор цвета для создания дизайна.

Основные возможности плагина

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

Параметры цвета, которые можно настроить

Плагин Color Compass в Figma позволяет настраивать следующие параметры цвета:

• Оттенок. Положение цвета на цветовом круге, которое определяет его основной цвет (например, красный, синий, зеленый).
• Насыщенность. Интенсивность или чистота цвета, которая определяет, сколько серого смешано с цветом.
• Яркость. Степень яркости или затемнения цвета, которая определяет, насколько светлым или темным выглядит цвет.

Используя ползунки в плагине Color Compass, вы можете регулировать оттенок, насыщенность и яркость выбранного цвета для создания различных оттенков цвета. Это поможет вам создать гармоничную цветовую палитру для ваших дизайнов.

Где скачать плагин Color Compass

Категория: цвет, цветовые палитры.

Теги плагина Color Compass

У каждого плагина есть своя страница в Figma Community. И на ней для классификации и удобства поиска каждому из сотен плагинов присваиваются теги. По ним в общих чертах можно понять для чего предназначен тот или иной плагин.

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

Теги плагина Color Compass

На английском языкеНа русском языке (перевод, синонимы)

color	цвет, оттенок
color theory	теория цвета
colour	цвет, тон, оттенок, цветовая гамма, расцветка, цветное, цветность
complementary	дополнительный, вспомогательный, добавочный, взаимодополняющий
generator	генератор, двигатель, источник, производитель
harmony	гармония
palette	палитра, цветовая палитра, цветовая гамма
shades	оттенки, градации, полутона
swatch	образец
themes	темы, тематика, разделы
tints	оттенки
tones	тона

Перевод официального описания плагина

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

Быстро ориентируйтесь в цветовом спектре с точностью, ориентированной на дизайнера.

Группы теперь поддерживаются.

Вместо того, чтобы смотреть и выбирать цвет случайным образом из всего спектра, просто введите базовый цвет в этот плагин, чтобы генерировать оттенки, градации/полутона (shades), тона и комплиментарные цвета.

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

Использовать.

Запустите плагин из Figma. Выберите элемент, содержащий заливку, фон или обводку (группы заметок не поддерживаются). Нажмите на кнопку “Обновить”, чтобы обновить базовый цвет. Нажмите на образец плагина при выборе элемента, чтобы обновить уже существующую заливку, фон или обводку.

Теперь вы можете ввести пользовательский шестнадцатеричный код, если в данный момент ни один элемент не выбран.

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

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

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

6 шагов для начала использования плагина

Чтобы использовать плагин Color Compass в Figma, выполните следующие действия:

1. Установите плагин со страницы сообщества Figma для плагина.
2. Выберите объект или слой, к которому вы хотите применить цвет.
3. Откройте плагин Color Compass из меню плагинов в Figma.
4. Выберите базовый цвет, нажав на цветовое колесо или введя шестнадцатеричный код.
5. Используйте ползунки для настройки оттенка, насыщенности и яркости цвета.
6. Нажмите «Применить», чтобы применить цвет к выбранному объекту или слою.

Практика применения плагина Color Compass

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

3 аналога плагина Color Compass

Плагин Color Compass для Figma — это инструмент, который помогает дизайнерам точно ориентироваться в цветовом спектре. Если вы ищете другие плагины, связанные с цветом, для Figma, вот несколько вариантов:

• Color Shades генерирует несколько оттенков из одного и того же базового цвета.
• Palette Magic — плагин, который позволяет просматривать и создавать цветовые палитры из одного цвета.
• Color Designer генерирует оттенки и цветовые гармонии на основе выбранных слоев или локальных стилей.

Основные выводы

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

А на этом сегодня всё. Желаю вам успехов и удачи.

Понравилась статья? Поделись!

• Вконтакте
• Одноклассники

30 онлайн-сервисов для работы с цветом: палитры, оттенки, градиенты Дизайн в Фигме: как сделать векторное изображение

Источник: mariannalabonina.ru

Работа с цветом в Figma

Как устроена цветовая модель в Фигме? Эта программа позволяет видеть цвета в пяти цветовых моделях: HEX, HSB, HSL, CSS и RGB. Переключение между цветовыми моделями влияет только на то, как Фигма описывает цвета, но не влияет на то, как программа их визуализирует.

По умолчанию Фигма представляет значения цвета с помощью шестнадцатеричной модели. Что это значит? Это объединение красного, зеленого и синего цвета — наиболее часто используемых в цветовых моделях. Каждый цвет, отображаемый на мониторе или экране, будет состоять из различных количеств этих трех цветов. Сейчас мы рассмотрим, как на практике работать со цветами в Фигме, и как выглядит шестнадцатеричная модель.

Добавив какой-нибудь объект в правой части панели вам будет доступна настройка цвета. По умолчанию все фигуры имеют серый цвет.

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

Можно комбинировать цвета. Например, выбрав первый цвет красный, нажмите на вкладку в виде «+», после чего снова появится панель управления цветом, в которой вы можете выбрать другой цвет, например, синий. И напротив вкладка в виде «-» (минуса) удаляет выбранный цвет. Вкладка в виде глаза позволит вам отключить выбранный цвет без его удаления.

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

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

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

Как это работает на практике? Например, у вас есть картинка, и чтобы создать элемент или текст, соответствующий ее цвету, вы можете выбрать инструмент «Пипетка», и кликнуть на тот фрагмент картинки, цвет которого вам необходим.

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

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

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

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

Что касается дополнительных возможностей в работе с градиентами в Фигме, так как это всего лишь слой заливки, то вам доступно добавление и комбинирование дополнительных цветов на одном шейпе. Чтобы изменить угол градиента на 45 градусов, зажмите клавишу «Shift». Выделенную контрольную точку, можно смещать при помощи стрелочек на клавиатуре.

Чтобы добавить изображение выберите пункт «Image», после чего кликните чтобы выбрать картинку с жесткого диска.

Теперь подробнее рассмотрим параметры добавления картинки. Вверху у вас будет выбрана функция «Fill». Это означает, что загруженная вами картинка будет вставлена в границы фигуры, и при движении одной из сторон объекта изображение будет растягиваться, но находится в области фигуры. «Fit» означает что при изменении фигуры картинка будет следовать в одну сторону за горизонтальной или вертикальной обводкой. «Crop» — функция изменения размера шейпа, и определение видимости вашего изображения в данном шейпе.

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

• Exposure – экспозиция. Это параметр регулирующий количество света.
• Contrast – контраст. Здесь вы сможете сменить диапазон яркости и плотности изображения.
• Saturation – насыщенность. Это степень выражения цветов. Чем больше этот спектр, тем ярче они будут.
• Temperature – температура. При движении шкалы в право, преобладают холодные цвета (синий), а при движении вправо — теплые (желтый).
• Tint – оттенок. При движении влево преобладает зеленый цвет, а при движении вправо красный.
• Highlights – освещение. При помощи этой настройки вы сможете приглушать темные или светлые тона, или сделать их еще более насыщенными.
• Shadows – тени. При помощи этой шкалы детали в тенях можно высветлить, или наоборот сделать более глубокие тени.

Итак, мы рассмотрели, как работать со цветами в Фигме. Эти настройки распространяются на все элементы, с которыми можно работать в программе. Например, по такому принципу меняется цвет текста.

Полезные ссылки:

• Бесплатный видеокурс по Figma от GeekBrains;
• Профессиональный курс Figma 2.0 для новичков от SkillBox;
• Полноценный онлайн курс по веб-дизайну с нуля от SkillBox.

Источник: www.seostop.ru