Урок #7 – Работа в команде, тестирование проекта и экспорт
Figma обладает обширным функционалом для работы в команде. За видео мы научимся создавать команды, отправлять ссылки на проект, тестировать проект, а также экспортировать его на ПК.
Видеоурок
В Фигме вы можете создать проект, над которым будет работать целая команда. Для этого на главной странице в кабинете пользователя создайте новую команду. После отправки приглашений в одном проекте в заметите нескольких людей, что смогут менять дизайн и работать над одним проектом сообща.
КАК СОЗДАТЬ ПРОЕКТ В ФИГМЕ
Для создания нового проекта в Figma необходимо перейти в свой аккаунт и нажать на кнопку «Создать новый файл». В открывшемся окне можно выбрать размер и ориентацию холста, а также импортировать готовый макет в программу.
После выбора параметров создания нового проекта, программа автоматически переводит пользователя в редактор Figma, где он может начать работу над своим проектом. Здесь можно добавлять различные элементы: текст, изображения, формы, создавать векторные объекты и многое другое.
Чтобы сохранить проект, необходимо периодически нажимать на кнопку «Сохранить изменения» в верхнем правом углу экрана. Также можно настроить автоматическое сохранение изменений через определенные промежутки времени.
Когда работа над проектом закончена, можно экспортировать его в нужном формате и разместить в интернете или отправить клиенту для ознакомления. Для этого в программе есть соответствующая функция, которую можно найти в меню «Экспорт».
В целом, создание нового проекта в Figma — простой и интуитивно понятный процесс, который не требует особо глубоких знаний в работе с графическими редакторами.
Дизайн реального проекта на фрилансе. Редизайним главную страницу сайта в фигме
Верстка сайта с нуля из Figma для начинающих #1
Уроки Figma (Фигма) – №26: Создание сайта с нуля / Часть 1 из 3
КАК сделать ДИЗАЙН КАРТОЧКИ товара на Wildberries. Урок в Figma
Создаем первый макет в Figma
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 более подробно. Разберем каждый инструмент детально и у вас не останется никаких вопросов.
P.S. Если хотите получить практический урок по созданию дизайна сайта в фигме, то переходите по этой ссылке.
P.P.S. Проект и автор не связан с компанией Figma (Not affiliated with Figma).
Создание дизайна сайта в Figma на реальном примере. Материалы урока
Всем привет, друзья! Сегодня мы создадим дизайн многостраничного сайта в Figma на реальном примере. На данной странице вы можете скачать материалы курса, посмотреть результат и ознакомиться со всеми используемыми инструментами.
Поделиться Отправить Класснуть Запинить
Материалы курса, готовый результат: Скачать
Полезные материалы и ссылки:
- Сайт Figma: Figma Home
- Программа «Pencil» для создания схем и прототипов: Скачать (Win)
- Создание слайдера и посадка на Winter CMS: Страница курса
- Как стать крутым веб-дизайнером: Страница урока
- Что такое диаграмма связей: Диаграмма связей (Wiki)
- Что такое прототипирование: Прототипирование (Wiki)
- Создание Bootstrap-сетки в Figma: Страница урока
- Иконки Font Awesome: Посмотреть и скачать
- SVG Viewer Extension for Windows Explorer: Скачать с GitHub
- Визуальная иерархия в интерфейсах: Изучить статью
- Векторный редактор Inkscape: Ознакомиться и скачать
- Работа с иконками для веб-дизайна: Изучить урок
- Программа пипетка «Instant Eyedropper»: Instant Eyedropper Home
- Стрелка «Назад»: ←
- Стрелка «Вперёд»: →
В архиве материалов курса можно найти прототипы всех страниц сайта, которые мы разработали в этом курсе. Экспорт прототипов лежит в папке «design/wireframes/». Пресет настроек для приложения Pencil, который вы можете импортировать в Pencil на вкладке «My Shapes», можно также найти в архиве курса — «other/WireFrame-Pencil-Collection.zip».
В архиве материалов есть все используемые в дизайне шрифты. Для прохождения курса необходимо установить в систему все шрифты из папки «design/fonts/_src/».
Кроме того, в архиве курса можно найти готовый дизайн «Design (Woodtech) — Ready.fig». Для того, чтобы импортировать файл дизайна в Figma, достаточно открыть главное окно Figma и перетащить в него данный файл. В списке проектов у вас появится новый проект Figma.
Бланк технического задания «other/Техническое задание – Бланк.docx» – это универсальная заготовка технического задания на разработку сайта.
Готовая карта сайта (Mind map):
Для закрепления информации:
Компоненты Figma (Components) — это объекты, которые используются в дизайне многократно. По-сути, компоненты Figma — это объекты для повторного использования, которые могут быть простыми (например, кнопка) или сложными (форма обратной связи, заголовок, footer и т.д.). Ключевой особенностью компонентов Figma является возможность повторного использования блоков, где при редактировании корневого (главного) компонента, меняется структура и наполнение во всех дочерних (копиях) компонентах во всех фреймах документа.
Auto Layout Figma — это инструмент для автоматизации создания дизайна, который позволяет определять отношение объектов друг к другу, а также, поведение и отображение элементов при изменении содержимого.
Стили Figma (Styles) — это многократно используемые коллекции свойств, которые можно применять к любым элементам дизайна. В Figma можно создавать стили для текста, цветов, сеток и эффектов, таких как тени и размытия. Ключевой особенностью стилей Figma является возможность менять свойства стиля в одном месте для всех элементов дизайна, во всех фреймах документа. Данный функционал схож с использованием переменных в программировании.
Inkscape (Инкскейп) — свободно распространяемый векторный графический редактор (Open source), который мы используем в курсе для векторизации растровых иконок.
Настройки экспорта оптимизированного SVG (Inkscape)
Прототип и готовый дизайн главной страницы:
Прототип и готовый дизайн страницы «Наши проекты»:
Прототип и готовый дизайн страницы проекта:
Прототип и готовый дизайн страницы услуг:
Прототип и готовый дизайн страницы «Блог компании»:
Прототип и готовый дизайн универсальной страницы:
Прототип и готовый дизайн страницы «О компании»:
Прототип и готовый дизайн страницы «Наши преимущества»:
Прототип и готовый дизайн страницы «Обратная связь»:
Прототип и готовый дизайн страницы «Наши партнеры»:
Премиум уроки от WebDesign Master
Создание сайта от А до Я. Комплексный курс
Создание современного интернет-магазина от А до Я
Я — фрилансер! Базовый курс для начинающих
Другие уроки по теме «Веб-дизайн»
- Создание Bootstrap-сетки в Figma
- С чего начать работу над дизайном и где брать вдохновение
- Процесс создания дизайна сайта салона красоты. Мастер веб-дизайна #7
- Мастер веб-дизайна #5: Создание дизайна сайта пиццерии
- Как стать крутым веб-дизайнером? Все по полочкам: UI/UX, Wireframing, правила хорошего тона, организация работы, верстка, самообучение