Юний Frontend-розробник

СТАРТ У FIGMA ДЛЯ ВЕРСТАЛЬНИКА

Figma – це графічний онлайн-редактор для дизайнерів
інтерфейсів та веб-розробників. Нині це зручна,
безкоштовна альтернатива Photoshop. Велика перевага
платформи – можливість працювати прямо у браузері. При
цьому є десктопна версія. Розкажемо, що треба знати
верстальнику при роботі з макетом у Figma.

27
СТРУКТУРА МАКЕТА ТА РОБОЧІ ІНСТРУМЕНТИ
Інтерфейс розділу роботи з макетом складається з кількох блоків.
У бічній панелі зліва показана вся структура проєкту. Можна простежити вкладеність
елементів та знайти потрібний. Кожен тип елемента позначений окремою іконкою – текст,
зображення, складовий блок.

Основна робоча область у центрі – для безпосередньої взаємодії з макетом.

У верхній частині сторінки розташоване головне меню. Більшість інструментів у ньому

призначені для дизайну, але вам точно знадобиться меню масштабування, розташоване
праворуч.

Бічна панель справа включає три вкладки, але нам будуть потрібні тільки дві з них -
Design і Code. У цих вкладках є вся доступна інформація про елемент.
28
 РОБОТА З ПАРАМЕТРАМИ ЕЛЕМЕНТІВ
Основне завдання верстальника під час роботи з макетом – отримати
параметри елементів. Давайте розберемо по пунктах, як це зробити у Figma.

Текст

Щоб дізнатися всі текстові параметри, потрібно виділити елемент та відкрити

вкладку Code у правій бічній панелі. Там у списку властивостей відобразяться
всі параметри, що використовуються - назва, розмір, насиченість і колір
шрифту, висота рядка та інші.

29
 РОБОТА З ПАРАМЕТРАМИ ЕЛЕМЕНТІВ
Основне завдання верстальника під час роботи з макетом – отримати
параметри елементів. Давайте розберемо по пунктах, як це зробити у Figma.

Зображення

Властивості width і height у вкладці Code розкажуть про розмір зображення.

Також можна завантажити будь-яке зображення з макету. Для цього потрібно

клікнути по вкладці Design і знайти останній пункт Export. Далі у меню, що
випадає, вибрати формат, в якому ви хочете експортувати зображення — PNG,
JPG, SVG або PDF.

30
 РОБОТА З ПАРАМЕТРАМИ ЕЛЕМЕНТІВ
Основне завдання верстальника під час роботи з макетом – отримати
параметри елементів. Давайте розберемо по пунктах, як це зробити у Figma.

Колір елементу

У вкладці Code можна дізнатися фоновий колір елемента значення background.

31
 РОБОТА З ПАРАМЕТРАМИ ЕЛЕМЕНТІВ
Основне завдання верстальника під час роботи з макетом – отримати
параметри елементів. Давайте розберемо по пунктах, як це зробити у Figma.

Розміри елементів та відстань між ними

Розмір можна визначити кількома способами. Наприклад, у вкладці Code

переглянути значення властивостей width і height. Або просто виділити
потрібний блок – розмір відобразиться внизу елемента. Також можна дізнатися
відстань між будь-яким елементом та сусідніми з ним. Для цього потрібно
виділити його, а потім наводити курсор на інші елементи - з'являтиметься
напрямна та значення.

32
 ОСНОВИ CSS
CSS – це мова для оформлення структурованих документів, наприклад HTML-
документів. Синтаксис — це список правил CSS. CSS-правило складається з
селектора та переліку властивостей та їх значень:

селектор {
властивість: значення; Для коментарів у CSS
властивість: значення; використовуються символи
} /* та */.

33
 ОСНОВИ CSS
Селектори

Селектор знаходиться на початку

CSS-правила, до фігурних дужок, і .feature-kitten {
padding-top: 60px;
визначає, до яких HTML-елементів
}
застосовуються властивості та
значення правила.

34
 ОСНОВИ CSS
Селектори

Найпростіші (і найпопулярніші) селектори

- це селектори за тегами та класами.
Селектори за тегами містять ім'я тега без h1 { color: red; }
символів і застосовуються до всіх .info { color: blue;
відповідних тегів. Селектори по класах }
починаються з точки, за якою йде ім'я
класу, і застосовуються до всіх тегів з
відповідним атрибутом class.

35
 ОСНОВИ CSS
Селектори
На сторінці може бути кілька списків, і стилі застосовуються
до всіх списків, навіть до тих, які ви не хотіли міняти. Щоб
уникнути таких ситуацій, краще не використовувати селектори
за тегами або використовувати їх якомога рідше. nav a {…}
Якщо у CSS-правил відрізняються тільки селектори, а .menu ul {…}
властивості і значення однакові, їх можна згрупувати через .post .title {…}
кому.

Також можна комбінувати будь-які типи селекторів через

пропуск. Такі селектори називаються вкладеними чи
контекстними та читаються праворуч наліво. Наприклад:

36
 ОСНОВИ CSS
Властивості та значення
.feature-kitten {
Список властивостей та значень padding-top: 60px;
знаходиться всередині фігурних дужок }
CSS-правила.

Щоразу, коли ми додаємо нову

Властивість визначає, яку властивість або змінюємо її
характеристику зовнішнього вигляду значення, ми змінюємо щось на
хочемо змінити, а значення — саме. сторінці.

37
 ОСНОВИ CSS
Наслідування

Наслідування в CSS - це механізм, за допомогою якого значення

властивостей батьків передаються його елементам-нащадкам.

Стилі, присвоєні одному елементу, успадковуються всіма

нащадками (вкладеними елементами), але у разі, якщо десь явно
не перевизначені.

38
 ОСНОВИ CSS
Складові властивості
У CSS є звичайні властивості, що керують одним параметром відображення, і
є складові властивості, що керують одночасно кількома параметрами.

Наприклад, властивість font. Воно задає відразу шість параметрів: розмір

та назву шрифту, висоту рядка та деякі інші.
font: 16px/26px "Arial", sans-serif;

Якщо значення звичайної властивості не було задано у складовому, то браузер при

«розшифровці» використовує вихідне значення цієї властивості.

39
 ОСНОВИ CSS font-size: 1cm;
font-size: 10mm;
font-size: 38px;
Типи значень: абсолютні та відносні
Абсолютні одиниці виміру прив'язані до справжніх фізичних розмірів та пов'язані
між собою жорсткими пропорціями. Пікселі, px, використовують найчастіше, решта
абсолютних одиниць майже не застосовують. Приклади абсолютних одиниць виміру:

Відносні одиниці виміру описують значення, які залежить від інших значень. Наприклад,
ширина елемента у відсотках залежить від ширини батьківського елемента, а ширина
елемента в em залежить від розміру шрифту елемента. До відносних одиниць відносяться
em, rem, vh, vw та деякі інші, ну і, звичайно ж, відсотки.

40
 ОСНОВИ CSS
Стилі за замовчуванням
Деяким елементам можна не ставити жодних стилів, але вони все одно матиме
якесь оформлення.

Наприклад, у списку <ul> є відступи та маркери. Такі стилі називаються

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

41