Как сделать полукруг в фигме

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

• Нарисуйте кружок
• Выделите его
• Появится маркер, позволяющий отрезать нужное значение
• Снова выделите
• Появятся три маркера: радиус дырки и радиус закругления

Ответ написан более трёх лет назад

Нравится 6 1 комментарий

Диаграммы и графики

Плагин Graphviz для Figma позволяет создавать и поддерживает сложные информационные графики.

Отправлено 26 янв 2021, 10:34

Плагин Dots on Vertices для Figma

Плагин Dots on Vertices для Figma позволяет помещать настраиваемую точку на каждую вершину выбранного вами вектора.

Отправлено 26 янв 2021, 10:27

Плагин Custom Graph для Figma

Плагин Custom Graph для Figma способствует созданию линейных, столбчатых и кумулятивных графиков на основе элементов вашего дизайна.
Для построения графика нужно:

выбрать фрейм, в котором вы хотите построить диаграмму; выбрать объект в вашем дизайне, из которого хотите построить график; ввести данные в таблицу (также поддерживается вставка из Excel и генерация случайных чисел в нужном диапазоне).

Отправлено 26 янв 2021, 10:16

Плагин Figpie для Figma

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

Отправлено 18 янв 2021, 18:01

Datavizer

Плагин Datavizer для Figma поможет вам с легкостью создавать гистограммы, точечные или линейные диаграммы со своими данными. Также вы можете использовать генератор случайных данных для быстрого создания необходимых фигур или фиктивных данных (например, спарклайнов для макета панели мониторинга).

• генератор
• графики
• (и ещё 2 )

Отправлено 15 ноя 2020, 13:48

Chart

Плагин Chart использует реальные или случайные данные для создания самых популярных диаграмм. Поддерживает копирование-вставку из таких редакторов, как Excel, Numbers, Google Sheets, прямое соединение с Google Sheets и удаленными JSON (REST API).
Особенности плагина:
13 типов графиков из коробки создание нескольких экземпляров диаграммы генерация случайных данных с различными тенденциями импорт данных из CSV, JSON, Google Sheets, REST API/li> настройка графиков с различными параметрами обновление графиков

• генератор
• диаграммы
• (и ещё 4 )

Отправлено 21 окт 2020, 14:15

Эллипс в Фигме

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

Горячая клавиша для вызова инструмента эллипс O.

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

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

Обратите внимание, что Фигма оперирует именно шириной и высотой, а не радиусом и диаметром.

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

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

В седьмой части по основам 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!

Просмотры: 16633

Что ещё почитать

Оставьте комментарий

Комментарии

Оксана підтримує ЗСУ · 29 октября 2023 14:04

Дуже вдячна Любі за цей курс!
Всі матеріали викладені дуже доступно, навіть для новачка, який ще зовсім недавно нічого не знав про Фігму) Перевірка завдань дуже ретельна, Люба не пропускає навіть маленької дрібнички, і за це їй окрема подяка, бо саме на власних помилках ми і вчимось!
З нетерпінням чекаю початку менторського курсу. А всім, хто давно мріє зробити перші кроки в оволодінні цією професією, дуже раджу пройти цей курс;)

Анна · 23 июня 2023 18:14

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

Варвара підтримує ЗСУ · 31 марта 2023 16:45

Добрий день) Курс був надзвичайно цікавим та прекрасним як для повних початківців, так і для досвідчених дизайнерів, дякую!)
https://www.figma.com/file/Dy1fUf6L4DZSfVxQCFVSvm/UX%2FUI-Frusia-2?node-id=442%3A2&t=TOWtaVniQPpZpbHD-1

Коментар frusia.pro:

Добрий день, вибачте за затримку. Все гарно відмальовані в плані деталей, лінії чіткі. Але я так розумію через масштабування візуально змінилась товщина. Можливо, якщо привести іконки до одного розміру буде більш схоже до оригіналу. Але це не обовʼязково.

Вікторія Грищенко підтримує ЗСУ · 19 октября 2022 23:03

