В этой статье мы расскажем о том, как мы использовали Figma и Tailwind для редизайна нашего открытого инструментального завода. Статья будет полностью посвящена тому, как быстро создавать красивые пользовательские интерфейсы. Вам не нужны никакие предварительные знания, чтобы понять эту статью.
После этой статьи вы будете знать:
- Почему Figma и Tailwind — это отличная комбинация для создания красивого пользовательского интерфейса.
- Как можно быстро создать единый дизайн
- Эти макеты стоят потраченного времени! 🙂
Наши изменения в пользовательском интерфейсе
Чтобы перейти к этой статье, мы сначала хотим показать вам, как выглядел наш экран ручной маркировки. Боковая панель слишком доминировала, а цветовая кодировка и цвета этикеток были немного мрачными. Мы знали, что наш пользовательский интерфейс нуждается в некоторых улучшениях.
Поэтому мы создали несколько макетов с помощью Figma и Tailwind — пожалуй, одной из лучших комбинаций дизайнерских инструментов. Figma отлично подходит для быстрого и совместного создания высококачественных макетов. В отличие от него, Tailwind предлагает большой набор предопределенных классов и компонентов для вашего веб-приложения — и он поставляется с удивительно хорошо разработанным набором шаблонов Figma. В течение нескольких часов мы создали следующий макет:
Показав эту страницу пользователям, мы увидели, что она не только лучше выглядит, но и обеспечивает лучший рабочий процесс. Отсюда мы решили реализовать макет в Tailwind. Результат практически полностью совпал с макетом, как вы можете видеть здесь:
Поэтому, помня об этом, мы хотим показать вам, как мы это сделали.
Не начинайте с нуля!
Во-первых, важно знать, что в Figma есть наборы шаблонов. Вы можете просмотреть их в своей библиотеке или в библиотеках сторонних разработчиков. Так что вам не нужно перестраивать все самостоятельно!
Наш совет — используйте шаблоны, HTML-коды которых у вас тоже есть. Это позволило нам легко переключаться между макетами Figma и реализованными элементами пользовательского интерфейса без потери дизайна. Но вы также можете создавать HTML-файлы с нуля.
В нашем случае мы импортировали шаблон Tailwind в Figma и получили доступ к элементам макета:
Эти же элементы доступны в библиотеке компонентов пользовательского интерфейса Tailwind:
И это касается не только высокоуровневых элементов, таких как макет вашего экрана, но и детальных элементов, таких как бейджи:
Сначала реализуйте свои экраны в Figma
Отсюда становится легко перетаскивать элементы в нужный вам макет. После 15 минут игры с ним вы уже должны чувствовать себя комфортно, создавая пользовательские макеты в Tailwind, и вам не потребуется много усилий, чтобы превратить эти макеты в оболочки пользовательского интерфейса.
Мы разработали его не только для одного, но и для нескольких экранов; примерно 95% вещей, которые вы можете увидеть в нашем приложении, были сначала разработаны с помощью макетов.
Причина, по которой мы так поступили, заключается в том, что это помогло нам обеспечить последовательность во всем приложении. Это облегчило членам нашей команды получение ранних отзывов обо всем рабочем процессе приложения и о том, как пользовательский интерфейс будет отличаться от нашей предыдущей версии. В конечном итоге это также позволило нам гораздо быстрее реализовать пользовательский интерфейс. Как только макет был готов (для этой версии, конечно, мы уже улучшаем его в наших следующих грядущих версиях), нам «просто» оставалось реализовать оболочку.
Мы считаем, что Figma и Tailwind — это лучшие комбинации для создания красивых пользовательских интерфейсов, но есть много отличных альтернатив. Самое главное, что этот подход помогает вам построить то, что было обсуждено и согласовано, за короткое время. Мы продолжим строить наше приложение на основе макетов и будем обсуждать их с нашим сообществом 🙂
Если вам интересно увидеть приложение, построенное таким же образом, посмотрите на наш инструмент с открытым исходным кодом refinery. Также, не стесняйтесь присоединиться к нашему сообществу в Discord, если у вас есть вопросы.