Figma pilot
What
Based on our recent (and relatively short) team trial of Figma, there is an opportunity to determine what effort a longer pilot would take in order to answer some critical questions. Participation during the trial was low, however, many designers and other team members have expressed interest in moving from Sketch to Figma because of its focus on teams, and benefits for async, remote work.
We’ve captured questions, workflow observations, and other comments in a Google Doc, this issue makes them actionable, and considers potential solutions and effort before moving forward with a pilot.
What we hope to solve for:
Issue description will be updated to reflect answers.
What support would be provided to answer team member questions, and who would provide it?
Answer
- Open office hours
- Dedicated Slack help channel, eventually migrating help to the main #design-system channel
- Live design/help sessions
- Links to existing Figma tutorials and documentation
What do we estimate the timeline would be for migrating all of our Sketch UI Kit to Figma?
Answer
This would likely take 2–3 releases to be where we are today in Sketch. If time were allotted for multiple designers to contribute to a pilot, the velocity could increase significantly.
Coming out of a pilot, we would for sure have the base styles and components available. In fact, they’re being worked on now as part of setting up an effective pilot.
What do we estimate our timeline would be for updating all of our documentation?
Answer
We wouldn’t update docs in tandem with the pilot, since a migration wouldn’t be official, or even decided on. We could be creating workflow docs on the side in a separate WIP MR.
For individual components, it’d take minimal time in Pajamas to update spec links to point to new Figma frames.
Workflow:
How will specs be updated/added to Pajamas?
Answer
- Today we require the Sketch Measure plugin to output an HTML file. This file is uploaded to the repo and then referenced, via a link, in the related component page in Pajamas. Updating specs requires outputting the file again with Sketch Measure and adding to the repo again.
- With Figma the workflow would be to copy the share link for a frame (artboard) and use that as the link destination in Pajamas. Because the link references the actual file, any updates are seen realtime. Figma would require a user to create a free account to authenticate to view the link, but this is a one-time event. Learn more about Figma permissions.
What would be the [new] process for reviewing changes/updates to our UI kit?
Answer
The process would be similar to today, with the exception of steps involving a repository.
For GitLabbers
- Create an issue in the GitLab Design project
- Copy component to a personal draft file (not necessary if this is a new component/design)
- When ready for review, link to the draft file in the issue (learn about sharing files from Figma), and ask for a designer to review
- Capture comments in Figma, and update issue description/discussion with decisions
- When comments are resolved, and design approved, it can be added into the Globals file
- If necessary, add a link to the corresponding frame of the Globals file to the issue, and close the issue
For community contributors
- Create an issue in the GitLab Design project
- Make a copy of the Globals file to your own drafts (not necessary if this is a new component/design)
- Copy component to a personal draft file (not necessary if this is a new component/design)
- When ready for review, link to the draft file in the issue (learn about sharing files from Figma), and ask for a GitLab designer to review
- Capture comments in Figma, and update issue description/discussion with decisions
- When comments are resolved, and design approved, a GitLab designer can be added into the Globals file
- If necessary, add a link to the corresponding frame of the Globals file to the issue, and close the issue
Evaluate Sketch/Figma plugin libraries:
Plugin comparison
The following compares what we’ve outlined as recommended Sketch plugins, and options in Figma. Plugins are not, and should never be a requirement, but they can help certain workflows.
Sketch | Figma |
---|---|
Runner | Figma Walker |
AlignTo | AlignTo |
Anima | Native capability |
Batch Create Symbols | Native capability |
Disconnect | Can either detach styles individually, or bulk remove styles and set to a common attribute |
Distributor | Native capability |
Export More | icns/ico Generator (nothing for gifs) |
Find and Replace | Find and Replace |
Group It | – |
Sketch Measure | Native functionality with Viewer permissions on a shared file |
Override It | Figma has a different approach to overrides, that does’t rely on an overrides panel |
Rename It | Rename It |
Relabel Button | Native capability with Auto Layout |
Stark | Stark, or Color Contrast Checker |
SVGO Compressor | Exports compressed SVGs by default |
Shared Style Finder | Native capability |
Symbol Instance Locator | Native capability |
Symbol Swapper | Component Replacer |
Unused Style Remover | – |
Here are some other plugins that are are pretty useful in Figma:
- Roller Design Linter
- Sorter - Rearrange and sort items in a variety of ways
- Charts - Easily add a variety of chart types, with lots of customization
- Isometric - Change the dimensional orientation of items
- Content Reel - From Microsoft - similar to the Craft plugin for Sketch, to add a variety of pre-populated, random content
- Spellchecker - Layer by layer checker, also great for getting character counts within a UI element
- Autoflow - Create flows between objects
- VisualEyes - Heatmap testing within Figma frames
What is the +/- impact to non-design team members?
Answer
@gtsiolis to help weigh-in… but initial take is that this would be easier for community contributors because:
- Figma is free to use, and available on nearly any platform (Sketch is macOS, desktop only at the moment, and requires a paid license beyond the trial)
- No need to sync with a repository
Are there any know trade-offs for designers?
Answer
- Friction of learning a new tool
- Different plugin ecosystem
- Not 100% feature-parity with Sketch
Would Figma replace only Sketch, or are there other apps too? (This could be a workflow and budgetary benefit.)
Answer
- For designers, Figma could replace Mural for presentations
- Figma has excellent prototyping capabilities, including hiding hint hotspots (
😉 @esybrant)
Is Figma more or less aligned with “everyone can contribute” than Sketch?
Answer
Jeremy: It’s my take that Figma makes it significantly easier for contributors. Figma’s free version is full-featured (outside of what you may get from Team or Organization accounts), you can use it on nearly any platform/device. You could even enable a plugin from your phone, and then have it ready the next time you open the desktop version—making it a very seamless workflow. File management is a breeze without the need for a repo. Commenting and sharing is seamless too.
Considerations
#658 (closed))?
Are there projects we could be using Figma on now to put it through its paces in a controlled way (e.g.,Answer
…
How can we test current/new workflows for community contributions?
Answer
Would like to get @gtsiolis involved here if possible. Have we had other community contributors to the design?
Team members who expressed interest in helping with a pilot: @pedroms, @dimitrieh, @mvanremmerden, @awhite-gl, @timnoah, @andyvolpe, @tauriedavis, @dmoraBerlin
Resources
- https://www.intercom.com/blog/design-team-switching-to-figma
- https://www.figma.com/blog/github-case-study/
- https://www.figma.com/blog/how-microsoft-built-plugins-to-improve-their-workflow/
/cc @clenneville