Как скруглить углы в фигме: Сквирклморфизм (Squirclemorphism) в дизайне интерфейсов

Содержание

Сквирклморфизм (Squirclemorphism) в дизайне интерфейсов

Вы заметили рост популярности этого тренда?

Последние годы богаты на новые стили UI дизайна. Начиная с простого плоского дизайна, Material дизайна и заканчивая неоморфизмом, и глассморфизмом. Хотя я не настолько хороший охотник за трендами, как Michal Malewicz, я уверен, что нашел кое-что … Давайте погрузимся в мир сквирклов (суперэллипсов)!

Сквиркл? Что это?

Это не прямоугольник с закругленными углами и не круг. Эта фигура уникальна, но имеет огромное значение. Впервые она была замечена в цифровом дизайне с появлением iOS 7. К иконкам приложений была применена маска в форме сквиркла. С тех пор дизайнеры полюбили эту фигуру.

Если вы хотите узнать формулу, лежащую в ее основе, ознакомьтесь с описанием из Википедии или исследованиями, проведенными Figma Engineere.

Рассвет сквирклморфизма

Первоначально сквиркл использовался для воссоздания иконок iOS-приложений. Как я уже упоминал, разница между стандартным прямоугольником с закругленными углами и суперэллипсом была небольшой, но заметной. Мы всегда стремимся к тому, чтобы наши дизайны выглядели современно, поэтому мы хотели, чтобы к иконкам приложений была применена маска в виде этой новой фигуры.

Потом дизайнеры поняли, что его можно использовать для других элементов. Некоторые из нас начали использовать его в углах карточек, другие сделали элегантные иконки. Это было только начало…

Теперь вы можете повсюду встретить сквирклы в различных формах в UI дизайне. Маска в форме суперэллипса применяется к целым страницам мобильных приложений!

Шот от Fireart Studio

Повсеместное распространение сквирклов побудило меня назвать этот тренд – Сквирклморфизм (Squirclemorphism)! Что интересно, сам стиль заключается только в использовании формы суперэллипса. Он может быть связан с нейоморфными или глассморфными элементами.

Вы можете увидеть их в Instagram

Изначально я заметил, что суперэллипсы становятся все более популярными в Instagram, потому что в ленте полно новых творений. На Dribbble я обычно ищу определенные элементы или категории, и было труднее заметить новый восходящий тренд.

Aweka Design

Дизайн от Amjad

Вы можете увидеть их на Dribbble

Я люблю просматривать дизайны на Dribbble, чтобы найти вдохновение или интересные стили и композиции. Введите «squircle» в поиске Dribbble, и вы увидите сотни результатов.

Шот от Cuberto

Шот от Halo Lab

Как вы наверняка заметили, большинство дизайнов создаются только для демонстрации навыков своих создателей. Они не используются в реальных приложениях.

Сквирклы в Figma

По умолчанию закругленные углы указывают на правильный радиус. Но это касается только закругленных прямоугольников, а не суперэллипсов.

Чтобы добиться особой формы, вам нужно добавить «Corner Smoothing» (Сглаживание углов) к радиусу скругления угла. Чтобы активировать сглаживание, вы должны нажать иконку радиуса скругления угла, чтобы отобразить подробные настройки радиус для каждого угла. Затем под иконкой меню с тремя точками вы найдете параметр «Corner Smoothing». Кликните по нему, и вы увидите всплывающее окно с ползунком.

Создание сквирклов в Figma

Если вы хотите добиться эффекта, подобного iOS, установите значение примерно на 60%, для максимального эффекта используйте 100%. Все просто!

Сквирклы в Sketch

Создавать сквирклы в Sketch еще проще. Когда у вас есть слой в форме прямоугольника с закругленными углами, все, что вам нужно сделать, это перейти на панель Inspector (та, что справа) и выбрать раскрывающийся список «Radius (Round Corners»). Измените параметр на «Smooth Corners». Все, ваш сквиркл готов!!

Создание сквирклов в Sketch

Вывод

В последние месяцы появилось много трендов. Сквирклморфизм начался с небольшого элемента – иконок приложений iOS7. Сейчас он применяется практически ко всем элементам, имеющим закругленные углы. Очевидно, что не все сквирклы хороши в реальных приложениях, но эта тенденция, безусловно, вдохновляет.

Что вы думаете о сквирклморфизме? Вы используете фигуры со сглаженными углами?


Перевод статьи blog.prototypr.io

UX/UI курс с нуля. Урок 10. Основы Figma VII. Кривые

Ноябрь 2021


Figma Обучение дизайну

В седьмой части по основам Figma вы освоите работу с кривыми на продвинутом уровне. И хотя вы уже знакомы с булевыми операциями, которые позволяют создавать сложные векторные фигуры — это лишь верхушка айсберга. С помощью инструмента Pen (переводится как ручка или перо) можно воспроизвести буквально любую форму.

