10 лучших практик Figma, которые улучшат ваш рабочий процесс в 10 раз

Лучшие примеры отрасли, которые позволяют проектировать в Figma как senior-дизайнер.

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

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

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

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

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

Благодарность: David Shackelford // dribbble.com/davidshackelford

2. Добавьте обложку к файлу Figma

При управлении различными проектами и файлами Figma может быть сложно сразу найти нужный проект.

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

Чтобы добавить обложку, вам нужно:

1. Создайте страницу в документе и назовите ее «cover» (необязательно).
2. Нарисуйте фрейм для изображения обложки (лучше всего подходит размер 1920 x 960)
3. Наполните его изображениями, например, логотипом или чем-то еще, что поможет вам и вашим товарищам по команде узнать проект.
4. Щелкните правой кнопкой мыши по фрейму и выберите «set as thumbnail».

3. Используйте стили для всего

Подумайте о стилях, как о компонентах цвета, текста, эффектов и обводки.

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

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

Кроме того, если вы захотите организовать свои компоненты в папки, такие как «Brand Colors», используйте в именах слеш: Brand Colors / Primary.

4. Организуйте наборы вариантов с помощью функции auto-layout

Знаете ли вы, что можно организовать варианты с помощью auto-layout? Выделите фрейм набора вариантов и нажмите SHIFT + A. С auto-layout очень просто упорядочить и переупорядочить компоненты.

Это подводит нас к следующему пункту . ..

5. Используйте auto-layout с умом

Умение использовать функцию auto-layout – один из (если не самый важный) навык, которым должен овладеть любой современный UI-дизайнер.

Функция auto layout кардинально меняет правила игры в продуктовом дизайне – она ​​позволяет нам более точно учитывать, как разрабатываются продукты, и поддерживать согласованность и масштабируемость в нашем файле дизайна.

Если вы еще не освоили auto-layout, я могу порекомендовать бесплатный ускоренный курс Пабло Стэнли

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

Я проектирую каждую страницу, используя auto-layout, поэтому я могу быстро регулировать интервалы или добавлять и удалять контент без необходимости выравнивать пиксели для повторного выравнивания элементов.

6. Создавайте схемы юзерфлоу из своих экранов

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

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

Благодарность: Mike Rogers // dribbble.com/mikewrogers

7. Используйте ограничения

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

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

8. Создавайте шаблоны для компонентов

Создание компонента для карточки профиля – это здорово, но что делать, когда у нас есть список профилей? Именно здесь шаблоны сэкономят массу времени и сделают нашу жизнь в 10 раз проще.

Идея шаблонов была популяризирована Брэдом Фростом в книге «Atomic Design Methodology», и это довольно простая концепция.

Вот как это работает: допустим, у нас есть компонент поста в блоге – он содержит изображение и текст. Что ж, мы могли бы просто разместить этот компонент 10 раз на каждом артборде, для чего нужен список блогов, или мы можем создать другой компонент, в который компонент блога будет вложен 10 раз.

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

9. Организуйте компоненты

Нет ничего хуже, чем открыть чей-то файл дизайна и понять, что у меня нет возможности внести изменения в основные компоненты, не щелкнув правой кнопкой мыши и не выбрав пункт «go to the main component», потому что они не организованы.

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

Чем лучше будет выглядеть файл дизайна, тем лучше будут выглядеть сами дизайны.

10. Используйте Loom

Что такое Loom? Loom позволяет записывать экран и быстро отправлять видео, когда у вас нет времени набирать кучу текста. Это был незаменимый инструмент при удаленной работе, который сэкономил мне бесчисленное количество встреч и драгоценные часы, которые я могу потратить на дизайн.

Если члены вашей команды работают в разных часовых поясах или не хватает свободного времени – попробуйте использовать Loom для критики асинхронного дизайна и обмена проектами.

Подписывайтесь на автора в Twitter, Dribbble и Medium, вы также можете связаться с ним в LinkedIn.

Перевод статьи uxdesign.cc

10 лучших UI-китов в Figma для вашего проекта — Дизайн на vc.ru

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

82 795
просмотров

Поэтому, я собрал десять самых интересных UI-китов в Figma, которые могут облегчить вашу работу над проектом. Погнали!

