Дизайн-система в Figma. Часть 5: Списки и Auto Layout | by Татьяна Маслакова. Веб дизайн | Дизайн-кабак

Продолжнаем эксперименты при создании собственной дизайн системы в Figma. Для тех, кто со мной впервые, рекомендую сперва прочитать предыдущие части, чтобы понимать, что именно я создаю и для чего это нужно:

Часть 1: Типографика, цвета и стили

Часть 2: Кнопки

Часть 3: Поля ввода и выпадающие списки

Часть 4: Поиск и умный поиск

Сегодня будем рисовать компоненты для списков, преимуществ и прочих текстовых блоков.

Но прежде чем начать создавать компоненты, давайте посмотрим из чего состоят наиболее частые варианты списков в тексте:

• Собственно, сама текстовая часть
• Иногда может присутствовать какой-либо заголовок или жирное выделение основной мысли
• Буллит, иконка или номер (буква)

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

Или просто список в буллитами/ галочками или с каким либо еще повторяемым элементом.

Создаем компонент нашего буллита. Это может быть палочка, галочка, кружочек, квадратик или что-либо еще, что больше всего соответствует вашему дизайну.

Я сделала кружок. При этом я намерено взяла размер компонента больше, чем сам круг, чтобы иметь возможность для маневра. Имя я задала icon/list/circle, чтобы в будущем иметь возможность позднее создать группу иконок для использования в разных вариантах списков.

Не забудьте при создании иконки использовать имеющиеся в нашей системе стили цвета. Подробнее о них я рассказывала в сасмой первой статье.

Далее создаем два текстовых слоя один по другим. Верхний будет заголовком или главной мыслью списка. Нижний — основным текстом.

Назначаем текстовым слоям Auto Layout. Подбираем подходящий вам размер вертикального отступа между двумя текстовыми слоями. Выбираем такую настройку масштабирования блока (fixed width).

Внутри фрейма Auto layout по-отдельности для каждого текстового слоя выбираем масштабирование по ширине блока (stretch left and right):

Теперь при изменении ширины фрейма с Auto Layout, тексты будут автоматически перестраиваться

Далее подставляем в нужное место ранее cозданную иконку с буллитом и запаковываем все это в компонент. Присваиваем название list/simple.

Ставим Constraints: для иконки left + top, для фрейма с текстами left&right + top.

По сути, наш список готов, но у него есть небольшой недостаток — высота списка не перестраивается при изменении ширины блока или самого текста.

Пока идеального для себя решения этой проблемы я не нашла. Пишите в комментариях, как вы бы решили эту проблему. Обещаю дополнить статью, если найдется более изящное решение. Опишу свои варианты костылей:

Способ 1:

Выделяем текстовый блок и иконку и группируем.

Выделяем компонент и снова назначаем Auto Layout, ставим fixed width. На группу ставим такую настройку масштабирования:

Теперь все масштабируется, но при этом буллит также растягивается вместе со списком.

Решить проблему можно, если запаковать иконку-буллит во фрейм и поставить Constraints: left + top.

Теперь иконка не разъезжается, но есть небольшой недостаток у способа — левая граница текста не фиксируется относительно компонента, расстояние между краем компонента и краем текста также масштабируется.

Способ 2:

Можно создать список шириной с текстовую область, буллит при этом будет вынесен за пределы границ компонета.

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

Итак у нас есть 2 текстовых слоя и иконка. Создадим дополнительно фрейм размерами 1×1 пиксель. Этот фрейм не имеет настроек цвета или обводки, он прозрачен. Галочка Clip content выключена. Располагается он над текстовыми слоями:

Этот фрейм мы запаковываем в компонент вместе с двумя текстовыми слоями, ставим Auto Layout. Все настройки масштабирования те же, что и ранее мы делали для текстовых слоев, чтобы они масштабировались вместе со всем блоком, только для фрейма ставим выравнивание по левому краю:

У компонента также снимаем Clip content. Присваиваем название list/simple.

Переносим иконку-буллит в нужное место нашего списка и в палитре слоев слой с иконкой вставляем внутрь фрейма:

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