Зачем дизайнеру уметь работать с кривыми? Особенно пригодится в разработке собственных иконок, которые являются неотъемлемой частью любого интерфейса. Необязательно создавать пиктограммы с нуля, достаточно скачать подходящую заготовку и подправить/подогнать ее вручную под вашу задачу.

Во-вторых: отрисовка иллюстраций, к которым применимы те же приемы, единственное отличие: они обычно более сложны и выполняют другую функцию по сравнению с иконками (привлечение внимания).

  • Кривые Безье
  • Виды кривых
  • Инструмент Pen в Figma
  • Создание линейных кривых от начала до конца
  • Редактирование кривых
  • Инструмент Move. Перемещение точек
  • Инструмент Bend. Управление кривизной
  • Инструмент Paint Bucket. Заливка замкнутых контуров
  • Настройка обводки
  • Скругление углов
  • Добавление и удаление точек
  • Преобразование обводки в кривые
  • Сайты с бесплатными иконками
  • Экспорт в SVG
  • Домашнее задание
  • Выводы

Кривые Безье

Кривые Безье — это математический аппарат для описания кривых, который использовал Пьер Безье в 1960-х годах для проектирования дизайна кузовов автомобилей компании Renault.

Впоследствии это открытие сыграло ключевую роль в проектировании и компьютерной графике в 2d и 3d направлениях. Фигуры на основе кривых Безье называют по-разному, в зависимости от приложения, но суть не меняется. Вы можете встретить такие термины: сплайны (spline) и «пути» (path).

Виды кривых

Все кривые Безье можно условно поделить на несколько видов в зависимости от количества точек, из которых они составлены, что и определяет их сложность (смотрите рисунок сверху слева направо):

  • линейные
  • квадратичные
  • кубические
  • высших порядков

Обычно в графических приложениях используются последовательности кубических кривых Безье для построения любых форм. С теорией разобрались, переходим к практической части.

Инструмент Pen в Figma


Для построения кривых в Figma используется специальный инструмент Pen (горячая клавиша P). Интересно, что с его помощью можно создать любой стандартный примитив (прямоугольник, круг и так далее). Более того, любой примитив можно быстро конвертировать в кривые. Но начнем мы с линейных кривых, особенность которых заключается в том, что контрольные точки не сглаживаются и итоговая фигура выглядит угловато.

Создание кривой

Последовательность действий для создания кривой выглядит так:

  1. Выбираем Pen с помощью клавиши P или кликнув по иконке ручки на панели инструментов.
  2. Кликаем в том месте, где хотим поставить первую точку. Обратите внимание, что верхняя панель мгновенно поменялась и теперь включает лишь 4 инструмента и кнопку «Done». Так Figma сигнализирует, что находится в режиме редактирования кривой.
  3. Продолжаем кликать по рабочей области для задания новых точек. Как только у нас есть две точки, начинают появляться линии между ними.
  4. Зажимаем клавишу Shift, чтобы временно ограничить угол наклона создаваемых линий и сделать их кратными 45 градусам. На практике это позволяет с легкостью рисовать идеальные горизонтальные, вертикальные и диагональные линии.
  5. Чтобы указать последнюю точку фигуры есть несколько способов:

    • Нажать мышкой кнопку «Done» верхней панели.
    • Нажать Enter на клавиатуре.
    • Нажать Esc дважды. Первое нажатие заставит завершить создание кривой внутри векторного объекта. То есть вы можете продолжить кликать и создать еще одну линию в рамках одного слоя. Второе нажатие Esc заставит Figma выйти из режима редактирования.


Как видите, наша кривая получилась угловатой. Чтобы сгладить линию, вместо клика в процессе создания нужно зажать левую кнопку мыши и перемещать ее пока не получите нужную форму. Далее отпускаем левую кнопку мыши.

С помощью такого приема можно рисовать сглаженные линии. Поначалу это покажется сложным занятием, но с практикой вы поймете, что это достаточно удобно. Плюс вы всегда можете отредактировать векторную фигуру, о чем будет рассказано ниже.

Кроме того, можно создавать замкнутые фигуры, когда первая и последняя точки совпадают. Это позволит в дальнейшем закрасить замкнутые области.

Рисуем круг

Как я ранее упоминала, с помощью кривых можно нарисовать все что угодно. Знаю, что круг не самая сложная форма из возможных, но хорошее упражнение для новичка. К тому же, нам нужно попрактиковаться в построении сглаженных и замкнутых фигур. Чтобы упростить себе задачу, я нарисовала вспомогательную сетку. Дело в том, что при рисовании идеального круга, нужно отметить точки на одинаковом расстоянии и с идентичными степенями сглаживания. Приступим.


