Старт в Figma для верстальщика — журнал «Доктайп»

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

Регистрация и добавление нового макета

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

Форма регистрации

Затем вы попадёте в менеджер проектов, где увидите образцы макетов. Их можно использовать для ознакомления с инструментами приложения. Здесь же можно добавить свой проект, нажав на соответствующую иконку Import file. Макет проекта должен иметь расширение .fig или .sketch. При импорте из Sketch нужно не забыть дополнительно загрузить нестандартные шрифты, если они используются в проекте.

После добавления макет появится в общем списке, и можно будет приступить к работе с ним.

Импорт нового макета

Структура макета и рабочие инструменты

Интерфейс в разделе работы с макетом состоит из нескольких блоков.

1. В боковой панели слева показана вся структура проекта. Можно проследить вложенность элементов и найти нужный. Каждый тип элемента обозначен отдельной иконкой — текст, изображение, составной блок.
2. Основная рабочая область в центре — для непосредственного взаимодействия с макетом.
3. В верхней части страницы расположено основное меню. Большая часть инструментов в нём предназначены для дизайна, но вам точно пригодится меню масштабирования, расположенное справа.
4. Боковая панель справа включает в себя три вкладки, но нам будут нужны только две из них — Design и Code. В этих вкладках находится вся доступная информация об элементе.

Интерфейс страницы работы с проектом

Работа с параметрами элементов

Основная задача верстальщика при работе с макетом — получить параметры элементов. Давайте разберём по пунктам, как это сделать в Figma.

Текст

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

Работа с текстовыми элементами

Изображение

Свойства width и height во вкладке Code расскажут о размере изображения.

Работа с изображениями

Также можно скачать любое изображение из макета. Для этого нужно кликнуть по вкладке Design и там найти последний пункт Export. Далее в выпадающем меню выбрать формат, в котором вы хотите экспортировать изображение — PNG, JPG, SVG или PDF. Подробно о форматах изображений можно почитать в этой статье.

Экспорт изображений

Цвет элемента

Во вкладке Code можно узнать фоновый цвет элемента — значение background.

Определение фонового цвета блока

Размеры элементов и расстояние между ними

Размер можно определить несколькими способами. Например, во вкладке Code посмотреть значения свойств width и height. Или просто выделить нужный блок — размер отобразится внизу элемента. Также можно узнать расстояние между любым элементом и соседними с ним. Для этого нужно выделить его, а затем наводить курсор на остальные элементы — будет появляться направляющая и значение.

Определение размеров элементов и расстояния между ними

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

Выберите следующий шаг:

• Дизайн для верстальщиков
• Вёрстка для дизайнеров

Верстка сайта из Figma на HTML/CSS (5 уроков) — Frontend Blok

И да пребудет с тобой сила!

Главная
Курсы
Супер Старт

За 5 уроков сверстаем сайт из Figma, используя HTML и CSS

Записаться

hasOwnProperty(‘start_date’) && course.start_date»>

Дата старта

{{ course.start_date }}

Длительность

5 дней

Стоимость

от {{ course.start_price }} РУБ

Что будет на курсе?

Выдаем
макет для верстки

Мы предоставим макет Figma на тему пространства для работы в коворкингах.

Много-много
практикуемся

Параллельно с практикой, разбираем теорию. Верстаем сайт от и до и дарим полезные PDF.

Пополняем
ваше портфолио

Всё, что вы сверстаете в рамках курса, пойдет в ваше портфолио.

Расписание

День 1

Разбор макета в графическом редакторе Figma

День 2

Верстка шапки сайта и первого блока

День 3

Верстка центральных блоков сайта

День 4

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

День 5

Работаем над адаптивностью сайта

Как проходит обучение?

Получаете доступ на учебную платформу Frontend Blok

Каждый день в 6 утра по мск открывается доступ к новому
уроку

Просматриваете урок длительностью 30 минут,
где есть теория и практика

Выполняете домашнее задание для закрепления пройденного
материала

Отправляете ДЗ куратору и выполняете его рекомендации

Получаете сертификат об окончании обучения: на русском и английском

Как можно зарабатывать на верстке сайтов, используя HTML/CSS?

Публиковать шаблоны
на продажу

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

Сотрудничать
с веб-дизайнером

