Как создать страницу в фигме

Как в Фигме создать лист А4, окно под мобильное устройство и другие форматы

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

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

Чтобы создать фрейм под определенный формат вам потребуется:

1. Создать пустой фрейм
2. Выбрать из списка предустановку

1. Вызвать инструмент Frame
2. Выбрать из списка справа нужный шаблон

Выбор нового шаблона

Предустановки меняют не только пропорции и разрешение фрейма, но и устанавливают вид при просмотре документа.

Просмотр в Figma

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

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

Создание проекта в фигме

Чтобы создать новый проект в Figma, напротив надписи «Drafts» нажмите на плюс. Также можете воспользоваться иконкой плюса сверху (если у вас десктопная версия программы) и сверху-справа, если находитесь во вкладке «Drafts», где представлены все проекты.

Проект с нуля или выбор фреймов

После нажатия на плюс, перед вами появится всплывающее окно. В нём можно выбрать либо «Blank canvas» —пустой холст, либо выбрать заготовки с фреймами для мобильных устройств и для компьютеров (как показано на скриншоте выше).

Я обычно создаю проект с нуля. Если хотите также создать пустой проект, то выберите Blank canvas и нажмите Create File. Если хотите, чтобы в дальнейшем не появлялось это всплывающее окно и всегда создавались пустые проекты, то снизу-слева уберите галочку напротив надписи «Show this next time».

Шаблоны при создании новых проектов

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

For Teams — для команд.
Team building — тимбилдинг.
Brainstorms and sprints — мозговые штурмы и спринты.
Fun activities — развлечения.
Feedback and retros — обратная связь и ретроспективы.

For individuals — для индивидульного использования
Design systems — дизайн системы.
Wireframing — варфрейминг.

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

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

Создаем первый проект в Figma

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

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

Сегодня мы выясним:

• Что такое команда в Figma и зачем она нужна. (п. 1)
• Что такое проект и как его создавать вFigma (п. 1)
• Что такое файл, как его создавать, редактировать и приглашать новых участников команды. (п. 2)
• Что такое страницы и слои вFigmа и зачем они нужны. (п. 3)
• Что такое фреймы, как их создавать для разных типов устройств (п. 3)
• Как настраивать сетки для фреймов (п. 4)

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

1. Создание проекта

Зайдите на сайт figma.com и авторизуйтесь. (Log in)

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

Команда в Figma (Team) – это группа людей, которые одновременно могут работать над общими проектами. Каждому члену команды отводится своя роль и права. В бесплатном тарифе над проектом могут работать 2 члена команды.

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

В появившемся окне задайте имя проекта (First_project) и права доступа.

• Every one of (имя команды или имя пользователя) can edit – все члены команды могут редактировать проект – выберите этот вариант
• Every one of (имя команды или имя пользователя) can view – доступен только просмотр файлов
• Invite-only – доступ возможен по индивидуальным приглашениям.

Проекты в Figma (Project) – это группа файлов, с которыми работают участники команды. Например, проект First_project может содержать файл First_project_RUS с дизайном макетов для русскоговорящей аудитории и First_project_ENG для англоязычной аудитории. В бесплатном аккаунте можно создавать 3 проекта.

2. Создание файла

Создайте новый файл, нажав на кнопку + New File

Появится рабочая область Figma с именем файла по умолчанию Untitled. Переименуйте его в File 1, щелкнув левой клавишей по названию.

Файлы – это набор макетов страниц сайта или мобильного приложения

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

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

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

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

3. Создание фрейма

Включите линейку разметки, чтобы можно было работать с направляющими как в Photoshop – Shift + R

Теперь создадим первый фрейм.

Фрейм (Frame) – это контейнер для хранения объектов (кнопок, изображений, полей ввода), которому можно задать размер выбранного устройства.

В левом верхнем углу на панели инструментов нажмите на кнопку создания фрейма (Frame).

На панели Design справа выберите тип устройства, например, Iphone 8

После этого в рабочей области появится прямоугольник (фрейм) с названием Iphone8 – 1.

На панели Layers (слои) слева так же появится название нашего фрейма.

Здесь вы можете:

