Как создать новый проект в фигма
Перейти к содержимому

Как создать новый проект в фигма

  • автор:

Создаем первый проект в Figma

Создаем первый проект в Figma

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

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

Сегодня мы выясним:

  • Что такое команда в Figma и зачем она нужна. (п. 1)
  • Что такое проект и как его создавать вFigma (п. 1)
  • Что такое файл, как его создавать, редактировать и приглашать новых участников команды. (п. 2)
  • Что такое страницы и слои вFigmа и зачем они нужны. (п. 3)
  • Что такое фреймы, как их создавать для разных типов устройств (п. 3)
  • Как настраивать сетки для фреймов (п. 4)

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

1. Создание проекта

Зайдите на сайт figma.com и авторизуйтесь. (Log in)

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

Команда в Figma (Team) – это группа людей, которые одновременно могут работать над общими проектами. Каждому члену команды отводится своя роль и права. В бесплатном тарифе над проектом могут работать 2 члена команды.

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

Создаем первый проект в Figma

В появившемся окне задайте имя проекта (First_project) и права доступа.

  • Every one of (имя команды или имя пользователя) can edit – все члены команды могут редактировать проект – выберите этот вариант
  • Every one of (имя команды или имя пользователя) can view – доступен только просмотр файлов
  • Invite-only – доступ возможен по индивидуальным приглашениям.

Проекты в Figma (Project) – это группа файлов, с которыми работают участники команды. Например, проект First_project может содержать файл First_project_RUS с дизайном макетов для русскоговорящей аудитории и First_project_ENG для англоязычной аудитории. В бесплатном аккаунте можно создавать 3 проекта.

2. Создание файла

Создайте новый файл, нажав на кнопку + New File

Создаем первый проект в Figma

Появится рабочая область Figma с именем файла по умолчанию Untitled. Переименуйте его в File 1, щелкнув левой клавишей по названию.

Создаем первый проект в Figma

Файлы – это набор макетов страниц сайта или мобильного приложения

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

Создаем первый проект в Figma

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

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

Создаем первый проект в Figma

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

3. Создание фрейма

Включите линейку разметки, чтобы можно было работать с направляющими как в Photoshop – Shift + R

Теперь создадим первый фрейм.

Фрейм (Frame) – это контейнер для хранения объектов (кнопок, изображений, полей ввода), которому можно задать размер выбранного устройства.

В левом верхнем углу на панели инструментов нажмите на кнопку создания фрейма (Frame).

На панели Design справа выберите тип устройства, например, Iphone 8

Создаем первый проект в Figma

После этого в рабочей области появится прямоугольник (фрейм) с названием Iphone8 – 1.

На панели Layers (слои) слева так же появится название нашего фрейма.

Здесь вы можете:

  • Переименовать фрейм, щелкнув 2 раза левой клавишей мыши,
  • Скрыть или показать, нажав на значок с глазом;
  • Заблокировать или разблокировать (значок с замочком)
  • Вызвать контекстное меню со списком настроек фрейма, речь о которых пойдет в другой раз.

Создаем первый проект в Figma

В Figma есть возможность создания страниц (Page), которые напоминают Группы в Photoshop. Они содержат набор фреймов и слоев, которые создает пользователь. По умолчанию существует страница Page1. Можно создать новую страницу, нажав на клавишу + напротив списка Page и создавать уже для нее новый набор фреймов и слоев. Переключаться между страницами легко, выбирая в списке нужное название. При этом будут видны слои, создаваемые на данной странице.

Справа на панели Design, вы увидите список настроек фрейма.

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

4. Настройка сетки

На панели Design можно задать сетку для фрейма (Grid).

Нажмите на кнопку + напротив пункта Layout Grid

По умолчанию появится базовая сетка Grid с ячейкой в 10 px.

Создаем первый проект в Figma

В проекте можно использовать несколько сеток.

В том же пункте Layout Grid нажмите на +, чтобы добавить новую сетку и измените ее настройки (Layout Grid Settings) следующим образом.

Создаем первый проект в Figma

  • вид — колонки (Columns)
  • количество колонок (Count) – 4,
  • цвет (Color) — черный с прозрачностью 10%,
  • тип (Type) – растянуты по ширине (Stretch)
  • расстояние между колонками (Gutter) — 25 пикселей.

