Как включить пиксели в Figma

Обновлено: 04.07.2024

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

1. Откройте документ Figma и создайте новый кадр

Вы уже знаете процедуру — откройте файл Figma, нажмите F и выберите iPhone 8. Затем настройте сетку макета в новом фрейме — 3 столбца, отступ 16 пикселей, поле 16 пикселей.

2. Создайте нижнюю навигацию

Для нижней навигации нам также нужна кнопка-гамбургер. Мы создали его не вчера, поэтому вам нужно будет использовать инструмент «Линия» L или инструмент «Перо» P, чтобы добавить его в свой набор значков.

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

3. Добавьте уменьшенную версию словесного знака вверху экрана

4. Добавить фото

Есть несколько способов вставить фотографию в документ Figma. Самый простой способ — использовать команду «Поместить», с которой вы знакомы, если использовали продукты Adobe. Для следующих шагов вам понадобится несколько фотографий для вставки. Не стесняйтесь использовать свои собственные, но мы подготовили набор для загрузки, если вы предпочитаете.

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

Нажмите ⌘ Shift ⇧ K (Mac) или Ctrl Shift ⇧ K и выберите фотографию для загрузки.

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

5. Добавьте другие фотографии и расположите их

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

Поэтому вы также можете сделать это вручную (создайте прямоугольник, затем в раскрывающемся меню «Заливка» выберите «Изображение» и следуйте инструкциям). Другие способы добавить изображение включают перетаскивание изображения в окно Figma и копирование + вставка изображения — ⌘ C, затем ⌘ V (Mac) или Ctrl C, затем Ctrl V (ПК). Обратите внимание, что при использовании метода копирования и вставки изображение будет вставлено с фактическим размером в пикселях, поэтому оно, вероятно, будет огромным, и вам придется уменьшить его размер.

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

Кроме того, обратите внимание, что мы можем выбрать несколько фотографий с помощью команды «Поместить изображение». Затем нам нужно дождаться загрузки этих изображений в Figma, прежде чем мы сможем щелкнуть и перетащить их, чтобы разместить их. Вот видео всего процесса вставки, изменения размера и выравнивания изображений. Чтобы упростить разделение рядов фотографий, мы использовали команду «Группировать»: ⌘ G (Mac) или Ctrl G (ПК).

6. Дублируйте кадр

На этот раз вместо того, чтобы создавать новую рамку с нуля, давайте продублируем рамку, над которой мы только что работали. Для этого щелкните имя кадра (либо на холсте, либо в списке слоев). Затем нажмите ⌘ D (Mac) или Ctrl D (ПК), чтобы продублировать кадр и его содержимое.

Удалите все изображения, кроме одного, в новом фрейме. Затем измените размер оставшегося изображения, чтобы оно занимало все 3 столбца сетки. Удерживая нажатой клавишу Shift ⇧, изображение сохранит свою квадратную форму при изменении размера.

7. Создайте подпись и отметку даты

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

8. Создать аватар

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

Выберите текущий кадр и переключитесь на сетку из 6 столбцов, используя настройку сетки макета в Инспекторе. Придерживайтесь отступа 16 пикселей и поля 16 пикселей.
Выберите инструмент "Эллипс" O.
Удерживая нажатой клавишу Shift ⇧ , нажмите и перетащите, чтобы создать круг шириной в один столбец (он должен быть шириной около 44 пикселей).
Нажмите ⌘ Shift ⇧ K (Mac) или Ctrl Shift ⇧ K (ПК), чтобы открыть диалоговое окно «Разместить изображение», и выберите изображение для использования в качестве аватара.
Когда появится перекрестие, нажмите и перетащите изображение, чтобы поместить его поверх только что созданного круга.
Затем нажмите и перетащите изображение и круглую форму, чтобы выделить их. Изображение будет закрывать круг, но это нормально! Просто взгляните на список слоев, чтобы убедиться, что выбраны оба слоя.
Наконец нажмите кнопку «Использовать как маску» в верхней части экрана. Теперь изображение обрезано кругом.

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

9. Приведите в порядок макет

Наконец, переместите слои аватара, подписи и штампа даты и текста так, чтобы они правильно выровнялись по сетке из 6 столбцов, а также чтобы между элементами был одинаковый интервал. Всегда полезно ориентироваться на расстояние от сетки. Мы выбрали интервал в 16 пикселей для сетки, поэтому мы могли стремиться придерживаться, например, кратных 8 пикселей, чтобы все было согласованно. Помните, что вы можете использовать Option (Mac) или Alt (PC), чтобы наводить курсор на другие элементы и проверять расстояние.

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

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

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

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

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