• Переименовать фрейм, щелкнув 2 раза левой клавишей мыши,
• Скрыть или показать, нажав на значок с глазом;
• Заблокировать или разблокировать (значок с замочком)
• Вызвать контекстное меню со списком настроек фрейма, речь о которых пойдет в другой раз.

В Figma есть возможность создания страниц (Page), которые напоминают Группы в Photoshop. Они содержат набор фреймов и слоев, которые создает пользователь. По умолчанию существует страница Page1. Можно создать новую страницу, нажав на клавишу + напротив списка Page и создавать уже для нее новый набор фреймов и слоев. Переключаться между страницами легко, выбирая в списке нужное название. При этом будут видны слои, создаваемые на данной странице.

Справа на панели Design, вы увидите список настроек фрейма.

Обратите внимание на включенную галочку Clip Contenet. Она означает, что слои, которые создаются на данном фрейме (кнопки, изображения…) будут обрезаться в случае попадания за границы фрейма.

4. Настройка сетки

На панели Design можно задать сетку для фрейма (Grid).

Нажмите на кнопку + напротив пункта Layout Grid

По умолчанию появится базовая сетка Grid с ячейкой в 10 px.

В проекте можно использовать несколько сеток.

В том же пункте Layout Grid нажмите на +, чтобы добавить новую сетку и измените ее настройки (Layout Grid Settings) следующим образом.

• вид — колонки (Columns)
• количество колонок (Count) – 4,
• цвет (Color) — черный с прозрачностью 10%,
• тип (Type) – растянуты по ширине (Stretch)
• расстояние между колонками (Gutter) — 25 пикселей.

Такой вид сетки очень удобен при создании адаптивного дизайна .

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

Чтобы выключить или включить все сетки на фреймах используйте горячие клавиши Ctrl + G

Продолжайте изучать Figma c блогом «Дизайн в жизни»!

ЧИТАЙТЕ ТАКЖЕ

Рисуем дизайн первой страницы приложения в Figma Начинаем рисовать дизайн приветственной страницы и узнаем еще больше нового о Figma

Со многими тонкостями мы еще столкнемся в процессе работы, но начало уже положено. Пока Figma не кажется мне слишком сложным редактором. Имея опыт работы в Photoshop или Sketch можно провести аналогии со многими операциями в программе.

Подписывайтесь на обновления блога «Дизайн в жизни»

по e-mail или социальных сетях

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

Гид по Фигме
для начинающих веб-дизайнеров

В Фигме можно отрисовать элементы интерфейса, создать интерактивный прототип сайта и приложения, иллюстрации, векторную графику. Многие дизайнеры делают в ней макеты сайтов для Тильды.

Если вы хотите более гибко работать с интерфейсной графикой, можно отрисовать макет в Фигме и перенести в Тильду.

Примеры интерфейсов и прототипов, сделанных в Фигме

• Интерфейс мобильных приложений Figma iOS UI kit. панели управления Tesla Model 3 и элементы её интерфейса.

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

Три причины выбрать Фигму для совместной работы

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

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

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

Начало работы в Фигме

Вы можете бесплатно скачать Фигму на рабочий стол, это поможет избавиться от многочисленных вкладок браузера перед глазами. Зайдите на figma.com/downloads и выберите версию программы для iOS или Windows.

Дополнительно скачайте бесплатную программу Figma Mirror (Android/iOS), чтобы оценить, как ваш дизайн будет выглядеть на телефоне.

Фигма — это инструмент для совместной работы, она сохраняет изменения файла автоматически. Вы можете сохранить изменения немедленно, нажав Save to Version History или посмотреть историю изменений коллег, нажав Show Version History .

Чтобы сохранить файл Фигмы в pdf, используйте Export Frames to PDF . Пригодится для презентаций.

Все новые объекты, созданные в файле, по умолчанию серого цвета. Бывают ситуации, когда вам нужно создать множество объектов с другим цветом. Используйте Set Default Properties : скопируйте цвет нужного объекта один раз и все последующие объекты будут созданы с заданными свойствами.

Окрашивайте объект в нужный цвет пипеткой Pick Color .

Инструменты и возможности Фигмы

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

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

Сетка в Фигме помогает упорядочить все элементы дизайна во фрейме. Чтобы легко адаптировать дизайн от одного устройства к другому, используйте в Фигме 12 колоночную модульную сетку (Bootstrap).