Такой вид сетки очень удобен при создании адаптивного дизайна .

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

Чтобы выключить или включить все сетки на фреймах используйте горячие клавиши Ctrl + G

Продолжайте изучать Figma c блогом «Дизайн в жизни»!

ЧИТАЙТЕ ТАКЖЕ
Рисуем дизайн первой страницы приложения в Figma Рисуем дизайн первой страницы приложения в Figma Начинаем рисовать дизайн приветственной страницы и узнаем еще больше нового о Figma

Со многими тонкостями мы еще столкнемся в процессе работы, но начало уже положено. Пока Figma не кажется мне слишком сложным редактором. Имея опыт работы в Photoshop или Sketch можно провести аналогии со многими операциями в программе.

Подписывайтесь на обновления блога «Дизайн в жизни»

по e-mail или социальных сетях

  • Share on Vkontakte
  • Share on Telegram

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

  • Share on Vkontakte
  • Share on Telegram
  • Share on Pinterest
  • Share on Twitter
  • Share on Email

Урок #7 – Работа в команде, тестирование проекта и экспорт

Урок #7 – Работа в команде, тестирование проекта и экспорт

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

Видеоурок

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

Figma — базовый инструмент для работы дизайнеров

Что такое Figma и для чего она нужна?

Figma — это веб-приложение для дизайна интерфейсов, которое позволяет создавать макеты, прототипы, иконки и многое другое. Это один из самых популярных инструментов в индустрии дизайна и разработки интерфейсов. Figma позволяет дизайнерам работать в реальном времени, обмениваться макетами и комментариями, упрощает процесс совместной работы и делает его более эффективным. Одним из основных преимуществ Figma то, что она работает в браузере – нет необходимости скачивать и устанавливать программу на компьютер. Это удобно, если вам нужно работать с разных устройств или сотрудничать с дизайнерами из разных мест. Кроме того, у Figma много полезных функций, таких как возможность создавать интерактивные прототипы, редактировать векторные графики, использовать библиотеки и многое другое. Эти функции делают Figma незаменимым инструментом для дизайнеров и разработчиков интерфейсов. Figma помогает дизайнерам создавать красивые и интуитивно понятные интерфейсы, а также облегчает их совместную работу над проектами. Если вы работаете в области дизайна интерфейсов (UI/UX), то Figma – один из инструментов, которые вам точно следует изучить.

Что можно создавать на Figma

Давайте разберем с чем же можно работать и что создавать на этом, по-настоящему универсальном, инструменте для любого дизайнера. 1. Макеты веб-сайтов Вы можете создавать макеты для различных веб-сайтов с помощью инструментария Figma. 2. Макеты мобильных приложений Вы также можете создавать макеты для мобильных приложений для iOS и Android. 3. Дизайн иконок Figma позволяет создавать векторные иконки различных размеров и форм, которые можно использовать в вашем дизайне. 4. Прототипы Figma позволяет создавать интерактивные прототипы, благодаря которым можно просматривать и тестировать дизайн перед его реализацией. 5. Дизайн интерфейсов для настольных приложений Вы можете создавать дизайны для интерфейсов настольных приложений для Windows, MacOS и Linux. 6. Создание баннеров В Figma вы можете создавать баннеры для использования на веб-сайтах и в социальных сетях. 7. Дизайн логотипов Простые и эффективные логотипы для вашего бренда или компании 8. Созание презентаций Вы можете использовать Figma для создания презентаций, которые помогут продемонстрировать ваш дизайн коллегам или клиентам. 9. Редактирование фотографий Хотя Figma и не является программой для редактирования фотографий, вы можете использовать ее для быстрого изменения размеров и выравнивания элементов в ваших дизайнах. 10. Разработка UX/UI дизайна Figma предоставляет инструменты для создания красивого и удобного пользовательского интерфейса, который легко понимать и использовать. Надеемся, этот список помог вам оценить всю широту и мощь Figma, как инструмента для создания целого ряда самых различных креативов.

Как начать работать на Figma