Усе виправила.
https://www.figma.com/file/b2yUlHgEf6V2SHcZePFVHX/%D0%A3%D1%80%D0%BE%D0%BA-10?node-id=0%3A1

Коментар frusia.pro:

Тепер все чудово. Напишіть мені будь ласка в особисті повідомлення в інстаграмі своє прізвище та імʼя англійською мовою, щоб я могла згенерувати для вас сертифікат про завершення курсу.

Вікторія Грищенко підтримує ЗСУ · 17 октября 2022 19:25

Добрий вечір! Дякую за урок, трошки важко було робити рівні кола, але я старалась)
І дякую Вам за чудовий курс, навіть шкода, що це останній урок!

Коментар frusia.pro:

Добрий вечір. Я залишила у вашому файлі кілька коментарів, до іконок, які потрібно виправити.

Yuliya Lepenko підтримує ЗСУ · 2 октября 2022 22:48

Вітаю:)
Дякую за зворотній зв’язок. Виправила і додала скрін архіву)

Коментар frusia.pro:

Тепер все чудово. Вітаю із завершенням курсу! Напишіть мені будь ласка в дірект інстаграму точне імʼя та прізвище англійською мовою, щоб я згенерила для вас персональний сертифікат

Yuliya Lepenko підтримує ЗСУ · 1 октября 2022 13:23

Коментар frusia.pro:

Завдання 1. Перемалювати 8 іконок. Бачу якісно виконану роботу, усі лінії одної товщини, іконки вийшли дуже схожі.

Завдання 2. Спростити 4 іконки. Тут також все супер, але маю зауваження до іконки з коктейлями. Зверніть увагу, на лінії де лимон дотичний до склянки. Чомусь там лінії значно товстіші, а треба щоб були однакові. По решті іконок все ідеально, бачу що ви значно спростили фігури, молодець!

Завдання 3. Експортувати іконки та заархівувати їх. Бачу імпортовані фігурки, сподіваюсь, що ви навчились архівувати файли.

Чекаю на виправлення до другого завдання

Богдана підтримує ЗСУ · 6 августа 2022 15:53

Люба, вітаю)
Надсилаю останнє дз і аж прикро дуже, що це все) Дуже сподобалась Ваша подача матеріалу: легко, просто і доступно! Величезна Вам дяка за крутий курс ♥

Завдання 1-2 https://www.figma.com/file/R2GcgT9WcgRm1jolF5lBA9/%D0%B4%D0%B7?node-id=310%3A24
Завдання 3 https://fex.net/uk/s/61fmbpv

Маю надію, що все зрозуміла і виконала правильно))
Мирного Вам дня!

Коментар frusia.pro:

Добрий вечір! Дякую за відгук Дуже рада, що вам сподобалось!

Завдання 1. Перемалювати 8 іконок. Перемальовано дуже добре, з увагою до деталей. Вийшло дуже схоже, зауважень не маю, молодець!

Завдання 2. Спростити 4 іконки. Також чудова робота, іконки значно спрощені та перемальовані з нуля.

Завдання 3. Експортувати іконки та заархівувати їх. Це ви цікаво придумали завантажити архів на файловий хостинг! Все зроблено правильно.

Всі завдання виконано ідеально. Хочу привітати вас з успішним завершенням курсу! Будь ласка, напишіть мені в Інстаграм, щоб я вислала вам персональний сертифікат про завершення навчання

Інна підтримує ЗСУ · 2 августа 2022 14:21

Добрий день, надсилаю виконане останнє домашнє завдання, сподіваюсь повністю його зрозуміла правильно.
https://www.figma.com/file/64JKPVUTx2IaYWFm7ljBPh/Lesson-10?node-id=21%3A3
Дуже дякую вам за курс!

Коментар frusia.pro:

Завдання 1. Перемалювати 8 іконок. Відмальовано ідеально, молодець! Не маю жодного зауваження. Все дуже якісно зроблено.

Завдання 2. Спростити 4 іконки. Ви все зрозуміли правильно, іконки дійсно вийшли набагато простішими, що дуже добре. Щоб це зробити, вам довелось повністю перемалювати іконки з нуля. Це завдання також виконано ідеально