Для настройки сетки нажмите «+» в блоке Layout Grid .

Некоторым дизайнерам удобно добавлять вертикальный ритм, чтобы перемещать объекты по сетке и настраивать расстояние между элементами. Для этого нажмите «+» в блоке Layout Grid ещё раз — появится дополнительная сетка с шагом 10 пикселей.

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

Основные векторные объекты — прямоугольник, линия, треугольник, стрелка, круг, звезда. Вы можете вставлять объекты произвольной формы или зажать клавишу Shift и вставить объект правильной формы. Если нажать Alt — объект растягивается из центра.

Панель свойств объектов находится справа. Рассмотрим основные функции работы с объектами и покажем, как сделать в Фигме иконку «Закладка», используя прямоугольник произвольной формы.

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

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

Вы можете загружать в Фигму SVG-файлы и работать с ними. SVG-файлы можно загрузить с компьютера либо переносить прямо из Adobe Illustrator или Sketch с помощью горячих клавиш Cntrl + C и Cntrl + V.

Обычно файлы такого типа вставляются как фрейм. Перейдите в слои, объедините векторные объекты в группу клавишами Ctrl+G и перетяните их выше фрейма.

В Фигме шесть типов заливки: сплошной цвет (Solid), линейный градиент (Linear), радиальный градиент (Radial), угловой градиент (Angular), радиальный с четырьмя лучами (Diamond), изображение (Image). По умолчанию для объекта выбран режим ровной заливки Solid .

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

По умолчанию вам доступна библиотека шрифтов Google Fonts, если вы хотите загружать свои шрифты в Фигму — скачайте десктопную версию Фигмы или установите Font Installers (Windows/Mac OS), чтобы загружать их в браузер.

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

В Фигме можно перевести шрифт в кривые и создать необычный объект вашего дизайна. Выберите текстовый слой, пункт Flatten и дважды кликнете на текст.

Изменённый шрифт можно сохранить как SVG-файл и вставить в дизайн.

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

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

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

Создайте новый фрейм, назовите его Components и вложите в него родительские компоненты.

Дополнительные возможности

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

Шесть плагинов, на которые стоит обратить внимание дизайнеру:

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

Не загружайте картинки в маленькие формы, если собираетесь их масштабировать — фигма автоматически снижает разрешение картинки.

Горячие клавиши для вызова меню экспорта
Windows: Ctrl + Shift + E
Mac OS: Cmd + Shift + E

Вы можете добавить название к имени файла (Suffix) и настроить его размер, например, сделать файл кратный двум.

Выберите формат сохранения файла: для иконок подойдёт SVG, для изображений — JPEG и PNG, а макеты с векторными объектами, которые нужно масштабировать, лучше сохранить в PDF.

На бесплатном тарифе можно работать над тремя проектами. Вместе с вами вносить правки в файл сможет один человек, если предоставить ему права «редактора». Показать файл можно любому количеству пользователей. На бесплатном тарифе история версий макета хранится 30 дней.

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

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

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

Нельзя установить локальный шрифт без перезапуска . Чтобы применить дополнительный шрифт в Фигме, мало скачать его на компьютер. Придётся прервать работу и перезапустить сервис.

Неточный экспорт файлов . При копировании PNG, JPG и SVG-файлов, Фигма может добавлять к изображению пару пикселей обводки и искажать линейные иллюстрации.

Нет защиты от копирования . На бесплатном тарифе Starter нельзя защитить файл от копирования, недобросовестный заказчик может сохранить его для редактирования через Duplicate to Your Draft и использовать макет.

Нельзя работать без интернета . Фигма похожа на Google Docs: в самолёте или за городом без интернета сохранить изменения в макете не получится. Фигма обновит его, когда вы будете в сети. Нельзя изменять сочетания клавиш.

К заданным горячим клавишам придётся привыкнуть . Или можно скачать плагин Autohotkey и настроить Фигму под себя.

Нет русскоязычной версии . Вы не найдёте Фигму на русском языке, это англоязычный сервис. Если вы до этого работали с любых графическим редактором или прочли нашу инструкцию — проблем не возникнет.