LOGOHERE
WORK
SERVICES
ABOUT
CONTACT
Раздел 3. Проектирование интерфейсов сайтов в Figma
Social media
Down to schedule
Тема 1.
Работа с векторами, создание логотипов и иконок в Figma
Тема 2.
Работа с изображениями в Figma
Тема 3.
Создание прототипа сайта в Figma
Что такое Figma: возможности и принципы работы
Figma — графический редактор для совместного проектирования сайтов, приложений и других дизайнерских продуктов. Она появилась в 2016 году как аналог Sketch и Adobe XD, но спустя пару лет стала одним из самых популярных инструментов у дизайнеров.
Все файлы Figma хранятся не у вас на компьютере, а в облаке. Поэтому вам не придётся переживать за их сохранность и каждый раз искать черновики макета. Все изменения в Figma сохраняются автоматически.
Фреймы стандартных размеров под разные устройства: все виды iPhone и самые популярные смартфоны с Android.
Компоненты позволят вам стандартизировать абсолютно всё, что есть у вас в макете. С помощью компонентов можно задать общий стиль макета и в случае необходимости изменить его.
Все файлы Figma хранятся не у вас на компьютере, а в облаке. Поэтому вам не придётся переживать за их сохранность и каждый раз искать черновики макета. Все изменения в Figma сохраняются автоматически.
Фреймы стандартных размеров под разные устройства: все виды iPhone и самые популярные смартфоны с Android.
Компоненты позволят вам стандартизировать абсолютно всё, что есть у вас в макете. С помощью компонентов можно задать общий стиль макета и в случае необходимости изменить его.
Работа с векторами, создание логотипов и иконок в Figma
Как работает режим векторного редактора в Figma
Pen Tool позволяет рисовать кривые линии в Фигме и несложные векторные формы: иконки и графику. В Фигме так же можно редактировать векторные изображения в формате Svg, например из Adobe Illustrator или редактора Sketch.
Перо создает изогнутые линии - кривые Безье, Кривые Безье используются в компьютерной графике для рисования плавных изгибов, которые вы можете соединить между собой, формируя таким образом сложную фигуру.
Инструмент перо - Pen Tool
Для начала нарисуйте простой квадрат:
1. На панели инструментов нажмите на иконку Pen (или P на клавиатуре)
и кликните в любую часть макета.
2. Кликните ещё раз в любую другую часть макета, и у вас появится линия.
3. Таким же образом сделайте ещё три линии, чтобы у вас получился квадрат. Последняя линия должна соединиться с первой. Чтобы линии получились ровными, делайте их с зажатой клавишей Shift.
Обратите внимание, что, создав первую точку, вы вошли в режим векторного редактора, и панель инструментов изменилась:
Pen Tool позволяет рисовать кривые линии в Фигме и несложные векторные формы: иконки и графику. В Фигме так же можно редактировать векторные изображения в формате Svg, например из Adobe Illustrator или редактора Sketch.
Перо создает изогнутые линии - кривые Безье, Кривые Безье используются в компьютерной графике для рисования плавных изгибов, которые вы можете соединить между собой, формируя таким образом сложную фигуру.
Инструмент перо - Pen Tool
Для начала нарисуйте простой квадрат:
1. На панели инструментов нажмите на иконку Pen (или P на клавиатуре)
и кликните в любую часть макета.
2. Кликните ещё раз в любую другую часть макета, и у вас появится линия.
3. Таким же образом сделайте ещё три линии, чтобы у вас получился квадрат. Последняя линия должна соединиться с первой. Чтобы линии получились ровными, делайте их с зажатой клавишей Shift.
Обратите внимание, что, создав первую точку, вы вошли в режим векторного редактора, и панель инструментов изменилась:
Добавьте на квадрат дополнительные точки, чтобы получился многоугольник:
1. На панели инструментов нажмите на иконку стрелки, наведите курсор на одну из линий — посередине вы увидите точку.
2. Зажмите эту точку правой кнопкой мыши и тяните её от центра фигуры.
3. Повторите то же самое с остальными сторонами фигуры.
Сгладьте углы получившегося прямоугольника:
1. На панели инструментов нажмите на иконку Bend tool
и дважды кликните на любую из точек фигуры.
2. Зажмите любой из краёв появившихся линий — их называют усами. Тяните ус в сторону изгиба угла, чтобы он не пересекал линию дуги. Иначе ваша линия может получиться «мятой».
3. Повторите то же самое с остальными точками. Если получившееся скругление вам не нравится, нажмите правой кнопкой мыши на нужную вам точку.
1. На панели инструментов нажмите на иконку стрелки, наведите курсор на одну из линий — посередине вы увидите точку.
2. Зажмите эту точку правой кнопкой мыши и тяните её от центра фигуры.
3. Повторите то же самое с остальными сторонами фигуры.
Сгладьте углы получившегося прямоугольника:
1. На панели инструментов нажмите на иконку Bend tool
и дважды кликните на любую из точек фигуры.
2. Зажмите любой из краёв появившихся линий — их называют усами. Тяните ус в сторону изгиба угла, чтобы он не пересекал линию дуги. Иначе ваша линия может получиться «мятой».
3. Повторите то же самое с остальными точками. Если получившееся скругление вам не нравится, нажмите правой кнопкой мыши на нужную вам точку.
Как и у стандартных фигур в Figma, у вектора можно изменить цвет заливки и параметры обводки.
Залить можно как цветом так и картинкой для этого перейдите в окно редактирования Fill.
Залить можно как цветом так и картинкой для этого перейдите в окно редактирования Fill.
В окне Stroke можно выбрать толщину, цвет и вид обводки (Stroke style), добавить скругление, изменить режим наложения:
Сenter - обводка по центру
Inside - обводка внутри
Outside - обводка за границей
Сenter - обводка по центру
Inside - обводка внутри
Outside - обводка за границей
Любую стандартную фигуру в Figma — круг, квадрат, треугольник или многоугольник — можно редактировать как вектор. Чтобы это сделать, создайте фигуру и дважды кликните по ней правой кнопкой мыши. Чтобы выйти из режима редактирования вектора, нажмите Done на панели инструментов. Если захотите что-то изменить, дважды кликните по вектору.
Как создавать сложные фигуры
Чтобы сделать кривую, вам надо в конечной точке не отпускать курсор, а протащить его от точки.
Выбираем ее и дважды кликаем по ней, чтобы перевести в режим редактирования вектора, либо нажимаем на иконку сверху.
В режиме редактирования вектора фигма подсвечивает узлы вектора, если вы нажмете на один из них, то увидите управляющие элементы.
Чтобы сделать кривую, вам надо в конечной точке не отпускать курсор, а протащить его от точки.
- Кликаете для создания первой точки
- Отпускаете
- Переносите курсор в конечную точку
- Зажимаете курсор и тащите в сторону
Выбираем ее и дважды кликаем по ней, чтобы перевести в режим редактирования вектора, либо нажимаем на иконку сверху.
В режиме редактирования вектора фигма подсвечивает узлы вектора, если вы нажмете на один из них, то увидите управляющие элементы.
Режим редактирования вектора:
Узел вектора в Figma:
Направляющая в узле:
Угол наклона направляющей показывает, под каким углом линия будет «входить» в узел, а длина направляющей регулирует радиус.
Если при редактировании задать клавишу «Alt», то можно передвигать один из рычагов.
Если вы хотите превратить свою кривую в прямую, приведите направляющую к узлу, из которого она выходит.
Чтобы продолжить вектор, наведите перо на узел и создайте из него еще один вектор.
Чтобы удалить ненужную точку, но при этом что бы сама прямая осталась нужно в режиме пера зажать Alt и навести на лишнюю точку, появится минус , нажимаем на точку.
Если при редактировании задать клавишу «Alt», то можно передвигать один из рычагов.
Если вы хотите превратить свою кривую в прямую, приведите направляющую к узлу, из которого она выходит.
Чтобы продолжить вектор, наведите перо на узел и создайте из него еще один вектор.
Чтобы удалить ненужную точку, но при этом что бы сама прямая осталась нужно в режиме пера зажать Alt и навести на лишнюю точку, появится минус , нажимаем на точку.
Сочленение векторов:
Далее, если вы создали из узла еще один вектор, у вас будет уже две направляющие.
Для удобства Фигма предлагает использовать одну из трех настроек узла.
Настройки отражения:
Для удобства Фигма предлагает использовать одну из трех настроек узла.
Настройки отражения:
- No mirroring — направляющие будут управлять независимо друг от друга
- Mirror Angle — отражаться будет только угол наклона направляющей. Таким образом в узле не будет резкого перехода (излома) из одного вектора в другой
- Mirror Angle and Length — направляющие будут иметь отраженные углы и одинаковую длину. Таким образом вы добьетесь симметричного изгиба.
Из одного узла можно создать неограниченное количество векторов, но настройки отражения для таких количеств соединений уже не работают.
Параметры кривой:
Просмотр расстояния от точки до кривой
При редактировании вектора в Figma с зажатым Alt (Windows) / Option (Mac) наведите на другой узел или кривую, чтобы просмотреть расстояния по осям X и Y.
Используйте инструмент Paint Bucket для заливки закрытого контура.
При редактировании вектора в Figma с зажатым Alt (Windows) / Option (Mac) наведите на другой узел или кривую, чтобы просмотреть расстояния по осям X и Y.
Используйте инструмент Paint Bucket для заливки закрытого контура.
Если при редактировании зажать клавишу «Alt», то можно передвигать одну из направляющих в узле.
При зажатии клавиши «Shift», будет возможность изменять расположение рычагов на 45 градусов.
При зажатии клавиши «Shift», будет возможность изменять расположение рычагов на 45 градусов.
Выравнивания векторов
Как перевести текст в кривые
Чтобы перевести текст к кривые в фигме нажмите на комбинацию 2 горячих клавиш Ctrl + E. После этого сможете редактировать текст в формате кривых. При нажатии клавиши Enter у текста появятся опорные точки, которые можно передвигать. В формате кривых дописывать текст невозможно.
Отличие фигур в формате кривых в фигме
При редактировании круга можно вырезать часть круга или создавать круговые диаграммы. В многоугольнике будет возможность задавать количество углов. Когда редактируете звезду тоже есть возможность увеличивать или уменьшать количество углов.
При переводе элементов в кривые появятся опорные точки, которые можно двигать.
При переводе элементов в кривые появятся опорные точки, которые можно двигать.
Работа с иконками в Figma
Все иконки вы можете создать в самой фигме, опираясь на работу с уже изученным нами инструментом Pen Tool.
Но задачу можно облегчить используя плагин «Material design icons»
Давайте установим его.
Чтобы установить плагин с иконками «Material design icons» перейдите по ссылке, и нажмите на кнопку «Install»
Чтобы активировать плагин, перейдите в ваш проект. Нажмите на меню слева и выберите пункт «Plagins» далее «Material design icons».
Как вставить иконку в фигму с помощью плагина?
Чтобы вставить иконку в фигму с помощью плагина «Material design icons», просто выберите подходящую иконку и нажмите на неё левой клавишей мыши.
Из выпадающего списка слева вы можете выбирать один из нескольких стилей иконок:
Справа вы можете выбирать размеры иконок. Просто выберите из списка подходящий размер. Также вы можете масштабировать иконки с помощью инструмента «Scale». Его можно выбрать сверху, слева, либо зажать клавишу «K».
Далее в плагине можно выбрать формат: SVG или PNG. В чем отличие этих двух форматов?
Чтобы перекрасить SVG иконки выберите иконку и в панели справа (внизу надписи Fill) поменяйте её цвет. Для того, чтобы перекрасить иконку в формате PNG можно воспользоваться плагином «Color overlay».
Но задачу можно облегчить используя плагин «Material design icons»
Давайте установим его.
Чтобы установить плагин с иконками «Material design icons» перейдите по ссылке, и нажмите на кнопку «Install»
Чтобы активировать плагин, перейдите в ваш проект. Нажмите на меню слева и выберите пункт «Plagins» далее «Material design icons».
Как вставить иконку в фигму с помощью плагина?
Чтобы вставить иконку в фигму с помощью плагина «Material design icons», просто выберите подходящую иконку и нажмите на неё левой клавишей мыши.
Из выпадающего списка слева вы можете выбирать один из нескольких стилей иконок:
- Classic — классические иконки для фигмы.
- Filled — иконки с заливкой.
- Outlines — иконки в виде линий.
- Rounded — иконки со скруглением.
- Sharp — иконки с острыми углами.
- Two tone — двухцветные иконки.
Справа вы можете выбирать размеры иконок. Просто выберите из списка подходящий размер. Также вы можете масштабировать иконки с помощью инструмента «Scale». Его можно выбрать сверху, слева, либо зажать клавишу «K».
Далее в плагине можно выбрать формат: SVG или PNG. В чем отличие этих двух форматов?
- У PNG формата при увеличении появляются пиксели. У SVG пикселей нет. Их можно масштабировать до бесконечности, без потери качества. Поэтому рекомендую использовать именно SVG формат для ваших проектов.
- SVG иконки вы можете перекрасить стандартным образом, а PNG нет.
Чтобы перекрасить SVG иконки выберите иконку и в панели справа (внизу надписи Fill) поменяйте её цвет. Для того, чтобы перекрасить иконку в формате PNG можно воспользоваться плагином «Color overlay».
Чтобы добавить точку в вектор выбираем Pen Tool кликаем на вектор и зажимаем V.
Чтобы продублировать кривые зажимаем Alt.
Меняем заливку в обводку Shift X
Как работать с изображениями в Figma
Добавление изображения в макет
1. Drag and Drop.
Выберете нужное изображение на вашем компьютере и поместите картинку в Figma простым перетаскиванием в ваш проект (зажав левую клавишу мыши). Оно импортируется со своими оригинальными размерами.
2. Copy/Paste.
Скопируйте и вставьте через буфер обмена. Копируете картинку, например из браузера или из файловой системы компьютера, Ctrl+C, и вставьте в Figma Ctrl+V. Главное, если будете публиковать в интернете (например на сайте), то обязательно смотрите лицензию. Есть огромное количество сайтов, которые предоставляют изображения для коммерческих целей.
3. Используя пункт меню Place Image (или сочетанием клавиш Ctrl+Shift+K).
Выберите одно или несколько изображений в нужной папке на компьютере. Курсор изменит вид на крестик, а рядом будет превью изображения. Курсор указывает на центр изображения.
Удобно вставлять сразу несколько изображений.
Через плагины:
Чтобы не искать изображения можно воспользоваться плагинами. Один из популярных плагинов для вставки фотографий — Unsplash. C его помощью можно вставлять фотографии с популярного сайта unsplash.com. На нём размещены тысячи изображений, которые можно использовать в любых ваших целях.
Чтобы удалить ненужное фото в фигме просто нажмите на клавишу bacspace на клавиатуре.
1. Drag and Drop.
Выберете нужное изображение на вашем компьютере и поместите картинку в Figma простым перетаскиванием в ваш проект (зажав левую клавишу мыши). Оно импортируется со своими оригинальными размерами.
2. Copy/Paste.
Скопируйте и вставьте через буфер обмена. Копируете картинку, например из браузера или из файловой системы компьютера, Ctrl+C, и вставьте в Figma Ctrl+V. Главное, если будете публиковать в интернете (например на сайте), то обязательно смотрите лицензию. Есть огромное количество сайтов, которые предоставляют изображения для коммерческих целей.
3. Используя пункт меню Place Image (или сочетанием клавиш Ctrl+Shift+K).
Выберите одно или несколько изображений в нужной папке на компьютере. Курсор изменит вид на крестик, а рядом будет превью изображения. Курсор указывает на центр изображения.
Удобно вставлять сразу несколько изображений.
Через плагины:
Чтобы не искать изображения можно воспользоваться плагинами. Один из популярных плагинов для вставки фотографий — Unsplash. C его помощью можно вставлять фотографии с популярного сайта unsplash.com. На нём размещены тысячи изображений, которые можно использовать в любых ваших целях.
Чтобы удалить ненужное фото в фигме просто нажмите на клавишу bacspace на клавиатуре.
Заливка фигуры картинкой
В основе любого изображения в Figma лежит фигура, а само изображение является заливкой этой фигуры.
Вы можете вставлять картинки в любые фигуры созданные в фигме. Это может быть круг, прямоугольник, квадрат, звезда, многоугольник и т.д. Также с помощью этого способа можно сделать фон картинкой в фрейме.
Как вставить изображение в любую фигуру в Figma?
Через правую панель:
Чтобы вставить изображение в фигуру через правую панель сделайте следующее:
В основе любого изображения в Figma лежит фигура, а само изображение является заливкой этой фигуры.
Вы можете вставлять картинки в любые фигуры созданные в фигме. Это может быть круг, прямоугольник, квадрат, звезда, многоугольник и т.д. Также с помощью этого способа можно сделать фон картинкой в фрейме.
Как вставить изображение в любую фигуру в Figma?
Через правую панель:
Чтобы вставить изображение в фигуру через правую панель сделайте следующее:
- Выберите нужную фигуру.
- В правой панели нажмите на цвет.
- Кликните на «Solid» (сплошная заливка) и выберите из списка «Image». Появится шахматная заливка прямоугольника, это означает, что ваше изображение пока не выбрано. Выбираем изображение, нажав на кнопку Choose Image.
- Выберите изображение для вставки на компьютере.
Через инструмент «Place images»:
Можно вставить несколько разных изображений в несколько фигур в фигме одновременно. Например: если в дизайне сайта галерея или портфолио. Можно вставить нужные картинки в эти раздел массово.
Можно вставить несколько разных изображений в несколько фигур в фигме одновременно. Например: если в дизайне сайта галерея или портфолио. Можно вставить нужные картинки в эти раздел массово.
- Выберите в панели сверху, слева инструмент «Place images». Он находится во вкладке с фигурами (Shape tools).
- Найдите на рабочем столе нужные изображения и выделите их для вставки.
- Рядом с курсором появится количество вставляемых изображений. Вставьте их в нужные фигуры кликнув на них левой клавишей мыши.
Как обрезать изображения в Figma
Чтобы обрезать изображение в Figma воспользуйтесь инструментом «Crop image». Он находится в верхней панели по центру.
Чтобы обрезать изображение в Figma воспользуйтесь инструментом «Crop image». Он находится в верхней панели по центру.
- Выделите нужную картинку.
- Активируйте инструмент «Crop image».
- Уменьшите изображение, выбрав какой-либо край с зажатой клавишей мыши.
- Перемещайте изображение, чтобы выбрать видимую область в фигуре.
В окне редактирования можно быстро поправить экспозицию, контрастность, насыщенность, температуру, повернуть изображение, или изменить способ наложения (капелька рядом с крестиком окна).
Регулируйте в Фигме цвета, яркость изображения, контраст, насыщенность, яркость отдельных участков фото.
Регулируйте в Фигме цвета, яркость изображения, контраст, насыщенность, яркость отдельных участков фото.
Всего существует 4 вида заливки:
- Fill. Изображение заполняет фигуру полностью, при этом оно обрезается.
- Fit. Изображение заполняет фигуру, при этом его видно целиком. Если пропорции фрейма не совпадают с пропорциями картинки, в нём появится пустое пространство.
- Crop. Позволяет выбрать область изображения для отображения и обрезать лишние части.
- Tile. Заполняет фигуру изображением, создает паттерн.
Маска слоя
Если вам нужна круглая картинка, не обязательно рисовать круг, просто установите большой Corner Radius вашему изображению.
Если нужна нестандартная маска, то нарисуйте нужную вам фигуру, выделите слой с маской и вашим изображением и нажмите Ctrl+Shift+M или кликните по иконке маски в верхней панели программы.
Важно, чтобы в иерархии слоев картинка была выше, чем фигура.
Если вам нужна круглая картинка, не обязательно рисовать круг, просто установите большой Corner Radius вашему изображению.
Если нужна нестандартная маска, то нарисуйте нужную вам фигуру, выделите слой с маской и вашим изображением и нажмите Ctrl+Shift+M или кликните по иконке маски в верхней панели программы.
Важно, чтобы в иерархии слоев картинка была выше, чем фигура.
Как вырезать объект в Figma
- Разместите изображение в рабочем поле
- При помощи пера, поверх картинки, повторите контур той части изображения, которую нужно обрезать
- Залейте получившуюся область любым цветом
- Разместите векторный объект ниже по иерархии
- Выделите изображение и векторный объект
- Примените к обоим слоя свойство "Use as Mask" (Клавиатурное сокращене Ctrl + Alt + M)
Как в Figma отразить картинку
Для этого нам понадобиться использовать клавиатурные сокращения.
Shift + H (отразить картинку по горизонтали). Второй способ — нажать правую клавишу мыши и выбрать надпись «Flip horizontal».
Shift + V (отразить по вертикали). Также можете нажать правую клавиши мыши и выбрать пункт «Flip vertical».
Для этого нам понадобиться использовать клавиатурные сокращения.
Shift + H (отразить картинку по горизонтали). Второй способ — нажать правую клавишу мыши и выбрать надпись «Flip horizontal».
Shift + V (отразить по вертикали). Также можете нажать правую клавиши мыши и выбрать пункт «Flip vertical».
Как размыть фото в Figma
Чтобы размыть изображения в Figma сделайте следующие шаги:
Чтобы размыть изображения в Figma сделайте следующие шаги:
- Выберите нужную картинку.
- В правой панеле напротив надписи «Effects» нажмите на иконку плюса.
- Замените значение «Drop shadow» на «Layer blur».
- Кликните на иконку солнца и поставьте значение размытия. Чем больше значение, тем больше размытие.
Как изменить прозрачность картинки
Чтобы изменить прозрачность изображения в Figma измените цифру с процентами в правой панели, внизу надписи «Fill».
Также можно нажать на клавиатуре на цифры. 1 — 10% прозрачности, 5 —50% и т.д. Если быстро нажать 2 цифры (например 34), то прозрачность изображения будет 34%.
Чтобы изменить прозрачность изображения в Figma измените цифру с процентами в правой панели, внизу надписи «Fill».
Также можно нажать на клавиатуре на цифры. 1 — 10% прозрачности, 5 —50% и т.д. Если быстро нажать 2 цифры (например 34), то прозрачность изображения будет 34%.
Как сделать градиент у изображения
Чтобы добавить изображению градиент, используйте знак «+» в панели свойств. Выберите стиль градиента: Linear (Линейный), Radial (Радиальный), Angular (Угловой) или Diamond (Ромбовидный).
Используйте дополнительные настройки цвета и изменяйте положение градиента, чтобы добиться нужного эффекта изображения.
Чтобы добавить изображению градиент, используйте знак «+» в панели свойств. Выберите стиль градиента: Linear (Линейный), Radial (Радиальный), Angular (Угловой) или Diamond (Ромбовидный).
Используйте дополнительные настройки цвета и изменяйте положение градиента, чтобы добиться нужного эффекта изображения.
Многослойные заливки и Режимы наложения в Figma
Предположим, вы хотите сделать свой образ черно-белым. Один из способов сделать это — настроить ползунок насыщенности (Saturation) в настройках заливки. Однако, если вам когда-нибудь понадобится поменять это изображение на другое, вам придется повторно применить эту настройку. Здесь помогут слои заливки и режимы наложения.
Добавив сплошную заливку, задав цвет черным или белым, а затем изменив режим наложения на Сolor, вы получите черно-белые изображения с более тонким управлением. Для этого кликаем на "+" в окне Fill и редактируем новый слой заливки.
Предположим, вы хотите сделать свой образ черно-белым. Один из способов сделать это — настроить ползунок насыщенности (Saturation) в настройках заливки. Однако, если вам когда-нибудь понадобится поменять это изображение на другое, вам придется повторно применить эту настройку. Здесь помогут слои заливки и режимы наложения.
Добавив сплошную заливку, задав цвет черным или белым, а затем изменив режим наложения на Сolor, вы получите черно-белые изображения с более тонким управлением. Для этого кликаем на "+" в окне Fill и редактируем новый слой заливки.
Настройки цветокоррекции в Figma:
- Exposure — экспозиция.
- Contrast — контраст.
- Saturation — насыщенность.
- Temperature — температура.
- Tint — оттенок.
- Highlights — интенсивность света.
- Shadows — интенсивность тени.
Быстро вырезать объект поможет плагин Remove BG, который автоматически удаляет фон.
Как установить плагин Remove BG:
Как установить плагин Remove BG:
- Зайдите на страницу плагина и установите его, нажав Install.
- Зарегистрируйтесь на сайте remove.bg.
- На сайте нажмите на иконку профиля и зайдите в панель управления. В панели нажмите на «Ключ API», затем ― на кнопку «Показать» и скопируйте полученный код.
- Зайдите в Figma, нажмите на иконку
- , перейдите, затем в Remove BG, нажмите на Set API key. В появившееся окно вставьте ключ, который вы взяли с сайта, и нажмите OK.
- Добавьте на макет любую иллюстрацию, нажмите на неё правой кнопкой мыши, перейдите в Plugins → Remove BG → Run. Фон из иллюстрации удалится.
Для того чтобы сделать монохромное изображение в вашем фирменном цвете, мы также выбираем режим наложения Color и цвет заливки, который можно выбрать из палитры документа или подобрать самостоятельно.
Многослойные заливки можно так же использовать для наложения одного изображения на другое. Например, чтобы попасть в фирменный стиль сайта или добавить фотографии индивидуальности.
Чтобы наложить изображение сделайте следующее:
Чтобы наложить изображение сделайте следующее:
- Выберите нужное изображение.
- Создайте новый слой. В правой панели Layer нажмите на "+".
- Кликните на «Solid» (сплошная заливка) и выберите из списка «Image». Появится шахматная заливка прямоугольника, это означает, что ваше изображение пока не выбрано. Выбираем изображение, нажав на кнопку Choose Image.
- Выберите изображение для вставки на компьютере.
Выберите прозрачность наложения и получите результат:
Как наложить текст поверх картинки в Figma
Для того чтобы сделать текст с наложением на него какой-либо картинки в Figma необходимо:
Для того чтобы сделать текст с наложением на него какой-либо картинки в Figma необходимо:
- Создать текстовый фрейм и вставить изображение. Текст должен быть расположен внизу изображения (убедитесь, что это так в слоях).
- Совместите 2 этих элемента вместе и выделите.
- Нажмите сверху по центру иконку «Use as mask».
Как сохранить картинку из Figma на компьютер
Чтобы сохранить нужную картинку из фигмы на компьютер, воспользуйтесь инструментом «Export»:
Чтобы сохранить нужную картинку из фигмы на компьютер, воспользуйтесь инструментом «Export»:
- Выделите нужную картинку, в панели справа,
- Напротив надписи «Export» нажмите на пиктограмму «+».
- Выберите нужный формат для сохранения (JPG, PNG, SVG, PDF).
- Нажмите на кнопку экспорта и сохраните на компьютер в нужное место.
Изображения в виде обводок
- В панели "Stroke" увеличиваем значение "Inside", таким образом задаем толщину рамки.
- В окне заливки выбираем "Image".
- Добавляем изображение.
Скопировать SVG-иконку с любого сайта в Figma можно через браузер:
- Зайдите на сайт с нужной иконкой, нажмите правую кнопку и выберите «Посмотреть код». Справа откроется панель с HTML-кодом сайта.
- В окне с кодом на панели сверху нажмите на иконку
- и выберите нужную иконку на сайте.
- В HTML-коде выделится тег <path>, прямо над ним будет <svg> — нажмите на него и скопируйте с помощью сочетания Ctrl + C на клавиатуре.
- Зайдите в Figma и нажмите Ctrl + V — иконка встанет на макет.
Прототип сайта
Прототип — это модель сайта или приложения. С ней заказчику проще оценить, как люди будут пользоваться продуктом. Чтобы создать прототип сайта, дизайнер отрисовывает экраны и создаёт связи между ними.
Интерфейс
Элементы интерфейса — это внешний вид продукта. В Фигме можно создать кнопки, иконки, формы обратной связи и настроить эффекты: сделать кликабельные кнопки, раскрыть списки, создать анимацию для блоков и попапов.
Интерфейс Фигмы
После регистрации пользователю доступны две рабочие области — графический редактор и менеджер файлов, в котором можно создавать проекты и изменять настройки профиля. Рассмотрим пункты меню менеджера файлов.
Профиль
В настройках профиля можно загрузить аватарку, сменить имя, пароль и email, на который приходят оповещения. Там же можно обновить тариф и удалить аккаунт.
Поиск
Ищите файлы и проекты, в которых вы участвуете, через поиск Search.
Последние файлы
В Фигме файлы сохраняются автоматически. Все файлы, которые вы открывали, можно увидеть во вкладке Recent.
Фигма сохраняет историю изменений каждого файла. Вы легко сможете восстановить резервную копию вашей работы.
В пункте Plugins собраны расширения, которые помогут ускорить работу в Фигме. Например, с плагином Unsplash можно находить стоковые иллюстрации, не покидая Фигмы. А с Iconify под рукой дизайнера будут 40 000 векторных иконок на все случаи жизни.
Поиск
Поиск Search ищет пункты меню, а не элементы, которые вы создавали. Пригодится, если вам нужна конкретная команда, но вы забыли, где именно она находится.
Панель File
Инструменты панели помогают применить действие к файлу, в котором вы работаете. Например, с помощью New file from Sketch можно импортировать файлы, созданные в графическом редакторе Скетч.
Фигма — это инструмент для совместной работы, она сохраняет изменения файла автоматически. Вы можете сохранить изменения немедленно, нажав Save to Version History или посмотреть историю изменений коллег, нажав Show Version History.
Чтобы сохранить файл Фигмы в pdf, используйте Export Frames to PDF. Пригодится для презентаций.
Панель Edit
Панель позволяет работать с элементами дизайна в файле. Чтобы применить действие к элементу, его нужно выделить. Например, объект можно скопировать как код CSS, SVG или PNG-файл с помощью Copy As.
Функция Paste Over Selection позволяет разместить скопированный элемент в левом верхнем углу другого объекта.
Все новые объекты, созданные в файле, по умолчанию серого цвета. Бывают ситуации, когда вам нужно создать множество объектов с другим цветом. Используйте Set Default Properties: скопируйте цвет нужного объекта один раз и все последующие объекты будут созданы с заданными свойствами.
Окрашивайте объект в нужный цвет пипеткой Pick Color.
Группа команд Select All with подсвечивает все похожие объекты в файле: с одинаковыми свойствами, заливкой, шрифтами, эффектами и так далее.
Панель View
Панель находится слева в меню редактора и дублируется справа. Она отвечает за масштабирование макета и навигацию по нему.
Из полезного — функция Pixel Preview. Фигма — векторный редактор, поэтому дизайнер видит ровные векторные линии. Подключая просмотр объекта в пикселях, можно увидеть, как элемент будет выглядеть на экране.
Панель Preferences
Панель определяет навигацию в файле. Первые три пункта — Snap to Geometry, Snap to Pixel Grid, Snap to Objects — настройки привязки. Помогут слегка примагнитить элементы и избежать «кривой» сетки, если вы работаете быстро.
Highlight Layers on Hover лучше держать включенным всегда — функция подсвечивает мелкие элементы дизайна при наведении — кнопки, буквы, иконки, значки.
Интерфейс
Элементы интерфейса — это внешний вид продукта. В Фигме можно создать кнопки, иконки, формы обратной связи и настроить эффекты: сделать кликабельные кнопки, раскрыть списки, создать анимацию для блоков и попапов.
Интерфейс Фигмы
После регистрации пользователю доступны две рабочие области — графический редактор и менеджер файлов, в котором можно создавать проекты и изменять настройки профиля. Рассмотрим пункты меню менеджера файлов.
Профиль
В настройках профиля можно загрузить аватарку, сменить имя, пароль и email, на который приходят оповещения. Там же можно обновить тариф и удалить аккаунт.
Поиск
Ищите файлы и проекты, в которых вы участвуете, через поиск Search.
Последние файлы
В Фигме файлы сохраняются автоматически. Все файлы, которые вы открывали, можно увидеть во вкладке Recent.
Фигма сохраняет историю изменений каждого файла. Вы легко сможете восстановить резервную копию вашей работы.
В пункте Plugins собраны расширения, которые помогут ускорить работу в Фигме. Например, с плагином Unsplash можно находить стоковые иллюстрации, не покидая Фигмы. А с Iconify под рукой дизайнера будут 40 000 векторных иконок на все случаи жизни.
Поиск
Поиск Search ищет пункты меню, а не элементы, которые вы создавали. Пригодится, если вам нужна конкретная команда, но вы забыли, где именно она находится.
Панель File
Инструменты панели помогают применить действие к файлу, в котором вы работаете. Например, с помощью New file from Sketch можно импортировать файлы, созданные в графическом редакторе Скетч.
Фигма — это инструмент для совместной работы, она сохраняет изменения файла автоматически. Вы можете сохранить изменения немедленно, нажав Save to Version History или посмотреть историю изменений коллег, нажав Show Version History.
Чтобы сохранить файл Фигмы в pdf, используйте Export Frames to PDF. Пригодится для презентаций.
Панель Edit
Панель позволяет работать с элементами дизайна в файле. Чтобы применить действие к элементу, его нужно выделить. Например, объект можно скопировать как код CSS, SVG или PNG-файл с помощью Copy As.
Функция Paste Over Selection позволяет разместить скопированный элемент в левом верхнем углу другого объекта.
Все новые объекты, созданные в файле, по умолчанию серого цвета. Бывают ситуации, когда вам нужно создать множество объектов с другим цветом. Используйте Set Default Properties: скопируйте цвет нужного объекта один раз и все последующие объекты будут созданы с заданными свойствами.
Окрашивайте объект в нужный цвет пипеткой Pick Color.
Группа команд Select All with подсвечивает все похожие объекты в файле: с одинаковыми свойствами, заливкой, шрифтами, эффектами и так далее.
Панель View
Панель находится слева в меню редактора и дублируется справа. Она отвечает за масштабирование макета и навигацию по нему.
Из полезного — функция Pixel Preview. Фигма — векторный редактор, поэтому дизайнер видит ровные векторные линии. Подключая просмотр объекта в пикселях, можно увидеть, как элемент будет выглядеть на экране.
Панель Preferences
Панель определяет навигацию в файле. Первые три пункта — Snap to Geometry, Snap to Pixel Grid, Snap to Objects — настройки привязки. Помогут слегка примагнитить элементы и избежать «кривой» сетки, если вы работаете быстро.
Highlight Layers on Hover лучше держать включенным всегда — функция подсвечивает мелкие элементы дизайна при наведении — кнопки, буквы, иконки, значки.
Инструменты и возможности Фигмы
Рассмотрим панель инструментов для работы с графикой и выравнивания объектов, выбора шрифтов, создания эффектов для слоёв и фигур.
Фреймы
Фрейм или артборд — основной элемент дизайна в Фигме. Это законченный документ, который может быть страницей сайта или экраном мобильного приложения.
Вы можете задать размер фрейма самостоятельно или выбрать готовые размеры экранов популярных устройств — ноутбуков, часов, планшетов — в панели инструментов справа.
Фрейм объединяет объекты внутри себя. Когда вы создаёте дизайн внутри фрейма, в панели свойств слева будут добавляться слои. Слои в Фигме — это содержимое вашего фрейма: объекты, текст, фотографии.
Вы можете сгруппировать отдельные объекты во фрейм или разбить его на объекты сочетаниями клавиш
Объекты внутри фрейма можно группировать. Допустим, вы делаете несколько страниц сайта. На каждой странице внизу экрана у вас будут контакты: телефон и электронная почта. Сгруппируйте объекты из меню Object → Group Selection или сочетанием клавиш Ctrl (Cmd) + G. Вы увидите изменения в слоях объектов — они объединились в группу. Теперь вы можете перемещать все объекты разом.
Дополнительно вы можете ограничивать поведение элементов во фрейме. Например, вы хотите, чтобы кнопка вашего дизайна была всегда в углу экрана, даже если размер фрейма изменится. Выберите объект во фрейме и используйте инструмент Constraints в панели свойств справа.
Фрейм — это законченный дизайн, его можно скачать одним файлом. При сохранении убедитесь, что все объекты находятся внутри фрейма. Если случайно переместить слой объекта за пределы фрейма, можно потерять часть дизайна. Перед скачиванием, проверьте превью файла, и выберите нужный формат.
Модульная сетка
Сетка в Фигме помогает упорядочить все элементы дизайна во фрейме. Чтобы легко адаптировать дизайн от одного устройства к другому, используйте в Фигме 12 колоночную модульную сетку (Bootstrap).
Для настройки сетки нажмите «+» в блоке Layout Grid.
Задайте количество колонок, их цвет и прозрачность. Вы можете настроить тип сетки — сделать её адаптивной, выровнять по центру или краю.
Рассмотрим панель инструментов для работы с графикой и выравнивания объектов, выбора шрифтов, создания эффектов для слоёв и фигур.
Фреймы
Фрейм или артборд — основной элемент дизайна в Фигме. Это законченный документ, который может быть страницей сайта или экраном мобильного приложения.
Вы можете задать размер фрейма самостоятельно или выбрать готовые размеры экранов популярных устройств — ноутбуков, часов, планшетов — в панели инструментов справа.
Фрейм объединяет объекты внутри себя. Когда вы создаёте дизайн внутри фрейма, в панели свойств слева будут добавляться слои. Слои в Фигме — это содержимое вашего фрейма: объекты, текст, фотографии.
Вы можете сгруппировать отдельные объекты во фрейм или разбить его на объекты сочетаниями клавиш
Объекты внутри фрейма можно группировать. Допустим, вы делаете несколько страниц сайта. На каждой странице внизу экрана у вас будут контакты: телефон и электронная почта. Сгруппируйте объекты из меню Object → Group Selection или сочетанием клавиш Ctrl (Cmd) + G. Вы увидите изменения в слоях объектов — они объединились в группу. Теперь вы можете перемещать все объекты разом.
Дополнительно вы можете ограничивать поведение элементов во фрейме. Например, вы хотите, чтобы кнопка вашего дизайна была всегда в углу экрана, даже если размер фрейма изменится. Выберите объект во фрейме и используйте инструмент Constraints в панели свойств справа.
Фрейм — это законченный дизайн, его можно скачать одним файлом. При сохранении убедитесь, что все объекты находятся внутри фрейма. Если случайно переместить слой объекта за пределы фрейма, можно потерять часть дизайна. Перед скачиванием, проверьте превью файла, и выберите нужный формат.
Модульная сетка
Сетка в Фигме помогает упорядочить все элементы дизайна во фрейме. Чтобы легко адаптировать дизайн от одного устройства к другому, используйте в Фигме 12 колоночную модульную сетку (Bootstrap).
Для настройки сетки нажмите «+» в блоке Layout Grid.
Задайте количество колонок, их цвет и прозрачность. Вы можете настроить тип сетки — сделать её адаптивной, выровнять по центру или краю.
Прототип сайта
Прототип
Прототип — это модель сайта или приложения. С ней заказчику проще оценить, как люди будут пользоваться продуктом. Чтобы создать прототип сайта, дизайнер отрисовывает экраны и создаёт связи между ними.
Интерфейс
Элементы интерфейса — это внешний вид продукта. В Фигме можно создать кнопки, иконки, формы обратной связи и настроить эффекты: сделать кликабельные кнопки, раскрыть списки, создать анимацию для блоков и попапов.
Как устроен редактор файлов Фигмы
В новом файле пользователю доступны три области: рабочая область, панель инструментов и панель слоёв. Рассмотрим важные функции пунктов меню.
Поиск
Поиск Search ищет пункты меню, а не элементы, которые вы создавали. Пригодится, если вам нужна конкретная команда, но вы забыли, где именно она находится.
Панель File
Инструменты панели помогают применить действие к файлу, в котором вы работаете. Например, с помощью New file from Sketch можно импортировать файлы, созданные в графическом редакторе Скетч.
Фигма — это инструмент для совместной работы, она сохраняет изменения файла автоматически. Вы можете сохранить изменения немедленно, нажав Save to Version History или посмотреть историю изменений коллег, нажав Show Version History.
Чтобы сохранить файл Фигмы в pdf, используйте Export Frames to PDF. Пригодится для презентаций.
Панель Edit
Панель позволяет работать с элементами дизайна в файле. Чтобы применить действие к элементу, его нужно выделить. Например, объект можно скопировать как код CSS, SVG или PNG-файл с помощью Copy As.
Функция Paste Over Selection позволяет разместить скопированный элемент в левом верхнем углу другого объекта.
Все новые объекты, созданные в файле, по умолчанию серого цвета. Бывают ситуации, когда вам нужно создать множество объектов с другим цветом. Используйте Set Default Properties: скопируйте цвет нужного объекта один раз и все последующие объекты будут созданы с заданными свойствами.
Окрашивайте объект в нужный цвет пипеткой Pick Color.
Группа команд Select All with подсвечивает все похожие объекты в файле: с одинаковыми свойствами, заливкой, шрифтами, эффектами и так далее.
Панель View
Панель находится слева в меню редактора и дублируется справа. Она отвечает за масштабирование макета и навигацию по нему.
Инструменты и возможности Фигмы
Рассмотрим панель инструментов для работы с графикой и выравнивания объектов, выбора шрифтов, создания эффектов для слоёв и фигур.
Фреймы
Фрейм или артборд — основной элемент дизайна в Фигме. Это законченный документ, который может быть страницей сайта или экраном мобильного приложения.
Вы можете задать размер фрейма самостоятельно или выбрать готовые размеры экранов популярных устройств — ноутбуков, часов, планшетов — в панели инструментов справа.
Фрейм объединяет объекты внутри себя. Когда вы создаёте дизайн внутри фрейма, в панели свойств слева будут добавляться слои. Слои в Фигме — это содержимое вашего фрейма: объекты, текст, фотографии.
Модульная сетка
Сетка в Фигме помогает упорядочить все элементы дизайна во фрейме. Чтобы легко адаптировать дизайн от одного устройства к другому, используйте в Фигме 12 колоночную модульную сетку (Bootstrap).
Для настройки сетки нажмите «+» в блоке Layout Grid.
Задайте количество колонок, их цвет и прозрачность. Вы можете настроить тип сетки — сделать её адаптивной, выровнять по центру или краю.
Прототип — это модель сайта или приложения. С ней заказчику проще оценить, как люди будут пользоваться продуктом. Чтобы создать прототип сайта, дизайнер отрисовывает экраны и создаёт связи между ними.
Интерфейс
Элементы интерфейса — это внешний вид продукта. В Фигме можно создать кнопки, иконки, формы обратной связи и настроить эффекты: сделать кликабельные кнопки, раскрыть списки, создать анимацию для блоков и попапов.
Как устроен редактор файлов Фигмы
В новом файле пользователю доступны три области: рабочая область, панель инструментов и панель слоёв. Рассмотрим важные функции пунктов меню.
Поиск
Поиск Search ищет пункты меню, а не элементы, которые вы создавали. Пригодится, если вам нужна конкретная команда, но вы забыли, где именно она находится.
Панель File
Инструменты панели помогают применить действие к файлу, в котором вы работаете. Например, с помощью New file from Sketch можно импортировать файлы, созданные в графическом редакторе Скетч.
Фигма — это инструмент для совместной работы, она сохраняет изменения файла автоматически. Вы можете сохранить изменения немедленно, нажав Save to Version History или посмотреть историю изменений коллег, нажав Show Version History.
Чтобы сохранить файл Фигмы в pdf, используйте Export Frames to PDF. Пригодится для презентаций.
Панель Edit
Панель позволяет работать с элементами дизайна в файле. Чтобы применить действие к элементу, его нужно выделить. Например, объект можно скопировать как код CSS, SVG или PNG-файл с помощью Copy As.
Функция Paste Over Selection позволяет разместить скопированный элемент в левом верхнем углу другого объекта.
Все новые объекты, созданные в файле, по умолчанию серого цвета. Бывают ситуации, когда вам нужно создать множество объектов с другим цветом. Используйте Set Default Properties: скопируйте цвет нужного объекта один раз и все последующие объекты будут созданы с заданными свойствами.
Окрашивайте объект в нужный цвет пипеткой Pick Color.
Группа команд Select All with подсвечивает все похожие объекты в файле: с одинаковыми свойствами, заливкой, шрифтами, эффектами и так далее.
Панель View
Панель находится слева в меню редактора и дублируется справа. Она отвечает за масштабирование макета и навигацию по нему.
Инструменты и возможности Фигмы
Рассмотрим панель инструментов для работы с графикой и выравнивания объектов, выбора шрифтов, создания эффектов для слоёв и фигур.
Фреймы
Фрейм или артборд — основной элемент дизайна в Фигме. Это законченный документ, который может быть страницей сайта или экраном мобильного приложения.
Вы можете задать размер фрейма самостоятельно или выбрать готовые размеры экранов популярных устройств — ноутбуков, часов, планшетов — в панели инструментов справа.
Фрейм объединяет объекты внутри себя. Когда вы создаёте дизайн внутри фрейма, в панели свойств слева будут добавляться слои. Слои в Фигме — это содержимое вашего фрейма: объекты, текст, фотографии.
Модульная сетка
Сетка в Фигме помогает упорядочить все элементы дизайна во фрейме. Чтобы легко адаптировать дизайн от одного устройства к другому, используйте в Фигме 12 колоночную модульную сетку (Bootstrap).
Для настройки сетки нажмите «+» в блоке Layout Grid.
Задайте количество колонок, их цвет и прозрачность. Вы можете настроить тип сетки — сделать её адаптивной, выровнять по центру или краю.
ПРАКТИКА
ТЕМА 1
● Лабораторные работы:
«Векторные формы – создание иконок»
«Инструменты работы с кривыми: Pen Tool, Bend Tool, Paint Bucket»
● Творческая работа: создание логотипа в Figma
● Обсуждение логотипов (голосование за лучший логотип)
● Практическая работа: собрать визуальный борд «Галерея иконок»
Игра: https://bezier.method.ac/
«Векторные формы – создание иконок»
«Инструменты работы с кривыми: Pen Tool, Bend Tool, Paint Bucket»
● Творческая работа: создание логотипа в Figma
● Обсуждение логотипов (голосование за лучший логотип)
● Практическая работа: собрать визуальный борд «Галерея иконок»
Игра: https://bezier.method.ac/
ТЕМА 2
● Лабораторные работы:
«Параметры редактирования изображений: Fill, Fit, Crop, Tile»
«Создание паттернов и узоров. Эффекты и маски»
«Цвет и эффекты»
● Опрос по инструментам Figma (Google Forms)
«Параметры редактирования изображений: Fill, Fit, Crop, Tile»
«Создание паттернов и узоров. Эффекты и маски»
«Цвет и эффекты»
● Опрос по инструментам Figma (Google Forms)
ТЕМА 3
● Лабораторные работы:
«Работа с фреймами и слоями в Figma»
«Модульные сетки»
«Работа с текстом»
«Работа с компонентами и стилями»
● Творческое задание: создать шаблон для сайта и на его основе сделать несколько различных макетов страниц сайта (Figma)
● Обсуждение макетов (игра «Сторонники и оппоненты)
● Групповая работа в доске Miro: «Плагины для Figma»
● Практическая работа: «Создание интерактивного прототипа сайта» (Figma)
● Итоговый тест на знание интерфейса и инструментов Figma (Learningapps)
«Работа с фреймами и слоями в Figma»
«Модульные сетки»
«Работа с текстом»
«Работа с компонентами и стилями»
● Творческое задание: создать шаблон для сайта и на его основе сделать несколько различных макетов страниц сайта (Figma)
● Обсуждение макетов (игра «Сторонники и оппоненты)
● Групповая работа в доске Miro: «Плагины для Figma»
● Практическая работа: «Создание интерактивного прототипа сайта» (Figma)
● Итоговый тест на знание интерфейса и инструментов Figma (Learningapps)
РАБОТЫ ОТПРАВЛЯЙТЕ НА ПОЧТУ.
OLAYALEX777@GMAIL.COM