Помните, что создавать точки нужно зажимая левую кнопку и двигая курсор. Отпускать левую кнопку следует только в тот момент, когда вы будете удовлетворены кривизной линии. Выделите хотя бы 10 минут времени и попрактикуйтесь в рисовании сглаженных контуров, что бы приноровиться.

Редактирование кривых

Как и в случае с примитивами, вы можете изменить пропорции векторных объектов просто выделив их и потянув за любой из углов или сторон. Но на этом возможности редактирования не заканчиваются, вы можете:

  • Добавить еще линий
  • Изменить или переместить точки
  • Настроить кривизну
  • Добавить заливку замкнутым контурам

Для начала нужно войти в режим редактирования:

  1. Выделить векторный объект. Это может быть не только кривая, но и большинство примитивов: прямоугольник, эллипс, линия и так далее.
  2. Далее один из вариантов ниже:

    • Нажать клавишу Enter
    • Сделать двойной клик по векторному объекту. В этом случае предварительно выделять не нужно. Пожалуй это самый простой способ.
    • Кликнуть по левой иконке квадратика (Edit Object) сверху в центре.

    После этого панель инструментов преобразится. Слева появятся новые кнопки для работы с инструментами редактирования сплайнов.

Инструмент Move. Перемещение точек

Горячая клавиша V. Позволяет выделить и переместить одну или несколько точек векторного объекта мышкой. Тут работает зажатие клавиши Shift, как и при построении новой кривой. Также для перемещения точек можно использовать клавиатуру (клавиши с стрелками). Этот инструмент активируется по-умолчанию, когда вы переходите в режим редактирования.

Инструмент Bend. Управление кривизной

Сначала активируем инструмент Bend (в переводе означает сгибать, что уже подсказывает назначение), кликнув по иконке закругленной линии с двумя точками (вторая справа) на панели инструментов. Для управления сглаживанием линии:

  1. Подносим курсор к любой линии между двумя точками. В правом нижнем углу курсора появится иконка изогнутой линии.
  2. Зажимаем левую кнопку мыши и тянем. Линия начнет повторять ваши движения, пытаясь подстроится под положение курсора. Если фигура была угловатой, то одновременно появятся направляющие точек, которые и задают кривизну.
  3. Отпускаем левую кнопку мыши, чтобы зафиксировать кривизну.


Для управления сглаживанием через точку кривой:

  1. Подносим курсор к любой точке кривой. В правом нижнем углу курсора появится иконка с точкой и двумя направляющими.
  2. Зажимаем левую кнопку мыши и тянем. Из точки вытянется две симметричные направляющие, линии по бокам точки сгладятся. Чтобы управлять лишь одной направляющей, зажмите кнопку Alt. Чтобы включить привязку к углу наклона (кратная 45 градусам), зажмите кнопку Shift.
  3. Отпускаем левую кнопку мыши, чтобы зафиксировать кривизну.

Ниже показаны все вышеперечисленные приемы, включая использование клавиш Shift и Alt:


Для управления сглаживанием через направляющие точки:

  1. Подносим курсор к любой направляющей точки кривой. В правом нижнем углу курсора появится иконка с точкой и двумя направляющими.
  2. При клике левой кнопкой мыши направляющая будет удалена.
  3. Кликаем левой кнопкой мыши и тянем курсор, чтобы изменить угол направляющей вместе с противоположной направляющей, то есть симметрично. Если вы хотите изменить угол исключительно одной направляющей, зажмите клавишу Alt. Также тут работает зажатие клавиши Shift для привязки к углу наклона.


Часто случается, что направляющих не видно, но по форме линии видно, что они там есть. В таких случаях нужно переключиться на инструмент Move и выделить нужную точку. Появятся направляющие, после чего нужно переключиться назад в режим Bend.

Не самый удобный способ показать направляющие. Но есть решение. Достаточно постоянно работать в режиме Move, чтобы выбирать точки и показывать направляющие. А в режим Bend переходить с помощью горячей клавиши Ctrl или Command на MacOs. Обратите внимание, что горячую клавишу нужно зажать пока вы используете инструмент, так как сразу после отпускания клавиши вы вернетесь в режим Move.

Посмотрим, как это выглядят на практике. Обратите внимание, мы начинаем в режиме Bend, видны направляющие только двух точек. Далее переключаемся в режим Move, выделяем нужные точки и зажимаем Ctrl (Command на MacOs), чтобы быстро подправить направляющие точек или кривизну линий:

Инструмент Paint Bucket. Заливка замкнутых контуров

