Создание таблиц в дизайн системе Figma и реализация в Storybook — Дизайн на vc.ru

Продолжение публикаций на тему создания таблиц из компонента а Figma

23 566
просмотров

В предыдущей статье на тему дизайна таблиц в Фигме мы выяснили, что базовый элемент создания любого data grid — это компонент ячейки, внутри которого спрятано все необходимое для того, чтобы оставаться в одном экземпляре и строить таблицы ячейка-за-ячейкой. Теперь поговорим о её структуре: какие элементы вложены, случаи использования, рассмотрим темификацию таблиц через токены-цвета. И напоследок расскажу о передаче спецификаций разработчикам и интеграцию таблиц в React/Angular фреймворки прямиком из Figma дизайн-системы. Пока руками, ибо будущее всё еще где-то рядом.

Поехали! Начну с демонстрации бесполезных, но прикольных эффектов кастомизации всей таблицы через главную мастер-ячейку:

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

Состав ячейки-компонента

Построение таблиц с помощью именно компонентов — алгоритм, который врядли требует каждый проект, если это не серьезная дизайн-система, которую используют и дизайнеры и разработчики внутри организации. Но раз уж Фигма дает компоненты, значит их нужно использовать по-максимуму. Состав ячейки формируется из вложенных слоев, часть которых спрятана. Чтобы создать универсальную ячейку на все случаи жизни, нужно знать о data grids всё и намного больше. Состав определяется исходя из того, насколько разнообразные мы хотим получать экземпляры ячеек.

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

Структура ячейки-компонента:

• Icon-L/R — две скрытые иконки, расставленые по краям ячейки слева и справа соответственно. По умолчанию их можно сделать видимыми, чтобы показать состояние сортировки. Icon-R можно активировать и заменить пиктограмму, например, для усиления действия, или отображения дополнительного функцонала
• Borders — четыре независимые линии прижатые внутри ко всем сторонам ячейки
• Caption — непосредственно текстовый элемент с содержимым
• BG — фоновый компонент, чтобы в будущем получать новые состояния

Давайте рассмотрим более детально каждый из пунктов.

Иконки (Icon-L/R)

Чтобы получить ячейку в состоянии сортировки, рекомендуется активировать слой Icon-L. Таким образом отсоединять экземпляр не требуется, достаточно переключать содержимое самой иконки, чтобы показать порядок сортировки по убыванию, или возрастанию. Считается, что в вашей дизайн-системе уже интегрирована любая библиотека пиктограмм и тогда направление стрелки быстро переключается через меню Instance. Сместить текст из-под иконки можно простым приемом, нажав несколько раз по пробелу и это не криминал:

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

Активация Icon-R пригодится в том случае, когда в ячейке необходимо показать возможность дополнительного действия. Например, многоточие для меню, или иконка карандаша, если ячейку можно редактировать:

Вы же помните, что экземпляры в Фигме можно заменять зажав Ctrl/Cmd в момент дропа?

Разделители (Borders)

Вкладывание независимых разделителей по четырем сторонам ячейки, увы, от безысходности вынужденный лайфхак. Мы все прекрасно понимаем, что дизайн-компонент по своим возможностям должен стремиться к компоненту в коде, а значит независимость бордеров должна задаваться на уровне свойств, а не костылями. К сожалению в Фигме это до сих пор нереализовано, а Axure, например, давно умеет. Бордеры особенно необходимы, чтобы управлять разделением контента вообще во всей таблице. Цвет, толщина, да хоть пунктиром. Таблицы творите как захотите:

Бордеры организованы в порядке слева-направо по часовой стрелке. Изменяя цвет для них в мастере, мы можем быстро изменять разделители во всех таблицах

Текст ячейки (Caption)

С этим элементом всё просто: текстовый элемент растянут практически по всей области ячейки, но с небольшими внутренними отступами, чтобы выравнивание чисел по правому краю смотрелось попорционально. Проставив констрейны Left & Right / Top & Bottom мы получаем неограниченное масштабирование по высоте и ширине с возможностью направлять текст как угодно без потери визуального качества.

Внутренние отступы от текстового поля до границ ячейки — 8dp. Для таблиц повышенной плотности можно использовать 4dp.