Бесконечная война фрагментации

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

Примечательные единицы измерения

1. Адаптивный веб-сайт, PWA, веб-приложения, платформа с CSS

Обычно разработчики общались с дизайнерами, используя в качестве ориентира пиксели и различные формы процентов (%). Могут быть некоторые разговоры об относительных единицах длины, таких как em или rem в какой-то степени.

2. Android

3. iOS-приложение

TLDR; Придерживайтесь готовых предустановок экрана

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

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

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

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

Вид для рабочего стола/ноутбука (самый большой)
Вид для iPad (или любых портативных устройств с сенсорным экраном)
Мобильный вид (наименьший поддерживаемый телефон или целевые устройства согласно маркетинговым исследованиям и т. д.)

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

Как разработчики будут работать с моим дизайном?

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

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

Различия в измерениях

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

Ищете новый вызов? Присоединяйтесь к нашей команде

Характеристики предварительного просмотра Figma

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

Имея это в виду, как вы можете быть уверены, что кнопка высотой 40 пикселей в Figma Mirror показывает ее фактический размер в пикселях, как в реальном приложении/телефоне? Либо вы:

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

Значит, моя кнопка выглядит так, как она выглядит на экране, верно?

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

Например, разрешение iPhone задается в формате множителя (1x, 2x, 3x), поэтому важно, чтобы соотношение сторон экрана устанавливалось в соответствии с вашими устройствами просмотра, чтобы соответствовать экрану, который вы делаете. Предустановка рамки iPhone Max в Figma составляет 414 x 896 пикселей, в то время как на самом деле она отображается с разрешением 2688 x 1242 пикселей. Так что разделите его с помощью калькулятора, и он будет считываться в 3 раза, поэтому имейте в виду, что все, что вы делаете в Figma, будет увеличено в 3 раза по сравнению с его реальными пикселями.

Помните, что не рекомендуется создавать дизайны с фактическим разрешением, потому что разработчик должен вводить 1-кратные числа при реализации дизайна, и вы дадите им 3-кратный размер, если вручную масштабируете предустановку фрейма Figma по умолчанию до отражают фактическое разрешение iPhone 11 Pro Max (2688 x 1242 пикселей).

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

Управляйте размером отступа вокруг кнопки и позволяйте фактической ширине кнопки bg (или области касания) растягиваться вместе с контейнером или
Управляйте шириной кнопки и настраивайте отступы в соответствии с целевым экраном.

Они должны будут ввести числа 1x, а инструменты разработчика будут масштабировать фактические пиксели для них. (3x на iPhone серии Max и т. д.)
","contentType":"application/vnd.trix.horizontal-rule.html">' data-trix-content-type="application/vnd.trix. horizontal-rule.html" > Несколько размеров должны нести одно и то же сообщение повсюду

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

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

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

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

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

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

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

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

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

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

Система дизайна в Figma

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

Основной макет и методы

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

Ограничения и адаптивный макет

Адаптируйте свой дизайн к любому экрану

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

Правила типографики, цветов и градиентов в Figma

Компоненты и вложение

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

Булевы значения и фигуры

Совместная работа с вашей командой с помощью общих компонентов

Значки и векторная сеть

Создавайте собственные векторные иллюстрации с нуля в Figma

Экспорт, проверка и кодирование в Figma

Сообщение о дизайн-системе разработчикам

Мультиплеер и комментарии в Figma

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

Прототипирование и взаимодействие

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

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

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

Я проектирую, кодирую и пишу

Мэн То — автор книги "Дизайн+код". Мэн начал свою карьеру в качестве дизайнера-самоучки из Монреаля и, в конце концов, путешествовал по миру в течение 2 лет, поскольку ему было отказано в американской визе. Во время своих путешествий он написал книгу, которую сейчас читают 35 000 человек.

30 курсов - 143 часа

Создание приложения SwiftUI для iOS 15, часть 3

Создайте и закодируйте приложение SwiftUI 3 с пользовательскими макетами, анимацией и жестами, используя Xcode 13, SF Symbols 3, Canvas, Concurrency, Searchable и многое другое

Создание приложения SwiftUI для iOS 15, часть 2