Позволяет выборочно закрасить замкнутые контуры векторной фигуры. Настройки заливки доступны в секции Fill и полностью повторяют возможности обычных примитивов. Инструкция по использованию:

  1. Выбираем инструмент кликнув по иконке капли или нажав горячую клавишу B.
  2. Кликаем внутри замкнутого контура, чтобы закрасить область. К иконке капли добавится плюсик.
  3. Повторно кликаем внутри закрашенного контура, чтобы убрать заливку.

Казалось бы, в чем преимущество этого инструмента? Ведь можно задать заливку через секцию Fill в панели свойств справа. Все верно, но если понадобится закрасить не все контуры, а лишь некоторые, то это сделать не так просто.

Настройка обводки

Мы уже знакомы с некоторыми настройками обводки из первого урока по Figma. Давайте теперь разберем и продвинутые опции:

  • Выпадающие меню внизу слева и справа задают форму начальной и конечной точки контура. Конечно, если контур замкнутый, то мы ничего не заметим.
  • По клику на иконку с тремя точками внизу справа можно получить доступ к продвинутым настройкам. Смотрите пункты ниже.
  • Stroke style — стиль обводки: Solid — сплошная, Dashed — пунктирная. При выборе пунктирного стиля добавляются дополнительные параметры: Dash — длина пунктира, Gap — длина пропуска, Dash cap — форма пунктира.
  • Join — форма соединения точек: Miter — автоматически скашивается если угол наклона меньше заданного полем Miter angle, Bevel — постоянно скошенная, Round — скругленная.

Скругление углов

Скруглить точки кривой можно, и альтернативным способом:

  1. Выделите сплайн и перейдите в режим редактирования.
  2. Выделите нужные точки.
  3. Укажите степень скругления в поле Corner radius в панели свойств справа.

Заметьте, что такой способ скругления не влияет на направляющие точек и работает только с угловатыми контурами. Если вы задали кривизну линий с помощью инструмента Bend, то скругление не будет работать.

Добавление и удаление точек

Как я упоминала выше, добавить и удалить точки можно в любой момент. Предварительно войдя в режим редактирования, попробуйте следующее для копирования точки:

  1. Выбираем инструмент Move (клавиша V).
  2. Наводим курсор на точку, которую хотим скопировать.
  3. Зажимаем кнопку Alt. Курсор изменится на двойной, как бы подсказывая нам, что готов к копированию точки.
  4. Зажимаем левую кнопку мыши и перетаскиваем курсор. Новая точка последует за курсором. Обратите внимание, что образуется еще одна линия, так как оригинальная точка была связана линией с другой.

Для добавления точки внутри существующей линии:

  1. Выбираем инструмент Pen (клавиша P).
  2. Наводим курсор внутрь линии туда, куда собираемся добавить точку. Figma будет подсказывать нам середину линии. Также к курсору в правом нижнем углу добавится плюсик.
  3. Делаем клик левой кнопкой мыши. Точка добавлена.

Для удаления точки:

  1. Выбираем инструмент Pen (клавиша P).
  2. Наводим курсор на точку, которую хотим удалить.
  3. Зажимаем клавишу Alt. К курсору добавится минус в правом нижнем углу.
  4. Делаем клик левой кнопкой мыши. Точка удалена.
  5. Еще один хороший вариант: если выделить точку инструментом Move и удалить ее кнопкой Delete, то Figma не будет соединять соседние точки и может образоваться отдельный контур внутри слоя. Этот способ идеален если вы удаляете отдельные контуры, например, лишние элементы скачанной иконки, чтобы упростить ее.

Добавлять точки можно и вне существующих линий. В таком случае векторный объект будет состоять из нескольких контуров.

Преобразование обводки в кривые

На некоторых этапах работы, а особенно перед экспортом иконки в формат SVG может понадобиться преобразовать все линии в контуры. Другими словами конвертировать обводку в закрытые контуры с заливкой. Это нужно делать для того, чтобы иконки корректно отображались в браузере. После этой операции вы уже не сможете настроить толщину обводки или любые другие ее свойства кроме цвета. Поэтому выполняйте эту операцию в последнюю очередь. Чтобы конвертировать есть несколько способов:

  • Выделите векторный объект и нажмите Ctrl + Shift + O или Shift + Command + O на MacOs.
  • Вызовите контекстное меню нажав правой кнопкой мыши на нужном векторном объекте. Выберите команду Outline stroke.

Чтобы убедиться, что преобразование прошло успешно достаточно войти в режим редактирования и увидеть новые точки и кривые.

Сайты с бесплатными иконками

Теперь вы знаете большинство приемов работы с кривыми. Во втором уроке по работе с Figma вы узнали, как импортировать файл с помощью перетаскивания. Тогда мы использовали растровые файлы, но с векторными SVG-файлами все происходит точно также.