Если вы новичок в Figma, то сперва вам может быть непросто начать работу с этой программой. Однако, не переживайте. Figma достаточно проста в освоении, а благодаря нашим советам, вы начнете работать в ней еще быстрее и легче. Вот несколько шагов, которые помогут вам освоить Figma: 1. Создайте аккаунт на Figma.com Для начала работы вам нужно создать аккаунт на официальном сайте Figma. Зайдите на сайт, нажмите на кнопку «Sign Up» и заполните форму регистрации. Вы получите доступ к бесплатной версии программы, которая содержит все необходимые функции. 2. Изучите интерфейс Как только вы войдете в Figma, вам стоит изучить интерфейс. Он может показаться сложным на первый взгляд, но не беспокойтесь, вы быстро освоите его. На главной странице вы увидите свои проекты, которые вы можете открыть и начать редактировать. 3. Создайте свой первый проект Создать новый проект в Figma очень просто. Нажмите на кнопку «Create new» в левом верхнем углу экрана. Выберите тип проекта, который вы хотите создать, например, мобильное приложение, веб-страницу или логотип. Затем задайте размеры экрана и другие параметры, которые соответствуют вашему проекту и начинайте творить! 4. Используйте инструменты Figma У Figma есть множество инструментов, которые помогут вам создавать визуальные элементы. Это могут быть инструменты для создания форм, линий, текста, фигур и многое другое. Все они находятся в левой панели на экране. Изучите их по одному, опробуйте в действии на каком-то черновом проекте, а когда разберетесь что к чему, можете приступать к следующему этапу. 5. Добавьте изображения и элементы Чтобы сделать ваш проект визуально более привлекательным, добавьте в него изображения и элементы. В Figma есть множество бесплатных ресурсов, которые вы можете использовать, такие как иконки, шрифты и фотографии. Вы можете также импортировать свои собственные изображения и элементы. 6. Сохраните свои работы Завершив работу в Figma не забудьте сохранить ваш проект, чтоб иметь возможность потом вернуться к нему и внести новые правки и дополнения. Это делается нажатием кнопки «Save» в левом верхнем углу экрана. Вы также можете создать копию вашего проекта или экспортировать его в другой формат. Общий интерфейс Figma

Дополнительные советы по тому как начать работать в Figma

Когда вы создали свой первый файл, начните добавлять в него элементы дизайна, используя инструменты, которые доступны в Figma. 1. Добавление фигур и форм Самый простой способ начать работу в Figma — это добавление простых фигур и форм. На панели слева вы найдете инструменты, которые позволяют создавать фигуры, линии, стрелки и многое другое. 2. Использование текста Если вам нужно добавить текст в свой дизайн, нажмите на инструмент «Текст» на панели слева. Вы можете выбрать любой шрифт, который установлен на вашем компьютере, а также изменять размер, цвет и выравнивание текста. В случае необходимости можно скачать нужный вам шрифт из интернета. 3. Импорт графических элементов Figma позволяет импортировать изображения, векторные файлы и другие графические элементы из сторонних приложений. Чтобы импортировать элемент, просто перетащите его из другого приложения или выберите в меню «Файл» команду «Импортировать». 4. Использование компонентов Компоненты — это элементы дизайна, которые можно повторно использовать в разных частях дизайна. Они могут содержать как фигуры и текст, так и более сложные элементы дизайна, такие как навигационные панели и меню. Используйте инструмент «Компонент» на панели слева, чтобы создать новый компонент. 5. Работа с слоями и группами Figma позволяет работать с элементами дизайна на разных слоях и группах, что помогает упорядочить и упростить ваш дизайн. Чтобы создать новый слой или группу, выберите соответствующий инструмент на панели сверху. 6. Использование эффектов Figma также предлагает множество эффектов для элементов дизайна, таких как тени, градиенты и наложение цвета. Используйте панель свойств справа, чтобы добавлять и настраивать эффекты для выбранных элементов. Теперь, когда вы поняли суть, начать работу в Figma вам будет довольно просто. Не потребуется много времени, чтобы освоить основы. Это мощный инструмент для создания дизайна, который используется как начинающими, так и профессиональными дизайнерами.

Введение в интерфейс Figma

