Пошук

Як побудувати бібліотеку компонентів у Figma: практичний підхід Lexicon

·

Архівний матеріал: розбір публікації від 2019-06-17. Назви функцій, інтерфейс, можливості плагінів і умови доступу наведені в контексті того часу.

Команда Lexicon (дизайн система Liferay) пройшла шлях від Sketch до Figma і перебудувала свою бібліотеку компонентів під нову модель стилів та компонентів. Нижче — розбір цього підходу в форматі практичного уроку: що варто підготувати, як будувати майстер-компоненти, як налаштовувати імена та структуру сторінок, і як не «вбити» меню інстансів іконками.

Крок 1. Підготувати основу: типографіка та кольори

Типографічна шкала

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

a scale of text in different sizes, from small to big
Typography scales are useful to improve the hierarchy of the elements, as managing the sizes and weights of the fonts can really guide the user through the content.

Ключові моменти з їхнього підходу:

  • Для сайтів часто беруть більший крок між розмірами (наприклад, 36 px заголовок, 24 px підзаголовок, 16 px текст), бо задача — комунікація та одна-дві основні дії.
  • Для продуктів та сервісів частіше обмежуються меншими розмірами (переважно 12–18 px для текстів в компонентах), бо на одному екрані більше елементів і станів.
  • Для інтерфейсів, які реалізують на web, автор радить говорити з розробниками і узгоджувати шкалу в EM/REM, а не в «голих» пікселях, плюс домовитись про правило конвертації px в EM/REM.

Корисні матеріали, на які посилається автор:

Кольорова схема

Другий фундаментальний крок — визначити палітру. Команда ділить роботу на дві частини:

  1. Базові кольори системи — небагато, приблизно 4–5 штук разом із кольорами валідації. Чим більше базових кольорів, тим дорожче підтримка.
  2. Похідні відтінки, які обчислюються в коді через Sass-функції lighten та darken. Це дозволяє тримати один відтінок (hue) і отримувати різні тони за сталою «математичною» логікою.

2 different sets of colors with different tones
Once you have your main colors (in our case, blue and grey), you can generate gradients using lighten and darken functions.

У Figma ці відтінки створюються як окремі стилі, а в коді — як змінні, що генеруються з основного кольору. Для експериментів автор посилається на інструмент SassMe.

Окремий практичний момент від Lexicon: не привʼязувати назву змінної до кольору. Замість $blue — $primary. Так можна поміняти синій на, наприклад, зелений, не перейменовуючи змінні в коді і стилі в Figma.

Про іменування кольорів детальніше є в статті What Do You Name Color Variables?.

Крок 2. Завести стилі Figma і правила іменування

Коли шкала шрифтів і палітра готові, команда переходить до системних стилів Figma. Це перший формальний крок створення бібліотеки: ви описуєте одну комбінацію властивостей і перевикористовуєте її в десятках елементів.

2 shapes showing a color palette and a text to represent the possible styles
Styles are the way to control all the basic details in your library.

Lexicon використовує чотири типи стилів:

  • Text Styles
  • Color Styles
  • Effects
  • Grids

Щоб у панелі стилів не виникав хаос, автор радить групувати стилі через патерн «Група/Назва стилю» (Figma інтерпретує слеш як групу).

Text Styles

У текстових стилях фіксуються:

  • font-size
  • font-weight
  • line-height
  • letter-spacing

Вирівнювання та колір при цьому не привʼязані до текстового стилю і задаються окремо. Це суттєво зменшує кількість стилів у бібліотеці: один стиль 16/Regular можна використати для чорного тексту зліва, сірого по центру тощо.

4 shapes with text inside used as examples of different text styles
You can apply all the typography scale we’ve seen before as text styles.

Схема іменування, яку радить автор:

  • Базова: Розмір/Насиченість, наприклад 16/Regular, 16/SemiBold, 16/Bold.
  • Якщо потрібен шрифт у назві: FontFamily Розмір/Насиченість або скорочена FF Розмір/Насиченість, наприклад SourceSansPro 16/Regular чи SSP 16/Regular.

Color Styles

Колірний стиль в Figma включає hex-значення і прозорість. Його можна застосувати до:

  • fill
  • stroke
  • background
  • text

При цьому fill і stroke можуть мати різні стилі всередині одного обʼєкта.

4 shapes with colors inside, used as examples of different color styles
You can apply color styles to fills, borders, backgrounds, and texts.

Іменування, яке використовували в Lexicon для відтінків:

  • Базовий: Primary/Default
  • Світліші: Primary/L1, Primary/L2
  • Темніші: Primary/D1, Primary/D2