Существует множество сайтов с бесплатными SVG-иконками. Они удобны тем, что позволяют искать по ключевым словам. Тут нам не обойтись без знаний английского языка или Google Translate. А вот и наш список:

  • The Noun Project — 3 000 000+ (да, более 3-х миллионов) бесплатных иконок с удобным поиском. Много готовых наборов по темам.
  • Font Awesome — 1600+ бесплатных иконок в одном стиле с рубрикатором.
  • Cursor.in — крошечный сайт с коллекцией всех курсоров MacOs.

Чтобы скачать иконку на The Noun Project, воспользуйтесь строкой поиска. Для примера я ввела ключевое слово energy и нажала Enter. Загрузится список иконок, по понравившейся нужно кликнуть. В открывшейся странице нужно нажать кнопку Get this icon. Далее выбираем Basic Download, потом Continue. Теперь нажимаем кнопку SVG. Иконка скачивается.

Экспорт в SVG

Для экспорта иконки в SVG-файл ее нужно предварительно подготовить:

  1. Создать пустой фрейм и вставить внутрь векторный объект. Их может быть несколько. Размеры фреймов для иконок обычно кратны 8 пикселям. Подойдут такие: 16×16, 24×24, 32×32 и так далее. Если иконка не влазит, уменьшаем ее.
  2. Выровнять иконку по центру фрейма. Убедиться, что вертикальные и горизонтальные отступы равномерные.
  3. Перевести все обводки в кривые.
  4. Перекрасить все элементы в черный цвет. Дело в том, что разработчики умеют перекрашивать иконки, если нужно.

Теперь все готово. Осталось выполнить сам экспорт:

  1. Выделяем фрейм с иконкой.
  2. В правой панели кликаем по плюсику напротив секции Export (она последняя).
  3. В выпадающем меню меняем формат на SVG.

Домашнее задание

Домашние задания больше не проверяются для граждан россии. Чтобы убедиться, что вы не из россии, после того как оставите комментарий с домашним заданием в конце урока на сайте, напишите мне в директ Инстаграмм @frusia.pro

  1. Выберите 8 иконок и нарисуйте их с использованием инструмента Pen.
  2. Задание повышенной сложности. Выполнять необязательно. Выберите 4 иконки, упростите их и сделайте обводку потолще.
  3. Подготовьте все нарисованные иконки и экспортируйте их в две отдельные папки (light, regular — для толстых). Убедитесь, что иконки имеют понятные названия. Поместите две папки в zip-архив. Самостоятельно научитесь архивировать файлы, если не умеете.

Выводы

В этом уроке вы познакомились с продвинутыми техниками работы с кривыми. Объединив эти знания с булевыми операциями можно рисовать иконки и иллюстрации любой сложности. Но это уже больше специализация графического дизайнера. Вам же важно научиться, как можно подправить существующую иконку и подогнать ее под ваши задачи.

Придумывание и отрисовка иконок это очень широкая и сложная тема, которую мы еще не раз затронем в дальнейшем.

Подписывайтесь на меня в Instagram @frusia.pro, будьте в курсе анонсов новых уроков, смотрите проверки домашек в сторис, задавайте вопросы, а также вас ждет множество полезных постов про дизайн.

Stay tuned!

Вернуться к Roadmap

Как скруглить углы в Figma (шаг за шагом)

Для создания современных пользовательских интерфейсов требуются закругленные углы. Это особенно полезно, когда вы хотите создать кнопки.

Круглый угол придает объекту простоту и плоскостность. Вам может быть сложно скруглять углы, если вы впервые используете Figma.

Не волнуйтесь, мы здесь, чтобы помочь!

В этой статье мы покажем вам, как скруглить несколько углов за один раз, а также скруглить определенный угол в Figma.

Ultimate Figma UI kit & Design System

Untitled UI — крупнейший в мире набор Figma UI и система дизайна. Запустите любой проект, сэкономьте тысячи часов и повысьте уровень дизайнера.

СКАЧАТЬ

Подробнее: Кляксы в Figma

Скругленные углы в Figma

В Figma есть два метода скругления углов. Конечный результат будет таким же.

Метод первый — настройка углового радиуса

В этом методе мы можем изменить радиус каждого угла или нескольких углов одновременно.

С помощью этого метода мы получаем точные закругления углов. Мы можем самостоятельно контролировать округлость каждого угла.

Шаг 1 : Откройте существующий файл Figma или создайте новый файл Figma.

Шаг 2 : Создайте форму, которая может быть кнопкой, квадратом или чем-то подобным.

Шаг 3 : Перейдите на панель свойств , найдите параметр радиуса и измените его по своему усмотрению. Вы можете увидеть столбец с угловой иконкой . Обратите внимание, что когда мы вручную устанавливаем радиус , он влияет на все углы.