Оба варианта на мой взгляд не идеальны. А как сделали бы вы?

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

Предположим, мы захотели сменить иконку-буллит. Это делается очень легко: можно подкорректировать сам компонент иконки, а Можно создать еще одну иконку и заменить ее в компоненте в помощи Instance. Если в вашей системе несколько вариантов иконок для буллита, не забывайте их называть по общим правилам.

Например: icon/list/circle, icon/list/line, icon/list/check и так далее. Тогда вы легко сможете их найти при замене instance.

Например, я решила заменить кружок-буллит на обычную черточку:

Если нам не нужно выводить в списке заголовок, то он будет просто скрываться и за счет Auto layout основная подпись поднимется наверх:

Нумерованный список создается по тому же принципу, что и ненумерованный, только вместо иконки мы подставляем текстовый слой с цифрой.

Я хочу, чтобы мои нумерованные списки наследовались от ненумерованных. Для этого нам нужно создать вспомогательный компонент с номером, размер которого будет идентичен размеру компонента иконки-буллита, сам дизайн номера может немного вылезать за пределы компонента, это не страшно. Но чтобы при наследовании у нас ничего не иссказилось, размеры должны соответствовать. Варианты номеров могут быть разными — это может быть просто цифра с точкой, может быть цифра в кружочке или цифра с черточкой.

Мой вариант. обратите внимание на границы компонента:

Далее берем экземпляр ранее созданного компонента простого списка и заменяем в нем при помощи instance иконку на вспомогательный компонент номера. запаковываем в новый компонент и присваиваем имя. Получается вот такой вот элемент нумерованного списка.

В итоге мы имеем два компонента разных видов списка из которых можно легко и быстро выстраивать вот такие структуры:

Списки с иконками могут применяться в оформлении каких-либо каталогов, либо в преимуществах и других случаях, когда мы хотим проиллюстрировать каким либо образом текст.

Эти списки строятся аналогичным образом. Разница может быть лишь в размере иконки и в ее положении.

Если иконка как и у текстового списка располагается слева — то построение компонента идет аналогично. Только сами иконки при использовании компонентов потом заменяются на заранее созданные варианты при помощи Instance.

Рассмотрим вариант, когда иконка располагается над текстом:

Если иконка сверху — то все становится намного проще. Просто иконка вместе с текстом упаковывается в один компонент с настройками Auto Layout.

Заранее подготовим несколько компонентов иконок одинаковых размеров идадим им имена по одинаковым правилам, чтобы объединить их.

Также как и в варианте с обычными списками создаем 2 текстовых слоя, берем одну из подготовленных иконок и располагаем все в нужном порядке:

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

Для фрейма с Auto Layout:

Для каждого текстового слоя внутри:

А теперь мы выделяем фрейм с Auto Layout и нашу иконку, запаковываем в компонент и вновь применяем Auto Layout. Выставляем следующие настройки:

Для фрейма с Auto Layout:

фрейма с текстами внутри:

Для иконки:

Таким образом наш текст растягивается, а иконка всегда стоит слева. Можно сделать и другие варианты, например, когда текст и иконка стоят по-центру. Для этого В настройках Auto layout нужно выбрать вторую иконку. У текста настройки Auto layout не меняются, но нужно зайти в сами текстовые слои и поставить в них выравнивание текста по центру:

Компонент готов.

Теперь мы можем создавать списки подобного плана и легко подменять в них иконки.

Пример использования:

Ждите продолжения в новых статьях, задавайте вопросы, делитесь своими идеями и мнениями в комментариях. А если статья была вам полезна, поддержите клапсом 👏 (кстати, клапснуть можно несколько раз).

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

Behance — мои лучшие работы

Telegram-канал — публикую, заметки и мысли о своей работе, figma, портфолио, дизайн-системах, автоматизации задач и ускорении работы. Делюсь ссылками, крутыми кейсами.

Instagram

Что такое компоненты в Figma, и как они помогут сделать работу быстрее — Дизайн на vc.ru

