Figma Resources / Build it in Figma - Create a Design System / Tutorials x 5

 Build it in Figma - Create a Design System

Build it in Figma / tutorial / part II 

Big thanks to Rogie 

Build it in Figma link to Figma file with great resource links! 

Links are also pasted below

For reference - know it doesn't look cool - but quick access to resources is my aim!

Type Scale

https://type-scale.com/

https://spencermortensen.com/articles/typographic-scale/

https://alistapart.com/article/more-meaningful-typography/

https://practicaltypography.com/

https://practicaltypography.com/typography-in-ten-minutes.html

https://betterwebtype.com/articles/2018/10/15/rhythm-in-web-typography/

Color Palette Plugins

https://www.figma.com/community/plugin/740832935938649295/Color-Palettes

https://www.figma.com/community/plugin/797696673804519719/Color-Kit

https://www.figma.com/community/plugin/739475857305927370/Color-Designer

https://www.figma.com/community/plugin/742549221432366731/Palette

Accessibility Plugins

https://www.figma.com/community/plugin/734693888346260052/Able-%E2%80%93-Friction-free-accessibility

https://www.figma.com/community/plugin/732603254453395948/Stark

https://www.figma.com/community/plugin/748533339900865323/Contrast

https://www.figma.com/community/plugin/733343906244951586/Color-Blind

https://www.figma.com/community/plugin/733159460536249875/A11y---Color-Contrast-Checker

Grids & Spacers

https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins

https://material.io/design/layout/responsive-layout-grid.html#breakpoints

Shared Styles

https://betterwebtype.com/articles/2018/10/15/rhythm-in-web-typography/

———————————

EPISODE 2: COMPONENTS

Material Design Responsive Layout Grids:

https://material.io/design/layout/responsive-layout-grid.html#grid-customization

Icon Grids:

https://www.youtube.com/watch?v=S9P7ob7Nx5I

https://www.figma.com/community/file/868494350497530898

———————————

EPISODE 3: COMPONENTS CONTINUED

Created:

Tooltip component

Media component

Card component

Textfield component

Toggle component

Checkbox component

———————————

EPISODE 4: TESTING YOUR COMPONENTS

Created:

Dialog

Image sizes

Popover component

Menu items

Links:

Material Theming Design System: https://www.figma.com/community/file/809865700885504168

Primer Web Design System: https://www.figma.com/community/file/854767373644076713

iOS 14/iPadOS 14 UI Kit: https://www.figma.com/community/file/858143367356468985

Contrast Plugin: https://www.figma.com/community/plugin/748533339900865323/Contrast

Change Text Plugin: https://www.figma.com/community/plugin/735148445325474400/Change-Text

Content Reel Plugin: https://www.figma.com/community/plugin/731627216655469013/Content-Reel

Data Populator Plugin: https://www.figma.com/community/plugin/787488293482536319/Data-Populator

Faker Plugin: https://www.figma.com/community/plugin/833836762121994814/Faker

Similayer Plugin (for selecting multiple similar layers): https://www.figma.com/community/plugin/735733267883397781/Similayer

———————————

Notes:

Maintaining aspect ratio in fluid width components: https://medium.com/@vitalii.solokub/figma-components-with-a-fixed-aspect-ratio-elements-c7272e2ada9

Userflow / onboarding / Figma

Mood board

Mood board

Initial mock up of what app may look like

Initial Taskflow / one persona

Userflow / two personas / Figma

Design library / working / Figma

 

User flow sans states / stack

 

Caters to two kinds of User personas

Rewarded myself with two kinds of Easter Eggs

and a song by Ryan Downey

Nutting out Userflows - two personas

 

 

(quick) Userflow in Miro

Listening to...

Reiterating

 I think for this project I'm at a point where I need to jump back into some User Flow work and Competitor analysis. 

Expand on the breadth of each user trail then do a stack pass.

I'll be doing about 5 more of these this afternoon

I hope this pic isn't covered by IP. It's the sort of pic we all need. 

I chose the Tanami Highway (2010) as my BG on LinkedIn

Basic wireflow

Current project: The basic wireflow - when I started.

Tuesday music

Adobe XD | Spotify feature presentation

This is my first presentation for Academy Xi - amid Melbourne Long Lockdown 2020

lo-fi prototype preso

That's a still silly. The link to the mov is currently unavailable.

However, you may link to the mid-fidelity prototype here

I'm building my design portfolio. Until I have a url I am

dropping pieces here.

I'll be reiterating this Spotify App to a nice Hi Fi version.

Watch this space.

*also, go away and live your life for a bit, then ...

watch this space.

Kirrily?

Yes. It's me. 

Enthusiastic tooth brusher

and advocate for a ban on indoor mirror selfies in sunnies

This space is my UI UX LD portfolio progress blog - I collect information pertaining to my UI UX and LD research process 

• User Interface design
• User Experience design
• Learning Design

Speaking of colour - David Bowie

Image by Olga Semklo

I'm seeking inspiration from Semklo's colour scheme here.

... also Bowie's shoes.

 

Playing with vector creator

 

icons8 Vector Creator

This will come in handy.

A library of editable svgs - good fun to play with and quick and handy.

I had a go; threw together three images here and just popped in the text to connect it to my working dog app.

*Yes I know the composition isn't 'happening' here.

Just flinging a few ideas around for said dog app.

I need to do another Moodboard and get my colours working - maybe triad...

Human Interface guidelines

Interface guidelines

"You're only as good as your resources." - Kirrily 

Did I just make that up? Sounds pretty on the money though...

 

Initial Mood Board

These are my initial ideas, however I've refined it to be brighter and friendlier - less colour variation.

I'll leave these thinking moodboards here though. Update you with more soon.

 

Well... I spent a lot of time exploring colour on Saturday, and thinking about textures, lines, gestures...

I think I just need to step away and come back in with some contrast (happy bright colours) for my app design, but it was a nice activity to create this. Generated ideas and inspiration. 

Hello After Effects my old friend

Just a quick throw of an old animation of mine into After effects as I have a look around.

*yes aspect ratio... maybe I'll do a different one tomorrow. Was using a very small mp4 file.