Шаг 4 : Если вы хотите скруглить определенный угол, нажмите кнопку « Независимые углы », которую вы видите справа от значка угла. Теперь вы сможете увидеть 4 столбца для 4 углов. Настройте их по своему усмотрению.

Дополнительный совет : Включите «Сглаживание углов», нажав на 3 точки. В iOS эти сглаженные закругленные углы выглядят более гладкими, чем обычные закругленные углы.


Второй способ: на холсте

Этот способ проще первого.

Все, что вам нужно сделать, это выбрать фигуру, щелкнуть и перетащить одну из этих точек. Когда вы выбираете фигуру в Figma, вы видите точку в каждом углу. Перетаскивая их, мы можем контролировать округлость углов.

Photoshop и Illustrator имеют одинаковое свойство скруглять или сглаживать углы. Это очень быстрый и простой способ сделать работу.


Как скруглить определенные углы в Figma

Перейдите на панель свойств, щелкните значок «Радиус угла» и выберите значок «Независимый угол». Оттуда вы можете вручную установить радиус независимых углов.

Если вы новичок в Figma, вам следует ознакомиться с нашим учебным разделом Figma. Мы включили простые советы и рекомендации в каждое руководство.

Вам также могут понравиться:

  • Как сделать эффект сбоя в Figma
  • Как удалить фон в Figma
  • Как сделать круговой текст в Figma

Union и Radius Union and Corner — Руководство по фигмам

Добавить в фавориты

Работа над Союзом и угловым радиусом

Рис. Руководство

1

Инструмент рисунка фигма

0:54

2

Эдтератор на рис.

1:17

3

Основные инструменты

2:14

4

Положение, размер, вращение и свойства радиуса угловой0003

1:13

7

Темный режим с цветами выбора

1:17

8

Градиенты

1:36

9

Создание фона

2:37

9000 2

Bling.

2:02

11

Выравнивание, распределение, и приливные свойства

1:24

12

Союз и угловой радиус

2:53

13

. 0003

1:48

14

Использование изображений

2:00

15

Заполнение, ход и усовершенствованный ход

3:21

16

Текстовые свойства и стили

1:37

. 17

Google Fonts and Custom Fonts

1:13

18

Доступность

19

Отзывчивый дизайн

3:07

20

ограничения

1:11

21

0002 Mayout Grid

2:00

22

Автоматическая макет на рис.

8:17

23

Vector Mode

0:55

24

Векторная сеть

1:19

Векторная сеть

1:19

1:19

1:19

9

1:19

9000 24

.

Perspective Mockups

2:00

26

3D Mockups

1:20

27

Using Illustrations in Design

2:03

28

Booleans

2:24

29

Design Icon

1:48

30

Компоненты

1:50

31

Командная библиотека

2:14

32

. Дублирование

1:41

34

Apple Watch Ring Dring

2:23

35

Экспортные активы в рисмере

1:39

36

Экспорт CSS -код

1:04

.0002 37

Проектирование с данными

1:57

38

Прототипирование

2:25

39

История версии

1:25

40

Умножение. 36

41

Варианты

5:39

42

Интерактивные компоненты

43

4:47

44

5:47

4000 4000 44

5:47

4000 4000 4000 4000

5:47

4000 4000 4000 44

5:47

4000 4000 4000

5:47

4000 4000 44

5:47 9000 2

44

5:47 9000 2

44

.0003

Blob Background

4:45

46

Wave Background

6:46

47

3D Shapes

12:27

48

Parallax Prototyping in Figma

7:52

49

3D Perspection Design

7:16

50

Стеклянный значок

9:16

51

Хрустальный шарик с анимацией эффекта воды

12:54

52

Дизайн и код анимация анимация анимация анимация анимация анимация анимация анимация. с буквами

29:38

53

Анимация футуристической линии

19:30

54

Импорт Adobe Illustrator до Figma

3:16

55

.

56

Снимите плагин BG

2:27

57

Круглые линии Усовершенствованный ход

3:27

58

ОБУЧЕНИЕ ДЛЯ СООБЩЕСТВО

4:49

59

Образец.0003

3:11

60

Прототип с содержанием прокрутки

3:42

61

Содержание объятия и изменение размера

62

Advanced Auto Mayout

63

Циркулярный текст на пути

5:577 70002 63

Circular Texcul

64

зеркальный прототип

2:39

65

Прототипирование прототипирования навигационной и таб -бар

4:37

66

Видео в прототипе Figma

67

Mesh Gradient 9000 9000 9000

3:03

68

Figma Sections

69

Unsplash Stock Photos

70

Angular Gradient

71

Radial Gradient

72

After Delay Animation Prototyping

73

UI Wireframe

74