Создайте приложение SwiftUI для iOS 15

Узнайте, как мы можем использовать React Hooks для создания веб-приложений с использованием библиотек, инструментов, API и фреймворков

Прямые трансляции с основателями дизайна

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

Расширенное руководство по SwiftUI

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

Руководство по дизайну iOS

Полное руководство по дизайну для iOS 14 с видео, примерами и файлами дизайна

Подробная серия руководств по Xcode, SwiftUI и всем методам компоновки и разработки

Создайте веб-приложение с помощью React Hooks

Узнайте, как мы создали новый сайт Design+Code с помощью React Hooks, используя Gatsby, Netlify и передовые методы CSS с помощью Styled Components.

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

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

Полное руководство по лучшим советам и рекомендациям по Figma

SwiftUI для iOS 14

Создайте многоплатформенное приложение с нуля, используя новые методы iOS 14. Мы будем использовать боковую панель и отложенные сетки, чтобы сделать макет адаптивным для iOS, iPadOS, macOS Big Sur, и мы изучим новую согласованную геометрию. Эффект для создания красивых переходов между экранами без сложности. Этот курс подходит для начинающих и преподается шаг за шагом в формате видео.

Это подборка прямых трансляций SwiftUI, организованных Мэн. Там он рассказывает и учит, как использовать системы дизайна, типографику, навигацию, дизайн iOS 14, прототипирование, анимацию и передачу разработчика.

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

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

Дизайн пользовательского интерфейса для разработчиков

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

Создание приложения с помощью SwiftUI, часть 3

Этот курс предназначен для дизайнеров и разработчиков, увлеченных дизайном и созданием реальных приложений для iOS, iPadOS, macOS, tvOS и watchOS. SwiftUI работает на всех этих платформах. Хотя код не является универсальным, используемые элементы управления и методы могут применяться на всех платформах. Он удобен для начинающих, но в нем также есть дизайнерские приемы и классные рабочие процессы для создания лучших интерфейсов и взаимодействий.

Создание приложения с помощью SwiftUI, часть 2

Создать полноценный сайт в Webflow

Webflow – это инструмент проектирования, с помощью которого можно создавать готовые к использованию приложения без написания кода. Вы можете реализовать адаптивные макеты на основе CSS, создавать сложные взаимодействия и развертывать все в одном инструменте. Webflow также поставляется со встроенной системой управления контентом (CMS) и электронной коммерцией для создания опыта покупки без использования сторонних инструментов.

Расширенное прототипирование в ProtoPie

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

Создание приложения с помощью SwiftUI, часть 1

Этот курс предназначен для дизайнеров и разработчиков, увлеченных дизайном и созданием реальных приложений для iOS, iPadOS, macOS, tvOS и watchOS. SwiftUI работает на всех этих платформах. Хотя код не является универсальным, используемые элементы управления и методы могут применяться на всех платформах.Он удобен для начинающих, но в нем также есть дизайнерские приемы и классные рабочие процессы для создания лучших интерфейсов и взаимодействий.

Взаимодействие с пользовательским интерфейсом в Framer Playground

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

React Native для дизайнеров, часть 2

React Native – это популярная платформа Javascript, которая строится на основе React с использованием собственных компонентов для создания реального мобильного приложения, неотличимого от приложения, созданного с помощью Xcode или Android Studio. Основное отличие от нативной разработки заключается в том, что вы можете использовать CSS, горячую перезагрузку, Javascript и другие знакомые методы, которые Интернет развил за последние десятилетия. Самое главное, вы разрабатываете для iOS и Android, используя один и тот же код.

React Native для дизайнеров

Дизайн и код во Framer X

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

Система дизайна в Figma

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

React для дизайнеров

Узнайте, как создать современный сайт с помощью React и наиболее эффективных библиотек, чтобы разместить свой сайт/продукт в Интернете. Ознакомьтесь с Grid CSS, анимацией, взаимодействиями, динамическими данными с помощью Contentful и разверните свой сайт с помощью Netlify.

Изучите Swift — надежный и интуитивно понятный язык программирования, созданный Apple для создания приложений для iOS, Mac, Apple TV и Apple Watch

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

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

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

1. Откройте файл Figma и создайте рамку для экрана вашего приложения.

Во-первых, откройте тот же файл Figma, над которым вы работали вчера. (Он должен отображаться на вкладке «Недавние» на главном экране Figma.)

2. Добавьте сетку столбцов

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

