Иконки в Figma
Сразу хочется отметить, что иконок как таковых в программе figma нет. Но по умолчанию есть поддержка иконочных шрифтов, одним из которых является Font Awesome.
Иконочный шрифт
Данный шрифт позволяет рисовать различные иконки. Полный список всех иконок указан на официальном сайте. Существует 3 вида данного иконичность шрифта: outline, solid, brands (контурные, залитые цветом, бренды). И если возникает такая ситуация, что некоторые иконки у вас отображаются возможно проблема состоит в том, что вы включили не ту разновидность шрифта, которая нужна.
Более подробную информацию по работе с иконочными шрифтами вы можете найти в видео «обзор программы figma». Ссылку на видео с нужным таймлайном прилагаю.
Иконки в figma «своими руками»
Также вы можете рисовать иконки самостоятельно с помощью векторных объектов (прямоугольник, круг, перо). Если вы работали в программах Adobe Illustrator или Adobe Photoshop, то принцип работы в них один и тот же. Наберите в интернете как рисуются иконки в данных программах и те же принципы вы можете применить и в своей работе.
Иконки svg
Также фигма поддерживает вставки векторных объектов svg. Я сам использую всегда данный формат в работе, вместо png картинок, так как вы можете экспортировать данные иконки из макета во время верстки, и перенос в рабочее пространство figma никак не отразится на иконке. Это очень удобно для верстальщиков, которые берут дизайн в продакшн.
Хотите изучить все инструменты в Figma, а также освоить процесс разработки дизайн-макетов? Приходите на вводный курс по UX/UI дизайну. Вы изучите начальный дизайн-процесс: работа в Figma, анализ информации, визуальная концепция, прототипирование и т.д. Ссылка на сайт курса.
Как нарисовать галочку в фигме
Из этого исследования родился проект «Галочки для шрифтов»
Галочка — мощнейший культурный и бытовой символ. Галочка универсальна — в мире её понимают одинаково. Каждый знает, как нарисовать «птичку» от руки.
Из этого исследования родился проект «Галочки для шрифтов»
Однако мало кто из дизайнеров понимает, как изобразить графичную галочку, которой не будет стыдно в окружении типографиики, пиктограмм и элементов интерфейса. Даже в профессиональных шрифтах с галочками творится какое‑то непотребство.
По моей просьбе дизайнер бюро Михаил Нозик подробно исследовал вопрос. Предоставим ему слово:
М. Н. Как создавалась галочка для интерфейса отправки бухгалтерских отчётов
Вооружаемся знанием у арт‑директора. Выводим общие принципы:
Чтобы галочка была энергичной и сбалансированной, левый хвостик должен быть в 2‑2,5 раза короче правого.
Если галочка располагается рядом со строкой текста, её нужно опустить чуть ниже базовой линии строки. Наклон хвостиков должен дружить с наклоном диагональных штрихов букв.
Оптический центр галочки находится не в середине, а на нижнем кончике. Это особенно важно учитывать, если галочка располагается внутри какой‑нибудь формы, например кружка.
Установка приложения на маке. Галочке тесно в кружке, оптический центр не совпадает с центром круга:
Как рисовать линии в Figma: создаём дизайн пошагово
Фигма является одним из самых популярных инструментов для дизайна интерфейсов и прототипирования. Если вы хотите стать профессионалом в этой области и освоить этот популярный инструмент, рекомендуем курсы «Графический дизайн. Расширенный курс» и «Профессия Графический дизайнер с нуля до PRO».
Как сделать пунктир: пошаговое руководство
Figma довольно простая в использовании программа, в которой можно создать макет на любой вкус. Из несущественных минусов можно отметить вес программы, она может зависать и глючить на слабых ПК и ноутбуках, поэтому этот нюанс стоит учитывать заранее. Давайте разберёмся, как нарисовать плавный пунктир.
1. Начните с создания обычной линии в Figma, используя инструмент «Линия» из панели инструментов.
2. Выделите созданный элемент и перейдите в панель свойств. Здесь вы увидите параметры и элементы, которые можно выбрать и настроить.
3. Перейдите в раздел Контур и найдите опцию «Dashed» (пунктирная). Установите галочку рядом с этой опцией. Если не можете найти опцию, попробуйте перейти в поиск или поискать статьи по теме UI дизайн. Обычно можно найти ответ в них или поискать комментарий от рядового пользователя, который объяснит то же самое, но более простым языком.
4. Поставьте курсор в поле «Dash pattern» (порядок пунктирования) и введите последовательность значений для определения размеров и промежутков между ними. Например, если вы хотите создать пунктир с длинной в 5 пикселей и промежутком в 2 пикселя, введите «5, 2».
5. Нажмите «Enter» или нажмите в любом месте за пределами поля ввода, чтобы применить изменения. Теперь ваши элементы будут отрисованы в пунктирном стиле.
Первые шаги в графическом дизайне могут казаться сложными и запутанными. Чтобы вы смогли быстрее разобраться в широком функционале программ, мы советуем пройти одни из лучших курсов по дизайну от Логомашины — «Профессия графический дизайнер + стажировка в студии».
Сейчас мы дарим 10 000 ₽ на обучение в любой из школ-парнёров, представленных на сайте tutortop.
Получите промокод 10 000 ₽ на обучение и курсы стоимостью 20 000 ₽ в подарок!
Нажимая на кнопку «Получить», я соглашаюсь на обработку моих персональных данных.
Спасибо! Мы получили вашу заявку. Скоро с вами свяжемся.
Как сделать волнистые линии: рисуем волны в Figma шаг за шагом
Линии — основа макета, на которой строится общая картина логотипа, макета сайта и многого другого. Этим стилем можно подчеркнуть самое главное, разбавить макет, выделив объект другим цветом и многое другое. Рассказываем, как создать волны с помощью плагина Get Waves.
1. Щёлкните правой кнопкой мыши на любое пустое место, выберете «Plugins», после — «Saved plugins», и затем нужен вам плагин. В нашем случае это Get Waves.
2. С помощью этого плагина вы можете отрегулировать амплитуду и длину волны вашей волновой линии, играя с ползунками и другими характеристиками.
Это самый простой и удобный способ создать волнистые линии в Фигме.
Рисуем кривые: настройка кривых в Фигме
Создание кривой в Figma — это очень просто. Давайте создадим кривые пошагово в новом проекте.
1. Откройте Figma и выберите инструмент «Перо» из панели инструментов. Этот инструмент обозначен значком, который выглядит как наконечник перьевой ручки.
2. Начните рисование объекта, щёлкнув на холсте и удерживая кнопку мыши. Переместите указатель в нужное место на холсте, чтобы определить направление и длину вашего объекта.
3. Теперь, чтобы сделать линию кривой, удерживайте клавишу Shift на клавиатуре и щёлкните на другом месте холста. После этого вы увидите, что она стала кривой, а на концах появились управляющие точки.
4. Перемещайте эти управляющие точки, чтобы изменить форму кривой, используйте любые углы. Можно щёлкнуть и перетащить саму точку или пользоваться путём их растяжения и перетаскивания. Используйте эти точки, чтобы подогнать её под нужную форму.
5. Если вам нужно добавить ещё одну кривую к уже нарисованной, просто повторите шаги 2-4. Когда вы создаёте второй объект, она автоматически станет связанной с первой, имея общие управляющие точки. Это позволяет вам создавать плавные переходы.
6. Вы можете настроить другие параметры, такие как толщина, цвет, закругление и другие, в панели свойств. Просто выберите созданную линию и отредактируйте нужные параметры. Также вы можете добавить текст сверху или снизу, чтобы обратить внимание пользователей на главной информации.
7. Для завершения режима рисования кривых, щёлкните на холсте в любом месте за пределами объекта или нажмите клавишу Esc на клавиатуре.
Создаём линии в разных стилях в Figma
Сайт Figma предлагает широкий выбор стилей для линий, помимо пунктирных и волнообразных. В панели свойств вы можете настроить параметры фигуры, такие как ширина, тип, скругление и многое другое. Слой за слоем вы можете создавать уникальное изображение с помощью плагинов, фреймов и элементов из меню настроек. Вы можете экспериментировать с этими настройками, чтобы создать макет, который соответствует ТЗ вашего дизайна.
Фигма предоставляет множество возможностей для создания разнообразных стилей. Пользуйтесь этими функциями, чтобы создавать эффектные и профессиональные интерфейсы, которые привлекут пользователей из разных областей работы и социального статуса. Теперь, когда вы знаете, как создавать кривые объекты в Фигме, вы можете использовать их для создания более сложных форм и элементов дизайна.
Хочу стать графическим дизайнером!
Если вы хотите прокачаться в сфере графического дизайна, выбирайте подходящее для себя обучение на сайте tutortop. Для вас мы сформировали отдельную подборку лучших онлайн-курсов на рынке и сравнили их по цене, продолжительности и отзывам студентов.
Валентина Тарасенко
Копирайтер. Литературовед по образованию, журналист по призванию. С 2013 года пишет статьи для интернет-изданий и печатных СМИ. Помимо копирайтинга увлекается фотографией, создаёт изделия ручной работы из эпоксидной смолы, пишет рассказы и новеллы.
Лиза Шарипова
Веб-дизайнер. Занимается дизайном с 2020 года. Училась в Skillbox, BBE, проходила курсы по типографике и композиции. Полностью упаковывала образовательный продукт для IT-компании EPAM и делала лендинг для международного стартапа. Любит путешествовать и находит в этом вдохновение.
Разбор кейса: создаем иконки в Figma
Иконки — графические элементы, которые помогают нашим пользователям быстро ориентироваться в интерфейсе и воспринимать текстовый контент. Их можно рисовать в разных программах, в том числе в Figma.
Иконки — графические представления функций, концепций, конкретных объектов и самого приложения в интерфейсах. Они служат визуальным ориентиром для пользователей и помогают им интуитивно перемещаться по страницам. Если иконки нарисованы надлежащим образом, они даже могут заменить отдельные фразы и слова (не забывайте, мы воспринимаем визуальные образы быстрее, чем текст). Узнаваемые понятные иконки — залог простого и удобного интерфейса.
Все это хорошо, но покажите мне, как это сделать
Неправильных ответов на этот вопрос не существует. Все зависит от процесса, которому вы следуете, и методов, которые вы используете. Существует множество различных способов создания иконок. Я расскажу о том, как я создавала иконки для приложения, предназначенного для учета расходов.
Недавно мы изменили дизайн и интерфейс нашего мобильного приложения. Одним из этапов редизайна было создание новой библиотеки иконок. Мы решили создать ее в Figma, чтобы использовать при проектировании мобильных и веб-приложений в дальнейшем.
Размер
Первый шаг — определение размеров иконки в пикселях. Мы можем создавать иконки в разных размерах:
- Маленькие — 12×12 px, 16×16 px, 24×24 px, 32×32 px, 48×48 px
- Средние — 64×64 px, 96×96 px, 128 x 128 px, 256 x 256 px
Все зависит от платформы, для которой разрабатывается иконка.
Сетки
Начните с выбора сетки. Это поможет установить четкие правила для последовательного, но гибкого позиционирования графических элементов.
KeyLine shapes (базовые формы) необходимы для поддержания единообразных визуальных пропорций во всех иконках.
Квадраты, круги, прямоугольники и диагонали помогут нам создать более согласованные иконки за счет единообразного размещения этих форм внутри них.
Активная область (live area) — это пространство, в котором находятся основные части иконки. При необходимости элементы могут заходить в область обрезки (trim area), но не должны выходить за ее пределы.
Тип иконки
После создания сетки мы должны решить, какой тип иконки нам нужен.
Существуют различные типы иконок:
- Контурные (линейные) иконки — состоят исключительно из обводки.
- Иконки с заливкой — здесь есть как обводка, так и заливка.
- Двухцветные контурные иконки — состоят из обводки двух цветов.
- Сочетание контурных иконок и иконок с заливкой — эти типы иконок могут сосуществовать в рамках одного продукта. Обычно они показывают состояние объекта — является он активным или нет.
Поскольку наша цель состояла в том, чтобы создать четкие и понятные иконки, я решила нарисовать их в контурном стиле, а также добавить несколько значков с заливкой для отображения активного состояния.
Давайте создадим несколько иконок!
Вы можете рисовать иконки разными способами. Я расскажу вам о том, какие шаги позволили мне создать отличную библиотеку иконок, которой я горжусь ��.
Обводка 1px — 1.5px — 2px
- Создайте нужную форму. Отрегулируйте размер иконки в соответствии с вашими требованиями.
- После того как иконка готова, выберите в панели слоев ее фрейм и кликните по нему правой кнопкой мыши. На экране появится выпадающее меню. В этом меню выберите Outline Stroke. Откройте его еще раз и выберите Flatten. Эти действия позволят превратить обводку в объекты и сделать из них единую форму.
- Измените размер и положение иконки в панели справа — округлите все дробные значения.
- Чтобы сделать иконку масштабируемой, выберите в панели Привязки (Constraints) параметр Scale как по горизонтали, так и по вертикали.
- Создайте компонент иконки и измените цвет в соответствии с вашими требованиями.
- Вуаля! Ваша иконка готова ��
Вот туториал по созданию иконки шестеренки (Настройки), которая обычно вызывает у дизайнеров затруднения. Мне самой потребовалось некоторое время, чтобы разобраться, но теперь я могу создать такую иконку за пару минут.