Фон (BG)

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

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

Таблицы в дизайн-системе. Токены

Стилизация и реализация

Эта статья не была бы полноценной без примеров реальных таблиц, которые были собраны по изложенным выше спецификациям (сейчас модно говорить дизайн-токен). Сейчас мы готовим all-in-one фреймворк в Figma / React / Angular для быстрого старта веб-приложений любой сложности. В этой системе будет собрано множество компонентов для решения любых задач прототипирования и разработки; и таблицы — это одна из необходимых секций, к которой мы отнеслись с повышенным вниманием. Итк, data grid таблицы доступны в четырех вариациях:

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

Доступно 4 стиля:

• Flat — простая data-first материальная таблица, но с небольшой кастомизацией
• Raised — таблица превращается в карточку
• Smooth — приобретает мягкое насыщение цветом
• Filled — окрашена полностью (специфический кейс, например для акцента)

Как видно из GIFки выше уделено внимание и состояниям: onHover, onClick, а также сортировка. Такая детализация стала возможным благодаря использованию дизайн-токенов из Figma, которые были переданы разработчикам в понятном виде. Оставалось только перехватить нужные оттенки из системы цветов в Setproduct Design System и прикрутить в готовый React фреймворк, чтобы получить такие data-grid, которые бы нас устраивали полностью. Таким образом, будущим пользователям нашей системы станет доступно много вариантов, которые основаны на одном и том же компоненте таблицы, но стилизованы разнообразно посредством SCSS.

Спецификации и цвета

Серый, 4 primary цвета и 4 alternative цвета. Есть и градиенты.

Честно говоря, описание нашего подхода к системе цветов требует отдельной статьи. Но не раньше, чем появится возможность захватить и хранение токенов и для темной темы в одной дизайн-системе. В этом fig файле в качестве демонстрации видно, что вся палитра цветов помимо объявления в глобальных стилях еще и сконвертирована в компоненты. Таким образом разработчики получают привязку цветовой системы к таблицам за минимум кликов в Фигме:

Экземпляры со спецификациями специально в shaped-стиле, чтобы глаз быстрее их отличал от компонентов, для которых следует описание

Простым переключением опции снизу в Storybook быстро меняем окрас таблицы.

Storybook позволяет вам быстро организовать предпросмотр всех стилей таблицы в в любом цвете. Очень годный сервис, помим функционала помогает отлавливать баги в стилях. Похожую концепцию “четырех стилей” мы проецируем вообще на все компоненты в нашей системе. Как-нибудь расскажу и об этом…

Вот и всё, что хотелось сказать об дизайне таблиц через компонент. Спасибо, что прочитали. В ближайшее время я планирую серию постов по упомянотому продукту — Setproduct Design System. Подписывайтесь на мой канал , если вам интересна тема универсальных инструментов для дизайна и веб-разработки. Там будут все анонсы!

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

Я везде — Dribbble, Behance, YouTube, Uplabs, Twitter, Reddit, Telegram, Instagram.

Таблицы в Figma. Дизайн Data Grid одним компонентом / Хабр

Строительство таблицы из компонентов — задача, которая рано или поздно возникает перед каждым разработчиком дизайн-систем в Figma.

Существует три подхода к дизайну таблиц, чтобы создать data grid с гибкой архитектурой. В каждом из случаев используется либо row-компонент, либо column-компонент, либо cell-компонент. Каждый из случаев подробно рассмотрим ниже.

Зачем всё это?

Зачем вообще всё запихивать в одну ячейку? Действительно ли среднему по размеру проекту требуется такая гибкость? Нужна ли компонентная архитектура для обычной таблицы?

Внутри большого командного проекта это единственный верный путь создавать новые data grid — через компонент. Это помогает генерировать больше вариантов и быстрее валидировать новые идеи.

Мои наблюдения показывают, что не все Figma-дизайнеры приучают себя работать с компонентами с самых ранних стадий нового проекта. Согласно недавнему опросу в Figma-чате чуть менее половины дизайнеров используют компоненты. Большая часть используют просто фреймы и copy-paste.

