Иконки в Figma
Сразу хочется отметить, что иконок как таковых в программе figma нет. Но по умолчанию есть поддержка иконочных шрифтов, одним из которых является Font Awesome.
Иконочный шрифт
Данный шрифт позволяет рисовать различные иконки. Полный список всех иконок указан на официальном сайте. Существует 3 вида данного иконичность шрифта: outline, solid, brands (контурные, залитые цветом, бренды). И если возникает такая ситуация, что некоторые иконки у вас отображаются возможно проблема состоит в том, что вы включили не ту разновидность шрифта, которая нужна.
Более подробную информацию по работе с иконочными шрифтами вы можете найти в видео «обзор программы figma». Ссылку на видео с нужным таймлайном прилагаю.
Иконки в figma «своими руками»
Также вы можете рисовать иконки самостоятельно с помощью векторных объектов (прямоугольник, круг, перо). Если вы работали в программах Adobe Illustrator или Adobe Photoshop, то принцип работы в них один и тот же. Наберите в интернете как рисуются иконки в данных программах и те же принципы вы можете применить и в своей работе.
Иконки svg
Также фигма поддерживает вставки векторных объектов svg. Я сам использую всегда данный формат в работе, вместо png картинок, так как вы можете экспортировать данные иконки из макета во время верстки, и перенос в рабочее пространство figma никак не отразится на иконке. Это очень удобно для верстальщиков, которые берут дизайн в продакшн.
Хотите изучить все инструменты в Figma, а также освоить процесс разработки дизайн-макетов? Приходите на вводный курс по UX/UI дизайну. Вы изучите начальный дизайн-процесс: работа в Figma, анализ информации, визуальная концепция, прототипирование и т.д. Ссылка на сайт курса.
Как рисовать линии в 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 предлагает широкий выбор стилей для линий, помимо пунктирных и волнообразных. В панели свойств вы можете настроить параметры фигуры, такие как ширина, тип, скругление и многое другое. Слой за слоем вы можете создавать уникальное изображение с помощью плагинов, фреймов и элементов из меню настроек. Вы можете экспериментировать с этими настройками, чтобы создать макет, который соответствует ТЗ вашего дизайна.
Фигма предоставляет множество возможностей для создания разнообразных стилей. Пользуйтесь этими функциями, чтобы создавать эффектные и профессиональные интерфейсы, которые привлекут пользователей из разных областей работы и социального статуса. Теперь, когда вы знаете, как создавать кривые объекты в Фигме, вы можете использовать их для создания более сложных форм и элементов дизайна.
Валентина Тарасенко
Копирайтер. Литературовед по образованию, журналист по призванию. С 2013 года пишет статьи для интернет-изданий и печатных СМИ. Помимо копирайтинга увлекается фотографией, создаёт изделия ручной работы из эпоксидной смолы, пишет рассказы и новеллы.
Лиза Шарипова
Веб-дизайнер. Занимается дизайном с 2020 года. Училась в Skillbox, BBE, проходила курсы по типографике и композиции. Полностью упаковывала образовательный продукт для IT-компании EPAM и делала лендинг для международного стартапа. Любит путешествовать и находит в этом вдохновение.
Как нарисовать галочку в фигме
Из этого исследования родился проект «Галочки для шрифтов»
Галочка — мощнейший культурный и бытовой символ. Галочка универсальна — в мире её понимают одинаково. Каждый знает, как нарисовать «птичку» от руки.
Из этого исследования родился проект «Галочки для шрифтов»
Однако мало кто из дизайнеров понимает, как изобразить графичную галочку, которой не будет стыдно в окружении типографиики, пиктограмм и элементов интерфейса. Даже в профессиональных шрифтах с галочками творится какое‑то непотребство.
По моей просьбе дизайнер бюро Михаил Нозик подробно исследовал вопрос. Предоставим ему слово:
М. Н. Как создавалась галочка для интерфейса отправки бухгалтерских отчётов
Вооружаемся знанием у арт‑директора. Выводим общие принципы:
Чтобы галочка была энергичной и сбалансированной, левый хвостик должен быть в 2‑2,5 раза короче правого.
Если галочка располагается рядом со строкой текста, её нужно опустить чуть ниже базовой линии строки. Наклон хвостиков должен дружить с наклоном диагональных штрихов букв.
Оптический центр галочки находится не в середине, а на нижнем кончике. Это особенно важно учитывать, если галочка располагается внутри какой‑нибудь формы, например кружка.
Установка приложения на маке. Галочке тесно в кружке, оптический центр не совпадает с центром круга:
Figma: самостоятельное создание кликабельного прототипа [Часть 1]
01.04.2021
Сложность: средняя
25 мин.
20 093
![Figma: самостоятельное создание кликабельного прототипа [Часть 1]](https://convertmonster.ru/wp-content/uploads/2021/04/figma-prototip.png)
Когда дело доходит до разработки проекта, то дизайнеру часто требуется продемонстрировать рабочую модель заказчику или команде. Для этих целей подходит прототип сайта в сервисе Figma, с кнопками и панелью управления, чтобы заказчик увидел и оценил дизайн будущего проекта. В сервис встроены все нужные инструменты для разработки красивых дизайн-макетов. Тут можно добавить кликабельное меню, создавать различные эффекты переходов и так далее. В этой статье мы разработаем с нуля прототип в сервисе Фигма.
Существуют также плагин Фигма прототип , способный расширить стандартный функционал сервиса. Сегодня мы воспользуемся плагином для генерации иллюстраций, чтобы украсить наш дизайн. Для начала создадим Frame и Grid.
Фрейм и сетка
Рассказываем, как в Фигме сделать прототип сайта: стоит учитывать, что любой project начинается с создания холста, где будут размещены все элементы. Фрейм можно добавить в начале разработки или же перейти в редактор и в левом верхнем углу нажать решетку, дальше выбрать тип устройства, phone или desktop. Пример на картинке:
Выберем десктопную (Desktop) версию, с разрешением 1440×1024. Если этого недостаточно, то мышкой можно расширить фрейм, захватив за края и перетащив. Когда наш холст разместился, можно приступить к созданию сетки. Для чего вообще нужна сетка?
При разработке веб-дизайна существует правила, которых придерживаются все дизайнеры. Например, добавление одинаковых отступов по краям. Если планируется оформить три картинки в ряд, как в интернет-магазине или галерее, то здесь следует делать равные расстояния между карточками. В данном случае сетка окажется очень кстати, а при размещении блоков отступы будут соблюдены.
Чтобы создать сетку, нужно щелкнуть по холсту, затем появится меню справа. Находим опцию “Layout grid”. При нажатии на неё вся область покроется сеткой. В боковой панели станет доступна “Grid”, там есть дополнительная метка, при нажатии на которую можно изменить параметры и установить колонки или строки. Пример на картинке:
Допустим, наша цель – разработать интернет-магазин, где товары будут расположены в формате несколько позиций в ряд. Прежде чем выполнять поставленную задачу, нужно определиться с такими параметрами, как размер одной карточки, например, 200 px, и отступы, 20 пикселей.
Зная основные данные, область разбивается на колонки, а уже следом идет размещение товара и описание. Чтобы добавить столбцы на холст, нужно во всплывающем окне открыть список и щелкнуть по пункту “Columns”, пример показан на скриншоте выше. В итоге мы получим настройки колонок. Параметров здесь достаточно много:
- Count – количество колонок.
- Color – цвет столбцов.
- Margin – отступы по краям.
- Gutter – межколоночные промежутки.
В том же всплывающем окне есть раскрывающий список, type. Он включает в себя дополнительные настройки, способные изменить расположение колонок: left – слева, right – справа, center – по центру, stretch – резиновая сетка, ширина устанавливается автоматически сервисом.
При выборе некоторых пунктов станет доступны следующие параметры width – устанавливаем ширину одного столбца, Offset – отступ от края, в зависимости от выбранного пункта, если left – то слева, right – справа. Пример всех опций на рисунке:
Колонки можно расположить по всей сетке, для этого нужно выбрать тип right или left, потом указать в параметрах count Auto, и столбцы займут всю область фрейма. Ниже предоставлен пример. Если присмотреться, то каждая линия приблизительно равна 10 px. Данный вид архитектуры подойдет для типографии, например, чтобы добавить текст с отступами.
Frame может содержать несколько сеток. Каждая предназначена для определенных графических элементов. Одна будет отвечать за типографику, другая за карточки интернет-магазина и так далее. Уникальный дизайн обычно состоит из нескольких страниц, соответственно, для каждого фрейма потребуется отдельная сетка. Настраивать пресеты каждый раз с нуля кропотливый труд, поэтому в сервисе предусмотрено сохранение стиля. Делается это следующим образом (цифрами обозначено, куда нажимать):
Откроется всплывающее окно, где нужно придумать название и нажать кнопку “create style”.
Чтобы применить стиль, выбираем новый frame. В правой панели есть опция “Layout grid”, щелкаем на иконку, а дальше на заготовленный шаблон, после этого данный стиль автоматически применится. В данном случае шаблон настраивается один раз и применяется ко всем страницам проекта.
Предположим, мы добавили сеть, где нарисовано несколько квадратов. Можно проверить, как будут реагировать элементы при изменении размера рабочей области. Сделаем захват края и перетащим вправо.
Мы растянули и изменили ширину фрейма, расстояние между объектами также увеличилось. Можно настроить, чтобы блоки внутри области тоже растягивались. Делается это просто, в левом меню “слои” выбираем все rectangle. Нажимаем Rectangle 1, потом удерживаем shift и щелкаем по последнему.
После этого в панели design, находим Constrains и переключаем опции на Left and right, после этого все блоки будут привязаны к сетке и при попытке растянуть, ширина объекта rectangle также увеличится. Результат всех действий показан ниже:
Ключевой момент работы с сеткой заключается в возможности разработать адаптивную верстку. Это значит, что проект будет одинаково смотреться на всех устройствах, как на компьютерах, так и на телефонах. Используя инструмент grid, можно легко масштабировать область и создавать новые макеты для устройств. В случае, когда требуется скрыть grid, для этого используется “глаз”, в панели design.
Если требуется скрыть каркас сразу для нескольких фреймов, в левом верхнем меню нужно выбрать view->Layout grids или воспользоваться комбинацией клавиш Ctrl+Shift+4.
Сетка убирается кнопкой минус, но стоит учитывать, что при удалении каркаса, собьётся вся верстка.
Для каждого типа оборудования существуют свои стиль.
- 12 колоночная стека – подходит для больших элементов. Например, разработка дизайна для вебсайта.
- Вертикальные линии (type=left и count=auto) – об этом упоминалось выше, подходит для типографики.
- 24 колоночная сетка – предназначена для более мелких деталей, подойдет под мобильные устройства.
Выравнивание и отступы
Накладывая сетку на frame, мы использовали такую опцию, как margin, она делает отступы по бокам, но при работе разработчики сталкиваются с ситуацией, когда требуется выровнять блок по центру или левому краю. Для этих целей существуют align, она находится во вкладке design. В предыдущем примере было продемонстрировано, как создать карточки, используя сетку. Теперь добавим в наш контейнер текст, для этого создадим типографическую сетку. Произведите настройки, как показано ниже:
На этот раз был использован другой цвет линий (параметр Color), чтобы не было путаницы. Поместим инструмент Text на первой карточке. Для быстрого доступа воспользуемся горячей клавишей “Т”. Напишем наименование товара и изменим width и height текстового поля, чтобы он покрывал практически всю ширину прямоугольника. В итоге у нас получилось это:
Как видно из картинки, текст расположен в центре, чтобы его переместить к верхней планке, воспользуемся инструментами align, нажав соответствующую кнопку, мы получим выравнивание по верхнему краю.
Обратите внимание, что на текст также можно применить align: по центру, левому и правому краю. Во вкладке Design, присутствуют дополнительные кнопки. С их помощью делают выравнивание контейнеров или же текстовых полей. Например, можно поместить наше поле посередине, как показано ниже:
Как видно, центрирование произошло по отношению к фрейму. Чтобы это исправить, и наш текст поместить в центре карточки, нужно создать группу. Для этого мышкой выбираем первый квадрат и воспользуемся горячими клавишами CTRL+G (разгруппировать CTRL+SHIFT+G). После переместим в группу наш текст. Теперь нажимая на кнопки align, выравнивание будет происходить только внутри контейнера.
Ранее мы делали адаптивную верстку, размещали объекты на холсте, которые масштабировались вместе с рабочей областью. Если попытаться уменьшить фрейм, то текст останется без изменений.
Чтобы это исправить, нужно применить к тексту Constrains – Left and right. После этого текстовое поле будет сжиматься и текст переноситься на новую строку.
Выравнивание можно применить не только к тексту, но и к объектам, например, логотипу в шапке. Создаем отдельный фрейм, называем его header, добавляем туда rectangle (прямоугольник). Группируем квадратную область (CTRL+G). Рисуем еще один объект и перемещаем его в группу, дальше используем инструменты align для выравнивания.
Группировка и упорядочивание слоев
Чтобы объединить слои в группу, нужно выделить несколько объектов на холсте, потом нажать правой кнопкой мыши, откроется контекстное меню, выбрать Group Selection или же воспользоваться комбинацией клавиш (CTRL+G)
После добавления нескольких слоев они будут накладываться друг на друга. Чтобы мелкие элементы были видны, следует сделать упорядочивание. В случае неправильного порядка можно потерять из виду некоторые объекты. Например, при создании шапки и логотипа, разместив лого ниже всех слоев, он будет скрыт под основным контейнером и пользователи его просто не увидят.
Чтобы все элементы отображались как надо, нужно сделать правильное упорядочивание. Здесь существует два способа, это перетащить объекты с помощью мышки и расположить их в правильной последовательности или же открыть контекстное меню на одном контейнере и выбрать один из вариантов. Пример на картинке:
Для быстрого упорядочивания слоев есть горячие клавиши.
Создание прототипа в Фигма + Overflow Behavior
Что такое кликабельный прототип в Фигма ? Это когда пользователь выполняет те же самые действия, что и на сайте, делает переходы и просматривает контент.
Сейчас вы узнаете, как сделать прототип в Фигме, чтобы он был кликабельным. Для примера возьмем интернет-магазин плюс скролинг картинок. Для начала запустим новый проект и добавим десктопный фрейм, размер установим 1440 на 2000. Если будет мало места, то высоту можно увеличить. Нарисуем еще один фрейм, назовём header и добавим его в основное окно. Размер “хедера” установим 470, назначим цвет заднего фона и найдем в интернете подходящую картинку. Последовательность действий показана ниже:
Теперь сделаем затемнение в шапке для этого в слоях “rectangle 1” и “header 1”, поменяем местами, после выберем объект image и во вкладке Design, найдем раздел “Layer” и у параметра “Pass Through” установим 50 %.
В image header делаем другие настройки, оставляем значение по умолчанию 100 % и в раскрывающемся списке выбираем Darken. После этого наша шапка будет затемнена, как показано на картинке выше.
Продолжим пример прототип в Фигме . На основном холсте создаем еще один frame. Здесь допустимы вложенные фреймы. В данном случае новый объект это Overflow Behavior, это скролинг, который будет прокручивать новинки магазина, он бывает вертикальным или горизонтальным.
Линия с товарами будет расположена сразу после шапки. Но прежде чем её туда вставить, нужно создать отдельную область, где будут размещены все иконки с товарами. Фрейм должен быть достаточно длинным, чтобы туда уместились все контейнеры. Теперь нам понадобится плагин unsplash. Установить его можно задав запрос в поисковике unsplash figma. После инсталляции, выбираем все наши блоки и правой кнопкой мыши открываем контекстное меню и оттуда в разделе plugins щелкаем по unsplash. Появится всплывающее окно, где выбираем подходящий раздел в моем случае “technology”. Генерация img произойдёт автоматически. Обратите внимание на панели Design должна стоять галочка “Clip content”, это нужно для того чтобы скрывать элементы которые не поместились.
Дальше захватим край угла и тащим, уменьшая размер (ширину) с 3484 до 1460, после этого переместим ленту туда, где она должна быть и настроим Overflow behavior, данный параметр находится в разделе Prototype. В этой вкладке доступно несколько вариантов.
Установим параметр “Horizontal Scrolling”. После этого можно нажать в правом углу Present и смотреть, как прокручивается лента с товарами с помощью кнопки мыши.
Когда будете тестировать, убедитесь, что все элементы умещаются на экране, иначе вместо скроллинга ленты может прокручиваться проект.
Следующий шаг это создать frame, с карточками товара. Рисуем область, где будут размещены описание и картинки с электроникой. Чтобы удобнее было размещать сделаем сетку. Можно обойтись и без сетки, но в таком случае придется все измерять вручную.
В настройках grid установим 12 колонок, отступы Margin 20 пикселей. Разместим на холсте один прямоугольник, оформим его, добавим текст с названием и ценой, а также еще один квадрат, где будет миниатюрка товара, после сгруппируем (CTRL+G) эти объекты и получим в итоге карточку. Сделаем несколько дубликатов и равномерно разместим на области, при этом нужно соблюдать отступы.
В самом конце проекта вставим еще один frame, это подвал. Придадим ему цвет шапки в итоге у нас получится:
Чтобы при щелчке на картинке происходил переход на другую страницу, нужна связь. Данная процедура называется прототипирование. Как это выполнить? Для начала дублируем полностью макет нашего проекта (горячие клавиши CTRL+C и CTRL+V). У дубликата удалим все объекты по центру и переделаем этот участок. Добавим rectangle с картинкой (Unsplash) и кнопку назад, чтобы была возможность вернуться. В итоге у нас получится следующее.
Займемся связями, кликаем по картинке и переходим во вкладку prototype. Появится кружок, если навести мышкой, будет плюсик.
Нажимая на плюс, начинаем вести, удерживая мышь, и указываем другой фрейм. В итоге появится всплывающее окно с настройками, оставляем как есть. То же самое проделываем во втором фрейме с кнопкой “назад”. Ниже показана связь. Теперь тестируем если все сделано правильно, при нажатии на миниатюрку пользователь перейдет на другую страница и сможет вернуться назад.
Тестируем и смотрим результат. Чтобы оформить оставшиеся пять страниц с товарами, нужно создать еще дополнительно пять макетов и настроить к ним связь. Надеюсь, вам понятна тема как сделать прототип в Фигма.
Подведем итог: для разработки полноценного проекта веб-мастеру приходится затрачивать много времени. У нас же получилось за небольшой промежуток времени создать с нуля прототип в Фигма из нескольких страниц, при этом мы использовали минимальный набор графических элементов. Этот пример наглядно демонстрирует, как можно придать объектам движение и реализовать переходы, используя прототип сайта в Фигме, а для увеличения функционала существует фигма плагин прототип. С помощью сервиса figma можно разрабатывать красивые дизайнерские проекты и отправлять ссылку на готовую работу заказчику.