Ви чудово попрацювали та гарно розібрались у роботі з кривими. Вітаю з успішним завершенням курсу! Будь ласка, напишіть мені в Інстаграм, щоб я вислала вам сертифікат

Yana Usachova підтримує ЗСУ · 25 июля 2022 12:02

Доброго дня, дякую за зауваження, дійсно краще вийшло
https://www.figma.com/file/CsAIYtJ3wR2M7HkAiYOWYs/hw10?node-id=0%3A1

Коментар frusia.pro:

Добрий вечір! Тепер з іконками все добре. Хочу привітати вас з успішним завершенням курсу! Будь ласка, напишіть мені в Інстаграм, щоб я відправила ваш персональний сертифікат про навчання

Yana Usachova підтримує ЗСУ · 20 июля 2022 15:22

Доброго вечора, це завдання з зірочкою, намагалася виконати вірно, але не впевнена. Я вірно зрозуміла, що єкспортую архівом, а розширення вибіраю SVG? Ци знов стратила. щіро дякую за можливість навчатися у вас
https://www.figma.com/file/CsAIYtJ3wR2M7HkAiYOWYs/hw10?node-id=5%3A271

Коментар frusia.pro:

Добрий день! Будь ласка, рада, що ви у мене навчаєтесь

З приводу вашого питання про архів. Ви експортуєте кожну іконку окремо в форматі Svg. А потім окремо створюєте дві папки і копіюєте іконки туди. Далі обидві папки архівуєте в zip-формат.

Завдання 1. Перемалювати 8 іконок. Бачу 8 іконок, чудовий початок. Давайте спробуємо їх трохи покращити:

• Іконка праворуч з кухарем чомусь трохи сплюснута по вертикалі. Спробуйте її витягнути. Також бачу там неакуратні лінії в районі шиї;
• у іконки ліворуч зверху є потовщення лінії, де піднос дотичний до столу, треба просто піднос трохи опустити вниз;

Завдання 2. Спростити 4 іконки. Спробуйте забрати зайві лінії та трохи спростити іконки. Зараз виходить трохи наліплено з цією товщиною.

Записала коротке відео по кожному завданню:
https://drive.google.com/uc?id=1DQB33T8G7qnMTc6LRciDTF5ERXfDE9hN

Чекаю на правки, якщо щось неясно, то питайте

Марія С підтримує ЗСУ · 15 июля 2022 02:40

Дякую за курс!
https://www.figma.com/file/KXxNpsgzpmmuVJYq0UI7dX/10-%D1%83%D1%80%D0%BE%D0%BA?node-id=0%3A1

Коментар frusia.pro:

Добрий вечір! Будь ласка

Завдання 1. Перемалювати 8 іконок. Чудова робота, всі іконки дуже схожі, а що саме головне ви використали правильні інструменти: де потрібно криві, де простіше еліпс і прямокутник. Ви дуже добре розібрались, молодець!

Завдання 3. Експортувати і заархівувати іконки. Бачу окрему групу з тими ж іконками, наскільки я зрозуміла ви імпортували назад Svg-файли, які були попередньо заархівовані. Зараховується.

Хочу привітати вас з успішним закінченням курсу! Ви дуже добре попрацювали! Будь ласка, напишіть мені в Інстаграм, щоб я вислала вам сертифікат про успішне завершення навчання

Анна підтримує ЗСУ · 12 июля 2022 16:26

Коментар frusia.pro:

Добрий вечір! Тепер все супер, вітаю вас з успішним завершенням курсу! Напишіть мені, будь ласка, в Інстаграм, щоб я відправила ваш персональний сертифікат

Анна підтримує ЗСУ · 9 июля 2022 21:48

Коментар frusia.pro:

Завдання 1. Перемалювати 8 іконок. Чудово попрацювали, маю лише одне маленьке зауваження. Перша і третя іконки зліва зверху у місцях, де лимон дотичний до склянки є значне потовщення лінії, треба виправити (усі лінії мають бути однакової товщини). По решті ідеально.