Но те, кому удалось переключить свой workflow на компонентный, скорее всего уже никогда не сделают шаг назад, потому что этот подход даёт больше гибкости и востребован среди организаций с собственным штатом дизайнеров. Хотите сохранить интерес к своей вакансии, если метите в крутую организацию, где уже работают в Figma — работайте с компонентами.

Тем не менее дизайнерам-фрилансерам я бы тоже рекомендовал использовать готовую UI-библиотеку. Можно делать дубликат под нового клиента и через мастер-компоненты быстро стилизовать под конкретные задачи.

Кстати, если вы используете Figma, я рекомендую обратить внимания на наши готовые дизайн-системы. Они помогают фрилансерам завершать больше заказов в месяц, программистам позволяют создавать красивые приложения самостоятельно, а тимлиды «пробегают» спринты быстрее, используя готовые дизайн-системы для командной работы.

А усли у вас серьезный проект, то наша команда готова развернуть дизайн-систему внутри организации на базе наших наработок и подогнать под конкретные задачи, используя Figma. Web / desktop, так и любой мобайл. С React / React Native мы тоже знакомы. Пишите в Т: @kamushken

Стили таблицы

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

Классика

Горизонтальные и вертикальные разделители хорошо заметны, заголовки выделены bold’ом и отделены фоном от ячеек с контентом. Эдакий Excel-style:

Контрастный заголовок

Разделители могут отсутствовать, либо могут быть только горизонтальными. Благодаря интенсивным заголовкам, такие data grid быстро разделяются взглядом, если их много на одном дашборде:

Материальная таблица

Data-first подход. Такие таблицы можно встретить в material design. Более интенсивный верхний разделитель и однопиксельные внутренние качественно разделяют данные:

Черезполосица

Эти таблицы прямиком из прошлого, но по сей день использование чередования серых и белых рядов часто встречается в современном UI:

Минимализм

Ничего, кроме данных! Это вполне обосновано на плотных десктопных интерфейсах, где на счету каждый пиксель:

Использование компонентов для создания таблицы

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

Row-компонент

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

С бордерами внутри каждой ячейки тоже предстоит поработать, различия присутствуют:

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

Pros: высоту Row удобно регулировать. Идеально подходит для dashboard-проектов, в которых часто меняются горизонтальные состояния в проекте: onHover, onSelected, onFocus и так далее и специфика разработки требует частого переключения между ними:

Column-компонент

Впервые эта идея пришла мне в голову чуть более года назад и я реализовал её в поздних версиях Material Design System для Фигмы. Таблицу удобно было бы собирать из компонентов-колонок, внутри которой заранее предопределено и размножено N-количество рядов, а все лишние срезались бы за границей фрейма через опцию Clip Content. Тогда было бы достаточно потянуть фрейм вниз за нижнюю границу, чтобы показать больше дополнительных ячеек в колонке:

Cons: внутри компонента не удастся регулировать высоту каждой ячейки (горизонтальный шаг), так как иначе не получится реализовать «срезание лишнего».

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

Совет: можно держать три таких компонента с разным шагом: S-32px / M-48px / XL-64px, например, и в какой-то степени решить проблему плотности ячеек. Особенно полезно в случае создания и мобильных и десктопных темплейтов внутри одного проекта / team library.

Cell-компонент

Использование ячейки-компонента даёт максимальную гибкость в стилизации таблицы. Редко какой проект требует использования и Material-стиля, и классического для data grid. Но если вы фрилансер, который регулярно создает новые дашборды своим клиентам из собственной или коммерческой базы компонентов, то вам лучше начинать с ячейки, из которой вы вы будете кирпичик-за-кирпичиком создавать таблицы. Потом будет достаточно вложить четыре линии, прижать их по бокам ячейки, расставить constraints и генерировать новые стили.

Убер-фича: в своей мобильной iOS12 библиотеке для Figma, я могу все перевернуть с ног на голову через компонент 🙂 Кстати, именно на основе макетов из этого продукта и были сделаны материалы к данной статье:

Cons: практически нет, разве что этот подход требует больше времени и навыков

Pros: максимальная гибкость, возможность управлять сеткой с помощью одного компонента, регулировать разделители, background, вложенные иконки и многое другое.

Подробный состав такой супер-ячейки я рассмотрю в следующем выпуске.

Исходник с компонентами доступен тут.

