5 лайфхаков в Figma для работы с текстом, картинками и заливкой / Skillbox Media
Дизайн
#Руководства
0
Рассказываем, как использовать математику в Figma, сделать из картинки заливку и включить пиксельное отображение вектора.
Vkontakte
Telegram
Скопировать ссылку
Иллюстрация: Meery Mary для Skillbox Media
Вячеслав Лазарев
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.
В Figma есть множество скрытых функций и горячих клавиш, которые самостоятельно найти не так просто. Но если их освоить, вы сможете ускорить работу над макетом: быстрее менять все цвета или сбрасывать настройки шрифта.
Рассказываем о пяти простых лайфхаках, которые помогут вам быстрее работать в Figma.
Если вы не смогли сразу настроить интерлиньяж текстовой строки и решили оставить его стандартным, просто удалите своё значение из поля ввода. Figma автоматически вернёт значение по умолчанию, и вам не придётся подбирать его заново.
Самостоятельно сместить какой-либо объект на один пиксель или на 1% — не всегда просто. Чтобы не вычислять значение нужного размера или расположения в уме, сделайте это прямо в полях ввода — например, наберите «144+1%». Графический редактор сам всё посчитает, и свойства объекта тут же изменятся.
Таким образом можно изменить размер объекта, его расположение и непрозрачность. Математический расчёт работает во всех полях, где нужно вводить числа.
Если в Figma вы рисуете векторное изображение, которое потом хотите использовать как растровое, его внешний вид важно заранее проверить. Чтобы лишний раз не выгружать картинку и не редактировать её наугад, воспользуйтесь пиксельным режимом. В нём Figma будет отображать все объекты в растровом формате, и вы сможете заранее понять, как будут выглядеть мелкие детали вашего изображения.
Чтобы включить пиксельный режим просмотра, нажмите сочетание клавиш Ctrl + Alt + Y (на macOS — Ctrl + Y). Либо нажмите на иконку , затем View и выберите Pixel Preview.
Если вы не использовали стили при проектировании приложения, а клиент попросил поменять оттенок красного, то не нужно сразу бросаться и перекрашивать каждый макет. Просто выделите их, и на панели настроек появится список используемых цветов, которые можно поменять.
Кстати, в этом же меню из любого цвета можно сделать стиль.
Обычно в Figma стили делают из простых цветов либо градиентов. То же самое можно сделать с обычными картинками и использовать их как заливку любых фреймов, фигур или даже текста.
Как добавить изображение в стили
- Добавьте на макет любое изображение и выделите его.
- Перейдите в пункт Fill («Заливка») и нажмите на иконку .
- В появившемся меню нажмите на плюсик.
- Назовите стиль и сохраните.
- Чтобы использовать стиль, в пункте Fill нажмите на иконку из кружков и выберите нужный шаблон. Стиль можно выбрать и для обводки в пункте Stroke — он находится под Fill.
Больше о Figma
Самоучитель по Figma
Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.
Vkontakte
Telegram
Скопировать ссылку
Figma с нуля до PRO
Вы освоите самую популярную программу для веб-дизайна на профессиональном уровне. Научитесь создавать интерактивные прототипы, передавать макеты разработчикам и экономить время на рутинных задачах.
Узнать про курс
Учись бесплатно:
вебинары по программированию, маркетингу и дизайну.
Участвовать
Обучение: Figma с нуля до PRO
Узнать больше
Adobe представила виртуальную гримёрку Дэвида Боуи
28 дек 2022
Яёи Кусама сделала коллаборацию с Louis Vuitton
27 дек 2022
Дизайнеры представили новую схему московского метро 2030 года
26 дек 2022
Понравилась статья?
Да
Заливки и границы.
Основы UI дизайна
Как мы указали в первой статье этой серии, большая часть UI дизайна заключается в перемещении прямоугольников. Итак, давайте начнем со скромного прямоугольника. В большинстве инструментов дизайна вы можете нарисовать его, нажав клавишу R.
Когда вы создаете новый прямоугольник, он обычно уже имеет заливку. В большинстве случаев это просто серый цвет, поэтому не забудьте изменить цвет самостоятельно. Иногда у него также есть граница.
На заре Sketch у прямоугольника был только контур, и вы могли выборочно отключать его части. Но, к счастью, теперь это в прошлом.
Недавно я снял видео, пытаясь воссоздать дизайн в версии Sketch почти 10-летней давности, и поверьте мне, сейчас проще начать работать ?
Причина этого предопределенного цвета заключается в том, что серый достаточно нейтрален, поэтому добавление новой фигуры не испортит ваш уже прекрасно созданный интерфейс, но вы все равно сможете увидеть новый объект.
Простая заливка – это еще одно название фона объекта. Это может быть цвет, градиент или фотография. У каждого из них также может быть разный уровень непрозрачности (прозрачности) от 0 (полностью прозрачный – невидимый слой) до 100 (полностью непрозрачный слой).
Большинство современных инструментов дизайна позволяют настраивать прозрачность с помощью цифровых клавиш на клавиатуре. Просто выберите объект и нажмите 1 (для 10%), 2 (для 20%) и так далее. Нажатие 0 переключает непрозрачность между 0% и 100% (поэтому иногда нужно дважды нажать клавишу).
.
Если у объекта нет заливки, а также границы или эффекта, он не будет виден в интерфейсе, так как для этого требуются определяющие характеристики. Однако вы по-прежнему сможете выбрать его, переместить и изменить. Он также останется в списке слоев.
Типы заливки
Есть три основных типа заливки и вариант без заливки. Таким образом, у вас может либо НЕ БЫТЬ ЗАЛИВКИ, либо может быть фон с одним цветом, градиентом или изображением.
Не так давно паттерны считались еще одним видом заливки, но на самом деле это просто мозаичные изображения, поэтому они попадают в категорию изображений.
Укладка заливок в стек
Вы также можете применить к изображению более одного типа заливки. Очевидно, что для этого, слои заливки должны быть хотя бы частично прозрачными, иначе вы увидите только верхний слой. В этом примере из Sketch вы видите заливку изображения в качестве основы и полупрозрачную градиентную заливку поверх нее.
Мультиградиент
Вы можете использовать этот принцип для получения довольно интересных органических эффектов из нескольких перекрывающихся градиентов, как в примере выше. Для этого просто создайте четыре радиальных градиента, которые начинаются в каждом углу вашей фигуры и затемняются к центру. Поэкспериментируйте с их размером и положением, пока вам не понравится результат.
Однако наиболее распространенные заливки, которые вы, вероятно, будете использовать – это цвет и градиент.
Границы
Границы – второй по популярности стиль после заливки, который может иметь объект.
Граница – это линия, огибающая наш объект. Она может проходить внутри (внутренняя граница), снаружи (внешняя граница) или между ними (по центру). Помните, что только внутренняя граница визуально не увеличивает объект.
В приведенном выше примере размер поля составляет 60 x 60 точек. Граница толщиной 10 точек. На среднем изображении она увеличивает нашу рамку на 5 точек с каждой стороны. В третьем примере граница полностью выходит наружу, увеличивая прямоугольник на 10 точек во всех направлениях.
Стили границы
Граница может иметь разную толщину (ширину) в точках и может быть пунктирной линией из точек или штрихов. Мы также можем заполнить ее как цветом, так и градиентом.
Большинство инструментов дизайна позволяют вам также изменять окончания и стыки ваших линий.
Концы могут быть открытыми, плоскими или закругленными, а стыки могут быть острыми, закругленными или угловыми.
Закругленность стыков и концов может хорошо работать, если ваш интерфейс в целом закругленный. Если нет, то оставьте значение по умолчанию.
Спасибо за прочтение. Я считаю, что иногда стоит возвращаться к самым основам ремесла, и именно этому посвящена вся серия наших статей. Границы и заливки являются неотъемлемой частью пользовательского интерфейса, поэтому полезно иметь возможность каждый раз изменять их под свои нужды. В следующей части мы рассмотрим все типы теней в дизайне пользовательского интерфейса.
Если вы хотите узнать больше о фигурах и дизайне интерфейса в целом, ознакомьтесь с нашей ? книгой www.designingui.com – там также есть бесплатные главы.
Источник: UXPUB
Изучите основы Figma, часть 7: режим заливки, обводка и эффекты
Режим заливки позволяет применять к объекту сплошной цвет, градиент или изображение. Доступ к нему осуществляется через панель свойств объекта. Вы можете применить несколько слоев заливки.
Позвольте мне показать вам, как это работает, используя нашу предыдущую форму.
Добавить заливку:
- Выберите слой формы
- Перейдите к , заполните раздел на боковой панели.
- В разделе заливки щелкните серый квадрат, чтобы открыть палитру цветов.
- Переместите точку круга палитры цветов, чтобы выбрать цвет, или добавьте код цвета в поле ввода Hex.
- В моем случае я изменю цвет формы на ярко-синий.
(добавьте этот HEX-код: #1B9DE5 , чтобы он соответствовал цвету, который я использовал)
Добавить градиент:
Существует два способа добавления эффекта градиента к слою. Первый — изменить сплошной цвет на градиент. второй — добавить новый слой-заливку поверх сплошного цвета.
Заменить сплошной градиент:
- Выберите слой с фигурой
- Нажмите на цветной квадрат, чтобы вызвать палитру цветов
- Щелкните по сплошному цвету в левом верхнем углу модального окна выбора цвета.
Появится раскрывающееся меню с различными эффектами градиента: линейным, радиальным, угловым и ромбовидным.
- Выбор Линейный
- Каждый градиент имеет как минимум два цвета. Чтобы изменить цвет, выберите один из квадратов двух цветов в контроллере градиента.
Добавить новый слой градиента:
Если вы хотите сохранить предыдущий сплошной цвет, создайте новый слой-заливку с градиентом.
- После выбора слоя формы щелкните значок + в правой части области заливки.
Поверх первой заливки будет создан новый линейный градиент.
- Выберите слой линейной заливки, чтобы отредактировать его.
- Или отрегулируйте непрозрачность заливки в поле непрозрачности.
Изображение в качестве заливки:
Изображения в Figma относятся к типу Fill . Вы можете получить к ним доступ в разделе Заливка с эффектами градиента.
Новый слой заливки
- Выберите слой формы
- Щелкните значок + справа от раздела заполнения.
- Выберите слой заливки
- Нажмите линейный в верхнем левом углу палитры цветов
- Выберите Изображение в раскрывающемся меню
К фигуре будет применено изображение-заполнитель в виде черно-белых галочек.
- Нажмите кнопку Выбрать изображение в окне предварительного просмотра
Импортируйте изображение со своего компьютера и нажмите «Открыть », чтобы применить .
Изображение будет добавлено к вашей фигуре как Заливка .
Добавление обводки аналогично добавлению заливки цветом. он доступен через панель свойств.
Стокс имеет три основных варианта: цвет, размер и направление.
Давайте посмотрим, как добавить обводку к слою с фигурой, отредактировать ее цвет, размер и направление.
1- Создать обводку:
часть штриха находится под областью заливки.
- Выберите слой с фигурой.
- Нажмите кнопку + справа от области обводки, чтобы добавить слой обводки.
2- Изменить цвет обводки:
- Выберите цветной прямоугольник, чтобы активировать палитру цветов.
- Добавьте цветовой код #ededed в поле Hex.
3- Увеличить размер штриха:
- Поле размера находится под разделом цвета. его значение по умолчанию равно 1px.
- Нажмите на поле размера и увеличьте его до 8px.
4- изменить направление хода:
- Помимо размера штриха, щелкните внутри .
- В раскрывающемся меню выберите Снаружи .
Эффекты также являются разделом панели свойств, применимым так же, как обводка или заливка.
Добавить тень:
- Выберите слой формы
Щелкните значок + в правой части раздела эффектов
К слою будет применен эффект тени.
Нажмите на тень, чтобы открыть меню эффектов
У вас есть выбор между тенью и эффектом размытия
- Выберите тень
Вы можете настроить параметры эффекта, щелкнув значок эффекта слева.
В модальном окне эффектов у вас есть различные параметры, такие как размер эффекта, цвет, непрозрачность, размытие и режим наложения. Вы можете изменить некоторые настройки по умолчанию, чтобы увидеть, как это работает.
В следующем посте мы обсудим, как создавать смарт-объекты с компонентами и функциями стилей .
Этот пост является частью серии, посвященной основам проектирования с помощью Figma.
Пожалуйста, не забудьте подписаться и поделиться. Увидимся в следующем посте 😉
Заливка, обводка и расширенная обводка — Руководство Figma
Добавить в избранное
Узнайте больше о заливке и различных параметрах обводки в Figma
Руководство Figma
1
Инструмент дизайна фигма
0:54
2
Редактор на рис.
1:17
3
Основные инструменты
2:14
4
Положение, размер, ротация, ротация, ротация, ротация, ротация, ротация, ротация, ротация, ротация, ротация, ротация, ротация, ротация, ротация, ротация, ротация, ротация, ротация, ротация, ротация, поворот, ротация, ротация, ротация, ротация, ротация, ротация & Угловые свойства радиуса
1:27
5
Стили цвета
1:13
7
Темный режим с цветами выбора
1:17
8
Градиенты
1:36
1:36
Создание фона
2:37
10
Режимы смещения
2:02
11
Выравнивание, распределение и приливные свойства
1:24
12
Союз и угловой радиус
2 2
: 53
13
Эффекты Shadow and Blur
1:48
14
Использование изображений
2:00
15
Заполнение, ход и усовершенствованный ход
3:21
169
0003
Текстовые свойства и стили
1:37
17
Google Fonts и пользовательские шрифты
1:13
18
Доступность
19
.
1:11
21
Сетка макета
2:00
22
Автоматическая компоновка на рис.
8:17
23
Векторный режим
0:55
23
.0003
Vector Network
1:19
25
Перспективные макеты
2:00
26
3D макет
1:203
27
.
Booleans
2:24
29
Дизайн икона
1:48
30
Компоненты
1:50
31
Библиотека команды
2:14
32
0002 Создание Confetti
1:59
33
Дубликация Shape Duplication
1:41
34
Apple Watch Ring Кольцо на фигма
929 2
. 36
Экспорт CSS Code
1:04
37
Дизайн с данными
1:57
38
Прототипирование
1:25
39
Версия.0003
40
Многопользовательский, комментирование и предварительные просмосы
1:36
41
Варианты
5:39
42
. Плагины
5:47
45
Фон Блюба
4:45
46
Фон волны
6:46
47
3D формы
12:27
9000 48
0003
Прототипирование Parallax на рис.
7:52
49
3D Perspection Design
7:16
50
Стеклянный значок
9:16
51
Кристальный мяч с эффектом воды
51
Кристальный мяч с водной анимацией
51
Кристальный мяч. 12:54
52
Дизайн и код анимация линии с буквами
29:38
53
Футуристическая линейная анимация
19:30
54
Импорт Adobe Illustrator до рис.0003
3:16
55
Create an Illustration in Figma
4:07
56
Remove BG plugin
2:27
57
Circular Lines Advanced Stroke
3:27
58
Publish Design To Community
4:49
59
Верновое изображение в вектор
3:11
60
Прототип с содержанием прокрутки
3:42
61
. 0003
62
Усовершенствованный автоматический макет
63
Циркулярный текст на пути
5:57
64
Зеркальный прототип
2:39
65
Sticky Nav и Tab Bar Prototyping
4:377 65
Sticky Nav и Tab Bar Prototyping
9000 37777777777777 70003
.
66
ВИДЕОН В ПРОТОРИПЕ ФИГМА
67
Градиенты сетки
3:03
68
Секции фигма
69
Фотография unsplash.0003
71
Радиальный градиент
72
После задержки -анимационного прототипирования
73
WI -каркас
9000
Animation
Design Lint Missing Style
78
Slice Tool
79
Адаптивный макет с контрольными точками
80
Дизайн диаграмм
81
Режимы дизайна
82
Пакетное переименование
В Figma параметры Fill , Stroke и Advanced Stroke используются для настройки внешнего вида объекта или текста.
Покупка включает доступ к более чем 50 курсам, более чем 320 обучающим материалам премиум-класса, более 300 часам видео, исходным файлам и сертификатам.
Учитесь с видео и исходными файлами. Доступно только подписчикам Pro.
Покупка включает доступ к более чем 50 курсам, более чем 320 обучающим материалам премиум-класса, более 300 часам видео, исходным файлам и сертификатам.
Шаблоны и исходный код
Загрузить исходные файлы
Загрузить видео и ресурсы, чтобы просматривать и учиться в автономном режиме без перерыва.
Шаблон дизайна
Исходный код для всех разделов
видеофайлы, EPUB and Subtitles
Просмотр всех загрузок
1
Инструмент дизайна фигма
Начало работы с фиг. 2
Редактор в Figma
Знакомство с интерфейсом Figma
1:17
3
Основные инструменты
Знакомство с панелью инструментов в Figma
2:14
4
Положение, размер, вращение и угловой радиус с рабочими свойствами
2 Свойства поворота и углового радиуса
1:27
5
Цветовые стили
Работа с цветовыми стилями в Figma
1:13
6
1:47
7
Темный режим с выбранными цветами
Научитесь проектировать и адаптировать дизайн для темного режима с выбранными цветами
1:17
8
Градиенты
3 различные способы использования градиентов в работе, а также техники их создания
1:36
9
Создание фонов
Дизайн фонов в Figma
2:37
10
Режимы наложения0003
Ученитесь интересными методами с режимами смешивания
2:02
11
Выравнивание, распределение, и привлечение свойств
Изучение выравнивания и приваловать на рис.
1:24
12
и угол
Работа над объединением и радиусом угла
2:53
13
Эффекты теней и размытия
Изучение способов включения теней и размытия в ваш дизайн
1:48
14
Использование изображений. 3:21
16
Свойства и стили текста
Исследуйте и узнайте о свойствах типов Figma
1:37
17
Шрифты Google и пользовательские шрифты
и изучите различия между пользовательскими шрифтами Google для веб-сайтов
1:13
18
Доступность
Изучение A11Y в дизайне
19
Отзывчивый дизайн
Определение отзывчивых макетов на рис. с ограничениями в Figma
1:11
21
Сетка макета
Научитесь проектировать с использованием сеток, столбцов, строк и полей.
2:00
22
Автоматическое макет на рис.
Работа с автоматической макетом для адаптивной конструкции
8:17
23
Векторный режим
Изучение векторного режима для редактирования и настройки векторных форм
0:55
24
Велектные сети
0:55
24
Велектные сети
Научитесь использовать векторные сети и дизайнерские иконки
1:19
25
Макеты в перспективе
Используйте реалистичные макеты для презентации своих проектов
2:00
26
3D макет
Добавление 3D -макетов к дизайну
1:20
27
Использование иллюстраций в дизайне
Включите иллюстрации в свой дизайн
2:03
28
Booleans
Использование BOOLEAN
2:24
29
Дизайн значков
Узнайте, как создавать значки с помощью инструментов, предоставляемых Figma
1:48
30
Компоненты
Сделайте свой дизайн более многоразовым, используя компоненты.
1:50
31
Команда библиотека
Публикация ваших стилей и компонентов дизайна
2:14
32
Создание конфетти
. Дублирование
Работа с плагином Looper Figma
1:41
34
Кольцо Apple Watch
Создание кольца Apple Watch в Figma
2:23
35
3 9 Экспорт ресурсов в Figma
Узнайте об экспорте активах на фигме для реализации
1:39
36
Экспорт CSS Code
Работа с CSS -кодом на фигма
1:04
37
Designing с Data
. дизайн с реальным содержимым
1:57
38
Прототипирование
Быстрое создание полного потока для дизайна вашего приложения в Figma
2:25
39
История версии 3
0002 Работа с историей версий на рис.
1:25
40
Многопользовательский, комментирование и предварительные просмотры
Узнайте о сотрудничестве и обмене с фигма
1:36
41
Варианты
Комбинирование сходных комбинации в вар.
5:39
42
Интерактивные компоненты
Создание повторно используемых взаимодействий с использованием интерактивных компонентов
43
UIKits
Проектирование с использованием UIKits в Figma
4:47
44
Плагины
Изучение и проектирование с использованием плагинов на рис.
5:47
45
Фон
.
Волновой фон
Создайте волновой дизайн в Figma с помощью инструмента «Изгиб» и плагина «Волна»
6:46
47
3D-фигуры
Создайте трехмерные фигуры с помощью векторных инструментов в Figma
12:27
48
Параллаксное прототипирование в Figma
Узнайте, как создать технику анимации с прокруткой параллакса, при которой фоновый и передний слои движутся с разной скоростью
7:52
03 900UI Дизайн 3 900UI
Преобразование пользовательского интерфейса с помощью трехмерной перспективы
7:16
50
Стеклянная иконка
Узнайте, как создать креативную иконку с помощью размытия фона
9:16
51
Хрустальный шар с анимацией с эффектом воды
Анимация волн в хрустальном шаре с помощью инструмента прототипирования для анимации линий с помощью CSS в CodeSandbox
29:38
53
Футуристическая линейная анимация
Узнайте, как создать футуристический фон с линиями с помощью инструмента «Перо» в Figma
19:30
54
Импорт из Adobe Illustrator в Figma
Рекомендации по импорту файла Illustrator в Figma
3:16
55
Создание векторной иллюстрации в Figma
3 9 иллюстрация с нуля
4:07
56
Remove BG plugin
Удаление фона изображения с помощью плагина RemoveBG в Figma
2:27
57
Advanced Stroke 9 Lines0003
Дизайн контроллера камеры с часовыми линиями на рис.
3:27
58
Публикайте дизайн сообщества
Дизайн публикации в фигма -сообществ Преобразование изображения в вектор в Figma
3:11
60
Прототип с прокруткой содержимого
Добавьте вертикальную и горизонтальную прокрутку на ваш прототип Figma
3:42
61
Расширенный автоматический макет
Узнайте, как правильно выбрать параметры изменения размера, включая объемный контент, фиксированную ширину или высоту, заполнение контейнера и усечение текста
62
Расширенный автоматический макет наложение, выравнивание базовой линии текста, значения обводки в расширенном макете
63
Круговой текст на пути
Создание кругового текста на пути с помощью плагина ARC в Figma
5:57
64
Прототип зеркала
Просматривайте свои прототипы на мобильном устройстве с помощью мобильного приложения Figma
2:39
65
Прототипирование липкой панели навигации и панели вкладок
Как зафиксировать положение и панель вкладок с помощью липкой навигации
4:37
66
Видео в Figma Prototype
Применение видео в качестве заливки с использованием любой векторной сети на вашем прототипе плагин в фигме
3:03
68
Разделы Figma
Используйте разделы в Figma для лучшей организации проектов и облегчения совместной работы
Угловой градиент
Пошаговое руководство по созданию и настройке углового градиента в Figma
71
Радиальный градиент
Создание ярких радиальных градиентов в Figma для профессионального дизайна
72
Прототипирование анимации после задержки
Самый простой способ анимировать что-либо в Интернете, используя простое взаимодействие после задержки в Figma
73
Каркас пользовательского интерфейса
Используйте различные инструменты и плагины для создания каркаса, который поможет вам легко планировать и спроектируйте свой пользовательский интерфейс
74
Анимации Lottie
Пошаговое руководство по использованию анимации Lottie в Figma для улучшения совместной работы и улучшения ваших проектов
75
Дизайн экрана регистрации
Простой дизайн экрана регистрации в Figma для вашего приложения или веб-сайта
76
Генератор контента
Полезные плагины, которые могут помочь дизайнерам разрабатывать с реальным контентом и экономить время
2 77
77
Design Lint Missing Style
Экономьте время на поиске и исправлении ошибок в ваших проектах Figma с помощью Design Lint
78
Slice Tool
Экспортируйте свои проекты с помощью инструмента Slice в Figma
79
Адаптивный макет с точками перерыва
Создание гибких и отзывчивых веб -дизайнов с адаптивной планировкой и точками останова
80
Дизайн диаграмм
Изучение бесконечных возможностей дизайна диаграммы
Designails.