Как сделать зернистый фон в фигма
Добавил пользователь Евгений Кузнецов Обновлено: 05.10.2024
Я, как человек старой закалки, и к онлайн-приложениям отношусь слегка скептически, предпочитая в работе полные десктопные версии. Пишу тексты в ворде, обрабатываю фото в фотошопе, рисую макеты и прочие картинки в кореле. Из онлайновых доверяю гугл-документам, пишу там иногда кое-что, составляю таблицы.
Нет, я конечно пробовал многе из онлайн-программ, редакторов, и некоторые мне даже нравились. Например, Canva: для работы с графикой для соцсетей — идеальный вариант, особенно если у вас нет дизайнерских навыков.
А недавно мне предложили на одном проекте поработать с Figma — и я влюбился в эту программу.
Кто такая Figma?
В двух словах — это векторный графический онлайн-редактор. Легкий, интуитивно понятный и простой. Если у вас есть хотя бы минимальные навыки работы в Кореле или Иллюстраторе — освоить Фигму труда не составит. А, да — необходимо хотя бы чуть-чуть понимать по-английски: весь интерфейс программы и файлы помощи на английском.
Для того, чтобы начать работать нужно зарегистрироваться. Здесь всё стандартно: e-mail и пароль. Время от времени на почту будет приходить ненавязчивый спам в виде новостей проекта. Но и от них можно потом отписаться в настройках.
После входа в систему вам покажут несколько демо-файлов, которые вы можете посмотреть, потыкать и попробовать, что тут и как. Один из них даже представляет собой инфографику с горячими клавишами, которые понимает программа.
Что здесь можно делать?
Рисовать для души — безусловно. Скорее всего, создать настоящую профессиональную иллюстрацию не получится, но сотворить простенький (и не очень) логотип — запросто. Вот пятиминутная работа, например, из фото, звездочки и текста.
Опять пример: мне нужно было объяснить клиенту, как должен располагаться текст на его сайте. Десять минут работы — и макет готов. Всё собрано из скриншотов сайта, которые я сделал, и готовых блоков. Текст вставляется и редактируется, как в обычном редакторе.
Как и в любом приличном векторном редакторе, все объекты, текст, и фигуры можно редактировать: менять цвет, форму, прозрачность, изменять заливку, контуры. Можно группировать, объединять, выравнивать, менять цвет фона. Вы видите: на скриншотах, которыми я иллюстрирую текст, фон где-то серый, где-то белый, где-то черный. Это удобно.
Еще одна удобная плюшка для веб-дизайнеров — фигма сразу же пишет код CSS для каждого элемента. Я в веб-дизайне разбираюсь не особо, так что и трогать это не буду. Но знакомые веб-дизайнеры говорили, что это хорошо. Я им поверю.
Мне, как копирайтеру, Фигма интересна именно с точки зрения создания прототипов. Всё чаще мне приходится работать в проектах, где нужно сперва разработать структуру сайта, а уже потом готовить для него тексты и прочий контент. Для разработки структуры я пользуюсь ментальными картами Concept Draw, а для того, чтобы наглядно показать клиенту, как будет выглядеть главная или иная страничка сайта — тут-то и приходит на помощь Figma.
Сложно ли разобраться?
Нет, несложно. В Фигме нет большого количества наворотов, которые присущи мощным редакторам. Только базовые функции, которых хватает для выполнения практически любой задачи. Пытливому уму хватит одного вечера, чтобы потыкать в демо-файлы и понять, как тут всё работает.
Подскажите, как закрепить задний фон в Figma?
Я знаю, что есть чекбокс Fix position when Scrolling, но он видимо подходит только для мобильных приложений. Мне нужно для веб приложения. Задача, закрепить задний фон, при прокрутке он остается статичным, другие элементы скролятся.
Принцип такой: объединить контент, который должен скроллиться, в один артборд и задать для этого артборда параметры Vertical Scrolling на вкладке Prototype. Уменьшить высоту артборда до величины окна или области скролла. Включаем просмотр и смотрим
Fix position подходит для любых макетов. Вам надо закрепить фон, а скроллируемое содержимое, скорее всего, стоит поместить в отдельный фрейм и настроить параметры скроллинга.
Шрифты в Figma синхронизированы с Google Fonts, если вы работаете в браузерной версии приложения. Если же вам необходимо добавить новые, создать подборку для работы в команде, то лучшим решением будет установить десктопную версию и все дальнейшие действия проводить через нее, чтобы не перегружать браузер.
У работы с шрифтами в Figma есть свои особенности, например, им нельзя задать цвет, равнение и т. д. Это вызывает неудобства только при первом знакомстве с платформой, в дальнейшем вы поймете, что это не недостатки, а преимущества. О том, как правильно работать со шрифтами в Figma, как добавить новые, вы узнаете из нашего материала.
Стиль текста в Figma
Одной из основ дизайна наряду с цветами и компонентами является типографика. Поэтому начинать создание дизайна необходимо с формирования паттернов для нормальной типографики, разборчивой и согласованной. Впоследствии это упростит процесс ее масштабирования при переходе от одного устройства или приложения — к другому, а также облегчит для дизайнеров момент передачи проекта разработчикам.
В Figma есть возможность задавать свойства для текстовых объектов, к примеру, устанавливать размер, интерлиньяж. Предусмотрено сохранение стилей в библиотеке, где их можно найти в любой момент и поделиться с другими членами команды либо с заказчиком.
Процесс проектирования, благодаря стилям, становится более четким, прозрачным. Когда нужно внести в дизайн некие коррективы, задать другой текстовый параметр, то измененный вариант стилей можно передать сразу во все файлы, где данные стили были задействованы. Для этого следует лишь опубликовать обновление в исходной библиотеке Figma.
Стиль текста в Figma
Далее перечислены свойства, присущие текстовым стилям в Figma, и параметры, которые тут задать нельзя.
- Доступные к установке в Figma шрифты, их размер, вес.
- Межстрочный интервал (интерлиньяж).
- Интервал между буквами и абзацами, структурирование текста.
- Украшение текста (зачеркивающая и подчеркивающая линии).
- Установка прописных и строчных букв, капитализация.
- Прочие опции Open Type, то есть, работа с табличными данными, капителиями и проч.
Ваш Путь в IT начинается здесь
Подробнее
Свойства, отсутствующие в стиле текста Figma:
- Цвет шрифта.
- Выравнивание (выключка) текста по левому либо правому краю, по центру, по формату.
- Выравнивание текстового поля (верхнее, нижнее, по центру).
- Установка размера текстового поля (по горизонтали, по вертикали, фиксировано).
Для тех, кто раньше работал с другими конструкторами, будет непривычно не иметь возможности задать цвет текста, или применить выключку. Однако преимущества в таком подходе есть, и в процессе вы их обязательно оцените.
Когда формат стилей упрощен по максимуму, то на их создание уходит меньше времени, потому что сокращено количество подвижных параметров, а именно — допустимые комбинации, цвета, выравнивание и т.п. Обслуживать такие тексты тоже проще, меньше стилей придется обновлять, если в систему будут вноситься некие изменения. А выравнивание текста можно настроить и, не затрагивая стиль.
Рекомендации по выбору шрифтов в Figma
Какие же шрифты использовать в Figma в вашей конкретной системе? Тут следует принимать во внимание следующее:
- Показатель производительности. Есть ли какое-то ограничение производительности? Сколько шрифтов в вашем случае вы можете загрузить в Figma? Планируете ли вы использовать шрифты с других платформ (разумеется, доступные для применения)?
- Индивидуальные параметры. Имеются ли фирменные шрифты компании, которые необходимо будет применять?
- Есть ли необходимость в дополнительной системе шрифтов. Хватит вам единой системы, или нужно несколько стратегий? К примеру, при создании маркетингового сайта, большое значение может иметь узнаваемость бренда (в том числе и по шрифтам).
- Сочетание шрифтов парами. Позволит ли одно семейство шрифтов иметь достаточный типографический диапазон? Что касается сочетания, то большие тексты, например, можно выполнять декоративными шрифтами (не слишком ими злоупотребляя), а для основного текста применять разборчивые шрифты.
Работа с шрифтами в Figma
В Figma мало выбрать красивые, подходящие для вашей системы шрифты. Тут важно еще правильно задать интерлиньяж. К примеру, для заголовков и для основного текста он будет неодинаков. Далее описывается, от чего следует отталкиваться в каждом из этих случаев.
Главное требование к типографике основного текста – хорошая читаемость. Для этого можно немного увеличить межстрочное расстояние. Слишком плотный текст воспринимается труднее. Как выбрать оптимальный интерлиньяж для основного текста? Умножьте размер шрифта на 1,5, и посмотрите, какой вид в результате получится у текста.
Хотите больше зарабатывать или работать удалённо? Запутались в разнообразии профессий и не знаете, куда двигаться?
Команда GeekBrains вместе с экспертами по построению карьеры подготовили документы, которые помогут найти и выбрать востребованную высокооплачиваемую профессию.
Как сделать градиент в фигме. Как делать сложные сочетания цветов, чтобы они классно смотрелись.
Для того, чтобы создать в Figma градиент:
Выделите объект (чаще всего прямоугольник, изображение или контур произвольный)
В меню градиента вы можете не только настроить цвета, но также прозрачность и тип градиентах.
Для того, чтобы менять позицию градиента – двигайте ползунок вправо-влево.
Чтобы добавить еще один цвет в поле градиента – кликните на линию градиента.
Читайте также: