Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Графические редакторы Основы современной вёрстки

Изучение вёрстки — это не только познание способов стилизации элементов, но и вёрстка макетов. Чтобы начать верстать макеты, их нужно как-то увидеть и понять, как с ними работать.

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

  1. Adobe Photoshop. Самый старый редактор, который был стандартом много лет. Сейчас же отступает на второй план ввиду своей сложности в освоении. Перегрузка различными функциями также не красит его — многие функции просто не нужны для верстальщика, но память устройства они благополучно съедают. Редактор доступен на системах под управлением Microsoft Windows и macOS. Официальной версии под системы Linux сейчас нет.
  2. Gimp. Аналог Photoshop для систем Linux. Имеет схожий функционал и может корректно открывать некоторые файлы в формате Photoshop. Но не стоит надеяться, что он может стать полноценной заменой. Если дизайнер присылает исходники в Photoshop, то нет полной уверенности в корректном открытии файла через Gimp. Так же, как Photoshop, Gimp не является специализированным инструментом для веб-дизайнеров, поэтому многие функции не нужны.
  3. Sketch. Специализированный редактор для проектирования мобильных и веб интерфейсов. Это является большим плюсом, так как разработчики ориентируются именно на удобное проектирование интерфейсов. Для верстальщиков здесь множество плюсов: удобный просмотр макета, размеров, отступов и другой информации, которая поможет при переносе макета. Главным минусом редактора является поддержка одной операционной системы — macOS. Разработчики ориентированы на работу только с этой системой, и переноса редактора на другие ОС не ожидается.
  4. Figma. Редактор, который работает в браузере. Просмотр макетов в нём доступен с любого устройства, которое имеет браузер и выход в интернет. Если ваша кофемолка умеет это, то можно верстать и с её помощью. Редактор, как и Sketch, ориентирован на создание интерфейсов, что положительно сказывается на удобстве работы с ним. Именно этот редактор используется для проектов и некоторых испытаний, где вам даётся макет для вёрстки. Также является бесплатным для личного пользования.

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

В этом уроке мы рассмотрим базовые действия при работе с редактором Figma

Установка

Как и было сказано выше, Figma не требует установки. Её работа осуществляется через браузер. Достаточно перейти на сайт figma.com и зарегистрироваться.

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

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

Работа с макетом

В этом разделе посмотрим на основные действия при работе верстальщика с редактором. В качестве примера будет использован шаблон испытания Hero Section курса CSS: Flex.

  1. Зарегистрируйтесь в сервисе Figma. Это позволит вам удобно просматривать элементы макета.
  2. Откройте макет испытания Hero Section

Окно работы с Figma

Окно работы с Figma можно разбить на 4 функциональные области:

Шапка

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

Шапка Figma

Слои

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

Шапка Figma

Слои можно объединять в различные группы. Так удобно разделять слои различных частей макета. В макете Hero Section есть следующие группы:

  • Left Side
  • Right Side

Инспектор

Самая полезная секция для верстальщика. Инспектор позволяет увидеть все настройки выбранного элемента в секции «Слои».

Инспектор Figma

Сейчас выбран текст «Фронтенд программист». Какие параметры можно получить об этом элементе:

  • Properties
    • Ширина текста: 580px
    • Высота: 141px. Обратите внимание, что это значение именно текста, а не блока, в котором он лежит.
    • Значения top и left. Это значения относительно левого верхнего края макета. Чаще всего эти значения бесполезны, но бывают ситуации, когда есть смысл присмотреться к этим значениям.
  • Content
    • Здесь находится тот контент, который расположен внутри слоя. Этот пункт актуален для текста. Если кликнуть по контенту, то он автоматически копируется.
  • Typography
    • Font: название шрифта. Определяется свойством font-family
    • Weight: насыщенность шрифта. Определяется свойством font-weight
    • Style: стиль шрифта. Определяется свойством font-style
    • Size: размер шрифта. Определяется свойством font-size
    • Line height: межстрочный интервал. Определяется свойством line-height
  • Colors
    • Здесь можно увидеть цвет элемента. При клике можно скопировать значение цвета.
  • CSS
    • Здесь находится автоматически сгенерированный CSS для выбранного элемента. Не стоит полагаться на эти значения, так как многие свойства используются некорректно. Например, значения позиционирования.

Окно просмотра макета

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

Если выбрать слой «Узнать больше», зажать клавишу Alt или cmd для macOS и навести на соседний элемент, то Figma автоматически подскажет расстояние между элементами.

Инспектор Figma

По этому изображению можно сразу узнать несколько параметров элемента:

  1. Размер элемента «Узнать больше» — 127x40 пикселей.
  2. Расстояние от текста до элемента «Узнать больше» — 16 пикселей.

Самостоятельная работа

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

  1. Параметры шрифта
  2. Цвет шрифта
  3. Расстояние от текста до заголовка «Фронтенд программист»

Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

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

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 120 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

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

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
27 октября 8 месяцев
Иконка программы Python-разработчик
Профессия
Разработка веб-приложений на Django
27 октября 8 месяцев
Иконка программы PHP-разработчик
Профессия
Разработка веб-приложений на Laravel
27 октября 8 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
27 октября 8 месяцев
Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»