Lottie Animations

75

Дизайн экрана регистрации

76

Генератор контента

77

Дизайн Lint Missing Style

78

Slice Tool

79

Адаптивный макет с точками останова

80

Дизайн диаграмм

81

Модалы дизайна

82

Переименование

Операция Boolean Пользователь. Их четыре, но в этом уроке мы сосредоточимся на выборе объединения. Затем мы добавим угловой радиус, чтобы сделать дизайн более впечатляющим.

Приобретение включает доступ к более чем 50 курсам, более чем 320 обучающим материалам премиум-класса, более 300 часам видео, исходным файлам и сертификатам.

Учитесь с видео и исходными файлами. Доступно только подписчикам Pro.

Покупка включает доступ к более чем 50 курсам, более чем 320 обучающим материалам премиум-класса, более 300 часам видео, исходным файлам и сертификатам.

Шаблоны и исходный код

Загрузить исходные файлы

Загрузить видео и ресурсы, чтобы просматривать и учиться в автономном режиме без перерыва.

Шаблон дизайна

Исходный код для всех разделов

Видеофайлы, ePub и субтитры

Просмотреть все загрузки

1

Инструмент дизайна Figma

Начало работы с Figma в качестве инструмента дизайна

0:54

2

Редактор в Figma

190 знакомство с интерфейсом Figma 90: 70 90 Figma 90

3

Основные инструменты

Знакомство с панелью инструментов в Figma

2:14

4

Свойства положения, размера, поворота и углового радиуса свойства

1:27

5

Стили цвета

Работа со стилями цвета на рис.

1:13

6

Маски

Используя маски, чтобы обрезать содержание и составление вашей конструкции на рис.

1:47

.

7

Темный режим с выбранными цветами

Научитесь проектировать и адаптировать проекты для темного режима с выбранными цветами

1:17

8

Градиенты

свои работы, а также приемы при их создании

1:36

Создание фона

Фоны дизайна на рис.

2:37

10

Режимы смешивания

. Свойства распределения, распределения и очистки

Изучение выравнивания и очистки в Figma

1:24

12

Объединение и угловой радиус

Работа с объединением и угловым радиусом

2:53

13

Эффекты тени и размытия

Изучение способов включения тени и размытия в ваш дизайн

1:48

14

Изображения

Шаги о том, как использовать изображения на рис.

. 2:00

15

Заливка, обводка и расширенная обводка

Узнайте больше о заливке и различных параметрах обводки в Figma

3:21

16

Свойства и стили текста

и узнайте о

900 Типовые свойства Figma

1:37

17

Google Fonts и пользовательские шрифты

Исследуйте различия между шрифтами Google и пользовательскими шрифтами для вашего веб -сайта

1:13

18

Доступность

Изучение a11y в дизайне

1

.

Адаптивный дизайн

Разработка адаптивных макетов в Figma с использованием ограничений и автоматического макета

3:07

20

Ограничения

Работа с ограничениями в Figma

1:11

21

Сетка макета

Научитесь проектировать с использованием сеток, столбцов, строк и полей.

2:00

22

Автоматическая макет на рис.

. 55

24

Векторная сеть

Научитесь использовать векторные сети и создавать иконки

1:19

25

Perspective Mockups

Use realistic mockups to present your designs

2:00

26

3D Mockups

Adding 3D mockups to design

1:20

27

Использование иллюстраций в дизайне

Включение иллюстраций в ваш дизайн

2:03

28

Логические значения

Использование логических выражений для создания значков

2:24

29 Дизайн значков

3

Узнайте, как создавать значки с помощью инструментов, предоставляемых Figma

1:48

30

Компоненты

Сделайте свой дизайн более пригодным для повторного использования с помощью компонентов.

1:50

31

Команда библиотека

Публикация ваших стилей и компонентов дизайна

2:14

32

Создание конфетти

Loofer Loofer

1:59

Loofer Loofer Дублирование

Работа с плагином Looper Figma

1:41

34

Apple Watch Ring

Создание кольца Apple Watch на рис.

36

Экспорт CSS-кода

Работа с CSS-кодом в Figma

1:04

37

Проектирование с использованием данных

Плагины, помогающие создавать дизайн с использованием реального контента

3 9:00003

38

Прототипирование

быстро создайте целый поток для дизайна вашего приложения на рис.

2:25

39

История версии

Работа с историей версии на рис. , Комментирование и Предварительный просмотр

Узнайте о совместной работе и совместном использовании с Figma

1:36

41

Варианты

Объединение похожих компонентов в варианты

5:39

42

Интерактивные компоненты

Создание повторно используемых взаимодействий с использованием интерактивных компонентов

43

UIKITS

Дизайн с использованием UIKIT на фигме

4:47

44

Плагины

