Кілька останніх днів я вивчав, як перетворити дизайн з Figma на код, і це дійсно вражає 😄. Раніше я створював вебсайти, орієнтуючись лише на дизайн у Figma, без точного відтворення. Відстані, такі як padding і margin, часто були лише приблизними. Це не завжди давало бажаний результат, оскільки не відповідало точно розробленому дизайну.
Насправді можна використовувати функцію dev mode у Figma. Вона значно полегшує процес розробки додатків. Але ця функція є платною. Щоб її використовувати, потрібно підписатися на преміум версію.
Однак, ви все одно можете зробити це з безкоштовною версією. Щоб досягти точності у відтворенні дизайну, потрібно дотримуватись значень компонентів, щоб вони відповідали розробленому дизайну. До речі, якщо ви ще не знайомі з Figma, я представлю її тут.
Figma — це інструмент для створення дизайну UI/UX або інших дизайнів, таких як логотипи, банери, вайрфрейми тощо. Ви також можете співпрацювати у команді. Figma має як безкоштовну, так і платну версію. Ви можете використовувати її як у десктопній, так і в веб-версії. За допомогою Figma вам буде легко створювати дизайн, особливо для вебсайтів. Існує безліч плагінів, які значно спрощують процес дизайну.
джерело: https://www.figma.com/design/
Я використовую Figma вже досить довго — більше року. Цей інструмент дуже допомагає при створенні дизайну для вебсайтів. Але якщо у вас комп'ютер з низькими характеристиками, він може працювати повільно.
Під час цього навчання я отримав безкоштовний курс від платформи BWA. Ось один з дизайнів, який я розрізав.
Зображення вище буде використовуватись як орієнтир у подальшому обговоренні цього матеріалу.
Кольори у дизайні
Для початку потрібно зібрати всі кольори, що використовуються в дизайні. Ось приклад:
Мета цього етапу — полегшити подальше використання кольорів, особливо при роботі з CSS. Після цього ви можете використовувати ці значення в CSS за допомогою змінних. Ось приклад коду:
:root{
--blue: #3A38FF;
--softPurple: #E5E4FF;
--gray1: #DFE2E7;
--navy: #3D3D65;
--text-gray: #E5E4FF;
--green: #316762;
--pink: #D861D3;
--red: #D86161;
--yellow: #FFB444;
--gray2: #E7EBED;
--body: #F9FBFC;
--white: #ffffff;
--gray3: #8C9295;
--fwlight:300;
--fwregular:400;
--fwmedium:500;
--fwsemibold:600;
--fwbold:700;
--fwextrabold:800;
--fwblack:900;
}
Щоб використовувати ці значення, потрібно просто використати var(назва_змінної) у відповідних властивостях CSS.
.big-header {
font-size: 48px;
font-weight: var(--fwextrabold);
color: var(--navy);
margin: 0;
}
Це дає перевагу: якщо через деякий час ви маєте десятки, сотні або навіть тисячі рядків коду, і керівник захоче змінити колір, вам достатньо змінити значення у змінній root, і ці зміни автоматично поширяться на весь сайт.
Ви також можете використовувати інші способи, якщо працюєте з такими фреймворками, як tailwind css чи bootstrap. Але в цьому матеріалі я не буду обговорювати ці фреймворки.
Типографіка
Після того, як ви налаштували кольори, можна переходити до типографіки. Потрібно зібрати усі шрифти, які використовуються в дизайні. Це дозволить визначити розміри шрифтів, товщину, щоб зрозуміти, які тексти є заголовками великими, середніми, малими, абзацами тощо.
На зображенні вище вибраний шрифт має розмір 28px і товщину bold.
Для налаштування товщини шрифтів ви можете скористатися Google Fonts.
щоб ви могли застосовувати це до стилів CSS.
За допомогою CSS ви можете налаштовувати товщину шрифтів за допомогою властивості font-weight з відповідним значенням, що відповідає розміру в Figma. Також ми можемо використовувати змінні CSS.
:root{
--navy: #3D3D65;
--fwlight:300;
--fwregular:400;
--fwmedium:500;
--fwsemibold:600;
--fwbold:700;
--fwextrabold:800;
--fwblack:900;
}
Після цього ми можемо викликати їх за допомогою наступного коду:
.small-header {
font-size: 22px;
font-weight: var(--fwbold);
color: var(--navy);
margin: 0;
}
Робота з макетом
Після того, як ви підготували кольори та типографіку, можна переходити до створення HTML-шаблону. Потрібно налаштувати відступи (margin) і внутрішні відстані (padding) для кожного елемента. Ось як це виглядає:
Figma надає розміри, включаючи ширину, висоту, радіус обведення (border-radius), line-height, шрифти та відстань між компонентами. Завдяки цьому ваш код буде виглядати схоже на дизайн у Figma. Ви можете використовувати лише значення у пікселях. Наприклад, ширина 133px, висота 43px, радіус 50px тощо.
Я дам приклад CSS-коду для кнопки "get started":
Відстань між цією кнопкою та текстом абзацу зверху складає приблизно 31px, це можна побачити на попередньому зображенні. Тут припустимо, що текст не має margin і padding. Ось CSS-код, який не використовує змінні CSS:
.btn-primary {
margin-top: 31px;
background-color: #3A38FF;
font-weight: 600;
color: #ffffff;
padding: 12px 20px;
font-size: 16px;
border-radius: 50px;
border: 0;
}
А ось HTML-код:
Get Started
Цей код відповідає дизайну. Ви можете встановити значення компонентів відповідно до значень у Figma. Спочатку це може виглядати заплутано, але якщо ви будете практикуватися, все стане набагато простіше.
Можливо, це все, що я хотів поділитися про slicing. Я сподіваюся, що є більш ефективніші способи цього процесу. Сподіваюся, це було корисно, і до зустрічі в наступних статтях. 😄
Перекладено з: Melakukan Slicing Dengan Figma To Code