Завдання 2. Спростити іконки та зробити товстішими лінії. Також дуже добре. По другій зліва іконці є зауваження. Там є повністю залиті елементи, які не відповідають стилістиці, їх потрібно видалити.

Чекаю на виправлення

Ірина С. підтримує ЗСУ · 5 июля 2022 16:05
Добрий день! Надсилаю дз до 10 уроку.
https://www.figma.com/file/7zRqFmpZEPGBVXcAwmoyXy/Homework_10

Коментар frusia.pro:

Завдання 1. Перемалювати іконки. Дуже добре. Єдине, що можна покращити, це замінити фігури, що схожі на кола еліпсами, а не відмальовувати їх з нуля.

Завдання 2. Спростити іконки. Бачу, що лінії стали товстіше, а деталей менше. Все супер.

Чудова робота, вітаю із закінченням курсу! Будь ласка, напишіть мені в Інстаграм, щоб я вам відправила сертифікат

Люба Фурсеєва · 29 июня 2022 20:42
Владислава, дякую за відгук! Рада, що вам сподобалось
Владислава · 29 июня 2022 15:11
Велике дякую за такий курс! Зроблений майстерно і з любов’ю. Вдячна!
Люба Фурсеєва · 26 июня 2022 20:54
Катерина, будь ласка! Дякую за відгук і вітаю з успішним завершенням курсу!
Катерина підтримує ЗСУ · 25 июня 2022 23:13

Спасибо за ваш курс!)
Все задания и уроки очень качественно и познавательно сделаны, а главное — простым языком))

Катерина підтримує ЗСУ · 23 июня 2022 19:34

Коментар frusia.pro:

Завдання 1. Перемалювати 8 іконок. Все добре, бачу 8 іконок однакової товщини. Є лише проблема з другою іконкою праворуч внизу, там де бокал з коктейлем і страва. Зверніть увагу, що між підносом і кришкою дуже товста горизонтальна лінія. Треба, що товщина була однакова для всіх ліній іконки.

Завдання 3. Експортувати і заархівувати іконки. Чи вдалось вам навчитись створювати zip-архіви самостійно?

Чекаю на виправлення до першого завдання

Люба Фурсеєва · 17 мая 2022 23:05
Андрій Дьяченко, дякую за відгук.
Андрей Дьяченко · 17 мая 2022 22:07

Спасибо за урок, Люба. Немного освоил кривые, которых раньше боялся)) Прошёл все ваши уроки, научился многим новым вещам. Спасибо вам огромное за ваш опыт и труд, который вы вложили в этот замечательный курс! Вы лучшая.

Люба Фурсеєва · 23 апреля 2022 14:51

Ірина, привіт. Є спеціальний плагін для Figma.
Лишаю посилання https://www.figma.com/community/plugin/915785576743284465/Variable-Width-Stroke

Ирина · 23 февраля 2022 18:33

Здравствуйте! Крутой урок, спасибо огромное, не знала многих фишек. Скажите, а есть ли такая возможность в фигме, чтобы кончик линии был тонкий, а сама линия толще?

Люба Фурсеева · 21 января 2022 18:23
Полина, спасибо за отзыв!
Полина · 14 декабря 2021 21:09

Спасибо за очень интересный урок! Наконец-то освоила данный инструмент и не боюсь им работать.
Все навыки и опыт благодаря вам. Спасибо большое за ваш труд и опыт!

Люба Фурсеева · 1 декабря 2021 12:12
Sea, пожалуйста
Полина, надеюсь будет понятно, пробуйте
Полина · 1 декабря 2021 11:11

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

Sea · 28 ноября 2021 12:01

Привет!
Хочу сказать вам спасибо за проделанную работу, все на высшем уровне.
Красиво, коротко и понятно, что еще надо)

Поиск

Использование файлов Cookie

Frusia.pro uses cookies for personalization and ensuring the proper functioning of the site. By continuing to use this site, you confirm your agreement to use cookie files. If necessary, familiarize yourself with the terms of условиями и принципами их обработки .

Даю согласие на обработку данных

Проектирую сайты и интерфейсы, пишу о дизайне и контенте.

© 2024 Все права защищены