ИСПОЛЬЗОВАНИЕ И ОБРАЗОВЫ 5:47

45

Фон-клякса

Создать простой фон-клякса в Figma

4:45

46

Фон с волной

Создайте волновой дизайн в Figma с помощью инструмента «Изгиб» и плагина «Волна»

6:46

47

3D-фигуры

Создайте трехмерные фигуры с помощью векторных инструментов в Figma

12:27

9 Параллаксное прототипирование в Figma

Узнайте, как создать технику анимации с прокруткой параллакса, при которой фоновый и передний слои движутся с разной скоростью

7:52

49

Перспективный дизайн 3D-интерфейса

Преобразование пользовательского интерфейса с помощью трехмерной перспективы

7:16

50

Стеклянная иконка

Узнайте, как создать креативную иконку с помощью размытия фона

9:16

31 9 Хрустальный шар с анимацией с эффектом воды

Анимация волн в хрустальном шаре с помощью инструмента прототипирования

12:54

52

Разработка и программирование линейной анимации с буквами

Узнайте, как анимировать линии с помощью CSS в CodeSandbox

29:38

53

Футуристическая анимация линии

Узнайте, как создать футуристический фон с линиями, используя инструмент Pen на рис.

19:30

54

Импорт Adobe Illustrator на фиг.

Лучшие практики. для импорта файла Illustrator в Figma

3:16

55

Создание иллюстрации в Figma

Использование векторного инструмента в Figma для создания иллюстрации с нуля

4:07

56

Удалить плагин BG

Удалить фон изображения с помощью плагина RemoveBG в Figma

2:27

57

Круговые линии Advanced Stroke

2ma 3 3: 3:

Figma

58

Публикация дизайна в сообществе

Публикация файлов дизайна в сообществе Figma

4:49

59

Преобразование изображения в вектор

Преобразование изображения в вектор в Figma

3:11

60

Прототип с содержимым прокрутки

Добавить вертикальную и горизонтальную прокрутку на вашем фигма -прототипе

3:42

61

Объятие и изменение

Узнайте, как выбирать правильные варианты. объемный контент, фиксированная ширина или высота, контейнер заполнения и усечение текста

62

Advanced Auto Layout

Узнайте, как использовать режим интервалов, наложение холста, выравнивание по базовой линии текста, значения обводки в расширенном макете

63

Круговой текст на пути

Создайте круговой текст на пути с помощью плагина ARC в Figma

5:57

64

Зеркальный прототип

Просмотрите свои прототипы на мобильном устройстве с помощью мобильного приложения 2:39

65

Прототипирование липкой панели навигации и панели вкладок

Как исправить положение с помощью липкой панели навигации и панели вкладок

4:37

66

Видео в Figma Prototype

2 Применить используя любую векторную сеть на вашем прототипе

67

Градиенты сетки

Создавайте красивые и волнообразные градиенты с помощью форм или плагина градиента сетки в Figma

3:03

68

Разделы Figma

Используйте разделы, чтобы упростить организацию проектов в Figma и сделать его лучше для совместной работы

69

Unsplash Стоковые Фото

Вставьте красивые изображения из Unsplash прямо в свой дизайн

70

Угловой градиент

Пошаговое руководство по созданию и настройке углового градиента в Figma

71

Радиальный градиент

Создание ярких радиальных градиентов в Figma для профессионального дизайна

72

Прототипирование анимации после задержки

Самый простой способ анимировать что-либо в Интернете с помощью простого взаимодействия после задержки00 90

Каркас пользовательского интерфейса

Используйте различные инструменты и плагины для создания каркаса, который поможет вам легко спланировать и спроектировать пользовательский интерфейс

74

Анимации Lottie

Пошаговое руководство по использованию анимации Lottie в Figma для улучшения совместной работы и улучшения ваших проектов Content Generator

Полезные плагины, которые могут помочь дизайнерам создавать дизайн с использованием реального контента и сэкономить время

77

Design Lint Missing Style

Экономьте время на поиске и исправлении ошибок в проектах Figma с помощью Design Lint

78

Slice Tool

Export your designs using the slice tool in Figma

79

Adaptive Layout with Breakpoints

Creating flexible and responsive web designs with adaptive layout and breakpoints

80

Chart Designs

Exploring бесконечные возможности дизайна диаграмм для визуализации данных

81

Дизайн модальных окон

Как создавать модальные окна, улучшающие пользовательский интерфейс

82

Пакетное переименование

Быстро и легко переименовывайте несколько файлов в Figma с помощью плагина «Пакетное переименование»

Познакомьтесь с инструктором

Мы все стараемся следовать нашему методу обучения шаг за шагом, предоставляя исходные файлы и расставляя приоритеты дизайн на наших курсах.