сделать задание в программе figma

Задание

Создайте сравнительный анализ средств для работы дизайнера. Для сравнения необходимо описать минимум 3 ресурса - Figma, Photoshop, illustrator.

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

Пример схемы представлен ниже:

Ниже описаны ключевые моменты для работы в Figma

Регистрация аккаунта 1

Редактирование фрейма 2

Изменить название фрейма 4

Добавить текст на фрейм 5

Добавить геометрическую фигуру на фрейм 5

Добавить картинку на фрейм 5

Делимся проектом 6

Регистрация аккаунта

Перейдите на (ttps://www.figma.com/login)

В нижней части экрана выберете пункт Create one

После перехода на вклалку создания аккаунта, заполните поле email своей корпоративной почтой, придумайте пароль. Нажмите на кнопку Create account.

Редактирование фрейма

Для создания 1 проекта после входа в правом верхнем углу экрана нажмите на кнопку design file, далее drafts

После создания проекта создайте фрейм (рабочее пространство) для сравнительного анализа. Размер фрейма - А4.

При необходимости вы можете изменить ориентацию фрейма(повернуть на 90 градусов). Кликните на фрейм.

Справа в соответствующей настройке укажите градус поворота - 90.

Основная настройка фрейма и любого другого геометрического объекта - это заливка. Для изменения цвета выберете объект, справа найдите настройку Fill

Изменить название фрейма

В правом верхнем углу фрейма располагается его название. Чтобы его изменить, кликните на него 2 раза левой клавишей мыши. Измените текст.

Также изменить название можно в списке слоев в левом столбце. Чтобы его изменить, кликните на него 2 раза левой клавишей мыши. Измените текст.

Добавить текст на фрейм

Для того, чтобы написать текст, необходимо добавить текстовое поле. Кнопка находится в левом верхнем углу.

Добавить геометрическую фигуру на фрейм

В левом верхнем углу выбираем 4 кнопку с квадратом. Выбираем тип необходимой фигуры. Помещаем ее на фрейм.

Добавить картинку на фрейм

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

Делимся проектом

В правом верхнем углу нажмите на синюю кнопку Share и в новом открывшемся окне нажмите на кнопку Copy link.

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

Задание

Подберите цветовую палитру. Скрин палитры добавьте в проект.

Ресурсы:

(ttps://colorscheme.ru/)

(ttps://color.romanuke.com/)

(ttps://seochecker.it/)

Создайте слайд, на котором в качестве элемента дизайна есть геометрический паттерн.

Обязательно использование группировки объектов и эффектов фигур.

Пример слайда:

Тени

Drop Shadow — внешняя тень, подходит для отделения объекта от фона. Inner Shadow — внутренняя, подходит для создания объёмных объектов:

Чтобы добавить тень, в разделе Effects нажмите на плюсик. По умолчанию Figma добавит обычную тень, но если нажать на надпись Drop Shadow, в выпадающем меню его можно изменить на Inner Shadow.

Базовые настройки у теней одинаковые, но работают они немного по-разному:

• Blur — размытие краёв тени.
• Spread — размер тени.
• X и Y — смещение относительно центра объекта. X — влево и вправо, а Y — вверх и вниз.
• Также у тени можно настроить её цвет и непрозрачность.

Смещение и размер у внешней тени могут быть какими угодно, так как явных границ у неё нет. У внутренней тени те же параметры ограничены самим объектом.

Размытие

В Figma есть два вида размытия: Layer blur и Background blur. Настроить у них можно только уровень размытия, но работает он в этих режимах по-разному.

Чтобы добавить размытие, в разделе Effects нажмите на плюсик. Затем нажмите на надпись Drop Shadow и в выпадающем меню выберите Layer blur 

или Background blur.

Layer blur просто размывает слой целиком в зависимости от выбранного значения в настройках.

Background blur работает немного хитрее. Если просто указать у него уровень размытия, то ничего не произойдёт. Но если в пункте Fill снизить непрозрачность заливки, то фон под слоем с Background blur будет размыт.

Не путайте непрозрачность слоя (Layer) и заливки (Fill). Если вы снизите непрозрачность слоя, то эффект Background blur работать не будет.

Сочетание эффектов

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

• Добавьте на макет фотографию и поверх неё наложите любую фигуру: круг, квадрат, треугольник.
• В настройках эффектов фигуры добавьте тень со следующими настройками: X и Y — 12, Blur — 25, Spread — 2, непрозрачность тени — 25%.
• В настройках эффектов фигуры добавьте Background blur с размытием 25.
• Снизьте непрозрачность заливки фигуры до 10%.
• По желанию можно добавить обводку с непрозрачностью 50%.

Если делать тень чёрной, а цвет фигуры белым, то эффект получится недостаточно реалистичным. Лучше использовать основной цвет фона, чтобы сымитировать падающий на ваше стекло свет.