Подписывайтесь на мой канал, там будут все анонсы! Особенно учитывая, что сейчас мы пилим собственную дизайн-систему для решения многих задач по дизайну и веб-разработке одним махом. Это компоненты в Figma-исходников и React/Angular NPM пакетов. С абсолютно идентичным дизайном, немного лучше чем у Google Material 🙂 Я регулярно публикую новые веселые картинки об этом продукте. Трансляцию о разработке ведём практически в прямом эфире.

Сейчас многие организации переводят свои дизайн-отделы на Figma. Возникает вопрос: разбираться самим как с нуля её создать из компонентов с правильной структурой, или взять одну из готовых под iOS, Android, Web или для десктопных приложений. Любую из Figma UI библиотек можно развернуть внутри организации и получить сотни качественных компонентов и темплейтов для создания Ваших будущих продуктов. Узнайте больше на setproduct.com

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

Как добавить таблицы в Figma (простые шаги)

Вы учитесь использовать Figma? Вам интересно, является ли Figma хорошим инструментом дизайна?

Да. Figma за последние несколько лет стала популярной благодаря удобному интерфейсу и универсальности.

С Figma проектирование стало таким же простым, как ABC!

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

Если вы новичок в Figma, прочитайте наши Руководства по Figma.

Что вас еще сдерживает? Расслабьтесь и прочитайте следующее простое руководство по компоненту таблицы Figma.

Читайте также : Figma против Figjam: разница

Как создавать таблицы в Figma

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

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

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

Вот как вы создаете таблицы в Figma за 7 шагов:

Шаг 1: Добавьте текст на холст в Figma

Мы начинаем с добавления текста на холст Figma. Позже мы преобразуем этот текстовый элемент в ячейку таблицы.

На панели инструментов используйте инструмент «Текст», чтобы написать текст на холсте Figma. Поскольку мы создаем таблицу в этой демонстрации, давайте назовем текст «Ячейка».

Так ваш текст будет отображаться на холсте.

Шаг 2: Добавьте автомакет к текстовому элементу в компонент

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

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

Чтобы добавить автомакет, щелкните текст правой кнопкой мыши и выберите Добавить автомакет.

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

Ура! Это первая ячейка вашей таблицы.

Шаг 3: Добавьте вариант фрейма

Чтобы создать столбец, нам нужна одна ячейка заголовка (которая содержит метки столбцов) и по крайней мере одна ячейка тела (которая включает основное содержимое).

Чтобы создать другую ячейку, мы будем использовать свойство Create Component .

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

Выберите « Создать компонент », щелкнув правой кнопкой мыши по рамке.

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

Подождите, изменения вносятся не здесь.

Нажмите знак плюс «+» рядом со свойствами на боковой панели справа и выберите вариант. Это создаст вариант рамки на вашем холсте.

Нажмите кнопку «плюс», которая появляется под рамкой. И у вас будет готова вторая камера.

Переименуйте кадр с «Кадр 1» на «Ячейка». Ячейка состоит из одного заголовка и одной основной ячейки вашей таблицы.

Шаг 4. Переименуйте два фрейма

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

Переименуйте ячейку по умолчанию в «Заголовок», так как это первая ячейка столбца.

Переименуйте новый вариант в «Body».

После переименования обеих ячеек изменения отобразятся на левой боковой панели в разделе «Слои».

Затем, чтобы разница между двумя ячейками была видна, измените цвет заголовка.

Используйте свойство «Заливка» на правой боковой панели, чтобы изменить цвет ячейки.

Две клетки теперь легко различимы.

Шаг 5: Создайте столбец, используя две ячейки

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

Скопируйте заголовок и дважды вставьте его на артборд в Figma. Чтобы активировать монтажную область, щелкните значок плюса «+» на клавиатуре.

Измените свойство второй ячейки на «Тело». Для этого щелкните свойства ячейки на правой боковой панели и измените свойство с «Заголовок» на «Тело».

Затем переименуйте все выделение с «Frame 1» на «Column».

У вас будет столбец с одним значением записи и заголовком.

Дублируйте основную ячейку, чтобы создать столбец с четырьмя входными значениями.

Ура! Ваш первый столбец таблицы готов.