В Figma очень просто добавить сетку столбцов. Выбрав рамку, просто щелкните значок «+» в Инспекторе под надписью «Сетка макета».

Количество: 3 (это создает 3 столбца)
Отступ: 16 (это добавляет 16 пикселей пространства между каждым столбцом)
Поле: 16 (это добавляет 16 пикселей пространства по краям фрейма).

3. Добавьте название своего приложения

4. Переместите словесный знак

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

5. Создайте поле имени пользователя

Мы можем легко создать изящные поля для входа, просто используя прямоугольники и текст. Сначала выберите инструмент «Прямоугольник» R и щелкните и перетащите, чтобы создать прямоугольник шириной около 250 пикселей и высотой около 30 пикселей. Обратите внимание, как Figma отображает размер фигуры в цифрах, когда вы ее рисуете?

Затем нажмите T, чтобы вернуться к инструменту "Текст". Щелкните в любом месте рамки и введите «Имя пользователя». Размер шрифта, вероятно, все еще будет установлен на размер, который вы только что использовали для словесного знака, поэтому после того, как вы напечатали текст, выберите слой «Текст» и измените размер текста на 16 пикселей. Измените цвет шрифта на белый и снова измените непрозрачность — на этот раз давайте возьмем 70%. Перетащите текстовую метку на прямоугольник. Вуаля! Поле формы.

В качестве последнего шага убедитесь, что текст «Имя пользователя» правильно расположен относительно прямоугольника. Вы можете сделать это, щелкнув один раз текстовый слой, а затем «подтолкнув» его на 1 пиксель за раз с помощью клавиш со стрелками. Если удерживать нажатой клавишу Shift ⇧ при использовании клавиш со стрелками, выделение будет перемещаться с шагом в 10 пикселей.

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

В Figma очень легко дублировать элементы. Выбрав инструмент «Перемещение» V , просто перетащите выделение (прямоугольное выделение) вокруг прямоугольника и только что созданного текста. Вы можете использовать копирование и вставку старой школы ( ⌘ C, затем ⌘ V на Mac или Ctrl C, а затем Ctrl V на ПК).

Кроме того, вы можете удерживать нажатой клавишу Option (Mac) или Alt (ПК), а затем щелкнуть и перетащить выделенное, чтобы создать дубликат.

Разместите повторяющиеся объекты так, чтобы они располагались прямо под полем имени пользователя. Затем просто дважды щелкните текст «Имя пользователя» и измените его на «Пароль».

7. Дублируйте кнопку, которую вы сделали вчера.

Еще один способ дублировать элементы — выделить их и нажать ⌘ D (Mac) или Ctrl D (ПК). Попробуйте это с кнопкой, которую вы создали вчера. Дубликат будет размещен непосредственно поверх оригинала, поэтому, как только вы создали копию, просто перетащите ее на другой кадр. Это показывает, как легко перемещать элементы между фреймами в Figma — это просто перетаскивание.

8. Сделайте более интересный фон

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

После того, как мы создали прямоугольник, первое, что нужно сделать, — это поместить эту огромную новую форму за другими элементами во фрейме. Не снимая выделения с прямоугольника, нажмите ⌘ Option [ (Mac) или Ctrl Shift ⇧ [ (PC), чтобы отправить фигуру на задний план.

9. Заблокируйте фоновый слой

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

Вы также можете блокировать и разблокировать слои с помощью сочетания клавиш ⌘ Shift ⇧ L (Mac) или Ctrl Shift ⇧ L (ПК). Или, действительно, щелкните правой кнопкой мыши (Mac+PC) или Ctrl + щелкните (Mac) и выберите параметр блокировки/разблокировки в появившемся меню.

10. Выравнивание и уточнение макета

Последнее, что нужно сделать сегодня, — это убедиться, что все правильно выровнено. Вот что нужно проверить:

Правильно ли расположен текст «Имя пользователя» и «Пароль» относительно прямоугольников за текстом?
Прекрасно ли совпадают эти прямоугольники со столбцами сетки?
Все ли элементы экрана расположены по центру?

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

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

Вы можете получить доступ к этой команде через меню (Файл > Сохранить в журнал версий) или нажав ⌘ Option S (Mac) или Ctrl Alt S (ПК).

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

День 2 завершен. Завтра мы создадим логотип и несколько значков с помощью инструмента "Перо". Тогда увидимся!

Читайте также: