Как сверстать сайт из figma: Figma — простое решение для дизайнера, сложное решение для верстальщика / Хабр

Содержание

Старт в Figma для верстальщика — Блог HTML Academy

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

Скидка 10% на оплату следующего курса

2490 руб

Купить курс

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

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

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

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

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

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

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

Скидка 20% при оплате последующего обучения

8990 руб

Купить курс

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

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

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 к Webflow: как превратить ваши проекты в живой веб-сайт | Автор: Солиудин Огунсола

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

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

Во-первых, что такое Webflow?

Webflow — это инструмент визуального веб-дизайна, основанный на веб-стандартах и ​​лучших практиках. Designer преобразует ваши проектные решения в чистый, готовый к работе код. Он создан для того, чтобы дизайнеры могли разрабатывать веб-сайты знакомым образом, т. е. визуально, без ущерба для качества.

The Designer

Инструмент адаптивного веб-дизайна, CMS и платформа для хостинга | Webflow

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

Откройте для себя…

webflow.com

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

Но чтобы испытать всю мощь Webflow, вы можете объединить Designer с CMS и их хостингом, что позволит вам публиковать на бесплатном субдомене webflow.io во время разработки.

Руководство для начинающих по Webflow | Блог Webflow

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

webflow.com

На что следует обратить внимание

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

  • Сетка макета
  • Компонент
  • Цвет
  • Слой
  • Типографика

Сетка макета: Рекомендуется использовать стандартную сетку из 12 столбцов, где Webflow также является сеткой для Интернета на Figma. каждый контейнер 9Ширина 40 пикселей, так как это стандартная ширина.

Компонент: Сохраните некоторые части вашего дизайна, такие как верхний колонтитул/панель навигации и нижний колонтитул, сделанные в Figma, как компоненты, которые работают так же, как символ в Webflow, где вы создаете его один раз и повторно используете на любых страницах.

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

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

Типография: для шрифтов, поскольку Webflow также использует шрифты Google, такие как Figma. Вы можете повторно использовать свои шрифты на своем сайте.

Демонстрация

Я разработал копию целевой страницы hotels. ng в Figma, которую я сделал в Webflow для использования в качестве демонстрации. Одна из причин, по которой я выбрал целевую страницу hotels.ng, заключалась в том, чтобы проверить свои дизайнерские навыки, но я думаю, что сделал что-то близкое к ней, и я открыт для обратной связи.

Реплика hotels.ng, разработанная в Figma

Вы можете просмотреть мой полный дизайн hotels.ng здесь

Сделано в Webflow

Ссылка: https://hotels-demo.webflow.io/

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

Для полного практического занятия по преобразованию ваших проектов из Figma в Webflow я рекомендую пройти серию Чарли Мари на ее канале YouTube:

Время воплотить свои идеи в жизнь с помощью Webflow 👨‍💻

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

Если вы нашли эту статью полезной и познавательной, вы можете поддержать меня, используя эту ссылку на «Купи мне пиццу»

Вы также можете прочитать мою предыдущую статью:

Импорт файла Photoshop .psd в Figma: простой способ

Вы когда-нибудь задумывались, как преобразовать свой дизайн Photoshop для использования в современном инструменте дизайна; Фигма!

medium.com

Быть частью африканского сообщества Figma;

Присоединяйтесь к Figma Africa slack, чтобы получать больше обновлений дизайна

От прототипа веб-сайта до полнофункционального веб-сайта с использованием Figma и teleportHQ

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

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

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

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

Шаг 1: Экспорт каркаса прототипа из Figma в TeleportHQ

Перенести дизайн из Figma в TeleportHQ очень просто. Весь процесс выполняется с помощью нашего плагина Design to Code для Figma. Вот пошаговое описание того, как экспортировать прототип Figma в TeleportHQ:

Как это работает

  1. Установите плагин TeleportHQ для Figma, если вы еще этого не сделали
    Запустите плагин экспорта Figma следующим образом: Щелкните правой кнопкой мыши > Плагины > Дизайн TeleportHQ для кода.
  2. Выберите один или несколько кадров, которые вы хотите экспортировать из своего проекта Figma.
  3. Нажмите кнопку «Экспорт в TeleportHQ» , чтобы преобразовать дизайн Figma в код и автоматически создать результат в TeleportHQ. Если у вас уже есть проект в TeleportHQ, вы можете нажать на кнопку «Копировать слои в буфер обмена» и вставить туда свой код. Вы можете выполнять это действие столько раз, сколько вам нужно, даже после того, как ваш сайт будет опубликован.

Шаг 2: Отредактируйте прототип в платформе TeleportHQ

Отредактируйте прототип в TeleportHQ

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

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

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

Экспорт и публикация — Находясь в редакторе, вы всегда можете просмотреть сгенерированный код. Формат кода можно изменить в зависимости от предпочтительного варианта Javascript, например React, Vue, Angular, Stencil, UIDL и других. Есть также несколько способов структурировать ваш CSS, выбор за вами.

Теперь, когда ваш бывший проект Figma завершен и закодирован, пришло время экспортировать. Здесь у вас также есть несколько вариантов, например экспорт кода в другую среду разработки (React, Gatsby, Vue, Angular и т.