Шаг 6: Дублируйте столбец, чтобы создать таблицу

Теперь пришло время создать строки таблицы.

Дублируйте только что созданный столбец, чтобы создать таблицу с пятью столбцами и пятью строками.

Наконец, переименуйте всю таблицу из «Столбец» в «Таблица».

Погладьте себя! Вы создали таблицу в Figma.

Шаг 7: Добавьте значения в таблицу

Но что хорошего в таблице без значений? Добавьте нужные значения в таблицу, чтобы придать ей последний штрих.

Вот созданная нами демонстрационная таблица.

Вот как вы добавляете таблицы в Figma, используя компонент таблицы Figma.

Зачем использовать Figma для проектирования?

Почему Figma становится все более популярным инструментом дизайна? На это есть не одна причина.

• Его можно использовать с несколькими операционными системами, включая Windows, macOS и веб-браузеры . Он доступен пользователям в любом месте.
• Он известен своей универсальностью в различных дизайнерских задачах, таких как UI/UX дизайн, графический дизайн и прототипирование.
• Функция перетаскивания пользовательского интерфейса Figma упрощает создание проектов.
• Поскольку Figma имеет облачную совместную работу , команды из нескольких человек могут редактировать проекты в режиме реального времени. Это упрощает выполнение проектов и экономит массу времени.
• Figma предлагает интеграцию с рядом инструментов. Jira, Trello и Slack — это лишь некоторые из приложений, которые можно интегрировать с Figma. Командам становится проще управлять своими дизайнерскими проектами и сотрудничать с другими командами.

Заключение

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

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

Как добавить таблицы в Figma: часто задаваемые вопросы

В. Как настроить внешний вид таблицы в Figma?

Чтобы настроить внешний вид таблицы в Figma, выберите таблицу и перейдите на панель «Свойства». Здесь вы можете настроить границу таблицы, цвет фона, размер шрифта и другие параметры.

В. Могу ли я добавить интерактивные элементы в таблицу Figma?

Да, вы можете добавлять в таблицу Figma интерактивные элементы, такие как ссылки или кнопки. Для этого выберите элемент, которому вы хотите добавить интерактивность, и перейдите на панель «Прототип». Оттуда вы можете указать действие, которое должно выполняться при нажатии на элемент.

В. Как мне поделиться таблицей Figma со своей командой?

Чтобы поделиться таблицей Figma со своей командой, перейдите в меню «Поделиться» и выберите «Поделиться прототипом». Оттуда вы можете указать членов команды, с которыми вы хотите поделиться таблицей, и установить их права доступа.

Читайте также:

• Как сделать эффект сбоя в Figma

• Как скруглить углы в Figma

Как делать таблицы в Figma — наконец-то хорошо | Клара Шоллеова | Etnetera Activate

Опубликовано в

·

Чтение через 6 мин.

·

4 декабря 2020 г.

003

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

1. Figma ввела индивидуальные границы, так что нет всех хлопот, описанных ниже, и все намного проще. Принцип создания только компонентов ячейки и превращения вашего заголовка в локальный главный компонент, который управляет поведением строк (которые являются экземплярами строки заголовка), остается.
2. Хорошие люди из интернета сделали плагины, построенные на этом принципе, в частности Table Creator, которым вы можете пользоваться. Тем не менее, я бы порекомендовал понять принцип и Autolayout, чтобы вы не зависели от плагинов и их требований и понимали, что вы вкладываете в свою дизайн-систему.
3. Есть простой способ клонировать уже созданную таблицу — либо используйте Simple Cloner, либо просто выберите свою работающую таблицу и поместите в консоль figma. currentPage.selection[0].clone(). Тадаа!

Ура и для исторических целей, ниже оригинальный текст.

===

Вероятно, любой дизайнер UX/UI, который какое-то время использовал Figma, прошел через борьбу: лучше строить таблицы по строкам или столбцам? Пожертвовать возможностью легко добавлять, дублировать и переключать записи данных (строки) или жертвовать возможностью быстрого переключения, изменения размера и стиля столбцов?

Забудьте о борьбе — теперь с новыми функциями Autolayout и секретным трюком мы можем построить стол, в котором есть все!