Заказчик, который обращается к веб-дизайнеру за макетом, вполне вероятно, нуждается в том, чтобы этот макет после сверстали. Такое сотрудничество создаст отличный тандем.

Искать заказчиков
на фрилансе

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

Общая информация по курсу

Формат уроков

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

Длительность уроков

В среднем уроки длятся 30-50 минут, но первый урок самый короткий — 11 минут. Также мы предоставляем домашки на самостоятельное выполнение, но следующих уроках есть видео-разборы, чтобы вы могли соотнести свои результаты с итогом. Они идут примерно 20 минут.

Домашние задания

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

Время открытия уроков

Уроки открываются каждый день в 06:00 по мск в течении 5-ти дней. Они доступны месяц, но на учебной платформе можно приобрести опцию «Вечный Доступ» по символической цене.

Что верстаем?

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

Учебный макет в Figma.

На курсе мы сверстаем сайт с использованием HTML и CSS. Использовать будем только актуальные технологии: Flexbox и Grid. Макет представлен в Figma — именно этот редактор часто используют веб-дизайнеры для предоставления макетов.

Сколько стоит

Тариф «Самостоятельный»

Доступ к видео и материалам курса

Свёрстанный сайт для вашего портфолио

В подарок: PDF c моими комментариями на популярный Frontend Roadmap

Тариф «Индивидуальный»

Доступ к видео и материалам курса

Свёрстанный сайт для вашего портфолио

В подарок: PDF c моими комментариями на популярный Frontend Roadmap

В подарок: PDF о том, как оформить свой профиль Linkedin так, чтобы работодатели сами писали вам

Проверка вашей работы от Анны Блок

Консультация с Анной Блок через созвон или чат

Отзывы о курсе Супер Старт

Дмитрий Белов

20 ноября 2022

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

Евгений Ярко

22 июня 2020

Спасибо за курс. По объему знаний даже более полно чем необходимый минимум. Хочу также отметить что автор позаботилась о хорошей «среде» — редактор, плагин, работа со шрифтами и пр. Супер курс.

Павел Демьянов

10 мая 2020

Все отлично, вижу путь для дальнейшего своего роста. Главное ваш курс помог увидеть картину…

Читать полностью

Богдан Рудаков

6 апреля 2020

Получил информации за один курс больше, чем у более крупных онлайн-площадок. Спасибо.

Эдгар Чамян

18 апреля 2021

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

Юрий Коробейников

14 сентября 2020

Спасибо за этот курс. Понравился предложенный метод размещения по GRID. Не понятна адаптация. А так, в целом, не плохой курс. РЕКОМЕНДУЮ!!!!!

Сергей Яковлев

20 июля 2020

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

Anastasia Tsepeleva

3 апреля 2020

Спасибо большое за курс! Материал преподносится чётко, постепенно и закономерно. На появляющиеся вопросы…

Читать полностью

Предыдущий

Следующий

Часто задаваемые вопросы

Сколько по времени длятся уроки?

Развернуть

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

Должен ли я знать что-то заранее?

Развернуть

Нет, это не обязательно, но учитывайте, что здесь только практика и из теории разбираем только то, что встретится нам во время верстки макета. Это интенсив, где вы сверстаете с нуля усложненный дизайн сайта. Если для вас это первый проект, то рекомендуем после его прохождения взять «Базовый курс по вёрстке», чтобы более углебленно понять теорию и сверстать еще 2 проекта в рамках обучения. Если вы хотите прокачаться в вёрстке дальше, то рассмотрите «Продвинутый курс по вёрстке», как возможность узнать о новых технологиях.

Нужно ли мне заранее установить какие-нибудь программы?

Развернуть

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

Могу ли я посмотреть уроки в другой день?

Развернуть

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

Получу ли я сертификат в конце обучения?

Развернуть

Да, мы выдаём сертификаты. Это происходит после того, как вы просмотрите и выполните задания всех уроков.

Закрыть

Павел Демьянов

10 мая 2020

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

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

Закрыть

Anastasia Tsepeleva

3 апреля 2020

Спасибо большое за курс! Материал преподносится чётко, постепенно и закономерно. На появляющиеся вопросы сразу же получала ответ в видео-уроках. Обучаться было одно удовольствие. Ни грамма скуки, одна мотивация 🙂

Дизайн и разработка веб-сайта с использованием Figma и CSS

Просмотр

Chevron Right

Информатика

Chevron Right

