Create and collaborate with Figma By Chad Bergman It’s time to build your design system! We’ll walk you through the basics of creating a system tailored to your unique goals and challenges, whether building from scratch or starting with existing pieces....
Figma is unlike Sketch, free to use for personal projects. Visit their website to test it out for yourself! It is a fantastic software program that allows you to create your own icons and logos. What are some tips and tricks you can use to make the program more user-friendly? This wil...
We then set them all as color styles in our Figma document, naming them by Color Name/Intensity. For the intensity, we created a scale from 900 to 50, from darkest to lightest. Read more about naming in our article aboutFigma Tips and Tricks. 2. Typography The second most imp...
With Sketch, you can use tools like Smart Layout to assign an internal logic to components. Setting up spacing rules is important to help you keep a defined grid that will make your designs look cohesive and balanced. Smart Layout allows your layers to expand or shrink automatically in proport...
The anime streaming service supports 15 platforms and is available in 12 languages. Here’s how they deliver a consistent experience across touchpoints.
When I open the file for this circle in acode editor, this XML code appears: As you can see, we only need one line of code to draw a circle. That’s because, instead of setting the color of each square in a grid, the XML only has to provide a color (where it saysfill:#f4795...
like how to best communicate with our audience, rather than deciding on headline sizes and grid styles. Additionally, when we want to make a universal change to an atom or molecule, we can do it once in Contentful, rather than getting a developer to hunt through every page to make dozens...
Low fidelity is the most basic type of wireframing. It’s so simplistic, that paper and pen will still suffice as a way to represent your ideas, however, creating your wireframes in Figma will allow you to easily share them and make sure your team has access to your latest thinking as ...
Using a website mockup can help you get a feel for your website’s look and layout before doing the heavy lifting to make it functional and interactive.
Figma continues to add new features to make animations and micro-interactions easier to design. Last month they added a ton of new updates including some slickspring animations. There are still many limitations. One missing feature I hope to see added soon is the ability to animate on scroll....