Верстка з Figma на WordPress: що входить у роботу і хто це зробить

Верстка з Figma на WordPress буває різного обсягу: від одного лендингу в Elementor чи редакторі блоків до сайту на 3-10 сторінок. Тема, написана вручну, з динамічним вмістом, як-от оголошення чи магазин, потребує найбільше роботи.

Дизайн затверджено й оплачено. А потім приходить готовий сайт: на телефоні все тісно, шрифти інші, а заголовки не змінити, не написавши розробнику.

Тут я розбираю, що входить у кожен рівень верстки, як підготувати файл Figma і як перевірити, що сайт відповідає дизайну, перш ніж прийняти роботу.

Верстка з Figma на WordPress: рівні роботи

За обсягом роботи верстку зазвичай поділяють так:

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

Що входить у кожен рівень

Один лендинг

Одну сторінку відтворюють за вашими фреймами з Figma, зазвичай в Elementor, і налаштовують для телефонів. Це підходить для запуску продукту або рекламної кампанії. Заздалегідь уточніть, чи входять у роботу форма, шрифти й анімації.

Невеликий сайт

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

Повний сайт

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

Тема на замовлення або динамічний вміст

Тут розробник або пише тему вручну, або створює окремі типи вмісту, які ви додаєте з адмінки: учасників команди, проєкти чи оголошення про нерухомість. Роботи тут більше, зате на сайті лише той код, який потрібен дизайну, а макет можна зафіксувати, щоб редактори змінювали вміст, а не структуру. До цього рівня належить і магазин із дизайном у Figma. Якщо згодом виникнуть проблеми з оформленням замовлення, ось як найняти розробника WooCommerce.

Що зазвичай не входить у найпростішу роботу

Найпростіша верстка часто не включає:

• версію для планшета або мобільну версію, якої ви не намалювали
• вигляд елементів при наведенні курсора, меню і повідомлення про помилки у формах
• текст, який можна редагувати, а не текст на зображеннях
• ліцензії на плагіни на ваше ім’я
• розміщення ваших матеріалів замість зразків
• базову перевірку швидкості після верстки

Що збільшує обсяг роботи

Кількість унікальних макетів важливіша за кількість сторінок.

• Унікальні шаблони Сторінки з тим самим макетом потребують значно менше роботи, ніж окремі дизайни.
• Немає мобільних фреймів Якщо в дизайні лише версія для комп’ютера, версію для телефона доводиться продумувати під час верстки.
• Безладний файл Figma Якщо відступи неузгоджені, а шари не використовують Auto layout (автоматичне розміщення) чи спільні стилі, у файлі довше розбиратися.
• Анімації Ефекти під час прокручування, слайдери та власні інтерактивні елементи часто є окремою роботою.
• Динамічний вміст Портфоліо, сторінка команди чи оголошення, які ви заповнюєте з адмінки, потребують окремих шаблонів, часто з довільними полями.
• Магазин або кілька мов Для сторінок WooCommerce і перекладених версій потрібні окремі шаблони й перевірки.

Порахуйте унікальні макети заздалегідь, щоб врахувати весь обсяг роботи.

Elementor, редактор блоків чи тема на замовлення?

Спосіб верстки впливає і на обсяг роботи, і на те, як ви редагуватимете сайт потім.

Найчастіше з Figma верстають в Elementor. Elementor Pro на момент написання коштує приблизно від $60 на рік за один сайт, а з ліцензією у вашому власному акаунті Elementor оновлення приходитимуть і далі, навіть коли розробник уже не працюватиме з вами.

Для сайту, який ви плануєте розвивати, варто розглянути блокову тему або тему на замовлення. Якщо ви здебільшого хочете змінювати тексти й зображення, з конструктором сторінок буде простіше. Перегляньте мої рекомендації конструкторів сторінок.

Що можна зробити самому

Найдешевше обходиться підготовка, яку ви робите самі до початку верстки.