Поддержите мое видео!

01. Food delivery app Ui kit

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

02. Сontra wireframe kit

Это стартовый набор каркасов для быстрого проектирования и прототипирования ваших идей. Его библиотека содержит более 150+ компонентов и 50+ готовых к использованию мобильных экранов. Вы также можете легко создавать новые компоненты и экраны с помощью руководства по стилю.

03. Набор элементов для iOS & iPadOS 14

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

04. Material Design UI kit

UI-комплект Material Design основан на стилизованных рекомендациях, совместимых с официальными спецификациями. Он содержит в себе впечатляющее количество настраиваемых и готовых к использованию компонентов, которые можно использовать. Этот пак подойдет для использования в Android приложениях. Так что, если вам нужны элементы для создания приложения, вы можете использовать набор Material Design.

05. Lo-fi Wireframe Kit

Это интересный набор из прототипов рисованного типа. Если Нужно красиво показать проектирование сайта, либо приложения этот пак поможет вам сделать это. Библиотека состоит из более чем 100 компонентов проектирования, которая поможет вам быстрее работать над проектами! В набор входят кнопки, текстовые поля, вкладки, изображения и множество вариантов их использования. А гибкие компоненты, помогут использовать элементы как для мобильных экранов, так и для пк.

06. Pegasus

Система дизайна Pegasus — это гибкий, удобный и доступный набор компонентов, сделанный в Figma. Этот набор создан с использованием компонентов Variants для увеличения скорости рабочего процесса. В библиотеку дизайн системы входит: 300+ компонентов, 72+ оригинальных иконок. Так что, если вам нужны элементы для создания мобильного или веб приложения, то смело используйте этот набор.

07. Figma Wireframe Kit

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

08. Mobile UI kit

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

09. Figma Charts Infographics UI kit

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

10. Ant Design System

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

❤ Если тебе понравилась статья то поддержи ее лайком, а я продолжу делиться полезным о дизайне 🙂
👋🏻 Я открыт к сотрудничеству, пишите в Телеграм

👉🏻 Также я есть здесь Intagram YouTube Behance

Ознакомьтесь с более чем 300 бесплатными шаблонами дизайна и белой доски

Ознакомьтесь с более чем 300 бесплатными шаблонами дизайна и белой доски | Figmafigma

Або всего в одном дизайнерской платформе

DesignPrototygingDesign SystemsWardsloads

Figjam

Интернет-доска для команд

онлайн-белая доска. и используйте

Плагины и виджеты

Расширение возможностей и автоматизация работы

Мероприятия и прямые трансляцииПередовой опытОбразовательная программаГруппы пользователей

FrançaisDeutsch日本語

ВойтиНачать работу

Начать работу

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

Избранное Figma

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

Комплекты каркасов

Ускорьте рабочий процесс проектирования с помощью нашего комплекта каркасов на основе компонентов.

Шаблон дорожной карты разработки продукта

Переход от проектного предложения к готовой покупке в кратчайшие сроки.

Шаблоны квартального планирования

Сделайте планирование более инклюзивным, продуктивным и увлекательным

Подробнее

Шаблоны для мозгового штурма

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

Шаблон блок-схемы

Организуйте детали таким образом, чтобы это имело смысл с этой блок-схемой.

Шаблон для мозгового штурма

Откройте для себя свои лучшие идеи в ходе совместного мозгового штурма.

Шаблон документа с требованиями к продукту

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

Подробнее

Шаблоны стратегического планирования

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

Шаблон Lean Canvas

Разбейте свою бизнес-модель и упростите работу с помощью Lean Canvas.

Шаблон планирования запуска продукта

Создайте четкое и четкое объявление о запуске продукта, используя наш направляющий шаблон.

Шаблон SWOT-анализа

Оцените свою компанию с точки зрения потенциальных возможностей и проблем.

Подробнее

Шаблоны исследований и дизайна

Храните свои дизайнерские идеи, исследования UX, макеты и заметки по контролю качества в одном месте с помощью шаблонов FigJam, которые работают вместе с плитками Figma.

Шаблон опроса пользователя

Отслеживайте данные опроса пользователя с помощью этого общего шаблона в FigJam.