Effects

Для тіней і блюрів команда також створює окремі стилі. Це корисно для станів drag and drop, піднятих карток тощо, де важливо зберігати єдину візуальну логіку.

2 shapes similar to paper, one above the other one to show the shadow effect
Define shadows and blurs to manage special interaction effects such as drag-n-drop.

Стилі ефектів теж можна групувати (наприклад, Shadow/Low, Shadow/Medium, Shadow/High), але конкретна схема в матеріалі не навʼязується.

Grids

Lexicon включає в бібліотеку й сітки, щоб дизайнери не відновлювали їх щоразу з нуля: 8 px grid, 12-колоночні, флюїдні тощо.

12 columns to represent the grid styles
There’s no need to memorize the grid sizes anymore.

Окремий лайфхак — завести всі брейкпоінти як grid styles. Тоді команда не шукає «який там desktop-container», а просто переключається між стилями.

Крок 3. Майстер-компонент і каскад інстансів

У Figma вся потужність бібліотеки тримається на майстер-компонентах: ви створюєте один master, далі працюєте з інстансами та підкомпонентами, але завжди можете змінити все через вихідний компонент.

a single group of three shapes that shows how you can get seven different results by hiding some of the shapes
One master component to rule them all!

Для демонстрації автор бере класичний приклад з бібліотек — кнопки.

Як швидко розростається набір кнопок

Типовий набір, який доводиться підтримувати:

  • 2 типи за кольором: Primary | Secondary
  • 2 розміри: Regular | Small
  • 4 варіанти контенту: тільки текст | тільки іконка | текст + іконка справа | іконка зліва + текст
  • 5 станів: Default | Hover | Active | Disabled | Focus

У сумі це дає 88 окремих кнопкових компонентів. У Figma команда Lexicon змогла керувати цим масивом через один майстер-компонент з підкомпонентами.

a screenshot with a total of 88 different button components
Thanks to how Figma is built, you can easily manage a lot of button instances all at once.

Покроковий підхід до кнопок

1. Зібрати всі варіації в одному місці

У Lexicon виділяють три базові елементи для кнопки:

  • один прямокутник для фону та бордера (color styles застосовуються до fill і stroke);
  • один текстовий елемент з text styles + color styles;
  • три іконкові компоненти (зліва, по центру, справа), які також використовують color styles і можуть легко підмінятися.

a group of divided elements: a rectangle shape, a button text and 3 icons
A shape, a text, and an icon walk into a Figma bar...

2. Створити майстер-компонент

Далі ці елементи обʼєднують у master component (Cmd + Alt + K на Mac, Ctrl + Alt + K на Windows). Практичний трюк, який застосовувала команда Lexicon:

  • всередині майстер-компонента використовувати нейтральні стилі;
  • реальні стилі (primary, secondary, hover тощо) застосовувати вже в підкомпонентах.

Так дизайнери за замовчуванням працюють із підкомпонентами, а не чіпають master напряму.

A group of elements centered in the same space, one over the other one
The more elements, the more instances you can control.

3. Створити підкомпоненти з інстанса

Алгоритм, який описує автор:

  1. Дублюєте master component, створюючи інстанс.
  2. На базі цього інстанса робите підкомпонент (component з компоненту).
  3. Застосовуєте до елементів всередині підкомпонента різні стилі (primary/secondary, різні стани).
  4. Ховаєте непотрібні частини (іконку зліва/справа тощо).

An example showing how 8 different buttons can be generated from 1 single component
Thanks to the color styles you can generate different components using the same shape. In this example, primary and secondary styles are generated from the same master component.

Будь-яка зміна в master component автоматично перенесеться в усі підкомпоненти, які на ньому базуються.

Робота з вирівнюванням тексту в інстансах

Вирівнювання не зафіксоване в text style, тому в інстансах його можна сміливо змінювати:

  • зажимаєте Cmd/Ctrl, щоб швидко вибрати потрібний текстовий шар в інстансі;
  • міняєте вирівнювання на left/center/right;
  • зберігаєте як окремий підкомпонент, якщо це окрема варіація (наприклад, центрові кнопки).

Окремий лайфхак від автора: якщо видалити елемент всередині інстанса, Figma фактично ховає його, а не повністю видаляє. Це спрощує роботу з комбінаціями «з іконкою / без іконки» тощо.

Крок 4. Організація компонентів у файлі Figma

У Sketch структура залежить лише від імені символу. У Figma ієрархія, яку бачить команда в меню інстансів, формується з трьох рівнів:

  • Page (сторінка)
  • Frame (фрейм)
  • Component (сам компонент)