Об основах Figma для новичков — наименовании блоков и нулевом фрейме — рассказывает Михаил Загородний, Designer в Friflex.

21 672
просмотров

Figma — графический редактор для совместного проектирования сайтов, приложений и других дизайнерских продуктов. Она появилась в 2016 году как аналог Sketch и Adobe XD, но спустя пару лет стала одним из самых популярных инструментов у дизайнеров. Программа позволяет собрать большие проекты в одном месте и с легкостью переключаться между экранами.

На фоне зарубежных санкций компания, как и Adobe, замораживает бизнес-аккаунты российских компаний по тарифам Figma Professional, Figma Organization и Figma Enterprise, но оставляет доступ к базовому бесплатному тарифному плану. Бесплатная версия программы не подойдет для работы команды, но будет все также актуальна для индивидуального использования. Поэтому, если вы фрилансер, работаете в паре с другим дизайнером или самостоятельно, только начинаете карьеру или хотите заниматься UX-дизайном – эта статья для вас. В ней я расскажу, как работать с компонентами, структурировать их варианты и решать ранее невозможные задачи с помощью нулевого фрейма.

Что такое компоненты в Figma, и как они ускоряют рабочий процесс?

Компонент – это элемент или блок, который можно редактировать комплексно. Задав его вид один раз, автоматически измененные копии компонента можно использовать в разных частях проекта.

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

Самый простой компонент – кнопка. Важно помнить, что ее вид не должен меняться от перехода экрана к экрану.

Более сложные компоненты – шапка и футер на сайте, меню навигации в приложении, а также хедеры или модальные окна.

Главное преимущество работы с компонентами – возможность вносить изменения во все экземпляры проекта сразу, изменяя только мастер-компонент. Это ускоряет рабочий процесс и делает дизайн-систему проекта более согласованной, упрощает процесс ее поддержки и сотрудничества с другими дизайнерами.

Поведения компонентов: мастер-компонент и экземпляр-компонент

Перед тем как перейти к рекомендациям по работе с компонентами, надо познакомиться с понятиями мастер-компонент (master components) и экземпляр-компонент (component instances).

Мастер-компонент создается при превращении элемента интерфейса в компонент и определяет его свойства.

Экземпляр-компонент – это копия мастер-компонента, который может повторно использоваться в разных проектах. Чтобы отличить мастер-компонент от экземпляра, посмотрите на панель слоёв. Мастер-компонент обозначен иконкой с четырьмя закрашенными ромбами, экземпляр – иконкой с одним контурным.

Экземпляры напрямую связаны с мастер-компонентом, поэтому при внесении изменений в мастер-компонент, экземпляры меняются вместе с ним.

Важно учитывать, что экземпляр наследует все изменения, внесенные в мастер-компонент кроме переопределений свойства и наполнения экземпляра. Связь этих свойств и наполнения будет разорвана, восстановить ее можно в панеле свойств экземпляра.

Варианты компонентов

Варианты – это группа компонентов, объединенных в один компонент, с разным видом и различными свойствами. Переключение между вариантами происходит с помощью выбора необходимого пункта в свойствах экземпляра.

Чтобы создать варианты мастер-компонента, в меню свойств компонента нужно добавить пункт Variants. Экземпляр вариантов или мастер-компонента не отличаются друг от друга. Однако в первом случае есть возможность быстро поменять вариант экземпляра на другой, а во втором быстро заменить экземпляр уже не получится. К созданным вариантам компонента можно добавлять новые компоненты.

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

Структурирование вариантов

В настройках компонентов можно добавлять и называть свойства и их варианты. Это позволяет структурировать варианты по свойствам и при размещении компонента выбирать необходимый вид компонента.

Наименование блоков

Важно учитывать, что в вариантах мастер-компонента нужно правильно подписывать элементы в списке слоев. Одинаковые элементы вариантов должны называться одинаково, тогда наполнение останется прежним. Это позволит не менять наполнение компонента при изменении варианта в свойствах экземпляра (подпись кнопки «Вход» будет сохранена при изменении состояния в свойствах компонента). Конечно, если вам не нужен обратный эффект.