Шаблон карты эмпатии

Отслеживайте поведение и отношение пользователей с помощью диаграммы карты эмпатии.

Примеры миниатюрных эскизов

Быстрый мозговой штурм с изображениями, чтобы открыть новые уровни творчества.

Подробнее

Шаблоны совещаний

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

Шаблон заметок к собранию

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

Шаблон стартового совещания по проекту

Правильно начните свой проект и охватите все важные темы.

Шаблон Reflection for Meetings

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

Подробнее

Шаблоны диаграмм

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

Шаблон диаграммы Венна

Сравнивайте новые уровни, записывая сходства и различия.

Шаблон инфографики

Придайте своим данным новый вид с помощью красочной инфографики, которой можно поделиться.

Шаблон организационной схемы

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

Подробнее

Изучите более 1000 шаблонов в сообществе Figma

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

See more

• Twitter
• YouTube
• Instagram
• Facebook

Use Cases

• UI design
• UX design
• Graphic design
• Wireframing
• Diagramming
• Brainstorming
• Templates
• Remote дизайн
• Агентства
• Figma для образования

Обзор

• Особенности дизайна
• Особенности прототипирования
• Design systems features
• Collaboration features
• Design process
• FigJam
• Pricing
• Enterprise
• Organization
• Professional
• Customers
• Security
• Integrations
• Contact

Resources

• Blog
• Лучшие практики
• Поддержка
• Разработчики
• Изучение дизайна
• Загрузки
• Что нового
• Releases
• Careers
• About us
• Agency partners
• Privacy
• Status

Compare

• Sketch
• Adobe XD
• Invision Studio
• Framer
• Design on Windows
• Miro

Design Systems For Figma

Фильтрация по:

Тег

Показано 0 результатов из 0 элементов

Поиск по ключевому слову

Очистить

Язык

Android

Angular

Java

JavaScript

Other

React

React Native

TypeScript

Vue

iOS

Theming Support

Dark Mode

Design Tokens

N/A

Предложить систему

Спасибо! Ваша заявка принята!

Ой! Что-то пошло не так при отправке формы.

AWS Amplify

Amazon Web Services

Языки:

Angular

Поддержка темации:

N/A

Система дизайна ANT

Группа ANT

Языки:

TypeScript

. System

Atlassian

Языки:

Поддержка тем:

Н/Д

Backstage Design System

Spotify

Языки:

TypeScript

Поддержка темации:

Dark Mode

Система проектирования базовых проектов

Uber

Языки:

TypeScript

Блоки.

Поддержка тем:

Н/Д

Bold Design System

Laboratorio Bridge

Языки:

Поддержка тем:

Темный режим

Carbon Design System

IBM

Languages:

Angular

Theming Support:

Dark Mode

Chakra UI

Chakra UI

Languages:

TypeScript

Theming Support:

Dark Mode

Chicago Design System

City of Chicago

Языки:

Поддержка тем:

Н/Д

Clarity

VMware

Языки:

Angular

Поддержка тематической поддержки:

Dark Mode

Система дизайна Cloudscape

Amazon Web Services

Языки:

TypeScript

Deming Support:

Dark Mode

Tokkens

903

Языки:

Android

Поддержка тем:

Темный режим

Маркеры дизайна

Elastic Design System

Elastic

Языки:

Поддержка тематической поддержки:

Dark Mode

Evergreen

Сегмент

Языки:

. Поддержка тем:

Темный режим

Flamingo Design System

Heetch

Языки:

Поддержка тем:

Н/Д

Fluent Design System

Microsoft

Языки:

TypeScript

Поддержка темации:

Dark Mode

Design Tokens

Forma 36

Contentful

Язы

mobileLIVE

Языки:

Angular

Поддержка тем:

Н/Д

GOV.UK Design System

Цифровая служба правительства

Языки:

Поддержка темации:

N/A

Garden

Zendesk

Языки:

Поддержка тематической системы:

N/A

Goldman Sachs System

Goldman SACHS

LACHS 9003

LACHS

.

Dark Mode

Design Tokens

Intergalactic

SEMRUSH

Языки:

Поддержка тем:

Kyper Design System

MX