Lexicon зіткнувся з тим, що погана організація сторінок і фреймів призводить до «нескінченних» випадаючих меню, які не влазять у екран MacBook.

showing the instance menu open with more unordered sub-menus
As you can see here, our library had so many sub-menus that as a result the navigation was going off the screen on MacBooks, that was a big problem for our library. We were able to find a workaround for this issue.

Після перегляду структури за чіткими правилами меню стало суттєво компактнішим та читабельнішим.

showing the improvements on the instance menu open with ordered sub-menus
This was the result after improving the library order following the rules for pages and frames, now it’s way more usable and organized for our teams.

Базова схема найменувань у Figma

Команда організувала бібліотеку так:

  • File Name = назва бібліотеки (наприклад, Lexicon);
  • Page Name = група компонентів (наприклад, Cards);
  • Frame Name = тип компонента (наприклад, Image Card, User Card);
  • Component Name = стан (наприклад, Default, Hover, Active, Selected).

Showing the main page named ‘Cards’, the frame named ‘Image Card’ and the layer named ‘Card Hover’
This structure is the equivalent to the Sketch naming of ‘Cards/Image Card/Card Hover’.

У термінах Sketch така структура приблизно еквівалентна Cards/Image Card/Card Hover.

Коли потрібно більше рівнів вкладеності

Для деяких наборів (зокрема кнопок) трьох рівнів виявилось замало. У таких випадках команда використала прийом зі Sketch: додаткові рівні позначаються через слеші / вже після перших трьох рівнів.

Схема для кнопок у Lexicon:

  • Page name = група компонентів, наприклад Buttons;
  • Frame name = розмір, наприклад Buttons Regular або Buttons Small;
  • Component name = Style/Type/State, наприклад Primary/Text/Hover.

Showing the main page named 'Buttons', the frame named 'Buttons Regular' and the layer named 'Primary/Text/Button Hover' as example of the possible structures.
This structure is the equivalent to the Sketch naming of '*Buttons/Buttons Regular/Primary/Text/Button Hover*'.

Це дає щось на кшталт Buttons/Buttons Regular/Primary/Text/Button Hover у стилі Sketch.

Додатковий прийом, який описує автор: додавати повну або скорочену назву компонента в останньому рівні. Це спрощує пошук шару, коли дизайнер вставляє інстанс із бібліотеки і шукає потрібний варіант у списку.

Крок 5. Як не «зламати» меню інстансів іконками

З іконками у Figma команда Lexicon зіткнулась із окремою проблемою: коли іконок багато і вони глибоко згруповані, випадаючі меню можуть виходити за межі екрана. На відміну від Sketch, який використовує скрол всередині списку, Figma активно розкладає структуру по підменю.

Showing the instance menu for the icons with a single scrollable sub-menu.
An example of how the components are organized inside a single scrollable sub-menu.
Showing the instance menu for the icons with more than 10 sub-menus and cover all the screen.
As you can see, using a Macbook Pro the result was the menus going outside the screen.

Щоб зробити меню інстансів керованим, автор пропонує два варіанти структурування сторінки Icons.

Рішення 1. За алфавітом

Алгоритм:

  • створити сторінку Icons;
  • для кожної літери алфавіту зробити окремий frame (A, B, C...);
  • класти кожну іконку у frame відповідно до назви (іконка Plus йде до фрейму P).

The instance menu is open, showing the alphabetical order of the icons in Figma.
I, personally, applied solution 1. As you can see in this example, we had a huge number of icons so this was the better fit.

Автор використовував саме цей варіант у Lexicon, бо кількість іконок була дуже великою, і алфавітний поділ давав прогнозовану навігацію.

Рішення 2. За категоріями

Другий можливий підхід — групувати не за літерами, а за категоріями:

  • сторінка Icons;
  • frames за темами (наприклад, Vehicles, куди потрапляють іконки човна, авто, мотоцикла тощо).

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

Практичні підсумки підходу Lexicon

З досвіду авторів Lexicon, найзручніше тримати бібліотеку в окремому Figma-файлі і публікувати його як Team Library, а не розкидати компоненти по різних файлах і публікувати окремо. Це спрощує оновлення та підтримку.

Команда ділиться своєю бібліотекою: Lexicon library. Її можна завантажити та вивчити як живий приклад того, як реалізовано всі кроки з цієї статті.

Додаткові ресурси, на які посилається автор статті:

Джерело: Emiliano Cicero – Smashing Magazine. Дата оригіналу: 2019-06-17.

Пошук

Закрити