×
Figma
I was introduced to Figma about 8 weeks into my coding journey. I don't know if you know anything about Silhouette Studio, but I'm sure if there are any crafters out there, you know what I'm talking about. It's a design software to send images to a machine that cuts design on all kinds of paper--I don't just love computer graphics, I also love handmande crafting. Silhoutte Studio is great, but Figma can really take your design to the next level.
I'm going to share with you why I think Figma is so cool and how it can help enhance your design and web building skills.
What is Figma?
Figma started their journey in 2011 and had the vision to "make design accessible to everyone." In 2015, Figma opened their web platform and introduced real-time collaboration to designers.
Figma's big thing is to presents user-friendly design features and prototyping.
Why is Figma so cool?
Export
My aboslute favorite thing about Figma right now is that you can save grouped images into one file. I find this very helpful when I need the option to save different layers.
Although most of my web portfolio is built in CSS, I wanted show some images that were made using Figma. This export feature came in handy!
Selection Colors
Before I actually started coding my web portfolio, I created a model in Figma to formulate my design. One of the cool things I've made is a bookshelf that you see on my "Find Me" page. It was later translated into CSS, but this feature allowed me to easily grab the colors I wanted for the look I was going for.
Colors are availabe in Hex, RGB, CSS, HSL, and HSB. Depending how you want to code your colors, you have options.
Share
Figma advertises collaboration and they make it so easy to share designs and protoypes with others.
There's a button at the top right hand corner that you can click and the steps to share is so simple. It reminds me of sharing items in Google Drive. Although I haven't shared my projects with anyone yet, I feel that this is an awesome addition.
Shape Manipulation
Design! Now this is what I'm talking about! I had so much fun with this. It did not take me long to figure out the design features and how to use them because Figma keeps things very simple.
Shapes that are included are rectangles, lines, arrows, ellipses, polygons and stars. Each shape can be manipulated into whatever you can think of using the bend tool and effects. You can see in my example that I only used nine ellipses, one rectangle, and a drop shadow effect. Add your colors and you've got a potted plant!
Prototype
Another huge thing with Figma is the ability to see your prototypes in action. You can add clickable buttons, hovering actions, and linkable frames. This is a big deal when sharing web designs. Others are able to see your work in action and calls for less explanation. You also have the option to switch out devices for responsiveness.
Is Figma Right For Me?
Figma is free to start. It is great for individuals who just need a user-friendly design application. You can send your designs and prototypes to as many people as you want and have 3 projects going with 2 people working on them. If you're a student or educator, you may want to bump up to the Professional tier for unlimited possibilities.
It never hurts to learn new things (especially since it's free to try). Figma is really easy to use and the concept of web collaboration is really great. Honestly, I think that design can be built anywhere on any platform--it's the user interface that makes one better than another. If you're looking for simplicty, collaboration, and a program completely online, then Figma is a good way to go.
Starting Small
Okay, you're stuck and still don't know if you want to use Figma. Here's a basic tutorial on the potted plant mentioned earlier to help you decide.
Step 1: Planter
Use your rectangle tool in the top ribbon to make a box (I used 150px by 200px). Color your box. This will be our planter.
Step 2: Planter Shape
Double click on your planter and use manipulate the two bottom corners by bringing them in 20px.
Step 3: 3D Planter
Pull down the top and bottom middle edges to activate the bend tool. The top should be concave and the bottom convex to create the illusion of the planter being 3D.
Step 4: Inside Planter
Create an ellipse matching the width of the planter and set the inside planter color. Position your rectangle layer on top of your ellipse layer.
Step 5: Plant
Create a vertical ellipse and select desired color
Step 6: Plant Point
Double click your plant and use the bend tool on the top to create a point.
Step 7: Adding More
Copy and place your plant points and recolor each one to different shades. Rotate each slightly to illustrate the plant coming out of the planter in a "V" manner.
Step 8: Fanning Out the Plant
Pull the points down to fan out the plant for a more natural look.
Step 9: Effects
Now that the plant is fanned out, move your planter (rectangle) to the top layer so your plant sits inside. Select your plants (ellipses) and add an drop shadow effect.
Step 10: Potted Plant
Your plant looks good! Now you can share you work or export for future use!
Conclusion
Even though I haven't been using Figma for a long time, I feel that I've learned so much about the design aspect of it. I really enjoyed the simplicity and responsiveness. The fact that Figma is completely online allows me to jump from computer to computer without having to download a software or save my files to an external drive to share with others. I think that Figma is worth learning and trying out. I'm glad that I was able to use Figma for my web portfolio.