1. Намалюйте мобільну версію. Для кожного унікального макета додайте фрейм для телефона. Що менше доводиться вгадувати, то менше роботи.
2. Наведіть лад у файлі Figma. Використайте Auto layout (автоматичне розміщення), назвіть сторінки і задайте спільні стилі кольорів і тексту.
3. Перевірте шрифти. Google Fonts безкоштовні для сайтів. Для платного шрифту потрібна вебліцензія, і купуєте її ви, а не розробник.
4. Позначте, що редагуватимете. Запишіть, які тексти, зображення і секції ви хочете потім змінювати самі.

Також є плагіни, які перетворюють фрейм Figma на секції Elementor. Для простого лендингу вони можуть зекономити час, але зазвичай доводиться виправляти вигляд сторінки на телефонах і коригувати відступи.

Якщо в дизайні більше кількох унікальних макетів, динамічний вміст або магазин, зупиніться тут і напишіть мені.

Чи варто платити за верстку з Figma на WordPress?

Якщо ви вже заплатили за власний дизайн, так. Верстка зазвичай коштує менше за сам дизайн, а якісна верстка зберігає вигляд, за який ви заплатили, на екрані будь-якого розміру.

Якщо дизайну ще немає, готова тема або стартовий шаблон можуть коштувати менше ніж $100. Розробник може підлаштувати їх під ваш бренд. Власний дизайн у Figma має сенс для незвичного макета або коли готова тема постійно заважає.

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

Як я працюю з версткою з Figma

• Посилання на Figma Прошу посилання на файл із доступом на перегляд (can view). Безкоштовного акаунта Figma мені достатньо, щоб вимірювати елементи й експортувати зображення.
• Унікальні макети Разом із вами складаю перелік унікальних макетів і вказую, які сторінки використовують кожен із них.
• Розміри екранів Уточнюю, чи намальовано всі версії: для комп’ютера, планшета і телефона.
• Спосіб верстки Пояснюю, що раджу для вашого сайту: Elementor, редактор блоків чи тему на замовлення, і чому.
• Матеріали Домовляємося, хто додає тексти й зображення і скільки статей чи товарів треба розмістити.
• Форми і функції Уточнюю, на яку електронну адресу мають надходити листи з кожної форми і чи потрібні бронювання, розсилка чи магазин.
• Відповідність дизайну Заздалегідь домовляємося, що означає «відповідає дизайну»: ті самі шрифти, кольори й відступи за тих розмірів екрана, для яких є макети.
• Хостинг і доступ Хостинг, домен і кожна ліцензія залишаються на ваше ім’я. Мені потрібен окремий обліковий запис WordPress і, якщо потрібен доступ до файлів, окремий користувач SFTP: паролі від ваших акаунтів мені не потрібні. Якщо сайт уже працює, ви спершу робите власну резервну копію, а я верстаю на тестовій копії сайту (staging).
• Ваша перевірка Порівняйте кожну сторінку з її фреймом у Figma на комп’ютері і на телефоні. Самі змініть заголовок, перевірте кожну форму і протестуйте головну сторінку в PageSpeed Insights від Google. Потім видаліть мій обліковий запис WordPress і скасуйте наданий доступ SFTP.

Тривожні сигнали

Хоч би хто верстав ваш сайт, насторожитися варто, якщо бачите:

• розрахунок, зроблений без перегляду вашого файлу Figma
• десять унікальних сторінок «піксель у піксель» за один день
• «безкоштовний» Elementor Pro або платний плагін без ліцензійного ключа
• пропозицію зробити сайт на хостингу виконавця

Хто зверстає сайт з Figma на WordPress

Якщо у вас готовий дизайн у Figma, можете звернутися до мене.

Підсумок

Обсяг верстки з Figma на WordPress залежить від кількості унікальних макетів, від того, чи намальована мобільна версія, і від способу верстки. Дешева верстка без мобільних версій чи ліцензій на ваше ім’я часто обходиться дорожче, коли її доводиться виправляти. Підготуйте файл, порахуйте макети і напишіть мені.