Вложенность компонентов

После того, как мы разобрались с понятием, поведением и возможностями вариантов компонентов, можно смело перейти к вложенным или атомарным компонентам. Они представляют собой компонент, частично или полностью собранный из других компонентов. Такая конструкция упрощает и повышает скорость проектирования.

Самый простой пример атомарного компонента – список с буллитами, строками которого будут являться экземпляры другого компонента. Если вы захотите изменить в списке вид буллитов, то потребуется изменить его в мастер-компоненте строки, а не в каждой строке списка.

Вы можете создавать вложенность любого уровня и сложности.

Как создать 0px фрейм, и почему он точно понадобится

Есть задачи, которые невозможно решить с помощью стандартного функционала Figma. Например, ограничение минимальной высоты, ширины элемента, вынос элементов за границы autolayout или наложение элементов друг на друга. Здесь можно использовать нулевой фрейм.

Чтобы создать фрейм, в поле настроек ширины и высоты введите значение 0,001. Если в полях появится значение 0 – ваш фрейм готов! Важно учесть, что при вводе значения 0 или 0,01, Figma автоматически округлит его до единицы, и создать нулевой фрейм не получится.

• Наложение элементов друг на друга

Добавьте 0px фрейм в auto layout в любую, более удобную для дальнейшего перемещения самого блока, часть контейнера. Далее выделите элемент внутри нулевого фрейма и поместите его в нужное место.

• Вынос фрейма за границы

Вынос элемента за границы происходит идентично наложению. Добавьте фрейм в удобное место и вынесите его содержимое за границы auto layout.

Компоненты Figma – это одно из главных достоинств программы. Чтобы не перерисовывать каждый элемент по отдельности, используйте компоненты. Редактируя всего одну иконку или кнопку, можно вносить комплексные изменения в весь проект. Следующий шаг после работы с компонентами – это создание библиотеки компонентов Figma, где можно хранить основные заготовки для интерфейсов. Она избавляет от двойной работы и позволяет использовать общие элементы повторно.

Выстроить качественную систему компонентов – это непростая задача для новичка. Но как только она будет решена, у вас появится время, чтобы выпить не одну, а две чашки кофе.

Как сейчас выстраиваете работу, нашли аналог или пользуетесь Figma? Делитесь в комментариях.

лучших плагинов Figma | Figma для начинающих #9

Что такое плагины Figma и как их использовать? Помимо ответа на этот вопрос, в сегодняшней статье вы также найдете список рекомендуемых плагинов, о которых вы должны знать в начале своего дизайнерского приключения. С плагинами вы сэкономите много времени, которое вам пришлось бы потратить, например, на поиск иконок и изображений для ваших дизайнов самостоятельно. Читай дальше, чтобы узнать больше.

Лучшие плагины Figma – содержание:

1. Установка плагинов
2. лучших плагинов Figma

Установка плагинов

Плагины — это скрипты или приложения, расширяющие функциональность Figma и FigJam. Вы можете найти и установить их через:

• Файловый браузер , нажмите Сообщество на боковой панели . Чтобы увидеть результаты, перейдите на страницу Community и выберите Plugins в верхней части страницы.

• Figma или Файл FigJam : щелкните Ресурсы на панели инструментов и выберите вкладку Плагины .

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

Установка плагинов очень проста – просто нажмите кнопку Попробовать рядом с выбранным плагином в списке или в его деталях. Figma перенаправит вас для редактирования файла, где вы сможете опробовать выбранный плагин.

Чтобы запустить плагин, нажмите кнопку Run .

Как только вы нажмете Run , вы сможете использовать плагин.

Если вам нравится плагин, вы можете его установить. Для этого нажмите кнопку Install , отмеченную значком с многоточием.

Лучшие плагины для Figma

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

1. Система сеток

Этот плагин поможет вам выбрать правильную сетку макета в вашем проекте. Ссылка: Grid-System

2. Clean Document

