Choosing Design Tools
A look at the tools used to design Circle
Today marked my last day at Circle with Disney. Next week my family and I are going to start something new. I wanted to shed some light on how design played an integral role in shaping the product and process at Circle. Design set the product apart from competitors and was valued highly as a core part of the company culture. As Senior Product Designer I played a significant role in the execution of design across the Circle products and brand. I wanted to take some time talk about the tools our team used to stay lean, nimble, scrappy and producing our best work, day in and day out.
I have broken the tools into categories below so they are easier to find.
Visual Design
There are a myriad of visual design tools available today. In some ways product designers are witnessing a renaissance of new tools (it seems like almost every week!) to help make designing for screens and producing layouts much, much easier. Gone are the days of using Photoshop and Illustrator to do UI and website mocks. Here are the two primary visual tools we use:
Sketch
Sketch came on the scene a few years ago. It has been gaining popularity and adoption among designers for how easy it use to create re-usable components (with symbols) and design with systems in mind (via styles).
Figma
Figma is a newcomer on the scene and boasts collaborative designing in the browser. In practice, it has gain rapid adoption on the team. In many respects, Figma is a worthy replacement for Sketch allowing quick screen, UI, or really any time of digital design in the browser. Our marketing team was able to ramp up and create production assets for social and campaigns using the quick, browser-based workflow that Figma offers.
Prototyping
At the center of the design tool “renaissance” is a focus on prototyping ideas. The day of a design ideas shipping solely as a static screen or presentation are over. Prototypes showcase an interaction and add much-needed depth to designs. Like screen design, there are numerous tools available for prototyping. There are two primary tools we use:
Framer
Framer is somewhat unique among the myriad of prototyping tools in that it leans heavily on code (in the form of CoffeeScript). Framer can import designs easily from Sketch, Photoshop, or drag and drop but its beauty lies in being able to easily and powerfully dream up anything you can imagine in code. Framer really excels at complex same-screen interactions.
A recent update to Framer added the ability to draw shapes visually but have designs tightly synced with code. These guys from Amsterdam sure are whipping up some awesome hotness! 💪 Thanks, Koen Bok and Co! 🤖
Atomic
Atomic is great because it has some easy and simple design tools but allows you to quickly mock multiple screens and get very granular with keyframe animation and timing.
Collaboration
Any good team needs ways to collaborate and stay synced when working on creative together. It is essential when in the fray to have feedback loops and software that helps us keep deliverables and dates on target.
Slack
Slack is how we stay fresh in real-time. If we are jamming on a project or working together our communication stays all synced in Slack. We love Slack, love their ethos, and love the brand they are building. They are smart people making smart software that is integral to our day-to-day operations.
Wake
Our friends at Wake built a pretty special piece of software to keep design assets shared with the team. We use Wake as a way to track the progress and evolution of our brand design language.
Basecamp
Basecamp helped our marketing and design team stayed synced and on track as we shipped deliverables and new products. The human approach to projects and tasks helped us to work collaboratively and drop assets and conversations anywhere and everywhere. Thank you, Jason Fried and Co! 🎉
In closing I will say one pivotal thing about tools. It isn’t really about what tools you use to get the job done. Different tools have their advantages and constraints. What is pivotal is to establish healthy work patterns and communication. If you nail those, the individual tools don’t really matter.
Stay fresh, stay healthy and keep shipping! 🚢