Когда вы первый раз запускаете Figma, интерфейс может показаться вам немного запутанным. Особенно если вы новичок в дизайне и ранее не использовали подобные программы. Однако, на самом деле, интерфейс Figma довольно интуитивно-понятный и легкий в освоении. Вот некоторые основные элементы интерфейса, которые вам понадобятся для начала работы с Figma: 1. Средства рисования и элементы управления Все основные инструменты находятся в левой панели, включая кисти, прямоугольники, круги, линии, текстовые поля и т.д. Правее находятся инструменты для изменения свойств объектов, таких как цвет, размер, прозрачность, заливка и границы.
2. Рабочее пространство После создания нового проекта вы увидите рабочее пространство Figma. Здесь вы можете рисовать, создавать формы, добавлять изображения и многое другое. 3. Панель слоев Слева от рабочей области находится панель слоев. Она позволяет вам управлять каждым элементом вашего дизайна, а также упорядочить их, создавать группы и т.д.
4. Панель свойств По умолчанию, панель свойств находится справа от рабочей области. Она содержит дополнительные параметры и свойства для выбранных элементов на холсте, таких как размер, цвет, шрифт и так далее. 5. Верхняя панель инструментов В верхней части интерфейса находится панель инструментов, где вы можете изменять настройки холста, открывать настройки проекта, сохранять проект и т.д. Начните с простых элементов и функций, и постепенно переходите к более сложным задачам. Не стесняйтесь использовать ресурсы и учебные материалы, которые могут помочь вам освоить Figma быстрее.

Как новичкам изучать Figma. Чеклист

  1. Начните с основ. Ознакомьтесь с интерфейсом программы, настройте себе удобное расположение всех панелей и инструментов.
  2. Пользуйтесь шаблонами. Начните с создания дизайна на основе шаблонов, которые могут быть как найдены в самой программе, так и загружены извне.
  3. Создавайте макеты. Используйте инструменты для создания макетов страниц и экранов, чтобы определить расположение элементов на странице.
  4. Используйте компоненты. Создайте компоненты для элементов, которые повторяются на разных страницах. Например кнопки, навигационные меню, формы и т.д. Это поможет сохранять единообразный дизайн и упростит вам процесс внесения изменений в будущем.
  5. Настройте сетку. Используйте сетку для выравнивания элементов на странице и установки отступов.
  6. Используйте библиотеки. Создайте свою библиотеку компонентов и стилей, чтобы упростить работу и сохранять единый стиль и дизайн.
  7. Работайте с текстом. Используйте инструменты для работы с текстом, чтобы создавать читабельные и понятные надписи.
  8. Экспортируйте графику. Используйте функцию экспорта, чтоб сохранить свои работы в нужных форматах для дальнейшего использования в других программах.
  9. Изучайте ресурсы. Найдите руководства по работе с Figma, видеоуроки и обучающие материалы, чтобы быстрее освоить программу.
  10. Практикуйтесь. Применяйте полученные знания на практике, создавая реальные дизайны и получая обратную связь от других пользователей или специалистов в области дизайна.

Ну а если у вас есть желание стать по настоящему профессиональным дизайнером и изучить все нюансы и тонкости работы в Figma, а главное – научиться в ней делать замечательные шаблоны – приглашаем вас на наши дизайнерские курсы. В первую очередь на комплексный курс по графическому и веб-дизайну, а также на курс UI/UX дизайна. На них вы станете профессиональным дизайнером в нише и научитесь работать с множеством других инструментов, кроме Figma.

Как создать Starter Kit в Figma

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

Так что же такое Design Starter Kit, спросите вы? Это одна из тех «дизайн-систем», о которых все говорят в #DesignTwitter?

Не совсем. Является ли это ценной и неотъемлемой частью дизайн-системы? Несомненно.

Это один из тех «наборов интерфейса», которые вы все время встречаете на дизайнерских площадках?

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

Тогда что же это?

Мне нравится думать о нем скорее, как о части библиотеки компонентов и руководства по стилю, объединенных в одно целое. Что-то, что позволяет вам предварительно подготовить основные элементы интерфейса, разгружает ваше творческое пространство и позволяет быстрее сосредоточиться на нюансах проекта. Все просто. Знаете, мне нравится рисовать прямоугольники, но я не хочу испытывать трудности, связанные с созданием общих элементов интерфейса, таких как кнопки, формы ввода, модальные окна, карточки и т.д., всякий раз, когда начинаю новый проект. Неа! Итак, учитывая вышесказанное, позвольте мне показать вам, как я собрал Cabana – свой собственный стартовый набор для Figma. Это поможет вам лучше понять процесс создания универсального и мощного набора и позволит успешно начать свой следующий проект. Вы избавитесь от синдрома пустого холста! P.S. Из-за того, что сначала я создал набор в Sketch, я буду время от времени ссылаться на этот инструмент, просто чтобы вы увидели, как различные инструменты справляются с созданием подобного набора.