Разработка программного обеспечения

Заполненная звезда Заполненная звезда Заполненная звезда Заполненная звезда Half Faded Star

4.6

звезд

91 оценка

Предложено

5,501 уже зарегистрирован

В этом управляемом проекте вы:

познакомитесь с основными инструментами и функциями Figma

спроектируете и создадите прототип своего веб-сайта

Разработка прототипа в полноценный веб-сайт

2 часа

Средний уровень

Загрузка не требуется 2-часовой курс, основанный на проектах, вы узнаете как использовать основные инструменты и функции Figma, разработать прототип веб-сайта и преобразовать его в веб-сайт в точном соответствии с дизайном, используя HTML и CSS.
Примечание. Этот курс лучше всего подходит для учащихся, проживающих в регионе Северной Америки. В настоящее время мы работаем над тем, чтобы предоставить такой же опыт в других регионах.

Навыки, которые вы разовьете

• Графический дизайн

• Веб-дизайн

• Векторная графика

• Интернет Разработка

• Создание прототипа

В видео, которое воспроизводится на разделенном экране

1. Введение в Figma

2. Разработка базового макета веб-сайта

3. Создание собственных векторов

4. Завершение дизайна экрана

5. Создание базовой страницы HTML

6. Стилизация веб-сайта

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

Преподаватель пошагово направляет вас в режиме разделенного экрана.Наполовину заполненная звезда 3

ЛУЧШИЕ ОТЗЫВЫ ОТ ДИЗАЙНА И РАЗРАБОТКИ ВЕБ-САЙТА С ИСПОЛЬЗОВАНИЕМ FIGMA И CSS

Filled StarFilled StarFilled StarFilled StarStar

by KD

10 сентября 2022 г.

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

Filled StarFilled StarFilled StarFilled StarFilled Star

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

Filled StarFilled StarFilled StarFilled StarFilled Star

от RC

8 марта 2023 г.

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

Заполнено StarFilled StarFilled StarFilled StarFilled Star

от AI

3 февраля 2021 г.

Материал проекта недоступен на Rhyme, но платформа Coursera отображается как завершенная.

Просмотреть все отзывы

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

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

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

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

Финансовая помощь не предоставляется для управляемых проектов.

Аудит недоступен для управляемых проектов.

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

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

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

Еще вопросы? Посетите Справочный центр для учащихся.

Как превратить любой веб-сайт в дизайн Figma

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

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

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

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

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

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

Откройте файл дизайна New , чтобы начать проект HTML to Figma.

Шаг 1. Загрузите подключаемый модуль html.to.design

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

Чтобы загрузить плагин, выберите меню Figma (логотип Figma) > Плагины > Найдите другие плагины . Кроме того, вы можете выбрать Ресурсы > Плагины . В любом из вариантов введите в строке поиска html.to.design .

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

Шаг 2. Вставьте URL-адрес веб-сайта

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

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

Скопируйте полный URL-адрес и вставьте его в поле импорта на Figma, заменив местозаполнитель веб-сайта Apple.

Шаг 3. Загрузите дизайн

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

Существуют также настраиваемые параметры для устройств или размеров, которые недоступны в качестве параметров по умолчанию. Мы выбираем MacBook Pro 14 дюймов с темой Light .

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

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

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

Шаг 4: отредактируйте свой дизайн Figma

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

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

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

Как преобразовать частную веб-страницу

Большая часть процесса создания частного веб-сайта (для доступа к которому требуется учетная запись) и общедоступной веб-страницы одинакова. Однако вместо вставки URL-адреса вы должны использовать расширение Chrome, которое создает файл.

Для начала откройте Figma и плагин html.to.figma так же, как и раньше.

Шаг 1. Загрузите и запустите расширение Chrome

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

Выберите Добавить в Chrome > Добавить расширение , чтобы добавить расширение в браузер.

После добавления расширения перейдите на частный веб-сайт или страницу, дизайн которой вы хотите воспроизвести (мы используем страницу Instagram), и выберите расширение. Свернутые расширения находятся под значком кусочка головоломки в вашем браузере.

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

Шаг 2: перетащите сгенерированный файл в плагин Figma

Перейдите в приложение Figma или на сайт Figma в браузере и перетащите загруженный файл .h3d в поле. Файл будет загружаться и генерироваться так же, как и общедоступный веб-сайт.

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

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

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