Вы можете продублировать и следовать этому руководству здесь, в Ресурсах сообщества (настоятельно рекомендуется, чтобы вы могли получить в свои руки все) и/или (и то, и другое лучше :)) также продолжить в статье!

Figma — Как делать таблицы в Figma 2020 (благодаря Autolayout 3.0) | Руководство по сбору новых…

Файл сообщества Figma — руководство по сбору новых Autolayout 3.

0 для создания таблиц, которые легко поддерживать как с помощью…

www.figma.com

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

9015 9 имеет выравнивание содержимого ячейки, как в настоящий Excel (вау)

• хорошо реагирует — регулирует ограничивающую рамку в соответствии с изменением размера строки/столбца и настраивает содержимое при изменении размера в целом (не шучу)

Почему многие из этих вещей сейчас просты и возможны, а не Раньше были настройки Hugs (awh), Fills и Alignment, появившиеся в последнем обновлении Autolayout 3.0, выпущенном в ноябре 2020 года. Hugs and Fills позволяют использовать всю магию изменения размера; Выравнивание сделает магию выравнивания содержимого ячейки.

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

Теперь давайте наконец сделаем это, хорошо?

В этом уроке я сосредоточусь на демонстрации принципа, создав довольно простую таблицу с одним стилем заголовка, одним стилем тела и только нижней границей. Тем не менее, если вы хорошо понимаете эти основы, вы можете применить их для создания массивного набора пользовательского интерфейса таблицы с десятками различных стилей и типов ячеек и границ. Намеренно я не выбираю простой «обводка кадра здесь» — это не научит вас, как сделать любой границей (но скрестив пальцы, обводка кадра однажды узнает отдельные границы).

Давайте разберем это посложнее:

Начиная снизу (теперь мы здесь), во-первых, нам нужно, чтобы ограничивающая рамка текста подстраивалась под его ширину. Легко, для текстового слоя это старый добрый ↔. Назовите свой слой Текст, чтобы переключение вариантов работало позже!

Затем нам нужно автоматически разместить текст со стрелками, чтобы мы могли контролировать выравнивание и зазор, а также нам нужно обнять его (ааа), чтобы контролировать эту ограничивающую рамку:

Ограничения слоя «Текст и стрелки»

Теперь займемся выравниванием ячеек, хе-хе! Это содержимое (здесь текст и стрелки) должно находиться в контейнере, который заставит его вести себя как… ячейка, поэтому здесь это «Ячейка» (выше в списке слоев). Нам нужно это, чтобы Заполнить всю рамку варианта компонента «Ячейка таблицы / Заголовок», чтобы он мог контролировать выравнивание содержимого внутри. Выравнивание ячейки — это именно то, что мы обещали — выравнивание содержимого ячейки! Вы можете изменить это здесь позже или сделать варианты для разных мировоззрений…

Ограничения «Ячейка» с настройкой содержимого в левом верхнем углу.

Наконец, вся ячейка заголовка представляет собой автомакет ячейки и линии, которая образует нашу нижнюю границу (вы можете сойти с ума, когда получите контроль над этим). Существует отступ в 1 пиксель, поэтому строка присутствует полностью даже при включенном содержимом клипа. Мы изменим содержимое Hug (остановившись на awh, это смущает) на ширину позже, но сейчас давайте сохраним его — это будет полезно при создании базы для вашей таблицы, потому что у вас будут ячейки заголовков, настроенные на имена столбцов, как вы будете введите имена столбцов.

«Заголовок» (ячейка таблицы > Тип=Заголовок) ограничения

Основная ячейка почти такая же, как , только проще (без стрелок). Однако важно то, что это имеет фиксированную ширину на верхнем уровне, поэтому позже она подстраивается под ширину столбца:

«Тело» (ячейка таблицы > Тип = тело) ограничения

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

Заголовок и ограничения

И теперь, самое главное,

сделать строку заголовка компонентом, чтобы строка заголовка стала ❖ строкой заголовка.

Затем продублируйте строку заголовка в новом (вертикальном) автомакете и измените тип ячеек на Body.

Что ж, возможно, вы удивитесь, но мы почти закончили! Теперь просто продублируйте свои строки и посмотрите, как происходит волшебство:

Что вы можете сделать сейчас:

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

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