Почему прежде всего вы должны создать сильную палитру цветов

  • Primary / Base
  • Secondary / Base

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

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

Черный цвет и различные оттенки серого также важны. Вы не должны переусердствовать с вариантами серого цвета. 4 или 5 вариантов будет достаточно для разнообразия ваших будущих проектов.

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

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

И наконец, всегда пригодится большой выбор градиентов. Кто не любит хороший градиент?

Разве градиенты абсолютно необходимы для базового набора? Возможно, нет, но, как я уже упоминал ранее, их создание в самом начале может спасти вас от возможных проблем в будущем.

Если вы решите добавить градиенты в свой набор, убедитесь, что соблюдаете определенную универсальность, например, добавив варианты градиента «слева направо» и «сверху вниз».

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

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

К счастью, в Figma все гораздо проще.

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

Тем не менее, я рекомендую по возможности стараться придерживаться правила 2-х семейств шрифтов, в противном случае ваша панель Text Style может стать очень раздутой.

Для собственного набора в качестве базовых семейств шрифтов я выбрал Inter и Oxygen, потому что они не слишком декоративны и хорошо дополняют друг друга.

Помимо создания Display Styles большого размера (в моем случае – Uber и Hero), я также создал обычные стили заголовков от H1 до H5 с использованием модульного масштабирования, с размером основного текста 18pt, и коэффициентом 1,2.

Я выбрал 18pt для основного текста, чтобы улучшить разборчивость и уменьшить усталость глаз, особенно при создании длинных форм.

Помимо заголовков и стилей основного текста, я создал стили Lead, Small, Caption и XSmall, причем последний идеально подходит для дизайнов мобильных устройств, а первый – для работы с десктопными проектами.

Соглашение об именах полностью зависит от вас, и от того, что вам удобнее. Я знаю, что некоторые люди предпочитают выбирать структуру именования от Heading 1 до Heading 6, и Body, Body L, Body S и т. д.

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

С этими двумя семействами шрифтов и их различными стилями (например, Hero, H1, Body и т. д.) я предлагаю, как минимум, создать вариант с обычным и жирным весом. Разумеется, вы в любой момент можете добавить нужные вам варианты (например, легкий, полужирный и т. д.)

Чтобы обеспечить согласованность ваших дизайнов, я предлагаю убедиться, что все текстовые стили соответствуют Базовой сетке (Baseline Grid), которая в моем случае была базовой сеткой 4pt. Изменяйте высоту строки в зависимости от семейства шрифтов, которое решите использовать.

Я также предлагаю создать стили (например, Hero, H1, Body и т. д.) для обоих семейств шрифтов. Это немного добавит работы, но даст вам возможность легко переключаться между двумя шрифтами. Например, вы захотите поменять местами семейство шрифтов X для заголовков и семейство шрифтов Y для текста или наоборот. С самого начала обеспечьте гибкость и избавьте себя от любых проблем в будущем.

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

В Sketch вы просто выбираете в Инспекторе другое семейство шрифтов (т. е. заменяете Inter на Proxima Nova), и все стили мгновенно обновляются. На данный момент в Figma вы должны делать это вручную, стиль за стилем. Полный отстой!

Но не отчаивайтесь, есть потрясающий плагин, который я настоятельно рекомендую. Он называется Batch Styler. Его сделал талантливый дизайнер Jan Six. С его помощью вы можете изменить несколько стилей одновременно. Ура!

И, наконец, не забудьте о возвышениях и тенях!

Последнее дополнение к основным стилям любого хорошего набора, наряду с цветовой палитрой и стилями типографики – это возвышения (elevations) и тени (shadows).

Я предлагаю создать тени, подходящие для светлых и темных дизайнов, (и сопутствующих им возвышений, т. е. 20%, 40%, 60% и т. д.), как для основного, так и для вторичного базовых цветов. Это добавит вам универсальности.

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

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

Марк – дизайнер, автор, отец и создатель mrcndrw.com

Добавить комментарий

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