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

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

Я всегда говорил, что нет лучшего способа изучить инструмент дизайна, чем просто погрузиться в него и что-то создать.

И угадайте, что?

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

Знакомство с интерфейсом Figma

Самое замечательное в Figma – это чистый и интуитивно понятный интерфейс.

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

Позвольте мне провести быстрый обзор интерфейса Figma…

Панель инструментов

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

Вот краткий список инструментов (с соответствующими сочетаниями клавиш), которые вы будете использовать чаще всего…

• Move (V)
• Scale (K)
• Frame (Aили F)
• Rectangle (R)
• Line (L)
• Arrow (Shift + L)
• Ellipse (O)
• Place Image (Shift + Ctrl + Kили Shift + Cmd + K)
• Pen (P)
• Text (T)
• Hand (Нажмитеили удерживайте SPACE)

Панель слоев (Layers Panel)

В левой части экрана находится панель слоев.

Она дает вам легкий доступ к слоям, компонентам и страницам, используемым внутри вашего текущего файла Figma.

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

Панель компонентов (Assets Panel)

Внутри панели компонентов у вас будет легкий доступ ко всем вашим компонентам.

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

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

Холст (Canvas)

Холст.

Здесь представлены ваши проекты.

Все просто, поэтому двигаемся дальше…

Панель свойств (Properties Panel)

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

Вкладка «Дизайн» (Design)

Вкладка «Дизайн» позволяет легко просматривать, добавлять, удалять или изменять свойства элементов вашего дизайна.

Слой, который вы в настоящее время выбрали, будет определять, какие настройки доступны вам на вкладке «Дизайн».

Вкладка «Прототип» (Prototype)

Вкладка «Прототип» дает доступ ко всем функциям прототипирования, которые может предложить Figma, и позволяет применять переходы между фреймами, оживляя ваши статичные дизайны.

Вкладка «Inspect»

Вкладка «Inspect» на панели свойств позволяет увидеть элементы вашего дизайна в коде, в следующих доступных форматах:

CSS

iOS

Android

А теперь о хорошем …

Проектирование экрана мобильного приложения

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

Открыв Figma, создайте новый документ, щелкнув значок плюса (+) в правом верхнем углу экрана.

На появившемся экране выберите вариант iPhone 11 Pro / X и нажмите Create File.

Затем, когда фрейм не выбран, щелкните имя файла на панели инструментов и переименуйте его в «Mobile App Screen».

Миниатюра карточки

Выберите инструмент «Прямоугольник» (R), нарисуйте фигуру примерно 375px в ширину и 406px в высоту и поместите ее в верхней части фрейма. Вы также можете дважды проверить ее правильность, убедившись, что для нее установлено значение 0 по осям X и Y на панели свойств.

На панели свойств кликните по иконке Independent Corners и выберите 30 для радиусов скругления левого нижнего и правого нижнего углов прямоугольника.

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

Используя сочетание клавиш Shift + Ctrl + K или Shift + Cmd + K, выберите файл preview.jpg из папки Images, а затем кликните по фигуре, чтобы вставить изображение прямо в нее.

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

На панели «Заливка» (Fill) щелкните значок «Плюс» (+), чтобы добавить новую заливку. Убедитесь, что выбран параметр Solid.

