Figma is your best friend

picture of my outdated, dumb looking portfolio. It is dumb because I squished too many cool CSS elements into this website without thinking about how I could deliver a crazy cool experience WHILE implementing CSS.
  • The top navbar is for cursor events (orange). If you want to create a new desktop sized board/create a frame, a new shape, drop an image, create a text or make a comment, always report to the navbar!
  • The column on the left (blue) keeps track of all your shapes, layers and groupings. Each item that is on a frame it keeps track of!
  • The column on the right (yellow) allows for element manipulation. First you go to the navbar and create a square, the square item is logged in the column on the left and the column on the right lets you create rounded edges, a layered blur effect, change the color, etc.

Mood Board

I created this mood board and found pictures that matched my colors!
all the photos I’ve come to love on Unsplash!




Flatiron student, word nerd and otter enthusiast

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Design Thinking, Its Process, and User Empathy.

Technologies Come and Go but Experiences Last a Lifetime

How design saved my life

Things I discovered within my 2 years in a Product design career.

Making Design Less Subjective

Why I coded my own portfolio website as a designer (and why I would do it again)

An illustration of a woman writing code on a monitor

What is Content Design?

CDM: Master of Digital Media — Term One Review

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Crystal Villanueva

Crystal Villanueva

Flatiron student, word nerd and otter enthusiast

More from Medium

How to publish your designs inside Figma

Moneybox Design: Transitioning to Figma

Use this Figma Plugin to 10x your design productivity