Как следует из названия, плагин Clean Document будет контролировать хаос и несоответствия в слоях, именах и группах в вашем файле. Это очень полезно, особенно когда вы хотите поделиться своим проектом с другими членами команды или клиентом. Ссылка: Чистый документ

3. Шкала шрифтов

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

 При включении Typescale необходимо выбрать текстовый слой, который будет базовым размером шрифта, и плагин сгенерирует заданное количество размеров соответственно — выше и ниже базового размера. Ссылка: Typescale

4. Катушка контента

Самостоятельно придумывать контент для проектов может быть сложно. Благодаря этому плагину вы можете вставлять автоматически сгенерированные адреса, определенные данные, номера, фотографии, аватары и значки. Ссылка: Content Reel

5. Найти и заменить

Этот плагин ищет и автоматически заменяет текст в файле. Это особенно полезно, когда вы работаете над большим проектом и вдруг решили внести изменения в контент. Ссылка: найти и заменить

6. Маркеры

Этот плагин используется для создания пользовательских списков маркеров. Ссылка: Bullets

7. Цветовые палитры

Этот плагин поможет вам выбрать правильные цвета для вашего проекта. Ссылка: Цветовые палитры

8. Iconify

С помощью этого плагина вы можете загружать значки Material Design, FontAwesome, значки Jam, EmojiOne, Twitter Emoji и многое другое в свой файл. Ссылка: Iconify

9. Unsplash

Благодаря этому плагину у вас под рукой будет целая галерея красивых фотографий. Ссылка: Unsplash

10. Создатель логотипа

Если вы ищете вдохновение для логотипа, вам обязательно понравится этот плагин. Вы можете выбрать логотип из готовых коллекций или создать свой собственный, используя доступные формы. Ссылка: Logo Creator

11. Румяна

С помощью этого плагина вы сможете создавать красивые персонализированные иллюстрации. Вы можете выбрать иллюстрацию из богатой коллекции и настроить ее параметры в соответствии с вашим дизайном. Ссылка: Blush

Вы только что прочитали о лучших плагинах Figma . Читайте также: Что такое исследовательские вопросы и как их писать?

Если вам нравится наш контент, присоединяйтесь к нашему сообществу занятых пчел на Facebook, Twitter, LinkedIn, Instagram, YouTube, Pinterest.

Автор: Клаудия Ковальчик

Графический и UX-дизайнер, который воплощает в дизайне то, что невозможно передать словами. Для него каждый использованный цвет, линия или шрифт имеют значение. Увлекается графическим и веб-дизайном.

Посмотреть все сообщения

Figma для начинающих:

1. Знакомство с Figma
2. Интерфейс Figma — основная информация
3. Основные настройки проекта в Figma
4. Как создавать фигуры в Figma?
5. Типографика в Figma
6. Библиотеки в Figma
7. Прототипирование в Figma
8. Инструменты для совместной работы в Figma
9. Лучшие плагины Figma
10. Как использовать Figma? 3 необычных способа

Создание лучших пуль.

Маркированные списки не должны быть скучными… | Валари Мартин Стюарт

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

Стоп. Перемотка назад. Попробуем еще раз.

Маркированные списки — отличный вариант, когда вам нужно разрушить серую стену текста. Маркированный список может:

• Привлечь внимание к важной информации
• Поддержать склонность вашего читателя пролистывать текст
• Более эффективно доносить идеи

Вы читали этот список легче и быстрее, чем первый абзац этой статьи? Точки, вероятно, было легче понять. Ваше внимание не рассеивалось.

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

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

Самое простое улучшение, которое вы можете внести в свой маркированный список, — это изучить расположение ваших пуль.

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

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

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

Рассмотрите возможность добавления цвета в список, изменив цвет маркера. Цвет привлечет внимание вашего читателя к вашему списку.

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

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

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

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

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

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

Убедитесь, что ваши значки соответствуют размеру и стилю. Все иконки должны иметь одинаковый визуальный вес. Толщина линий должна совпадать на всех значках. Смысл и значение иконы должны быть очевидны для читателя.

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

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