Во всплывающем меню введите следующее Hex-значение (#): 303030 и установите непрозрачность (opacity) на 50%.

Наконец, давайте добавим легкую тень (drop shadow) к миниатюре и придадим глубины нашему дизайну.

На панели «Effects» щелкните значок плюс (+), выберите «Drop Shadow» в меню выбора, а затем настройте следующие параметры эффекта…

• X — 0
• Y — 4
• Размытие (Blur) — 4
• Цвет (Color) — #303030
• Непрозрачность (Opacity) — 20%

Панель навигации (Navigation Bar)

Для панели навигации мы вставим пару иконок. Одну для возврата к предыдущему экрану, а другую для добавления статьи в закладки.

Открыв папку Icons, просто перетащите на фрейм следующие иконки, по одной…

• стрелка назад (arrow back)
• закладка (bookmark)

Выделив обе иконки, перейдите на панель «Selection Colors» и измените Hex-значение цвета на белый (FFFFFF).

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

Затем, выбрав обе иконки, перейдите на панель свойств и выберите «Align Vertical Centers» (Alt + V).

Когда обе иконки все еще выделены, используйте сочетания клавиш Ctrl + G или Cmd + G, чтобы сгруппировать их, и Ctrl + R или Cmd + R, чтобы переименовать. Это просто придаст аккуратный и организованный вид на панели слоев.

Всегда переименовывайте и группируйте по ходу дела. Это экономит кучу времени.

Теперь, удерживая Alt, поместите эту новую группу в 56px от верхнего края основного фрейма.

Уведомление

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

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

Инструментом «Прямоугольник» (R) нарисуйте фигуру размером 131px x 33px, а затем закруглите углы до 24.

На панели «Заливка» (Fill) задайте Hex-значение (#) 303030 и уменьшите его непрозрачность до 60%.

На панель «Эффекты» (Effects) добавим этому маленькому уведомлению легкое размытие фона, чтобы добавить визуальный интерес и немного большего контраста между изображением и текстом, который мы скоро разместим в нем.

На панели «Эффекты» щелкните значок плюс (+) и в меню выбора выберите Background Blur (Размытие фона).

Щелкните значок настроек эффекта (Effect Settings) и измените силу размытия (Blur Strength) на 6.

Пришло время написать немного текста и настроить еще несколько свойств, не так ли?

Используя инструмент «Текст» (T), добавьте новый текстовый элемент и напечатайте слово «Bookmarked» (добавлено в закладки).

Затем на панели свойств текста (Text Properties) примените следующее…

• Шрифт (Font) — Lato
• Вес (Weight) — Regular
• Размер (Size) — 14
• Выравнивание текста (Text Align) — Center
• Выравнивание (Align) — Middle
• Заливка (Fill) — #FFFFFF

Выбрав текст, и слой фигуры, используйте параметры выравнивания (Alignment) в верхней части панели свойств, чтобы выровнять элементы как по горизонтали, так и по вертикали относительно друг друга.

Используйте сочетания клавиш Ctrl + G или Cmd + G, чтобы сгруппировать их, и Ctrl + R или Cmd + R, чтобы переименовать.

Затем, наконец, используйте Ctrl + Click или Cmd + Click, чтобы выбрать группу уведомлений и изображение, а затем используйте параметры выравнивания, чтобы выровнять уведомление по горизонтали и вертикали внутри изображения.

Аватар + иконки социальных сетей

Давайте разместим аватар, имя автора и иконки социальных сетей на свои места.

Выберите инструмент Эллипс (O) и нарисуйте фигуру размером 48 x 48px. Вы также можете удерживать клавишу Shift, чтобы сохранить пропорции.

Используя сочетание клавиш Shift + Ctrl + K или Shift + Cmd + K, чтобы использовать инструмент «Поместить изображение» (Place Image), выберите avatar.png из папки «Images» и поместите его внутри фигуры.

Выделив фигуру, перейдите на панель свойств и добавьте следующее…

Stroke –

• Цвет (Color) — #FFFFFF
• Ширина (Width) — 2
• Положение (Position) — Inside

Drop Shadow –

• X — 0
• Y — 2
• Размытие (Blur) — 4
• Цвет (Color) — #303030
• Непрозрачность (Opacity) — 25%

Давайте добавим еще несколько текстовых слоев как для имени автора, так и для даты публикации статьи . ..

Используя инструмент «Текст» (T), создайте 2 новых текстовых слоя, отредактируйте текст соответствующим образом, а затем примените к имени автора следующие свойства…

• Шрифт (Font) — Lato
• Вес (Weight) — Bold
• Размер (Size) — 16
• Выравнивание текста (Text Align) — Left
• Заливка (Fill) — #212121

А для Даты публикации используйте следующее…

• Шрифт (Font) — Open Sans
• Вес (Weight) — Regular
• Размер (Size) — 12
• Выравнивание текста (Text Align) — Left
• Заливка (Fill) — #7D7D7D

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

Затем используйте инструменты выравнивания, чтобы они были выровнены по левому краю относительно друг друга, и, наконец, сгруппируйте их (Ctrl + G или Cmd + G).

Выровняйте эту новую группу на 16px справа от аватара, а затем, выбрав новую группу и аватар, нажмите Alt + V, чтобы выровнять их по вертикали относительно друг друга.

Давайте добавим пару иконок социальных сетей …

Как и раньше, просто перетащите по одной иконки Instagram и Twitter в свой дизайн и, используя комбинацию инструментов выравнивания и клавиши Alt, выровняйте их по вертикали относительно друг друга (Alt + V) и разместите их. На расстоянии 16px.

Сгруппируйте иконки (Ctrl + G или Cmd + G) и переименуйте (Ctrl + R или Cmd + R).

Выделив группу иконок социальных сетей, группу текстовых слоев и аватар, используйте Alt + V, чтобы выровнять их по вертикали относительно друг друга.

Сгруппируйте (Ctrl + G или Cmd + G) все эти элементы вместе, а затем поместите эту новую группу на 32px от левого и правого края фрейма и на 32px от нижнего края изображения.

Заголовок + контент

Давайте добавим небольшой заголовок и фрагмент контента, чтобы еще немного дополнить наш дизайн …

Используя инструмент «Текст» (T), создайте простой заголовок, а затем на панели свойств примените следующее…

• Шрифт (Font) — Lato
• Вес (Weight) — Bold
• Размер (Size) — 21
• Высота строки (Line Height) — 32
• Выравнивание текста (Text Align) — Left
• Выравнивание (Align) — Top
• Заливка (Fill) — #212121

Затем, используя инструмент «Текст» (T) еще раз, создайте абзац контента, который будет отображаться под заголовком со следующими свойствами . ..

• Шрифт (Font) — Open Sans
• Вес (Weight) — Regular
• Ращмер (Size) — 16
• Высота строки (Line Height) — 28
• Выравнивание текста (Text Align) — Left
• Выравнивание (Align) — Top
• Заливка (Fill) — #7D7D7D

Мы установили цвет этого блока текста на темно-серый (#7D7D7D), чтобы он красиво контрастировал с заголовком, добавлял немного визуального интереса, но все еще был доступен на белом фоне для пользователей с ослабленным зрением.

Удерживая клавишу Alt, наведите курсор на два слоя, чтобы увидеть расстояние между ними, и разместите их на расстоянии 8px друг от друга.

Не забудьте сгруппировать (Ctrl + G или Cmd + G) и переименовать (Ctrl + R или Cmd + R), а затем разместите эту новую группу на 32px от левого края фрейма и на 32px от нижней части аватара группы.

Форма комментария

ОК. Давайте подведем итоги и добавим в наш дизайн небольшую форму / поле комментария.

Снова вызвав инструмент «Прямоугольник» (R), нарисуйте фигуру размером 263 x 40px, задайте ей радиус скругления углов 24 и заливку #E4E4E4.

Вставьте текстовый слой (T), измените формулировку (например, «Добавить комментарий…»), а затем добавьте следующие свойства…

• Шрифт (Font) — Lato
• Вес (Weight) — Regular
• Размер (Size) — 16
• Выравнивание текста (Text Align) — Left
• Выравнивание (Align) — Middle
• Заливка (Fill) — #707070

Выделив и фигуру, и текстовый слой, выровняйте их по вертикали относительно друг друга (Alt + V), а затем сгруппируйте (Ctrl + G или Cmd + G) их и переименуйте (Ctrl + R или Cmd + R).

Перетащите в свой дизайн кружок со стрелкой вправо, а затем с помощью инструмента «Scale» (K) измените его размер пропорционально до 40 x 40px , чтобы он имел те же размеры по высоте, что и поле, которое мы только что создали.

Поместите иконку на 8px справа от поля комментария, а затем, выбрав группу полей и иконку, выровняйте их по вертикали относительно друг друга (Alt + V).

Ну, наконец-то. Сгруппируйте 2 элемента (поле комментария и иконку). И поместите эту новую группу на 32px от нижней части текста, а также от левого и правого краев фрейма.

Вот и все, наш маленький экран мобильного приложения готов.

Я уже много раз говорил: начинайте проектировать, а потом проектируйте еще. Это лучший способ изучить новый инструмент и одновременно улучшить свои дизайнерские навыки.

Спасибо, за прочтение статьи.

Перевод статьи marcandrew.me

Уроки по дизайну в Figma (часть 1)

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

Проблема в том, что многие начинающие дизайнеры, открывающие для себя Фигму, не используют те фичи, которые делают этот редактор по-настоящему крутым, и в результате пользуются утилитой чуть удобнее Paint. Поэтому мы сразу поставим себе амбициозную задачу: сделать легкий дизайн для двухстраничного сайта с использованием компонентов и плагинов, которые могут нам пригодиться. 

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

Итак, погнали. Скачиваем, устанавливаем, открываем Фигма, создаем новый проект:

Пустой проект Figma

Сразу переименуем проект, кликнув по «Untitled» в верхней части экрана:

Название проекта в Фигме

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

Зачем использовать разные страницы

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

Что такое UI-кит вкратце

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

Чтобы создать страницы, вверху слева нажмите на Pages и значок + (плюс). 

Новая страница

Делаем три страницы и переименовываем их в UI, Home, Contacts. Название, очевидно, ни на что, кроме нашего удобства, не влияет. 

Страницы с названиями

Далее переходим во вкладку «UI» и создаем новый фрейм (кнопка F или иконка на верхней панели).

Пустой фрейм

Нас особо не интересуют размеры этого фрейма, так как на нем будут располагаться отдельные элементы, не образующие какую-то страницу. Я задал размеры 800 по ширине и 1000 по высоте. 

Размеры фрейма

Назовем этот фрейм Elements — в этом фрейма мы будем размещать наши элементы управления. 

Название фрейма

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

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

Итак, мы находимся на странице UI, на фрейме Elements. Выбираем инструмент «Прямоугольник» (R) и создаем прямоугольник произвольных размеров на нашем фрейме:

Создание прямоугольного вектора

Переименовываем его в древе слоев в «Фон кнопки»: 

Название вектора

Теперь мы выделим его и отредактируем его параметры: установим ширину 150, высоту 50 и зальем ее градиентом: 

Высота и ширина

Высота — это параметр H, ширина — W. В палитре выбора цвета переключите сверху с Solid (сплошной цвет) на Linear (линейный градиент):

Градиент вектора

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

Направление градиента

Чтобы наша кнопка была более материальной, повесим на нее тень: выделим кнопку и нажмем в параметрах справа + в области Effects:

Добавление тени

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

Отредактируем параметры тени, чтобы было посимпатичнее. Для этого нажмем на иконку слева от эффекта. 

Параметры тени

Фон готов, добавляем текст кнопки: выбираем инструмент «Текст» и выделяем область по площади всей кнопки: это нужно для того, чтобы нам было легко расположить текст по центру фона. Вводим текст: 

Добавление текста

И выставляем параметры текста справа как на скриншоте: выравнивание по центру по высоте и по ширине.  

Параметры текста

Далее в древе слоев выделяем наш фон и текстовый слой и группируем их (control + g).

Отдельные элементы

Группа

Переименовываем группу в «Обычная кнопка». 

Название группы

На этом этапе мы создали элемент, и теперь нам надо сделать из него компонент. Выделяем группу и жмем сочетание Command + Option + K или Control + alt + K, либо выбираем пункт из выпадающего меню:

Создание компонента

Готово, вы создали компонент!

Чтобы понять, что мы наделали, переходим в другую страницу проекта, переключаем сверху слева окно навигатора на Assets и перетаскиваем нашу из Assets в любую часть рабочего пространства — так мы создали экземпляр нашего компонента. 

Вкладка Home

Assets

Экземпляр на странице

Нам этом первый урок окончен.

Упражнение по дизайну: Краткий обзор дизайна и мудборд

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

Если вы следите за уроками, что такое дизайн? и Этика дизайна — отличные уроки, которые стоит изучить перед созданием описания дизайна и доски настроения.

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

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

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

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

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

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

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

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

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

Часто бриф исходит от клиента или заинтересованного лица в вашей компании.

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

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

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

Закончили упражнение и хотите получить отзыв? В Интернете существует множество сообществ, где можно критиковать дизайнерские работы, например, Behance, Dribbble и Figma Africa. Существует также сообщество пользователей Figma, speckt.chat/figma, которое включает в себя канал, посвященный предоставлению и получению отзывов о дизайнерских работах, speck. chat/figma/critique.

Полезно рассказать историю, отправляя дизайн-проект на критику. Если вы отправляете изображение или файл Figma сообществу на рассмотрение, в нем будет отсутствовать контекст, связанный с работой. Вместо этого они увидят только визуальный дизайн, что часто приводит к бесполезным комментариям, например: «Мне нравятся цвета».

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

Вы можете запросить конкретно то, о чем вы хотите получить отзыв: «Я ищу отзывы о интервалах, размере шрифта, удобочитаемости, цвете фона и буду рад любым ссылкам, на которые вы могли бы мне указать в отношении ваших комментариев».

Частью дизайна является ежедневное подвергание себя критике и неудачам. Это имеет решающее значение для нашей работы, поскольку позволяет нам улучшать ее и лучше обслуживать наших клиентов. Вы должны ожидать и даже приветствовать критику вашей дизайнерской работы — по приглашению или без нее. Будьте готовы защищать свою работу, объяснять принятые решения и приветствовать улучшения.

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

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

«Мне не нравится оранжевый» — это не качественная обратная связь.

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

Сообщите дизайнеру, если что-то не понятно, и представьте ему проблему, а не свое решение. Например, скажите: «Мне трудно читать этот текст». Вместо «Пожалуйста, сделайте текст крупнее».

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

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

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

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

24 лучших руководства по Figma для создания убийственного дизайна в 2022 году

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

Figma хочет сделать для дизайна интерфейса то же, что Google Docs сделал для редактирования текста.

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

Обзор статьи:
Что такое Figma?
Начало работы с Figma
Учебники по веб-дизайну
Учебники по дизайну приложений
Учебники по дизайну маркетинга и рекламы
Учебники по дизайну игр
Учебники по Интернету вещей

Что такое Figma?

Figma — это инструмент для создания прототипов дизайна, который основан на Sketch, но перерос его. Среди программного обеспечения для дизайна UX/UI он считается одним из лучших инструментов, предлагаемых в настоящее время на рынке. Оно размещено в облаке, и вся идея приложения Figma состоит в том, чтобы создать беспроблемный опыт для команд, которые могут вместе работать над различными заданиями.

Что делает Figma особенным?

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

Кроме того, на официальном сайте доступно множество ресурсов. Говоря о веб-сайте, вы можете удивиться тому, насколько он прост и хорошо организован. Спасибо, Фигма!

Figma — это веб-приложение , так что вам просто нужно зайти на Figma.com и присоединиться. Теперь давайте перейдем к этим 25 урокам для начинающих.

Начало работы с Figma

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

Прежде всего, вы можете начать использовать

1. Учебник для начинающих — выпуск 2022 г.

Поскольку Figma является кроссплатформенным приложением, вы найдете все, что доступно на веб-сайте. Вместо того, чтобы искать ресурсы в Google, , вы можете напрямую найти все для своих проектов на Figma.com .

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

2. Новые функции Figma в 2022 году

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

Figma Auto Layout — одна из областей, которая получила масштабное обновление — теперь в ней больше контроля над холстом, отрицательный интервал и самая большая рок-звезда — абсолютное позиционирование . Но есть также некоторые незначительные изменения в порядке слоев и новом порядке укладки холста.

3. Как создать потоки пользователей в Figma?

Figma запустила Figma как отдельный продукт для работы с белой доской в 2021 году, и в настоящее время он даже может конкурировать со стандартными инструментами, такими как Miro и LucidChart.

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

4. Как создать каркас в Figma?

В этом руководстве по каркасу Figma вы увидите , как создать дизайн для мобильных устройств. Существует пример из реальной жизни, который, как правило, более понятен большинству людей.

Само видео очень объяснительное, и что нам больше всего понравилось, так это то, что вы действительно можете увидеть, как все делается «в реальной жизни». Обязательно посмотрите видео, так как недавняя статистика показывает, что 85% людей считают, что мобильные версии должны быть такими же или лучше, чем веб-сайты.

5. Как создать дизайн пользовательского интерфейса в Figma?

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

Если вы не возражаете против больших двоичных объектов (которые, кстати, довольно круты!), вы увидите, как создать стандартную страницу регистрации, создать кнопки и использовать ресурсы из богатой библиотеки Figma.

6. Как создать анимацию в Figma?

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

Анимация делает даже скучные проекты интерактивными и веселыми . Даже если это простая кнопка-переключатель, как в примере. Чем раньше вы начнете практиковать анимацию Figma, тем лучше.

7. Как создать прототип в Figma?

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

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

8. Руководство по передаче Figma разработчику

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

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

• Контрольный список передачи.
• Сессия вопросов и ответов по дизайну.
• Подписание заинтересованными сторонами.

9. Как сотрудничать с вашей командой в Figma?

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

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

10. Как создавать ветки в Figma?

Дизайнеры не очень хотят, чтобы кто-то проверял и комментировал их проекты еще до того, как они будут готовы. Чтобы создать что-то хорошее, требуется время, и понятно, что профессионалам UX и UI нужно некоторое «пространство», чтобы работать в одиночку.

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

11. Как создавать варианты в Figma?

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

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

Создать отличный веб-сайт, который понравится пользователям, — непростая задача. Придумать простой пользовательский интерфейс, не забывая при этом об эстетике, так же важно, как и его содержание. 94% первых впечатлений связаны с дизайном. И профессиональные дизайнеры Figma действительно могут создать что-то красивое.

Давайте посмотрим, что делает Figma X-фактором в макетах веб-сайтов .

1. Как создать дизайн сайта в Figma?

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

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

2. Как создать веб-дизайн и интеллектуальную анимацию в Figma?

В этом уроке по Figma вы узнаете, как создать целевую страницу веб-сайта с нуля и сделать ее интерактивной с помощью интеллектуальной анимации.

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

3. Как создать целевую страницу в Figma?

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

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

Быть в курсе последних тенденций веб-дизайна — это абсолютно необходимо. Тем не менее, мир быстро меняется в сторону мобильного дизайна, что делает дизайн мобильных приложений более актуальным, чем когда-либо.

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

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

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

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

2. Как создать мокап мобильного приложения в Figma?

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

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

3. Как создать дизайн приложения в темном режиме в Figma?

Темный режим быстро стал фаворитом среди фанатов, и наличие его в вашем дизайне — огромный плюс; В этом уроке по Figma вы узнаете, как создать пользовательский интерфейс в темном режиме.

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

Учебники по маркетингу и рекламному дизайну

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

Давайте посмотрим, как произвести впечатление на потенциальных клиентов с помощью Figma.

1. Как создать карусель в Instagram с помощью Figma?

Карусели в Instagram — один из самых популярных способов рекламы товаров. И, к счастью, Figma предоставляет множество инструментов для создания отличных дизайнов.

В этом руководстве по Figma Instagram показано, как создавать карусели двумя способами — с помощью фреймов или с помощью фрагментов. Что понравилось, так это то, что объяснение очень простое и есть вердикт, какой метод работает лучше.

2. Как создать баннер в Figma?

Баннеры имеют ключевое значение для многих компаний, занимающихся электронной коммерцией, и вы можете создавать выдающиеся дизайны баннеров с помощью Figma.

Этот учебник по баннерам Figma короткий, но очень информативный по ключевым элементам — работе с цветовой палитрой и использованию фигур. Что нас действительно зацепило, так это небольшой совет прямо под «Быстрой распродажей». Снимаю шляпу перед этой оригинальной идеей!

3. Как создать визитку в Figma?

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

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

Можно ли использовать Figma для разработки игр? Ответ: да, может. Немного потренировавшись, вы сможете создавать потрясающие дизайны пользовательского интерфейса для игр и даже заставить критиков замолчать.

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

1. Как создать 2D-дизайн пользовательского интерфейса в Figma?

Не будем врать — создание игрового дизайна занимает много времени, независимо от того, какое программное обеспечение вы используете. В Figma относительно проще создавать простые проекты, но в нем нет расширенных функций.

Тем не менее, это руководство по Figma показывает нам, что есть способ создать множество компонентов, которые впоследствии можно будет встроить в игры . Голос за кадром отсутствует, поэтому обязательно ставьте видео на паузу, если вам сложно что-то сделать.

2. Как создать игру в Figma?

В этом уроке по Figma вы увидите, как создать простую игру UFO Scroller всего за 4 минуты, что весьма впечатляет!

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

Учебные пособия по Интернету вещей

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

1. Как разработать пользовательский интерфейс приложения для смарт-часов в Figma?

Интернет вещей — отличная технология, и один из наиболее типичных примеров — смарт-часы. В этом случае мы увидим дизайн пользовательского интерфейса Apple Watch.

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

2. Как создать пользовательский интерфейс дизайна умного дома в Figma?

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

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

Заключение

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